ci: take integration tests into account for front coverage

.github/workflows/build.yml

@@ -478,7 +478,7 @@ jobs:
         id: start_playwright_worker
         run: |
           set -e
-          export OSRD_FRONT_MODE=nginx
+          export OSRD_FRONT_MODE=test
           export TAG='${{ needs.build.outputs.stable_version }}'
           services='editoast core front gateway'
           docker compose pull $services
@@ -496,11 +496,22 @@ jobs:
             docker run --init --name=playwright-test --net=host \
               -e CI=true \
               -v $PWD/front/test-results:/app/test-results \
+              -v $PWD/front/coverage:/app/coverage \
               ${{ fromJSON(needs.build.outputs.stable_tags).front-build }} \
-              /bin/sh -c "npx playwright install --with-deps && yarn e2e-tests"
+              /bin/sh -c "npx playwright install --with-deps && yarn e2e-tests && npx nyc report --reporter=lcov"
 
             exit $(docker wait playwright-test)
 
+      - name: Upload coverage to Codecov
+        uses: codecov/codecov-action@v3
+        with:
+          name: codecov
+          flags: front
+          fail_ci_if_error: true
+          verbose: true
+          token: ${{ secrets.CODECOV_TOKEN }}
+          files: ./front/coverage/lcov.info
+
       - uses: actions/upload-artifact@v3
         if: always()
         with:

docker-compose.yml

@@ -55,7 +55,7 @@ services:
     container_name: osrd-front
     build:
       context: front
-      dockerfile: docker/Dockerfile.${OSRD_FRONT_MODE-devel}
+      dockerfile: docker/Dockerfile.devel
       args:
         OSRD_GIT_DESCRIBE: ${OSRD_GIT_DESCRIBE}
     environment:

docker/README.md

@@ -4,7 +4,9 @@ Images are built using docker buildx:
 
 ```sh
 # # Controls how built images are tagged. By default, tags with what docker-compose uses
-# export TAG_PATTERNS=osrd-%s:latest,osrd-%s:foobar
+# export TAG_VERSION=pr-XXXX
 export OSRD_GIT_DESCRIBE=$(git describe)
-docker buildx bake --file=docker/docker-bake.hcl --file=docker/docker-bake-simple.hcl
+docker buildx bake -f docker/docker-bake.hcl -f docker/docker-bake-simple.hcl
 ```
