From de91e13727a51b7c0745c08356e90c2cb0fbc640 Mon Sep 17 00:00:00 2001
From: Sindre Kjelsrud <sindre.kjelsrud@nav.no>
Date: Fri, 4 Aug 2023 12:46:58 +0200
Subject: [PATCH] =?UTF-8?q?=E2=9C=85=20Legger=20til=20testing=20for=20?=
 =?UTF-8?q?=C3=A5=20lage=20feilmelding?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 frontend/cypress/e2e/lagFeilmelding.cy.ts | 26 +++++++++++++++++++++++
 frontend/cypress/support/commands.ts      |  7 ++++--
 frontend/cypress/support/e2e.ts           |  4 ++++
 frontend/src/pages/feil.tsx               |  5 ++++-
 4 files changed, 39 insertions(+), 3 deletions(-)
 create mode 100644 frontend/cypress/e2e/lagFeilmelding.cy.ts

diff --git a/frontend/cypress/e2e/lagFeilmelding.cy.ts b/frontend/cypress/e2e/lagFeilmelding.cy.ts
new file mode 100644
index 0000000..0005b84
--- /dev/null
+++ b/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()
+      })
+    })
+})
\ No newline at end of file
diff --git a/frontend/cypress/support/commands.ts b/frontend/cypress/support/commands.ts
index 5bbc609..39a889c 100644
--- a/frontend/cypress/support/commands.ts
+++ b/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(
diff --git a/frontend/cypress/support/e2e.ts b/frontend/cypress/support/e2e.ts
index 05caa4c..87a34cc 100644
--- a/frontend/cypress/support/e2e.ts
+++ b/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>>;
       }
     }
diff --git a/frontend/src/pages/feil.tsx b/frontend/src/pages/feil.tsx
index 91d91fe..bfc7399 100644
--- a/frontend/src/pages/feil.tsx
+++ b/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