Draft: test(front): add tests in the front server

.github/workflows/ci.yml

@@ -14,6 +14,7 @@ jobs:
     defaults:
       run:
         working-directory: server
+    container: cypress/browsers:node-16.18.1-chrome-110.0.5481.96-1-ff-109.0-edge-110.0.1587.41-1
 
     steps:
       - name: Checkout
@@ -26,3 +27,25 @@ jobs:
         run: npm ci
       - name: Build
         run: npx turbo format:check lint:check test build
+      - name: Cypress.io
+         # uses: cypress-io/github-action@ca3f666049f4ac2267a75de769535a7cbdc7bfd7
+        uses: cypress-io/github-action@v5.0.8
+        with:
+          install: false
+          working-directory: ./server/apps/frontend
+          wait-on: 'http://localhost:3000'
+          start: npm run start:server:local
+          record: false
+          browser: chrome
+      - uses: actions/upload-artifact@v3
+        if: failure()
+        with:
+          name: cypress-screenshots
+          path: ./server/apps/frontend/cypress/screenshots
+      - uses: actions/upload-artifact@v3
+        if: failure()
+        with:
+          name: cypress-snapshots
+          path: ./server/apps/frontend/cypress/snapshots     
+
+

README.md

@@ -21,4 +21,15 @@ If you are a **facilitator**, go to [server/](./server/README.md) and find out h
 Have fun :D
 
 ## People running Extreme Carpaccio
