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/[email protected]
+ 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/.eslintrc.json

@@ -61,7 +61,7 @@
  "import/no-extraneous-dependencies": [
  "error",
  {
- "devDependencies": ["src/**/*.spec.ts", "src/mocks/**/*.ts", "*.config.ts"]
+ "devDependencies": ["src/**/*.spec.ts?(x)", "src/mocks/**/*.ts", "*.config.ts"]
  }
  ],
  "react/function-component-definition": [

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);
+});