Skip to content

Test/e2e tests tessa #367

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Closed
TessaViergever wants to merge 4 commits into from
Closed

Test/e2e tests tessa #367

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
c5e734c
test: step3+4 mock data formstorestate
TessaViergever Jan 16, 2025
887efa0
test: add step1,3,4 and thankyou playwright tests
TessaViergever Jan 16, 2025
e45ddda
test: add playwright utility
TessaViergever Jan 16, 2025
f7cf122
test: increase timeout CI
TessaViergever Jan 20, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
3 changes: 2 additions & 1 deletion playwright.config.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -18,7 +18,8 @@ export default defineConfig({
forbidOnly: !!process.env.CI,
/* Retry on CI only */
retries: process.env.CI ? 2 : 0,
timeout: 3000,
/* Shorter test time for dev */
timeout: process.env.CI ? 30000 : 15000,
/* Opt out of parallel tests on CI. */
workers: process.env.CI ? 1 : undefined,
/* Reporter to use. See https://playwright.dev/docs/test-reporters */
Expand Down
30 changes: 30 additions & 0 deletions src/store/form_store.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -22,6 +22,36 @@ const initialFormState: FormStoreState = {
last_completed_step: FormStep.STEP_0,
}

export const defaultStep3FormState: Partial<FormStoreState> = {
description: 'lamp',
coordinates: [51.61892134, 5.52874105],
address: {
coordinates: [5.52874105, 51.61892134],
id: 'adr-987acc537500c2f62ab7449a6d1e6f2e',
postcode: '5462GJ',
huisnummer: '3A',
woonplaats: 'Veghel',
openbare_ruimte: 'Lage Landstraat',
weergave_naam: 'Lage Landstraat 3A, 5462GJ Veghel',
},
last_completed_step: 2,
}

export const defaultStep4FormState: Partial<FormStoreState> = {
description: 'lamp',
coordinates: [51.61892134, 5.52874105],
address: {
coordinates: [5.52874105, 51.61892134],
id: 'adr-987acc537500c2f62ab7449a6d1e6f2e',
postcode: '5462GJ',
huisnummer: '3A',
woonplaats: 'Veghel',
openbare_ruimte: 'Lage Landstraat',
weergave_naam: 'Lage Landstraat 3A, 5462GJ Veghel',
},
last_completed_step: 3,
}

export const createFormState = (
data: Partial<FormStoreState>
): FormStoreState => merge({}, initialFormState, data)
Expand Down
109 changes: 31 additions & 78 deletions test/e2e/step1.spec.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,52 +1,5 @@
/* eslint-disable react-hooks/rules-of-hooks */
import { expect, test as base, BrowserContext } from '@playwright/test'
import AxeBuilder from '@axe-core/playwright'
import { describe } from 'vitest'
import { createSessionStorageFixture } from '@/store/form_store'
import { FormStoreState } from '@/types/stores'

type AxeFixture = {
makeAxeBuilder: () => AxeBuilder
}

// Extend base test by providing "makeAxeBuilder"
//
// This new "test" can be used in multiple test files, and each of them will get
// a consistently configured AxeBuilder instance.
export const test = base.extend<AxeFixture>({
makeAxeBuilder: async ({ page }, use, testInfo) => {
const makeAxeBuilder = () =>
new AxeBuilder({ page })
.withTags(['wcag2a', 'wcag2aa', 'wcag21a', 'wcag21aa'])
.exclude('#commonly-reused-element-with-known-issue')

await use(makeAxeBuilder)
},
})

const sessionStorageFixture = (
context: BrowserContext,
sessionStorage: { [index: string]: string }
) =>
context.addInitScript((storage) => {
for (const [key, value] of Object.entries(storage)) {
window.sessionStorage.setItem(key, value)
console.log(key, value)
}
}, sessionStorage)

const formStateFixture = (
context: BrowserContext,
formState: Partial<FormStoreState>
) => sessionStorageFixture(context, createSessionStorageFixture(formState))

test.use({
locale: 'nl-NL',
timezoneId: 'Europe/Amsterdam',
geolocation: { latitude: 51.6045656, longitude: 5.5342026 },
})

const websiteURL = 'http://localhost:3000/'
import { expect } from '@playwright/test'
import { test, formStateFixture, websiteURL } from './util'

interface MyTextConfig {
name: string
Expand All @@ -63,7 +16,7 @@ const parameters: MyTextConfig[] = [
// { name: 'Forced colors', forcedColors: true },
]

parameters.slice(0, 1).forEach(async ({ name, testConfig, forcedColors }) => {
parameters.forEach(async ({ name, testConfig, forcedColors }) => {
test.describe(`${name}`, () => {
// TODO: Make new context for each test config to avoid interference
if (testConfig) {
Expand Down Expand Up @@ -177,45 +130,45 @@ parameters.slice(0, 1).forEach(async ({ name, testConfig, forcedColors }) => {
await expect(button).toBeVisible()
})

test.describe('step 2', () => {
const pageURL = 'http://localhost:3000/nl/incident/vulaan'
test('has title', async ({ page, context }) => {
formStateFixture(context, { description: 'lamp' })
// test.describe('step 2', () => {
// const pageURL = 'http://localhost:3000/nl/incident/vulaan'
// test('has title', async ({ page, context }) => {
// formStateFixture(context, { description: 'lamp' })

await page.goto(pageURL)
// await page.goto(pageURL)

// Expect a title "to contain" a substring with the step
await expect(page).toHaveTitle(/Stap 2 van 4/i)
// // Expect a title "to contain" a substring with the step
// await expect(page).toHaveTitle(/Stap 2 van 4/i)

// Expect a title "to contain" a substring.
await expect(page).toHaveTitle(/Purmerend/i)
})
// // Expect a title "to contain" a substring.
// await expect(page).toHaveTitle(/Purmerend/i)
// })

test('has heading', async ({ context, page }) => {
formStateFixture(context, { description: 'lamp' })
// test('has heading', async ({ context, page }) => {
// formStateFixture(context, { description: 'lamp' })

await page.goto(pageURL)
// await page.goto(pageURL)

const heading = page.getByRole('heading', {
name: 'Locatie en vragen',
level: 1,
})
// const heading = page.getByRole('heading', {
// name: 'Locatie en vragen',
// level: 1,
// })

await expect(heading).toBeVisible()
})
// await expect(heading).toBeVisible()
// })

test('Focus combobox', async ({ context, page }) => {
formStateFixture(context, { description: 'lamp' })
// test('Focus combobox', async ({ context, page }) => {
// formStateFixture(context, { description: 'lamp' })

await page.goto(pageURL)
// await page.goto(pageURL)

// const combobox = page.getByRole('combobox', { name: 'Adres' })
const combobox = page.getByRole('combobox')
// // const combobox = page.getByRole('combobox', { name: 'Adres' })
// const combobox = page.getByRole('combobox')

await expect(combobox).toBeVisible()
// await expect(combobox).toBeVisible()

await combobox.focus()
})
})
// await combobox.focus()
// })
// })
})
})
Loading