diff --git a/packages/code-du-travail-frontend/cypress/integration/light/header.spec.ts b/packages/code-du-travail-frontend/cypress/integration/light/header.spec.ts new file mode 100644 index 00000000000..88b653e80eb --- /dev/null +++ b/packages/code-du-travail-frontend/cypress/integration/light/header.spec.ts @@ -0,0 +1,19 @@ +describe("Header", () => { + it("doit afficher les liens d'évitement", () => { + cy.visit("/mentions-legales"); + cy.get("[id^=fr-skiplinks]").as("skipLink").should("not.be.visible"); + cy.window().focus().realPress("Tab"); + cy.get("@skipLink").should("be.visible"); + cy.focused().should("have.attr", "href", "#main"); + cy.realPress("Tab"); + cy.focused().should("have.attr", "href", "#fr-header-main-navigation"); + cy.realPress("Tab"); + cy.focused().should("have.attr", "href", "#fr-header-search-input"); + cy.realPress("Tab"); + cy.focused().should("have.attr", "href", "#more-info"); + cy.realPress("Enter"); + cy.get("@skipLink").should("not.have.focus").and("not.be.visible"); + cy.realPress("Tab"); + cy.focused().should("have.text", "Trouver les services près de chez moi"); + }); +}); diff --git a/packages/code-du-travail-frontend/cypress/support/index.ts b/packages/code-du-travail-frontend/cypress/support/index.ts index 89527b8eba4..720f641bdd4 100644 --- a/packages/code-du-travail-frontend/cypress/support/index.ts +++ b/packages/code-du-travail-frontend/cypress/support/index.ts @@ -17,6 +17,7 @@ import "./commands"; import "./errors"; +import "cypress-real-events"; // in cypress/support/index.ts // load type definitions that come with Cypress module diff --git a/packages/code-du-travail-frontend/cypress/tsconfig.json b/packages/code-du-travail-frontend/cypress/tsconfig.json index 5642ab1b733..5b19875d9b0 100644 --- a/packages/code-du-travail-frontend/cypress/tsconfig.json +++ b/packages/code-du-travail-frontend/cypress/tsconfig.json @@ -3,8 +3,16 @@ "compilerOptions": { "noEmit": true, "isolatedModules": false, - "types": ["cypress"] + "types": [ + "cypress", + "cypress-real-events" + ] }, - "include": ["../node_modules/cypress", "./**/*.ts"], - "exclude": ["node_modules"] + "include": [ + "../node_modules/cypress", + "./**/*.ts" + ], + "exclude": [ + "node_modules" + ] } diff --git a/packages/code-du-travail-frontend/package.json b/packages/code-du-travail-frontend/package.json index 24e4d106858..3d2405ee24d 100644 --- a/packages/code-du-travail-frontend/package.json +++ b/packages/code-du-travail-frontend/package.json @@ -95,6 +95,7 @@ "cypress": "^13.13.2", "cypress-html-validate": "^6.1.0", "cypress-iframe": "^1.0.1", + "cypress-real-events": "^1.13.0", "eslint": "^8", "eslint-config-next": "14.2.5", "eslint-plugin-cypress": "^3.4.0", diff --git a/packages/code-du-travail-frontend/src/modules/layout/NeedMoreInfo.tsx b/packages/code-du-travail-frontend/src/modules/layout/NeedMoreInfo.tsx index 40198709449..b408e8ebbf7 100644 --- a/packages/code-du-travail-frontend/src/modules/layout/NeedMoreInfo.tsx +++ b/packages/code-du-travail-frontend/src/modules/layout/NeedMoreInfo.tsx @@ -4,7 +4,7 @@ import { css } from "../../../styled-system/css"; export const NeedMoreInfo = () => { return ( -
+
diff --git a/packages/code-du-travail-frontend/src/modules/layout/SkipLinks.tsx b/packages/code-du-travail-frontend/src/modules/layout/SkipLinks.tsx new file mode 100644 index 00000000000..272b14acaed --- /dev/null +++ b/packages/code-du-travail-frontend/src/modules/layout/SkipLinks.tsx @@ -0,0 +1,24 @@ +import { SkipLinks as DsfrSkipLinks } from "@codegouvfr/react-dsfr/SkipLinks"; + +export const SkipLinks = () => ( + +); diff --git a/packages/code-du-travail-frontend/src/modules/layout/__tests__/SkipLinks.test.tsx b/packages/code-du-travail-frontend/src/modules/layout/__tests__/SkipLinks.test.tsx new file mode 100644 index 00000000000..7dcf707fd82 --- /dev/null +++ b/packages/code-du-travail-frontend/src/modules/layout/__tests__/SkipLinks.test.tsx @@ -0,0 +1,10 @@ +import { render } from "@testing-library/react"; +import React from "react"; +import { SkipLinks } from "../SkipLinks"; + +describe("", () => { + it("should match snapshot", () => { + const { container } = render(); + expect(container).toMatchSnapshot(); + }); +}); diff --git a/packages/code-du-travail-frontend/src/modules/layout/__tests__/__snapshots__/NeedMoreInfo.test.tsx.snap b/packages/code-du-travail-frontend/src/modules/layout/__tests__/__snapshots__/NeedMoreInfo.test.tsx.snap index 3a75e7838ee..2886a2a4730 100644 --- a/packages/code-du-travail-frontend/src/modules/layout/__tests__/__snapshots__/NeedMoreInfo.test.tsx.snap +++ b/packages/code-du-travail-frontend/src/modules/layout/__tests__/__snapshots__/NeedMoreInfo.test.tsx.snap @@ -4,6 +4,7 @@ exports[` should match snapshot 1`] = `
{ /> )} onSearchButtonClick={onSearchSubmit} + /> ); }; diff --git a/packages/code-du-travail-frontend/src/modules/layout/index.tsx b/packages/code-du-travail-frontend/src/modules/layout/index.tsx index e2e3d11b58a..ec2b2589d36 100644 --- a/packages/code-du-travail-frontend/src/modules/layout/index.tsx +++ b/packages/code-du-travail-frontend/src/modules/layout/index.tsx @@ -2,13 +2,17 @@ import { fr } from "@codegouvfr/react-dsfr"; import { Footer } from "./Footer"; import { Header } from "./header"; import { NeedMoreInfo } from "./NeedMoreInfo"; +import { SkipLinks } from "./SkipLinks"; export const DsfrLayout = ({ children }: { children: React.ReactNode }) => { return ( +
-
{children}
+
+ {children} +