feat: add cypress and e2e tests

.gitignore

@@ -14,3 +14,8 @@ npm-debug.log
 build
 dist
 bundle
+
+# Cypress
+cypress/screenshots/
+cypress/videos/
+cypress/downloads/

admin/src/index.cy.jsx

@@ -0,0 +1,75 @@
+/// <reference types="cypress" />
+//
+
+describe('Config Sync', () => {
+  beforeEach(() => {
+    cy.task('deleteFolder', 'playground/config/sync');
+  });
+
+  it('Check the config diff', () => {
+    cy.login();
+    cy.navigateToInterface();
+    cy.initialExport();
+
+    cy.makeConfigChanges();
+
+    cy.navigateToInterface();
+
+    cy.get('tbody tr').contains('plugin_users-permissions_advanced').click();
+
+    cy.contains('"unique_email": true,');
+    cy.contains('"unique_email": false,');
+  });
+
+  it('Download the config as zip', () => {
+    cy.login();
+    cy.navigateToInterface();
+    cy.initialExport();
+
+    cy.intercept({
+      method: 'GET',
+      url: '/config-sync/zip',
+    }).as('getConfigZip');
+
+    cy.get('button').contains('Download Config').click();
+
+    cy.wait('@getConfigZip').then((interception) => {
+      const configZipResponse = interception.response.body;
+      const downloadsFolder = Cypress.config('downloadsFolder');
+      cy.readFile(`${downloadsFolder}/${configZipResponse.name.replaceAll(':', '_')}`).should('exist');
+    });
+  });
+
+  it('Partial import & export', () => {
+    cy.login();
+    cy.navigateToInterface();
+    cy.initialExport();
+
+    cy.makeConfigChanges();
+
+    cy.navigateToInterface();
+
+    cy.get('button[aria-label="Select all entries"]').click();
+
+    cy.intercept({
+      method: 'POST',
+      url: '/config-sync/import',
+    }).as('importConfig');
+    cy.get('button[aria-label="Select plugin_upload_settings"]').click();
+    cy.get('button').contains('Import').click();
+    cy.get('button').contains('Yes, import').click();
+    cy.wait('@importConfig').its('response.statusCode').should('equal', 200);
+    cy.contains('plugin_users-permissions_advanced');
+    cy.contains('plugin_users-permissions_email');
+
+    cy.intercept({
+      method: 'POST',
+      url: '/config-sync/export',
+    }).as('exportConfig');
+    cy.get('button[aria-label="Select plugin_users-permissions_advanced"]').click();
+    cy.get('button').contains('Export').click();
+    cy.get('button').contains('Yes, export').click();
+    cy.wait('@exportConfig').its('response.statusCode').should('equal', 200);
+    cy.contains('plugin_users-permissions_email');
+  });
+});

cypress.config.js

@@ -0,0 +1,32 @@
+const { defineConfig } = require('cypress');
+const fs = require('fs-extra');
+
+module.exports = defineConfig({
+  e2e: {
+    baseUrl: 'http://localhost:1337',
+    specPattern: '**/*.cy.{js,ts,jsx,tsx}',
+    video: false,
+    defaultCommandTimeout: 10000,
+    requestTimeout: 10000,
+    setupNodeEvents(on, config) {
+      // implement node event listeners here.
+      require('cypress-terminal-report/src/installLogsPrinter')(on);
+
+      on('task', {
+        deleteFolder(folderName) {
+          console.log(`deleting folder ${folderName}`);
+
+          return fs.remove(folderName)
+          .then(() => {
+            console.log(`folder ${folderName} deleted`);
+            return null;
+          })
+          .catch(err => {
+            console.error(`error deleting folder ${folderName}`, err);
+            throw err;
+          });
+        },
+      });
+    },
+  },
+});

cypress/support/commands.js

