Feature/e2e tests

.eslintignore

@@ -1,6 +1,7 @@
 **/node_modules
 **/public
 **/build
+**/dist
 **/config
 **/scripts
 **/playground

.eslintrc

@@ -25,6 +25,20 @@
   "globals": {
     "strapi": true
   },
+  "overrides": [
+    {
+      "files": [
+        "**/*.cy.*",
+        "./cypress/**/*.*"
+      ],
+      "extends": [
+        "plugin:cypress/recommended"
+      ],
+      "parserOptions": {
+        "project": "./tsconfig.cypress.json"
+      }
+    }
+  ],
   "rules": {
     "import/no-unresolved": [2, {
       "ignore": [

.github/workflows/tests.yml

@@ -27,8 +27,8 @@ jobs:
         run: yarn --frozen-lockfile
       - name: Run eslint
         run: yarn run eslint
-  integration:
-    name: 'integration'
+  test:
+    name: 'test'
     needs: [lint]
     runs-on: ubuntu-latest
     strategy:
@@ -50,29 +50,30 @@ jobs:
         run: cd playground && yarn install --unsafe-perm
       - name: Build playground
         run: yarn playground:build
-      - name: Run test
+      # - name: Run unit tests
+      #   run: yarn test:unit
+      - name: Run integration tests
         run: yarn run -s test:integration
+      - name: Run end-to-end tests
+        uses: cypress-io/github-action@v6
+        with:
+          start: yarn playground:start
+      - uses: actions/upload-artifact@v4
+        if: failure()
+        with:
+          name: cypress-screenshots
+          path: cypress/screenshots
+          if-no-files-found: ignore # 'warn' or 'error' are also available, defaults to `warn`
+      - uses: actions/upload-artifact@v4
+        if: failure()
+        with:
+          name: cypress-videos
+          path: cypress/videos
+          if-no-files-found: ignore # 'warn' or 'error' are also available, defaults to `warn`
       - name: Upload coverage to Codecov
         uses: codecov/codecov-action@v2
         with:
           token: ${{ secrets.CODECOV }}
           flags: unit
           verbose: true
           fail_ci_if_error: true
-  # unit:
-  #   name: 'unit'
-  #   needs: [lint]
-  #   runs-on: ubuntu-latest
-  #   strategy:
-  #     matrix:
-  #       node: [16, 18, 20]
-  #   steps:
-  #     - uses: actions/checkout@v2
-  #     - uses: actions/setup-node@v2
-  #       with:
-  #         node-version: ${{ matrix.node }}
-  #         cache: 'yarn'
-  #     - name: Install dependencies
-  #       run: yarn --ignore-scripts --frozen-lockfile
-  #     - name: Run test
-  #       run: yarn run -s test:unit

.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,74 @@
+// <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,33 @@
+const { defineConfig } = require('cypress');
+const fs = require('fs-extra');
+
+module.exports = defineConfig({
+  e2e: {
+    baseUrl: 'http://localhost:1337',
+    specPattern: '**/*.cy.{js,ts,jsx,tsx}',
+    video: true,
+    defaultCommandTimeout: 30000,
+    requestTimeout: 30000,
+    setupNodeEvents(on, config) {
+      // implement node event listeners here.
+      // eslint-disable-next-line global-require
+      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,137 @@
+// <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.
+  // eslint-disable-next-line cypress/no-unnecessary-waiting
+  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('[email protected]');
+      cy.get('input[name="password"]').type('Abc12345678');
+      cy.get('button[type="submit"]').click();
+      cy.wait('@sessionCheck').its('response.statusCode').should('equal', 200);
+
+      // Sometimes the page hangs after logging in.
+      // If this happens we reload the page and log in again.
+      cy.reload();
+      cy.get('body').then(($b) => {
+        if ($b.text().includes('Log in to your Strapi account')) {
+          cy.login();
+        }
+      });
+    }
+    // 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('[email protected]');
+      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();
+  cy.get('input[name="options.response_email"]').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,11 +36,13 @@
     "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",
     "playground:build": "cd playground && yarn build",
-    "playground:develop": "cd playground && yarn develop"
+    "playground:develop": "cd playground && yarn develop",
+    "playground:start": "cd playground && yarn start"
   },
   "dependencies": {
     "adm-zip": "^0.5.16",
@@ -95,12 +97,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",