Bugfix/konsollfeil (#179)

* Fikset feil i dev/clientside rendering på oppdatering av komponenter inni en annen komponent

* Refaktorert nobackground props slik at konsoll ikke griner

* Fix unique id missmatch between server and client side.

* Add serializer for strykes mark from Sanity.

* Update cypress tests with data-test-ids instead of using aria-labels to target DOM elements

* Økt timeout på tester

* NodeJs does not seem to support nb-NO locale which triggers miss match between browser and server. Change locale to old no-NO to avoid this error.

* Update to node 16 in Dockerfile

* Remove Breadcrumb type since it's not exported from nav-dekoratoren

Co-authored-by: Sindre Sægrov <[email protected]>

Dockerfile

@@ -11,7 +11,7 @@ RUN npm ci
 COPY . /home/node/app
 RUN npm run build
 
-FROM node:14-alpine AS runtime
+FROM node:16-alpine AS runtime
 
 WORKDIR /home/node/app
 

README.md

@@ -25,8 +25,8 @@ Opprett filen `.env.development` i root-folderet med innholdet:
 
 ```
 # SECRET - DO NOT COMMIT TO GIT
-SANITY_READ_TOKEN="ditt hemmelige token her"
 
+SANITY_READ_TOKEN="ditt hemmelige token her"
 NEXT_PUBLIC_SANITY_DATASET="development"
 ```
 

cypress.json

@@ -1,3 +1,4 @@
 {
-  "baseUrl": "http://localhost:3000/arbeid"
+  "baseUrl": "http://localhost:3000/arbeid",
+  "defaultCommandTimeout": 8000
 }

cypress/integration/basics.ts

@@ -1,3 +1,5 @@
+import { TestId } from "../../src/utils/test-ids";
+
 describe("basics funker - ", () => {
   const url = "http://localhost:3000/arbeid";
 
@@ -21,8 +23,8 @@ describe("basics funker - ", () => {
     });
 
     // Skal nå ha navigert til infoside, leter etter noen ting som vi forventer å finne på en infoside
-    cy.findByRole("heading", { name: /kort fortalt/i });
-    cy.findByRole("navigation", { name: /Sideoversikt/i }).within(() => {
+    cy.findByTestId(TestId.KORT_FORTALT);
+    cy.findByTestId(TestId.MOBILE_NAVIGATION).within(() => {
       cy.findByRole("button", { name: /Sideoversikt/i }).click();
       cy.findByRole("list", { name: /Innholdsfortegnelse/i });
       cy.findByRole("link", { name: /kort fortalt/i });

cypress/integration/språkhåndtering.ts

@@ -6,14 +6,16 @@
  *  Vi tester at begge systemene funker og kan styres vha språk i url
  *
  * */
+import { TestId } from "../../src/utils/test-ids";
+
 describe("Spårkversjonering", () => {
   const url = "http://localhost:3000/arbeid";
 
   it("funker på norsk", () => {
     cy.visit(`${url}/testdata`);
     cy.findByRole("button", { name: /Cypress - språktest/ }).click();
 
-    cy.findByLabelText(/Kort fortalt/i).within(() => {
+    cy.findByTestId(TestId.KORT_FORTALT).within(() => {
       // "Kort fortalt" er en mikrotekst som er hardkodet og oversatt ved hjelp av i18next
       cy.findByText(/Norsk innhold/i); // "Norsk innhold" er simulert Sanity-innhold
     });
@@ -23,7 +25,7 @@ describe("Spårkversjonering", () => {
     cy.visit(`${url}/en/testdata`);
     cy.findByRole("button", { name: /Cypress - språktest/ }).click();
 
-    cy.findByLabelText(/Summary/i).within(() => {
+    cy.findByTestId(TestId.KORT_FORTALT).within(() => {
       cy.findByText(/English content/i);
     });
   });

cypress/integration/wordcount.ts

@@ -1,10 +1,12 @@
+import { TestId } from "../../src/utils/test-ids";
+
 describe("infoside", () => {
   it('Viser informasjon om hvor mange ord som er skjult når man bruker "Tilpass innhold"', () => {
     cy.viewport(1200, 600);
     cy.visit("http://localhost:3000/arbeid/testdata");
     cy.findByRole("button", { name: /Cypress - word count/ }).click();
 
-    cy.findByLabelText(/tilpass/i).within(() => {
+    cy.findByTestId(TestId.TILPASS_INNHOLD).within(() => {
       cy.findByText(/permittert/i).click();
       cy.contains("viser nå 18 av 47 ord");
       cy.findByText(/permittert/i).click();

cypress/support/commands.js

@@ -1 +1,4 @@
 import "@testing-library/cypress/add-commands";
+import { configure } from "@testing-library/cypress";
+
+configure({ testIdAttribute: "data-test-id" });