legg til playwright tester for flexjar

README.md

@@ -13,6 +13,11 @@ I din `.bashrc` eller `.zshrc`, sett følgende miljøvariabel:
 
 `export NPM_AUTH_TOKEN=<din PAT med read:packages>`
 
+### Playwright UI tester
+Krever browsere installert. Kjør: `npx playwright install`
+
+
+
 ## Dette logges i Amplitude
 
 

cypress/e2e/run-3/flexjar.cy.ts

@@ -23,7 +23,7 @@ describe('Tester flexjar', () => {
         cy.contains('Tilbakemeldingen din er viktig for oss!')
 
         heading('Tilbakemeldingen din er viktig for oss!')
-            .closest('section')
+            .closest('[role="region"]')
             .within(() => {
                 cy.findByRole('button', {
                     name: 'Ja',
@@ -72,7 +72,7 @@ describe('Tester flexjar', () => {
     it('Har emoji flexjar på kvitteringa', function () {
         cy.contains('Hva synes du om denne søknaden?')
         heading('Tilbakemeldingen din er viktig for oss!')
-            .closest('section')
+            .closest('[role="region"]')
             .within(() => {
                 cy.findByRole('button', {
                     name: 'Bra',

playwright/flexjar.spec.ts

@@ -0,0 +1,106 @@
+import { expect, Page } from '@playwright/test'
+
+import { checkViStolerPaDeg, klikkGaVidere, svarNeiHovedsporsmal } from './utilities'
+import { test } from './fixtures'
+
+test.describe('Tester flexjar', () => {
+    test.beforeEach(async ({ page }) => {
+        await page.context().clearCookies()
+        await page.goto('/syk/sykepengesoknad?testperson=arbeidstaker-gradert')
+
+        const link = page.getByRole('link', { name: 'Søknad Om Sykepenger' })
+        await link.click()
+    })
+
+    test('Naviger til tilbake i arbeid', async ({ page }) => {
+        const heading = page.getByText('Tilbakemeldingen din er viktig for oss!')
+        await expect(heading).toHaveCount(0)
+        await checkViStolerPaDeg(page)
+    })
+
+    test('Test å gi feedback', async ({ page }) => {
+        await checkViStolerPaDeg(page)
+        await page.getByText('Tilbake i fullt arbeid').isVisible()
+        await page.getByText('Tilbakemeldingen din er viktig for oss!').isVisible()
+
+        const feedbackTittel = page.getByText('Tilbakemeldingen din er viktig for oss!')
+        const feedbackSection = page.getByRole('region').filter({ has: feedbackTittel })
+
+        const yesButton = feedbackSection.getByRole('button', { name: 'Ja' })
+        await yesButton.click()
+        await expect(yesButton).toHaveCSS('background-color', 'rgb(35, 38, 42)')
+
+        await page.getByText('Unngå å skrive inn navn, fødselsnummer eller andre personlige opplysninger.').isVisible()
+
+        const feedbackTextbox = page.getByRole('textbox')
+        await feedbackTextbox.fill('Dette er en test')
+
+        const sendButton = page.getByRole('button', { name: 'Send tilbakemelding' })
+        await sendButton.click()
+
+        await page.getByText('Takk for tilbakemeldingen!').isVisible()
+    })
+
+    test('Har ikke spørsmål flexjar på de siste sidene', async ({ page }) => {
+        await checkViStolerPaDeg(page)
+        await navigerTilOppsummeringSide(page)
+
+        const feedbackTittel = page.getByText('Tilbakemeldingen din er viktig for oss!')
+        await expect(feedbackTittel).toHaveCount(0) // Should not exist
+
+        await page.getByText('Send søknaden').click()
+        await page.getByText('Søknaden er sendt').isVisible()
+
+        await expect(feedbackTittel).toHaveCount(1) // Should exist
+    })
+
+    test('Har emoji flexjar på kvitteringa', async ({ page }) => {
+        await checkViStolerPaDeg(page)
+        await navigerTilOppsummeringSide(page)
+        await page.getByText('Send søknaden').click()
+
+        await page.getByText('Hva synes du om denne søknaden?').isVisible()
+
+        const feedbackTittel = page.getByText('Tilbakemeldingen din er viktig for oss!')
+        const feedbackSection = page.getByRole('region').filter({ has: feedbackTittel })
+
+        const braButton = feedbackSection.getByRole('button', { name: 'Bra', exact: true })
+        await expect(braButton).toHaveCSS('background-color', 'rgba(0, 0, 0, 0)')
+        await braButton.click()
+
+        await expect(braButton).toHaveCSS('background-color', 'rgb(236, 238, 240)')
+
+        await page.getByText('Unngå å skrive inn navn, fødselsnummer eller andre personlige opplysninger.').isVisible()
+
+        const feedbackTextbox = page.getByRole('textbox')
+        await feedbackTextbox.fill('Dette er en test')
+
+        const sendButton = page.getByRole('button', { name: 'Send tilbakemelding' })
+        await sendButton.click()
+
+        await page.getByText('Takk for tilbakemeldingen!').isVisible()
+    })
+})
+
+async function navigerTilOppsummeringSide(page: Page) {
+    await svarNeiHovedsporsmal(page)
+    await klikkGaVidere(page)
+
+    await svarNeiHovedsporsmal(page)
+    await klikkGaVidere(page)
+
+    await svarNeiHovedsporsmal(page)
+    await klikkGaVidere(page)
+
+    await svarNeiHovedsporsmal(page)
+    await klikkGaVidere(page)
+
+    await svarNeiHovedsporsmal(page)
+    await klikkGaVidere(page)
+
+    await svarNeiHovedsporsmal(page)
+    await klikkGaVidere(page)
+
+    await svarNeiHovedsporsmal(page)
+    await klikkGaVidere(page)
+}

playwright/utilities.ts

@@ -0,0 +1,47 @@
+import { expect, Page } from '@playwright/test'
+
+export async function checkViStolerPaDeg(page: Page, gaVidere = true) {
+    const checkbox = page
+        .locator('form')
+        .getByRole('checkbox', { name: 'Jeg bekrefter at jeg vil svare så riktig som jeg kan.' })
+    await checkbox.click()
+
+    if (gaVidere) {
+        const startButton = page.getByText('Start søknad')
+        await startButton.click()
+    }
+}
+export async function svarNeiHovedsporsmal(page: Page) {
+    const radioButton = page.locator('form').getByRole('radio', { name: 'Nei' }).first()
+    await radioButton.click()
+
+    await expect(radioButton).toBeChecked()
+}
+
+export async function klikkGaVidere(page: Page, forventFeil = false, skipFocusCheck = false) {
+    const currentUrl = page.url()
+
+    const currentPathParam = parseInt(currentUrl.split('/').pop()!)
+
+    const nextButton = page.getByRole('button', { name: 'Gå videre' })
+    await nextButton.click()
+
+    if (forventFeil) return
+
+    await page.waitForURL((url) => url.toString() !== currentUrl)
+
+    const newUrl = page.url()
+
+    const newPathParam = parseInt(newUrl.split('/').pop()!)
+
+    expect(newPathParam).toBe(currentPathParam + 1)
+
+    if (!skipFocusCheck) {
+        await sjekkMainContentFokus(page)
+    }
+}
+
+export async function sjekkMainContentFokus(page: Page) {
+    const focusedElement = page.locator(':focus')
+    await expect(focusedElement).toHaveAttribute('id', 'maincontent')
+}

src/components/flexjar/emojies.tsx

@@ -173,6 +173,7 @@ export const tommelNed = () => {
 }
 
 export const tommelOpp = () => {
+    const skjultFraSkjermlesere = true
     return (
         <svg
             xmlns="http://www.w3.org/2000/svg"
@@ -182,7 +183,10 @@ export const tommelOpp = () => {
             viewBox="0 0 24 24"
             focusable="false"
             role="img"
+            aria-hidden={skjultFraSkjermlesere ? 'true' : 'false'}
+            aria-labelledby="emoji-tommel-opp"
         >
+            <title id="emoji-tommel-opp">Tommel opp</title>
             <path
                 fill="currentColor"
                 fillRule="evenodd"

src/components/flexjar/flexjar-felles.tsx

@@ -109,7 +109,7 @@ export function FlexjarFelles({
     }
 
     return (
-        <section className={`w-full ${fullBredde ? '' : 'mt-16 md:w-3/4'}`}>
+        <div role="region" className={`w-full ${fullBredde ? '' : 'mt-16 md:w-3/4'}`}>
             <div>
                 {!thanksFeedback && (
                     <div className="mt-1 border-4 border-surface-subtle rounded-medium">
@@ -138,9 +138,7 @@ export function FlexjarFelles({
                                         ref={textAreaRef}
                                         error={errorMsg}
                                         label={getPlaceholder()}
-                                        description={
-                                            'Unngå å skrive inn navn, fødselsnummer eller andre personlige opplysninger.'
-                                        }
+                                        description="Unngå å skrive inn navn, fødselsnummer eller andre personlige opplysninger."
                                         onKeyDown={async (e) => {
                                             if (e.key === 'Enter' && e.ctrlKey) {
                                                 e.preventDefault()
@@ -195,7 +193,7 @@ export function FlexjarFelles({
                     )}
                 </div>
             </div>
-        </section>
+        </div>
     )
 }
 

src/components/person/Person.tsx

@@ -48,7 +48,7 @@ export default function Person() {
                 >
                     <Popover open={showHint} onClose={() => void 0} placement="bottom-end" anchorEl={buttonRef.current}>
                         <Popover.Content>
-                            <Heading size="small" level="3" className="motion-safe:animate-bounce">
+                            <Heading size="small" level="2" className="motion-safe:animate-bounce">
                                 Tips!
                             </Heading>
                             <div className="w-[220px]">