diff --git a/.github/workflows/main.yml b/.github/workflows/main.yml index b8439a0..d911564 100644 --- a/.github/workflows/main.yml +++ b/.github/workflows/main.yml @@ -26,3 +26,20 @@ jobs: node-version: 20.17 - run: npm ci - run: npm run test:unit + + e2e-tests: + timeout-minutes: 5 + runs-on: ubuntu-latest + steps: + - name: Checkout + uses: actions/checkout@v4 + - name: Setup Node + uses: actions/setup-node@v4 + with: + node-version: 20.17 + - run: npm ci + - run: npm run build + - name: Install Playwright Browsers + run: npx playwright install --with-deps + - name: Run Playwright tests + run: npx run test:e2e diff --git a/e2e/home.spec.ts b/e2e/home.spec.ts new file mode 100644 index 0000000..72ffbab --- /dev/null +++ b/e2e/home.spec.ts @@ -0,0 +1,21 @@ +import {test, expect} from '@playwright/test'; + +// See here how to get started: +// https://playwright.dev/docs/intro +test('visits the app root url', async ({page}) => { + await page.goto('/'); + await expect(page.locator('h1')).toHaveText('Eat Your Veggies'); + await expect(page).toHaveTitle('Eat Your Veggies - Home'); + await expect(page.getByTestId('home-locale-button-fi')).toBeVisible(); +}); + +test('home page actions work', async ({page}) => { + await page.goto('/'); + await page.getByTestId('home-locale-button-fi').click(); + await expect(page).toHaveTitle('Eat Your Veggies - Etusivu'); + await expect(page.getByTestId('home-locale-button-en')).toBeVisible(); + await page.getByTestId('home-info-button').click(); + await expect(page.getByTestId('dialog')).toBeVisible(); + await page.getByTestId('dialog-close-button').click(); + await expect(page.getByTestId('dialog')).toBeHidden(); +}); diff --git a/e2e/vue.spec.ts b/e2e/vue.spec.ts deleted file mode 100644 index 3e5a3d0..0000000 --- a/e2e/vue.spec.ts +++ /dev/null @@ -1,8 +0,0 @@ -import { test, expect } from '@playwright/test'; - -// See here how to get started: -// https://playwright.dev/docs/intro -test('visits the app root url', async ({ page }) => { - await page.goto('/'); - await expect(page.locator('div.greetings > h1')).toHaveText('You did it!'); -}) diff --git a/playwright.config.ts b/playwright.config.ts index 0b2730b..1d6127b 100644 --- a/playwright.config.ts +++ b/playwright.config.ts @@ -28,19 +28,21 @@ export default defineConfig({ /* Opt out of parallel tests on CI. */ workers: process.env.CI ? 1 : undefined, /* Reporter to use. See https://playwright.dev/docs/test-reporters */ - reporter: 'html', + reporter: 'list', /* Shared settings for all the projects below. See https://playwright.dev/docs/api/class-testoptions. */ use: { /* Maximum time each action such as `click()` can take. Defaults to 0 (no limit). */ actionTimeout: 0, /* Base URL to use in actions like `await page.goto('/')`. */ - baseURL: 'http://localhost:5173', + baseURL: 'http://localhost:5173/veggies/', /* Collect trace when retrying the failed test. See https://playwright.dev/docs/trace-viewer */ trace: 'on-first-retry', /* Only on CI systems run the tests headless */ headless: !!process.env.CI, + + testIdAttribute: 'data-test-id', }, /* Configure projects for major browsers */ @@ -58,39 +60,11 @@ export default defineConfig({ }, }, { - name: 'webkit', + name: 'Mobile Chrome', use: { - ...devices['Desktop Safari'], + ...devices['Pixel 5'], }, }, - - /* Test against mobile viewports. */ - // { - // name: 'Mobile Chrome', - // use: { - // ...devices['Pixel 5'], - // }, - // }, - // { - // name: 'Mobile Safari', - // use: { - // ...devices['iPhone 12'], - // }, - // }, - - /* Test against branded browsers. */ - // { - // name: 'Microsoft Edge', - // use: { - // channel: 'msedge', - // }, - // }, - // { - // name: 'Google Chrome', - // use: { - // channel: 'chrome', - // }, - // }, ], /* Folder for test artifacts such as screenshots, videos, traces, etc. */ diff --git a/src/components/HomeLocaleChanger.vue b/src/components/HomeLocaleChanger.vue index d6da62f..91104dc 100644 --- a/src/components/HomeLocaleChanger.vue +++ b/src/components/HomeLocaleChanger.vue @@ -18,6 +18,7 @@ const availableLocales = computed(() => {{ availableLocale }}
- +
{{ title }}
diff --git a/src/components/__tests__/ModalDialog.spec.ts b/src/components/__tests__/ModalDialog.spec.ts index 00baf12..9eec255 100644 --- a/src/components/__tests__/ModalDialog.spec.ts +++ b/src/components/__tests__/ModalDialog.spec.ts @@ -26,7 +26,7 @@ describe('ModalDialog', () => { }, }); expect(wrapper).toBeTruthy(); - expect(wrapper.find('.modal-dialog').exists()).toBe(false); + expect(wrapper.findByTestId('dialog').exists()).toBe(false); }); it('shows dialog', () => { @@ -37,8 +37,8 @@ describe('ModalDialog', () => { }, }); expect(wrapper.html()).toMatchSnapshot(); - expect(wrapper.find('.modal-dialog').exists()).toBe(true); - expect(wrapper.findByTestId('close-button').exists()).toBe(true); + expect(wrapper.findByTestId('dialog').exists()).toBe(true); + expect(wrapper.findByTestId('dialog-close-button').exists()).toBe(true); }); it('renders content', () => { @@ -54,7 +54,7 @@ describe('ModalDialog', () => { }); expect(wrapper.findByText('p', 'Test content').exists()).toBe(true); expect(wrapper.findByText('p', 'Test buttons').exists()).toBe(true); - expect(wrapper.findByTestId('close-button').exists()).toBe(false); + expect(wrapper.findByTestId('dialog-close-button').exists()).toBe(false); }); it('closes dialog on button click', async () => { @@ -64,7 +64,7 @@ describe('ModalDialog', () => { modelValue: true, }, }); - await wrapper.findByTestId('close-button').trigger('click'); + await wrapper.findByTestId('dialog-close-button').trigger('click'); expect(wrapper.emitted('update:modelValue')).toEqual([[false]]); }); }); diff --git a/src/components/__tests__/__snapshots__/HomeView.spec.ts.snap b/src/components/__tests__/__snapshots__/HomeView.spec.ts.snap index 90e917d..0c13238 100644 --- a/src/components/__tests__/__snapshots__/HomeView.spec.ts.snap +++ b/src/components/__tests__/__snapshots__/HomeView.spec.ts.snap @@ -4,14 +4,14 @@ exports[`HomeView > renders 1`] = ` "

Eat Your Veggies

Adopt a healthy lifestyle by eating 30 plant-based ingredients each week. Track your progress easily with this free app.

-
diff --git a/src/components/__tests__/__snapshots__/ModalDialog.spec.ts.snap b/src/components/__tests__/__snapshots__/ModalDialog.spec.ts.snap index 5914a86..90d1bac 100644 --- a/src/components/__tests__/__snapshots__/ModalDialog.spec.ts.snap +++ b/src/components/__tests__/__snapshots__/ModalDialog.spec.ts.snap @@ -5,9 +5,9 @@ exports[`ModalDialog > shows dialog 1`] = `
-
+
-
diff --git a/src/views/HomeView.vue b/src/views/HomeView.vue index 0340dd3..1f2d0e3 100644 --- a/src/views/HomeView.vue +++ b/src/views/HomeView.vue @@ -26,8 +26,12 @@ const start = () => { {{ $t('home.callout') }}

- {{ $t('home.info') }} - {{ $t('general.start') }} + {{ + $t('home.info') + }} + {{ + $t('general.start') + }}