Add a couple of tests

src/client/components/Choices/TextField.tsx

@@ -17,6 +17,7 @@ const Text = ({ control, question, defaultValue }: InputProps) => {
       render={({ field: { onChange } }) => (
         <Box justifyContent="center">
           <TextField
+            data-testid={`question-${question.id}`}
             onChange={onChange}
             fullWidth
             InputProps={props ? props.attributes : {}}

tests/example.spec.ts

@@ -1,8 +1,32 @@
 import { test, expect } from '@playwright/test'
 
-test('has title', async ({ page }) => {
+test.beforeEach(async ({ page }) => {
   await page.goto('/')
+})
 
-  // Expect a title "to contain" a substring.
+test('has title', async ({ page }) => {
   await expect(page).toHaveTitle(/Riksutin/)
 })
+
+test('has the first question', async ({ page }) => {
+  await expect(page.getByText('Ilmoittajan nimi')).toBeVisible()
+
+  const nameInput = page.getByTestId('question-1').getByRole('textbox')
+
+  await nameInput.click()
+  await nameInput.fill('')
+
+  await expect(nameInput).toHaveValue('')
+})
+
+test('shows answers after submitting', async ({ page }) => {
+  const nameInput = page.getByTestId('question-1').getByRole('textbox')
+
+  await nameInput.click()
+  await nameInput.fill('Testi Testinen')
+
+  await page.getByRole('button', { name: 'Valinnat tehty' }).click()
+
+  await expect(page.getByText('Yhteenveto valinnoistasi')).toBeVisible()
+  await expect(page.getByText('Ilmoittajan nimi: Testi Testinen')).toBeVisible()
+})