docker

.github/workflows/ci.yml

@@ -14,7 +14,7 @@ jobs:
  defaults:
  run:
  working-directory: server
- container: cypress/browsers:node12.18.3-chrome87-ff82
+ container: cypress/included:12.5.1
  steps:
  - name: Checkout
  uses: actions/checkout@v3

server/apps/frontend/Dockerfile

@@ -0,0 +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 
+WORKDIR /app
+COPY package.json ./
+COPY ./ ./
+RUN npm install -g [email protected]
+RUN npm install 
+CMD ["npm", "run", "test:e2e"]

server/apps/frontend/Dockerfile.cypress

@@ -0,0 +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 
+WORKDIR /app
+COPY package.json ./
+COPY ./ ./
+RUN npm install -g [email protected]
+RUN npm install 
+CMD ["npm", "run", "start:server:local"]

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

@@ -1,54 +1,50 @@
 /// <reference types="cypress" />
-import { Given, When, Then } from "@badeball/cypress-cucumber-preprocessor";
-import "@testing-library/cypress/add-commands";
+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('.sellers tbody tr').each(($el, index) => {
  cy.get('[aria-label="the name of seller"]')
  .eq(index)
- .should("have.text", table.rawTable[index + 1][0]);
+ .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");
+ 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");
+ .find('svg')
+ .should('not.exist');
  }
  });
- cy.get(".sellers tr").should("have.length", table.rawTable.length);
+ cy.get('.sellers tr').should('have.length', table.rawTable.length);
 };
 
-Given(/^I'm on the website$/, () => {
- cy.visit("http://localhost:3000/");
-});
-
-When("There are 3 sellers", () => {
- cy.intercept("GET", "http://localhost:3000/sellers", {
+When('There are 3 sellers', () => {
+ cy.intercept('GET', 'http://localhost:3000/sellers', {
  statusCode: 200,
  body: [
- { cash: 60, name: "Lukasz", online: true },
- { cash: 12000.21, name: "Santane", online: false },
- { cash: 0.3, name: "Faustine", online: true }
- ]
+ { 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) => {
+Then('I see sellers:', (table) => {
  checkTableSellers(table);
 });
 
-Then("there is a updating of sellers", () => {
- cy.intercept("GET", "http://localhost:3000/sellers", {
+Then('there is a updating of sellers', () => {
+ cy.intercept('GET', 'http://localhost:3000/sellers', {
  statusCode: 200,
  body: [
- { cash: 10000023210, name: "Lukasz", online: true },
- { cash: 12000.21, name: "Santane", online: true },
- { cash: 0.4, name: "Faustine", online: false }
- ]
+ { cash: 10000023210, name: 'Lukasz', online: true },
+ { cash: 12000.21, name: 'Santane', online: true },
+ { cash: 0.4, name: 'Faustine', online: false },
+ ],
  });
  cy.wait(1000);
 });

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

@@ -1,13 +1,8 @@
 /// <reference types="cypress" />
-import { Given, When } from '@badeball/cypress-cucumber-preprocessor';
+import { When } from '@badeball/cypress-cucumber-preprocessor';
 import '@testing-library/cypress/add-commands';
 
 let number = 100;
-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/');
-});
 
 When('There are 100 iterations', () => {
  cy.intercept('GET', 'http://localhost:3000/sellers/history?chunk=10', {

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

@@ -0,0 +1,7 @@
+import { Given } from '@badeball/cypress-cucumber-preprocessor';
+
+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/');
+});

server/apps/frontend/docker-compose.yml

@@ -0,0 +1,17 @@
+version: '12.5.1'
+services:
+ front:
+ build: ./
+ 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
+ depends_on:
+ - front
+ command: "--browser chrome"
+ working_dir: /test
+ volumes:
+ - ./:/test

server/apps/frontend/package.json

@@ -58,7 +58,7 @@
  "cypress": "^12.5.1",
  "cypress-image-diff-js": "1.23.0",
  "dotenv": "16.0.3",
- "esbuild": "0.16.5",
+ "esbuild": "0.17.8",
  "eslint": "8.32.0",
  "eslint-config-airbnb": "19.0.4",
  "eslint-config-airbnb-typescript": "17.0.0",
@@ -76,7 +76,7 @@
  },
  "cypress-cucumber-preprocessor": {
  "stepDefinitions": [
- "cypress/e2e/[filepath]/*.{js,ts}"
+ "cypress/e2e/**/*.{js,ts}"
  ]
  }
 }