+
 - Find out what people are saying about Extreme Carpaccio on [Twitter](https://twitter.com/search?vertical=default&q=%22extreme%20carpaccio%22%20OR%20%22Xtreme%20carpaccio%22%20OR%20%23ExtremeCarpaccio&src=typd)
+
+  cypress11:
+    image: cypress/included:cypress-12.5.1-node-16.18.1-chrome-110.0.5481.96-1-ff-109.0-edge-110.0.1587.41-1
+    entrypoint: /bin/sh -c "cd ./apps/frontend && npm install esbuild-wasm && CYPRESS_BASE_URL=<http://127.0.0.1> cypress run --headless --browser chrome"
+    depends_on:
+      - front
+    working_dir: /test
+    volumes:
+      - ./:/test
+      - /tmp/.X11-unix:/tmp/.X11-unix

server/.docker/nginx.conf

@@ -0,0 +1,48 @@
+server {
+    listen       80;
+    server_name  localhost;
+
+    gzip on;
+    gzip_disable "msie6";
+
+    gzip_vary on;
+    gzip_proxied any;
+    gzip_comp_level 6;
+    gzip_buffers 16 8k;
+    gzip_http_version 1.1;
+    gzip_min_length 256;
+    gzip_types text/plain text/css application/json application/javascript application/x-javascript text/xml application/xml application/xml+rss text/javascript application/vnd.ms-fontobject application/x-font-ttf font/opentype image/svg+xml image/x-icon;
+
+    root   /usr/share/nginx/html;
+
+    location / {
+        try_files $uri /index.html;
+        add_header Cache-Control "no-store, no-cache, must-revalidate";
+        add_header Pragma "no-cache";
+        add_header Referrer-Policy origin-when-cross-origin;
+        add_header X-Frame-Options "SAMEORIGIN";
+        add_header X-Content-Type-Options "nosniff";
+        add_header X-XSS-Protection "1; mode=block";
+        expires -1;
+    }
+
+    # Media: images, icons, video, audio, HTC
+    location ~* \.(?:jpg|jpeg|gif|png|ico|cur|gz|svg|svgz|mp4|ogg|ogv|webm|htc)$ {
+        expires 1y;
+        access_log off;
+        add_header Cache-Control "public";
+    }
+
+    # CSS and Javascript
+    location ~* \.(?:css|js)$ {
+        expires 1y;
+        access_log off;
+        add_header Cache-Control "public";
+    }
+
+    # redirect server error pages to the static page /50x.html
+    error_page   500 502 503 504  /50x.html;
+    location = /50x.html {
+        root   /usr/share/nginx/html;
+    }
+}

server/.dockerignore

@@ -0,0 +1,2 @@
+node_modules
+.turbo

server/Dockerfile

@@ -0,0 +1,17 @@
+FROM node:18.15.0-alpine3.17 AS builder
+
+RUN apk add --no-cache libc6-compat
+
+WORKDIR /app
+
+# First install the dependencies (as they change less often)
+COPY . .
+RUN npm ci
+RUN npx turbo prune --scope=frontend --docker
+
+# Build the project
+RUN npx turbo build --filter=frontend
+
+FROM nginx:latest
+COPY .docker/nginx.conf /etc/nginx/conf.d/default.conf
+COPY --from=builder /app/apps/frontend/dist/ /usr/share/nginx/html/

server/Dockerfile-cypress

@@ -0,0 +1,5 @@
+FROM cypress/browsers:node-16.18.1-chrome-110.0.5481.96-1-ff-109.0-edge-110.0.1587.41-1
+COPY /apps/frontend /front/
+WORKDIR /front
+RUN npm install esbuild-wasm
+ENTRYPOINT npm run test:e2e:docker

server/apps/frontend/Readme.txt

@@ -0,0 +1,10 @@
+
+    entrypoint: /bin/sh -c " CYPRESS_BASE_URL=http://front:3000 cypress run --headless  --browser chrome"
+
+
+Faire un npm install avant,
+docker build -f Dockerfile -t front .
+docker run -it -p 4001:3000 front 
+docker-compose up --abort-on-container-exit --exit-code-from cypress
+
+Il faut modifier l'adresse environnement ? 

server/apps/frontend/cypress.config.ts

@@ -0,0 +1,73 @@
+import { defineConfig } from 'cypress';
+
+module.exports = defineConfig({
+  viewportHeight: 800,
+  viewportWidth: 1000,
+
+  env: {
+    screenshotsFolder: './cypress/snapshots/actual',
+    trashAssetsBeforeRuns: true,
+    type: 'actual',
+  },
+  e2e: {
+    video: false,
+    specPattern: '**/*.feature',
+
+    baseUrl: 'http://localhost:3000',
+    //https://docs.cypress.io/api/plugins/browser-launch-api#Set-screen-size-when-running-headless
+    // prefix async
+    async setupNodeEvents(on, config) {
+      const createEsbuildPlugin =
+        require('@badeball/cypress-cucumber-preprocessor/esbuild').createEsbuildPlugin;
+      const createBundler = require('@bahmutov/cypress-esbuild-preprocessor');
+      const getCompareSnapshotsPlugin = require('cypress-visual-regression/dist/plugin');
+      getCompareSnapshotsPlugin(on, config);
+
+      // await here
+      await require('@badeball/cypress-cucumber-preprocessor').addCucumberPreprocessorPlugin(
+        on,
+        config,
+        {
+          omitAfterScreenshotHandler: true,
+        }
+      );
+
+      on(
+        'file:preprocessor',
+        createBundler({
+          plugins: [createEsbuildPlugin(config)],
+        })
+      );
+      on('before:browser:launch', (browser, launchOptions) => {
+        if (browser.name === 'chrome' && browser.isHeadless) {
+          // fullPage screenshot size is 1400x1200 on non-retina screens
+          // and 2800x2400 on retina screens
+          launchOptions.args.push('--window-size=1400,1200');
+
+          // force screen to be non-retina (1400x1200 size)
+          launchOptions.args.push('--force-device-scale-factor=1');
+
+          // force screen to be retina (2800x2400 size)
+          // launchOptions.args.push('--force-device-scale-factor=2')
+        }
+
+        if (browser.name === 'electron' && browser.isHeadless) {
+          // fullPage screenshot size is 1400x1200
+          launchOptions.preferences.width = 1400;
+          launchOptions.preferences.height = 1200;
+        }
+
+        if (browser.name === 'firefox' && browser.isHeadless) {
+          // menubars take up height on the screen
+          // so fullPage screenshot size is 1400x1126
+          launchOptions.args.push('--width=1400');
+          launchOptions.args.push('--height=1200');
+        }
+
+        return launchOptions;
+      });
+      // return any mods to Cypress
+      return config;
+    },
+  },
+});

server/apps/frontend/cypress/e2e/create-a-seller/create-a-seller.ts

@@ -0,0 +1,67 @@
+import { baseUrl } from './../share-util';
+/// <reference types="cypress" />
+import { Given, When, Then } from '@badeball/cypress-cucumber-preprocessor';
+import '@testing-library/cypress/add-commands';
+
+Given(/^I'm a Seller$/, () => {
+  cy.intercept(
+    'POST',
+    `${baseUrl}/seller`,
+
+    (req) => {
+      if (req.body.includes('Xavier') || req.body.includes('newPassword')) {
+        req.reply({ statusCode: 201, body: {} });
+      } else if (req.body.includes('Sandrine')) {
+        req.reply({ statusCode: 500 });
+      } else {
+        req.reply({ statusCode: 404, body: {} });
+      }
+    }
+  );
+  cy.visit(baseUrl);
+});
+When('I write the field {string} {string} with {string}', (_, label, value) => {
+  cy.get(`[aria-label="your ${label}"]`).type(value);
+});
+
+Then('I click on the button {string}', (label) => {
+  cy.contains(label).click();
+});
+
+Then('I see on the tab {string} with {string}', (name, cash) => {
+  cy.get('.table-responsive').contains(name);
+  cy.get('.table-responsive').contains(cash);
+});
+
+Then('I see an error message: {string}', (message) => {
+  cy.get('.alert').contains(message);
+});
+
+Then('I see an error message for the input: {string}', (label) => {
+  cy.get('input:invalid').should('have.length', 1);
+  cy.get(`#${label}`).then((input) => {
+    expect(input[0].validationMessage).to.eq('Please fill out this field.');
+  });
+});
+
+Then("I don't see on the tab {string} with {string}", (name, cash) => {
+  cy.get('.table-responsive').contains(name).should('not.exist');
+  cy.get('.table-responsive').contains(cash).should('not.exist');
+});
+
+Then('I observe the reset of input', () => {
+  cy.get(`[aria-label="your username"]`).should('have.value', '');
+  cy.get(`[aria-label="your password"]`).should('have.value', '');
+  cy.get(`[aria-label="your url"]`).should('have.value', '');
+});
+
+Then("I don't see an error message: {string}", (message) => {
+  cy.get('.alert').should('not.exist');
+});
+
+Then(
+  'I observe the field {string} {string} with {string}',
+  (_, label, value) => {
+    cy.get(`[aria-label="your ${label}"]`).should('have.value', value);
+  }
+);

