Draft implementation of cypress tests with mocks-server

.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,63 @@
+describe('EngageSphere - Mocks Server', () => {
+  beforeEach(() => {
+    cy.mocksRestoreRouteVariants()
+    cy.mocksSetDelay(0)
+  })
+
+  context('DB with customers', () => {
+    beforeEach(() => {
+      cy.visit('/')
+    })
+
+    it('displays the first five customers', () => {
+      cy.get('table tbody tr')
+        .should('have.length', 5)
+        .and('be.visible')
+    })
+
+    it('displays the next five customers', () => {
+      cy.intercept({
+        pathname: '/customers',
+        query: {
+          page: '2',
+        },
+      }).as('getPageTwoCustomers')
+
+      cy.contains('button', 'Next').click()
+      cy.wait('@getPageTwoCustomers')
+
+      cy.get('table tbody tr')
+        .should('have.length', 5)
+        .and('be.visible')
+        .first()
+        .should('contain', 'Rudolf, Stainfield')
+    })
+  })
+
+  context('DB with no customers', () => {
+    beforeEach(() => {
+      cy.mocksUseRouteVariant('get-customers:no-customers')
+      cy.visit('/')
+    })
+
+    it('displays the image of an empty box and an informative text', () => {
+      cy.get('[alt="image of an empty box"]').should('be.visible')
+      cy.contains('span', 'No customers available.').should('be.visible')
+    })
+  })
+
+  context('Slow API', () => {
+    beforeEach(() => {
+      cy.mocksSetDelay(1000)
+      cy.visit('/')
+    })
+
+    it('displays a loading fallback before showing the customers table', () => {
+      cy.contains('p', 'Loading...').should('be.visible')
+
+      cy.get('table tbody tr')
+        .should('have.length', 5)
+        .and('be.visible')
+    })
+  })
+})

cypress/support/e2e.js

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

docs/TestCases.md

@@ -29,6 +29,10 @@ Below are the three kinds of GUI tests:
 
 ### Frontend integrated tests
 
+Below are the three kinds of GUI tests:
+
+### Frontend integrated tests
+
 - It filters by All sizes
 - It filters by Small size
 - It filters by Medium size

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: 'default',
+    },
+  },
+  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/collections.js

@@ -0,0 +1,6 @@
+module.exports = [
+  {
+    'id': 'default', // collection id
+    'routes': ['get-customers:with-customers'] // collection routes
+  },
+]

mocks/routes/customers.js

@@ -0,0 +1,34 @@
+const pageOneResponse = require('../../cypress/fixtures/customers.json')
+const pageTwoResponse = require('../../cypress/fixtures/pageTwoCustomers.json')
+
+module.exports = [
+  {
+    id: 'get-customers', // id of the route
+    url: '*/customers*', // url in path-to-regexp format
+    method: 'GET', // HTTP method
+    variants: [
+      {
+        id: 'with-customers', // id of the variant
+        type: 'middleware', // variant type
+        options: {
+          middleware: (req, res) => {
+            res.status(200)
+            if (req.query.page === '1') {
+              res.send(pageOneResponse)
+            } else {
+              res.send(pageTwoResponse)
+            }
+          }
+        }
+      },
+      {
+        id: 'no-customers',
+        type: 'text',
+        options: {
+          status: 200,
+          body: ''
+        }
+      },
+    ]
+  }
+]