Draft implementation of cypress with mocks server

Author: wlsf82

.github/workflows/ci.yml

@@ -52,6 +52,24 @@ jobs:
           command: npm run test:frontend:gui:cloud
         env:
           CYPRESS_RECORD_KEY: ${{ secrets.CYPRESS_RECORD_KEY }}
+  gui-tests-mocks-server:
+    needs: eslint
+    runs-on: ubuntu-latest
+    steps:
+      - name: Checkout
+        uses: actions/checkout@v4
+      - name: Install frontend modules
+        uses: cypress-io/github-action@v6
+        with:
+          install-command: npm run install:frontend
+          runTests: false
+      - name: Run frontend GUI tests with mocks server 🧪
+        uses: cypress-io/github-action@v6
+        with:
+          start: npm run mocks:ci, npm run start:frontend
+          command: npm run test:frontend:gui:mocksserver:cloud
+        env:
+          CYPRESS_RECORD_KEY: ${{ secrets.CYPRESS_RECORD_KEY }}
   api-tests:
     needs: eslint
     runs-on: ubuntu-latest

cypress/e2e/gui/mocksServer.cy.js

@@ -0,0 +1,24 @@
+describe('EngageSphere - Mocks Server', () => {
+  describe('when there are five customers', () => {
+    before(() => {
+      cy.mocksUseRouteVariant('get-customers:five-customers')
+      cy.visit('/')
+    })
+
+    it('displays five customers', () => {
+      cy.get('table tbody tr').should('have.length', 5)
+    })
+  })
+
+  describe('when there are no customers', () => {
+    before(() => {
+      cy.mocksUseRouteVariant('get-customers:no-customers')
+      cy.visit('/')
+    })
+
+    it('displays five customers', () => {
+      cy.get('[alt="image of an empty box"]').should('be.visible')
+      cy.contains('span', 'No customers available.').should('be.visible')
+    })
+  })
+})

cypress/support/e2e.js

@@ -1 +1,5 @@
 import 'cypress-axe'
+
+import { register } from '@mocks-server/cypress-commands'
+
+register()

mocks.config.js

@@ -0,0 +1,106 @@
+// For a detailed explanation regarding each configuration property, visit:
+// https://www.mocks-server.org/docs/configuration/how-to-change-settings
+// https://www.mocks-server.org/docs/configuration/options
+
+module.exports = {
+  // Log level. Can be one of silly, debug, verbose, info, warn or error
+  //log: "info",
+  config: {
+    // Allow unknown arguments
+    //allowUnknownArguments: false,
+  },
+  plugins: {
+    // Plugins to be registered
+    //register: [],
+    proxyRoutesHandler: {
+    },
+    adminApi: {
+      // Port number for the admin API server to be listening at
+      //port: 3110,
+      // Host for the admin API server
+      //host: "0.0.0.0",
+      https: {
+        // Use https protocol or not
+        //enabled: false,
+        // Path to a TLS/SSL certificate
+        //cert: undefined,
+        // Path to the certificate private key
+        //key: undefined,
+      },
+    },
+    inquirerCli: {
+      // Start interactive CLI or not
+      //enabled: true,
+      // Render emojis or not
+      //emojis: true,
+    },
+    openapi: {
+      collection: {
+        // Name for the collection created from OpenAPI definitions
+        //id: "openapi",
+        // Name of the collection to extend from
+        //from: undefined,
+      },
+    },
+  },
+  mock: {
+    routes: {
+      // Global delay to apply to routes
+      //delay: 0,
+    },
+    collections: {
+      // Selected collection
+      //selected: "base",
+    },
+  },
+  server: {
+    // Port number for the server to be listening at
+    // port: 3001,
+    // Host for the server
+    //host: "0.0.0.0",
+    cors: {
+      // Use CORS middleware or not
+      //enabled: true,
+      // Options for the CORS middleware. Further information at https://github.com/expressjs/cors#configuration-options
+      //options: {"preflightContinue":false},
+    },
+    jsonBodyParser: {
+      // Use json body-parser middleware or not
+      //enabled: true,
+      // Options for the json body-parser middleware. Further information at https://github.com/expressjs/body-parser
+      //options: {},
+    },
+    urlEncodedBodyParser: {
+      // Use urlencoded body-parser middleware or not
+      //enabled: true,
+      // Options for the urlencoded body-parser middleware. Further information at https://github.com/expressjs/body-parser
+      //options: {"extended":true},
+    },
+    https: {
+      // Use https protocol or not
+      //enabled: false,
+      // Path to a TLS/SSL certificate
+      //cert: undefined,
+      // Path to the certificate private key
+      //key: undefined,
+    },
+  },
+  files: {
+    // Allows to disable files load
+    //enabled: true,
+    // Define folder from where to load collections and routes
+    //path: "mocks",
+    // Enable/disable files watcher
+    //watch: true,
+    babelRegister: {
+      // Load @babel/register
+      //enabled: false,
+      // Options for @babel/register
+      //options: {},
+    },
+  },
+  variantHandlers: {
+    // Variant Handlers to be registered
+    //register: [],
+  },
+}

mocks/routes/customers.js

@@ -0,0 +1,27 @@
+const response = require('../../cypress/fixtures/customers.json')
+
+module.exports = [
+  {
+    id: 'get-customers', // id of the route
+    url: '*/customers*', // url in path-to-regexp format
+    method: 'GET', // HTTP method
+    variants: [
+      {
+        id: 'five-customers', // id of the variant
+        type: 'json', // variant type
+        options: {
+          status: 200,
+          body: response
+        }
+      },
+      {
+        id: 'no-customers',
+        type: 'text',
+        options: {
+          status: 200,
+          body: ''
+        }
+      },
+    ]
+  }
+]