server/apps/frontend/cypress/e2e/display-sellers/display-sellers.ts

@@ -0,0 +1,51 @@
+import { baseUrl } from './../share-util';
+/// <reference types="cypress" />
+import { When, Then } from '@badeball/cypress-cucumber-preprocessor';
+import '@testing-library/cypress/add-commands';
+
+const checkTableSellers = (table) => {
+  cy.get('.sellers tbody tr').each(($el, index) => {
+    cy.get('[aria-label="the name of seller"]')
+      .eq(index)
+      .should('have.text', table.rawTable[index + 1][0]);
+    cy.get('[aria-label="the cash of seller"]')
+      .eq(index)
+      .contains(table.rawTable[index + 1][1]);
+    if (table.rawTable[index + 1][2] == 'false') {
+      cy.get('[aria-label="the statut of seller"]').eq(index).find('svg');
+    } else {
+      cy.get('[aria-label="the statut of seller"]')
+        .eq(index)
+        .find('svg')
+        .should('not.exist');
+    }
+  });
+  cy.get('.sellers tr').should('have.length', table.rawTable.length);
+};
+
+When('There are 3 sellers', () => {
+  cy.intercept('GET', `${baseUrl}/sellers`, {
+    statusCode: 200,
+    body: [
+      { cash: 60, name: 'Lukasz', online: true },
+      { cash: 12000.21, name: 'Santane', online: false },
+      { cash: 0.3, name: 'Faustine', online: true },
+    ],
+  });
+});
+
+Then('I see sellers:', (table) => {
+  checkTableSellers(table);
+});
+
+Then('there is a updating of sellers', () => {
+  cy.intercept('GET', `${baseUrl}/sellers`, {
+    statusCode: 200,
+    body: [
+      { cash: 10000023210, name: 'Lukasz', online: true },
+      { cash: 12000.21, name: 'Santane', online: true },
+      { cash: 0.4, name: 'Faustine', online: false },
+    ],
+  });
+  cy.wait(1000);
+});