Add initial playwright tests

ajuvonen · Sep 13, 2024 · e52127b · e52127b
1 parent cf0c8e5
commit e52127b
Show file tree

Hide file tree

Showing 10 changed files with 63 additions and 54 deletions.
diff --git 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
@@ -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
diff --git 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
@@ -18,6 +18,7 @@ const availableLocales = computed(() =>
     <ButtonComponent
       v-for="availableLocale in availableLocales"
       :key="availableLocale"
+      :data-test-id="`home-locale-button-${availableLocale}`"
       variant="text"
       @click="settings.locale = availableLocale"
       >{{ availableLocale }}</ButtonComponent

diff --git a/src/components/ModalDialog.vue b/src/components/ModalDialog.vue
@@ -22,7 +22,7 @@ defineProps<{
       <div class="modal-dialog__backdrop" aria-hidden="true" />
       <!-- Full-screen container to center the panel -->
       <div class="modal-dialog__container">
-        <DialogPanel class="modal-dialog">
+        <DialogPanel data-test-id="dialog" class="modal-dialog">
           <div class="flex-container items-center justify-between outline-override">
             <DialogTitle as="h2" class="modal-dialog__title">{{ title }}</DialogTitle>
             <ButtonComponent
@@ -31,7 +31,7 @@ defineProps<{
               class="fill-slate-700"
               variant="text"
               icon="close"
-              data-test-id="close-button"
+              data-test-id="dialog-close-button"
               @click="model = false"
             />
           </div>

diff --git 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
@@ -4,14 +4,14 @@ exports[`HomeView > renders 1`] = `
 "<div data-v-b4e148ca="" class="home__container">
   <div data-v-ab65777b="" data-v-b4e148ca="" class="locale-changer__container"><svg data-v-ab65777b="" viewBox="0 0 24 24" aria-hidden="true" style="width: 1.25rem; height: 1.25rem;">
       <path d="M17.9,17.39C17.64,16.59 16.89,16 16,16H15V13A1,1 0 0,0 14,12H8V10H10A1,1 0 0,0 11,9V7H13A2,2 0 0,0 15,5V4.59C17.93,5.77 20,8.64 20,12C20,14.08 19.2,15.97 17.9,17.39M11,19.93C7.05,19.44 4,16.08 4,12C4,11.38 4.08,10.78 4.21,10.21L9,15V16A2,2 0 0,0 11,18M12,2A10,10 0 0,0 2,12A10,10 0 0,0 12,22A10,10 0 0,0 22,12A10,10 0 0,0 12,2Z" class="transition-all"></path>
-    </svg><button data-v-24e38f3d="" data-v-ab65777b="" class="button button--text">
+    </svg><button data-v-24e38f3d="" data-v-ab65777b="" class="button button--text" data-test-id="home-locale-button-fi">
       <!--v-if-->fi
     </button></div>
   <h1 data-v-b4e148ca="" class="home__title">Eat Your Veggies</h1>
   <p data-v-b4e148ca="" class="sm:text-center">Adopt a healthy lifestyle by eating 30 plant-based ingredients each week. Track your progress easily with this free app.</p>
-  <div data-v-b4e148ca="" class="flex-container justify-center"><button data-v-24e38f3d="" data-v-b4e148ca="" class="button button--primary">
+  <div data-v-b4e148ca="" class="flex-container justify-center"><button data-v-24e38f3d="" data-v-b4e148ca="" class="button button--primary" data-test-id="home-info-button">
       <!--v-if-->Learn more
-    </button><button data-v-24e38f3d="" data-v-b4e148ca="" class="button button--primary">
+    </button><button data-v-24e38f3d="" data-v-b4e148ca="" class="button button--primary" data-test-id="home-start-button">
       <!--v-if-->Start
     </button></div>
   <!---->

diff --git 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`] = `
   <!-- The backdrop, rendered as a fixed sibling to the panel container -->
   <div data-v-0f2dec55="" class="modal-dialog__backdrop" aria-hidden="true"></div><!-- Full-screen container to center the panel -->
   <div data-v-0f2dec55="" class="modal-dialog__container">
-    <div data-v-0f2dec55="" class="modal-dialog">
+    <div data-v-0f2dec55="" data-test-id="dialog" class="modal-dialog">
       <div data-v-0f2dec55="" class="flex-container items-center justify-between outline-override">
-        <dialog-title-stub data-v-0f2dec55="" as="h2" class="modal-dialog__title"></dialog-title-stub><button data-v-24e38f3d="" data-v-0f2dec55="" class="button button--text fill-slate-700" aria-label="Close" data-test-id="close-button"><svg data-v-24e38f3d="" viewBox="0 0 24 24" aria-hidden="true" style="width: 1.25rem; height: 1.25rem;">
+        <dialog-title-stub data-v-0f2dec55="" as="h2" class="modal-dialog__title"></dialog-title-stub><button data-v-24e38f3d="" data-v-0f2dec55="" class="button button--text fill-slate-700" aria-label="Close" data-test-id="dialog-close-button"><svg data-v-24e38f3d="" viewBox="0 0 24 24" aria-hidden="true" style="width: 1.25rem; height: 1.25rem;">
             <path d="M19,6.41L17.59,5L12,10.59L6.41,5L5,6.41L10.59,12L5,17.59L6.41,19L12,13.41L17.59,19L19,17.59L13.41,12L19,6.41Z" class="transition-all"></path>
           </svg></button>
       </div>

diff --git a/src/views/HomeView.vue b/src/views/HomeView.vue
@@ -26,8 +26,12 @@ const start = () => {
       {{ $t('home.callout') }}
     </p>
     <div class="flex-container justify-center">
-      <ButtonComponent @click="dialogOpen = true">{{ $t('home.info') }}</ButtonComponent>
-      <ButtonComponent @click="start()">{{ $t('general.start') }}</ButtonComponent>
+      <ButtonComponent data-test-id="home-info-button" @click="dialogOpen = true">{{
+        $t('home.info')
+      }}</ButtonComponent>
+      <ButtonComponent data-test-id="home-start-button" @click="start()">{{
+        $t('general.start')
+      }}</ButtonComponent>
     </div>
     <ModalDialog v-model="dialogOpen" :title="$t('home.infoTitle')">
       <template #content>