@@ -0,0 +1,126 @@
+/// <reference types="cypress" />
+// ***********************************************
+// This example commands.ts shows you how to
+// create various custom commands and overwrite
+// existing commands.
+//
+// For more comprehensive examples of custom
+// commands please read more here:
+// https://on.cypress.io/custom-commands
+// ***********************************************
+//
+//
+// -- This is a parent command --
+// Cypress.Commands.add('login', (email, password) => { ... })
+//
+//
+// -- This is a child command --
+// Cypress.Commands.add('drag', { prevSubject: 'element'}, (subject, options) => { ... })
+//
+//
+// -- This is a dual command --
+// Cypress.Commands.add('dismiss', { prevSubject: 'optional'}, (subject, options) => { ... })
+//
+//
+// -- This will overwrite an existing command --
+// Cypress.Commands.overwrite('visit', (originalFn, url, options) => { ... })
+//
+
+Cypress.Commands.add('login', (path) => {
+  cy.visit('/');
+
+  cy.intercept({
+    method: 'GET',
+    url: '/admin/users/me',
+  }).as('sessionCheck');
+
+  cy.intercept({
+    method: 'GET',
+    url: '/admin/init',
+  }).as('adminInit');
+
+  // Wait for the initial request to complete.
+  cy.wait('@adminInit').its('response.statusCode').should('equal', 200);
+
+  // Wait for the form to render.
+  cy.wait(1000);
+
+  cy.get('body').then(($body) => {
+    // Login
+    if ($body.text().includes('Log in to your Strapi account')) {
+      cy.get('input[name="email"]').type('johndoe@example.com');
+      cy.get('input[name="password"]').type('Abc12345678');
+      cy.get('button[type="submit"]').click();
+      cy.wait('@sessionCheck').its('response.statusCode').should('equal', 200);
+    }
+    // Register
+    if ($body.text().includes('Credentials are only used to authenticate in Strapi')) {
+      cy.get('input[name="firstname"]').type('John');
+      cy.get('input[name="email"]').type('johndoe@example.com');
+      cy.get('input[name="password"]').type('Abc12345678');
+      cy.get('input[name="confirmPassword"]').type('Abc12345678');
+      cy.get('button[type="submit"]').click();
+      cy.wait('@sessionCheck').its('response.statusCode').should('equal', 200);
+    }
+  });
+});
+
+Cypress.Commands.add('navigateToInterface', (path) => {
+  cy.intercept({
+    method: 'GET',
+    url: '/config-sync/diff',
+  }).as('getConfigDiff');
+
+  cy.get('a[href="/admin/settings"]').click();
+  cy.get('a[href="/admin/settings/config-sync"]').click();
+
+  cy.wait('@getConfigDiff').its('response.statusCode').should('equal', 200);
+});
+
+
+Cypress.Commands.add('initialExport', (path) => {
+  cy.intercept({
+    method: 'POST',
+    url: '/config-sync/export',
+  }).as('exportConfig');
+
+  cy.get('button').contains('Make the initial export').click();
+  cy.get('button').contains('Yes, export').click();
+
+  cy.wait('@exportConfig').its('response.statusCode').should('equal', 200);
+
+  cy.contains('Config was successfully exported to config/sync/.');
+});
+
+Cypress.Commands.add('makeConfigChanges', (path) => {
+  // Change a setting in the UP advanced settings
+  cy.intercept({
+    method: 'PUT',
+    url: '/users-permissions/advanced',
+  }).as('saveUpAdvanced');
+  cy.get('a[href="/admin/settings/users-permissions/advanced-settings"]').click();
+  cy.get('input[name="unique_email"').click();
+  cy.get('button[type="submit"]').click();
+  cy.wait('@saveUpAdvanced').its('response.statusCode').should('equal', 200);
+
+  // Change a setting in the media library settings
+  cy.intercept({
+    method: 'PUT',
+    url: '/upload/settings',
+  }).as('saveMediaLibrarySettings');
+  cy.get('a[href="/admin/settings/media-library"]').click();
+  cy.get('input[name="responsiveDimensions"').click();
+  cy.get('button[type="submit"]').click();
+  cy.wait('@saveMediaLibrarySettings').its('response.statusCode').should('equal', 200);
+
+  // Change a setting in the email templates
+  cy.intercept({
+    method: 'PUT',
+    url: '/users-permissions/email-templates',
+  }).as('saveUpEmailTemplates');
+  cy.get('a[href="/admin/settings/users-permissions/email-templates"]').click();
+  cy.get('tbody tr').contains('Reset password').click();
+  cy.get('input[name="options.response_email"]').clear().type(`${Math.random().toString(36).substring(2, 15)}@example.com`);
+  cy.get('button[type="submit"]').click();
+  cy.wait('@saveUpEmailTemplates').its('response.statusCode').should('equal', 200);
+});

cypress/support/e2e.js

@@ -0,0 +1,22 @@
+// ***********************************************************
+// This example support/e2e.ts is processed and
+// loaded automatically before your test files.
+//
+// This is a great place to put global configuration and
+// behavior that modifies Cypress.
+//
+// You can change the location of this file or turn off
+// automatically serving support files with the
+// 'supportFile' configuration option.
+//
+// You can read more here:
+// https://on.cypress.io/configuration
+// ***********************************************************
+
+// Import commands.js using ES2015 syntax:
+import './commands';
+
+require('cypress-terminal-report/src/installLogsCollector')();
+
+// Alternatively you can use CommonJS syntax:
+// require('./commands')

package.json

@@ -36,6 +36,7 @@
     "eslint:fix": "eslint --fix './**/*.{js,jsx}'",
     "test:unit": "jest --verbose",
     "test:integration": "cd playground && node_modules/.bin/jest --verbose  --forceExit --detectOpenHandles",
+    "test:e2e": "cypress open",
     "playground:install": "yarn playground:yalc-add-link && cd playground && yarn install",
     "playground:yalc-add": "cd playground && yalc add strapi-plugin-config-sync",
     "playground:yalc-add-link": "cd playground && yalc add --link strapi-plugin-config-sync",
@@ -95,12 +96,15 @@
     "@strapi/strapi": "^5.0.0",
     "@strapi/utils": "^5.0.0",
     "babel-eslint": "9.0.0",
+    "cypress": "^13.9.0",
+    "cypress-terminal-report": "^6.0.2",
     "eslint": "^7.32.0",
     "eslint-config-airbnb": "^18.2.1",
     "eslint-config-react-app": "^3.0.7",
     "eslint-import-resolver-webpack": "^0.11.0",
     "eslint-loader": "^4.0.2",
     "eslint-plugin-babel": "^5.3.0",
+    "eslint-plugin-cypress": "^3.2.0",
     "eslint-plugin-flowtype": "2.50.1",
     "eslint-plugin-import": "^2.22.1",
     "eslint-plugin-jsx-a11y": "^6.4.1",