+
+Add `--pull` to load built images into docker (or `--push` if you really know what you're doing).

docker/docker-bake-simple.hcl

@@ -1,45 +1,54 @@
 variable "OSRD_GIT_DESCRIBE" {}
 
-variable "TAG_PATTERNS" {
+variable "TAG_VERSION" {
+  default = "dev"
+}
+
+variable "TAG_PREFIX" {
+  default = "ghcr.io/osrd-project/edge/"
 }
 
 function "tags" {
-  params = [image_name]
-  result = [for pat in split(",", TAG_PATTERNS): format(pat, image_name)]
+  params = [image_name, suffix]
+  result = [format("%sosrd-%s:%s%s", TAG_PREFIX, image_name, TAG_VERSION, suffix)]
 }
 
 target "base-core" {
-  tags = tags("core")
+  tags = tags("core", "")
 }
 
 target "base-core-build" {
-  tags = tags("core-build")
+  tags = tags("core", "-build")
 }
 
 target "base-editoast" {
-  tags = tags("editoast")
+  tags = tags("editoast", "")
+}
+
+target "base-editoast-test" {
+  tags = tags("editoast", "-test")
 }
 
-target "base-front-dev" {
-  tags = tags("front-dev")
+target "base-front-devel" {
+  tags = tags("front", "-devel")
 }
 
-target "base-front-nginx" {
-  tags = tags("front-nginx")
+target "base-front-test" {
+  tags = tags("front", "-test")
 }
 
 target "base-front-build" {
-  tags = tags("front-build")
+  tags = tags("front", "-build")
 }
 
 target "base-gateway-standalone" {
-  tags = tags("gateway-standalone")
+  tags = tags("gateway", "-standalone")
 }
 
 target "base-gateway-test" {
-  tags = tags("gateway-test")
+  tags = tags("gateway", "-test")
 }
 
 target "base-gateway-front" {
-  tags = tags("gateway-front")
+  tags = tags("gateway", "-front")
 }

docker/docker-bake.hcl

@@ -7,7 +7,7 @@ group "default" {
     "editoast",
     "editoast-test",
     "front-devel",
-    "front-nginx",
+    "front-test",
     "front-build",
     "gateway-standalone",
     "gateway-test",
@@ -34,7 +34,6 @@ target "base" {
 ########
 
 target "base-core-build" {}
-
 target "core-build" {
   inherits = ["base", "base-core-build"]
   context = "core"
@@ -43,7 +42,6 @@ target "core-build" {
 }
 
 target "base-core" {}
-
 target "core" {
   inherits = ["base", "base-core"]
   context = "core"
@@ -82,19 +80,20 @@ target "front-devel" {
   dockerfile = "docker/Dockerfile.devel"
 }
 
-target "base-front-nginx" {}
-target "front-nginx" {
-  inherits = ["base", "base-front-nginx"]
+target "base-front-test" {}
+target "front-test" {
+  inherits = ["base", "base-front-test"]
   context = "front"
-  dockerfile = "docker/Dockerfile.nginx"
+  dockerfile = "docker/Dockerfile"
+  target = "test_serve"
 }
 
 target "base-front-build" {}
 target "front-build" {
   inherits = ["base", "base-front-build"]
   context = "front"
-  dockerfile = "docker/Dockerfile.nginx"
-  target = "build"
+  dockerfile = "docker/Dockerfile"
+  target = "prod_build"
 }
 
 ###########

front/docker/Dockerfile.nginx → front/docker/Dockerfile

@@ -1,21 +1,30 @@
-### BUILD STAGE
+######################
+# Cache dependencies #
+######################
 
-FROM node:18-bookworm as build
+FROM node:18-bookworm as base_build
 
 WORKDIR /app
 
 # Build dependencies
 COPY package.json yarn.lock /app/
 RUN yarn install
 
+######################
+# Testing env: build #
+######################
+
+FROM base_build as test_build
+
 # Generate the licenses file and build
 COPY . /app
-RUN yarn generate-licenses && yarn build
+RUN yarn generate-licenses && NODE_OPTIONS=--max-old-space-size=6500 yarn coverage-build
 
+######################
+# Testing env: serve #
+######################
 
-### SERVE STAGE
-
-FROM nginx:alpine
+FROM nginx:alpine as test_serve
 
 RUN apk add npm && \
     npm install -g @import-meta-env/cli && \
@@ -24,8 +33,8 @@ RUN apk add npm && \
 COPY docker/nginx.conf /etc/nginx/conf.d
 COPY docker/nginx-entrypoint.sh /entrypoint.sh
 
-COPY --from=build /app/build /srv
-COPY --from=build /app/.env.example /
+COPY --from=test_build /app/build /srv
+COPY --from=test_build /app/.env.example /
 
 ENV OSRD_BACKEND_URL=""
 ENV OSRD_SENTRY_DSN=""
@@ -36,3 +45,13 @@ ENV OSRD_GIT_DESCRIBE=${OSRD_GIT_DESCRIBE}
 
 ENTRYPOINT ["/entrypoint.sh"]
 CMD ["sh", "-c", "npx import-meta-env -x /.env.example -p /srv/index.html && exec nginx -g 'daemon off;'"]
+
+####################
+# Production build #
+####################
+
+FROM base_build as prod_build
+
+# Generate the licenses file and build
+COPY . /app
+RUN yarn generate-licenses && yarn build

front/package.json

@@ -150,8 +150,8 @@
     "@types/uuid": "^8.3.4",
     "@typescript-eslint/eslint-plugin": "^6.5.0",
     "@typescript-eslint/parser": "^6.5.0",
-    "@vitejs/plugin-react": "^3.1.0",
-    "@vitest/coverage-c8": "^0.29.8",
+    "@vitejs/plugin-react": "^4.2.0",
+    "@vitest/coverage-v8": "^0.34.6",
     "eslint": "^8.37.0",
     "eslint-config-airbnb": "^19.0.4",
     "eslint-config-prettier": "^8.8.0",
@@ -161,15 +161,17 @@
     "eslint-plugin-prettier": "^4.2.1",
     "eslint-plugin-react": "^7.32.2",
     "eslint-plugin-react-hooks": "^4.6.0",
-    "eslint-plugin-vitest": "^0.0.46",
+    "eslint-plugin-vitest": "^0.3.10",
     "happy-dom": "^8.6.0",
     "prettier": "^2.8.7",
     "storybook": "^7.0.22",
     "typescript": "~5.1.6",
-    "vite": "^4.2.1",
-    "vite-plugin-checker": "^0.5.6",
-    "vite-tsconfig-paths": "^4.0.8",
-    "vitest": "^0.29.8"
+    "vite": "^4.4.9",
+    "vite-plugin-checker": "^0.6.2",
+    "vite-plugin-istanbul": "^5.0.0",
+    "vite-tsconfig-paths": "^4.2.1",
+    "vitest": "^0.34.6",
+    "nyc": "^15.1.0"
   },
   "resolutions": {
     "react-error-overlay": "6.0.9",
@@ -183,6 +185,7 @@
     "start": "exec scripts/start-dev.sh",
     "start-container": "import-meta-env-prepare -x .env.example && vite --host",
     "build": "vite build",
+    "coverage-build": "VITE_COVERAGE=true vite build --mode development",
     "test": "import-meta-env-prepare -x .env.example && vitest",
     "lint": "eslint --ext .ts,.tsx,.js,.jsx src --max-warnings 0",
     "lint-fix": "eslint --ext .ts,.tsx,.js,.jsx src --fix",

front/tests/001-home-page.spec.ts

@@ -1,4 +1,4 @@
-import { test, expect } from '@playwright/test';
+import { test, expect } from './baseFixtures';
 import { PlaywrightHomePage } from './pages/home-page-model';
 
 // Describe the test suite for the home page of OSRD

front/tests/002-project-management.spec.ts

@@ -1,4 +1,4 @@
-import { test, expect } from '@playwright/test';
+import { test, expect } from './baseFixtures';
 import { v4 as uuidv4 } from 'uuid';
 import { Project } from 'common/api/osrdEditoastApi';
 import { PlaywrightHomePage } from './pages/home-page-model';

front/tests/003-study-management.spec.ts

@@ -1,4 +1,4 @@
-import { test, expect } from '@playwright/test';
+import { test, expect } from './baseFixtures';
 import { v4 as uuidv4 } from 'uuid';
 import { Project, Study } from 'common/api/osrdEditoastApi';
 import { PlaywrightHomePage } from './pages/home-page-model';

front/tests/004-scenario-management.spec.ts

@@ -1,4 +1,4 @@
-import { test, expect } from '@playwright/test';
+import { test, expect } from './baseFixtures';
 import { Infra, Project, Scenario, Study } from 'common/api/osrdEditoastApi';
 import { v4 as uuidv4 } from 'uuid';
 import { PlaywrightHomePage } from './pages/home-page-model';

front/tests/005-operational-studies.spec.ts

@@ -1,4 +1,4 @@
-import { test, expect } from '@playwright/test';
+import { test, expect } from './baseFixtures';
 import { PlaywrightHomePage } from './pages/home-page-model';
 import PlaywrightRollingstockModalPage from './pages/rollingstock-modal-model';
 import PlaywrightMap from './pages/map-model';

front/tests/006-stdcm-page.spec.ts

@@ -1,4 +1,4 @@
-import { test, expect } from '@playwright/test';
+import { test, expect } from './baseFixtures';
 import { PlaywrightHomePage } from './pages/home-page-model';
 import { PlaywrightSTDCMPage } from './pages/stdcm-page-model';
 

front/tests/007-pathfinding.spec.ts

@@ -1,4 +1,4 @@
-import { test } from '@playwright/test';
+import { test } from './baseFixtures';
 import { PlaywrightHomePage } from './pages/home-page-model';
 import { ProjectPage } from './pages/project-page-model';
 import { StudyPage } from './pages/study-page-model';

front/tests/008-allowances.spec.ts

@@ -1,4 +1,4 @@
-import { test, expect } from '@playwright/test';
+import { test, expect } from './baseFixtures';
 import VARIABLES from './assets/operationStudies/testVariables';
 import PATH_VARIABLES from './assets/operationStudies/testVariablesPaths';
 import PlaywrightScenarioPage from './pages/scenario-page-model';

front/tests/009-stdcm-between-two-trains.spec.ts

@@ -1,4 +1,4 @@
-import { test } from '@playwright/test';
+import { test } from './baseFixtures';
 import { PlaywrightHomePage } from './pages/home-page-model';
 import PlaywrightRollingstockModalPage from './pages/rollingstock-modal-model';
 import { PlaywrightSTDCMPage } from './pages/stdcm-page-model';

front/tests/assets/utils.ts

@@ -1,4 +1,4 @@
-import { expect, Page, request } from '@playwright/test';
+import { expect, Page, request } from '../baseFixtures';
 import { PlaywrightHomePage } from '../pages/home-page-model';
 import PlaywrightRollingstockModalPage from '../pages/rollingstock-modal-model';
 import PlaywrightMap, { selectPointOnMapProps } from '../pages/map-model';

front/tests/baseFixtures.ts

@@ -0,0 +1,34 @@
+import * as fs from 'fs';
+import * as path from 'path';
+import * as crypto from 'crypto';
+import { test as baseTest } from '@playwright/test';
+export { request } from '@playwright/test';
+import type { Page, Locator } from '@playwright/test';
+export type { Page, Locator };
+
+const istanbulCLIOutput = path.join(process.cwd(), '.nyc_output');
+
+export function generateUUID(): string {
+  return crypto.randomBytes(16).toString('hex');
+}
+
+export const test = baseTest.extend({
+  context: async ({ context }, use) => {
+    await context.addInitScript(() =>
+      window.addEventListener('beforeunload', () =>
+        (window as any).collectIstanbulCoverage(JSON.stringify((window as any).__coverage__))
+      ),
+    );
+    await fs.promises.mkdir(istanbulCLIOutput, { recursive: true });
+    await context.exposeFunction('collectIstanbulCoverage', (coverageJSON: string) => {
+      if (coverageJSON)
+        fs.writeFileSync(path.join(istanbulCLIOutput, `playwright_coverage_${generateUUID()}.json`), coverageJSON);
+    });
+    await use(context);
+    for (const page of context.pages()) {
+      await page.evaluate(() => (window as any).collectIstanbulCoverage(JSON.stringify((window as any).__coverage__)))
+    }
+  }
+});
+
+export const expect = test.expect;

front/tests/pages/common-page-model.ts

@@ -1,4 +1,4 @@
-import { Page } from '@playwright/test';
+import { Page } from '../baseFixtures';
 import rollingstockTranslation from '../../public/locales/fr/rollingstock.json';
 
 class PlaywrightCommonPage {

front/tests/pages/home-page-model.ts

@@ -1,5 +1,5 @@
 /* eslint-disable import/prefer-default-export */
-import { expect, Locator, Page } from '@playwright/test';
+import { expect, Locator, Page } from '../baseFixtures';
 import home from '../../public/locales/fr/home/home.json';
 
 export class PlaywrightHomePage {

front/tests/pages/map-model.ts

@@ -1,4 +1,4 @@
-import { Locator, Page } from '@playwright/test';
+import { Locator, Page } from '../baseFixtures';
 import { PlaywrightHomePage } from './home-page-model';
 
 export interface selectPointOnMapProps {

front/tests/pages/project-page-model.ts

@@ -1,5 +1,5 @@
 /* eslint-disable import/prefer-default-export */
-import { expect, Locator, Page } from '@playwright/test';
+import { expect, Locator, Page } from '../baseFixtures';
 import project from '../../public/locales/fr/operationalStudies/project.json';
 
 export class ProjectPage {