docker -suite

.github/workflows/ci.yml

@@ -14,7 +14,8 @@ jobs:
     defaults:
       run:
         working-directory: server
-    container: cypress/included:12.5.1
+    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
         uses: actions/checkout@v3

server/apps/frontend/Dockerfile

@@ -1,7 +1,7 @@
-FROM cypress/included:cypress-12.6.0-node-16.18.1-chrome-110.0.5481.96-1-ff-109.0-edge-110.0.1587.41-1 as base 
+FROM cypress/browsers:node-16.18.1-chrome-110.0.5481.96-1-ff-109.0-edge-110.0.1587.41-1
 WORKDIR /app
 COPY package.json ./
 COPY ./ ./
 RUN npm install -g [email protected]
-RUN npm install 
-CMD ["npm", "run", "test:e2e"]
+RUN npm ci 
+CMD ["npm", "run", "start:server:local"]

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/e2e/create-a-seller/create-a-seller.ts

@@ -1,66 +1,66 @@
 /// <reference types="cypress" />
-import { Given, When, Then } from "@badeball/cypress-cucumber-preprocessor";
-import "@testing-library/cypress/add-commands";
+import { Given, When, Then } from '@badeball/cypress-cucumber-preprocessor';
+import '@testing-library/cypress/add-commands';
 
 Given(/^I'm a Seller$/, () => {
   cy.intercept(
-    "POST",
-    "http://localhost:3000/seller",
+    'POST',
+    'baseUrlseller',
 
     (req) => {
-      if (req.body.includes("Xavier") || req.body.includes("newPassword")) {
+      if (req.body.includes('Xavier') || req.body.includes('newPassword')) {
         req.reply({ statusCode: 201, body: {} });
-      } else if (req.body.includes("Sandrine")) {
+      } else if (req.body.includes('Sandrine')) {
         req.reply({ statusCode: 500 });
       } else {
         req.reply({ statusCode: 404, body: {} });
       }
     }
   );
-  cy.visit("http://localhost:3000/");
+  cy.visit('http://localhost:3000/');
 });
-When("I write the field {string} {string} with {string}", (_, label, value) => {
+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) => {
+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 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: {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);
+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.");
+    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");
+  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 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");
+  cy.get('.alert').should('not.exist');
 });
 
 Then(
-  "I observe the field {string} {string} with {string}",
+  'I observe the field {string} {string} with {string}',
   (_, label, value) => {
-    cy.get(`[aria-label="your ${label}"]`).should("have.value", value);
+    cy.get(`[aria-label="your ${label}"]`).should('have.value', value);
   }
 );

server/apps/frontend/cypress/e2e/share-util.ts

@@ -1,7 +1,9 @@
 import { Given } from '@badeball/cypress-cucumber-preprocessor';
 
+export const baseUrl = 'http://localhost:3000/';
+
 Given(/^I'm on the website$/, () => {
   cy.get('html').invoke('css', 'height', 'initial');
   cy.get('body').invoke('css', 'height', 'initial');
-  cy.visit('http://localhost:3000/');
+  cy.visit(baseUrl);
 });

server/apps/frontend/docker-compose.yml

@@ -5,13 +5,11 @@ services:
     environment:
       - PORT=3000
   cypress:
-
-    image: cypress/included:cypress-12.6.0-node-16.18.1-chrome-110.0.5481.96-1-ff-109.0-edge-110.0.1587.41-1
-    environment:
-      - CYPRESS_BASE_URL=http://front:3000
+    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 "npm install @esbuild/linux-x64 && CYPRESS_BASE_URL=http://front:3000 cypress run --headless --browser chrome"
     depends_on:
       - front
-    command: "--browser chrome"
     working_dir: /test
     volumes:
-      - ./:/test
+      - ./:/test
+      - /tmp/.X11-unix:/tmp/.X11-unix

server/apps/frontend/package.json

@@ -3,8 +3,8 @@
   "version": "0.1.0",
   "private": true,
   "dependencies": {
-    "@badeball/cypress-cucumber-preprocessor": "^15.1.3",
-    "@cucumber/cucumber": "^8.11.1",
+    "@badeball/cypress-cucumber-preprocessor": "15.1.3",
+    "@cucumber/cucumber": "8.11.1",
     "@formatjs/intl-numberformat": "8.3.3",
     "@types/node": "18.13.0",
     "@types/react": "18.0.28",