✅ Legger til testing for å lage feilmelding

frontend/cypress/e2e/lagFeilmelding.cy.ts

@@ -0,0 +1,26 @@
+const fyllFeilmeldingInputs = () => {
+    cy.getByTestId('tittel-inputfelt').type('Cypress-test Tittel')
+    cy.getByTestId('beskrivelse-inputfelt').type('Cypress-test Beskrivelse')
+    cy.getByTestId('switch-toggle').click()
+}
+
+describe('Klarer å melde inn feil', () => {
+    context('Fyller ut felt, melder inn og går tilbake til hovedside', () => {
+      beforeEach(() => {
+          cy.viewport(1920, 1080)
+          cy.visit('http://localhost:5173/')
+      })
+
+      it('sjekker axe', () => {
+        cy.checkPageA11y()
+      })
+  
+      it('Fyller ut felt og melder inn feil som haster', () => {
+        cy.contains('Meld inn feil').click()
+
+        fyllFeilmeldingInputs()
+
+        cy.contains('Meld inn feil').click()
+      })
+    })
+})

frontend/cypress/support/commands.ts

@@ -1,5 +1,4 @@
 import 'cypress-axe'
-
 /// <reference types="cypress" />
 // ***********************************************
 // This example commands.ts shows you how to
@@ -27,6 +26,10 @@ import 'cypress-axe'
 // -- This will overwrite an existing command --
 // Cypress.Commands.overwrite('visit', (originalFn, url, options) => { ... })
 
+Cypress.Commands.add("getByTestId", (selector, ...args) => {
+    return cy.get(`[data-testid=${selector}]`, ...args);
+});
+
 Cypress.Commands.add("checkPageA11y", () => {
     cy.injectAxe();
     cy.configureAxe({
@@ -35,7 +38,7 @@ Cypress.Commands.add("checkPageA11y", () => {
        //   id: "svg-img-alt",
        //   enabled: false,
        // },
-        //Skrur av fordi checkA11y ikke vet at div er en gyldig children av <dl>-elementer
+      // Skrur av fordi checkA11y ikke vet at div er en gyldig children av <dl>-elementer
       ],
     });
     cy.checkA11y(

frontend/cypress/support/e2e.ts

@@ -22,6 +22,10 @@ import './commands'
 declare global {
     namespace Cypress {
       interface Chainable {
+        getByTestId(
+            selector: string,
+            ...rest: any
+          ): Chainable<JQuery<HTMLElement>>;
         checkPageA11y(): Chainable<JQuery<HTMLElement>>;
       }
     }

frontend/src/pages/feil.tsx

@@ -93,11 +93,13 @@ export default function Feil() {
                     </div>
                     <div className="w-1/2 flex flex-col gap-4 justify-center">
                         <TextField
+                            data-testid="tittel-inputfelt"
                             label="Tittel"
                             onChange={e => setTittel(e.target.value)}
                         />
 
                         <Textarea
+                            data-testid="beskrivelse-inputfelt"
                             label="Beskrivelse"
                             description="Detaljert beskrivelse av problemet"
                             onChange={e => setBeskrivelse(e.target.value)}
@@ -109,7 +111,8 @@ export default function Feil() {
                         <Heading size="xsmall">
                             Haster det å fikse feilen?
                         </Heading>
-                        <Switch 
+                        <Switch
+                            data-testid="switch-toggle"
                             onClick={() => setHaster(!haster)}
                         >
                             Saken Haster