Add tests for log view

e2e/log.spec.ts

@@ -0,0 +1,69 @@
+import {test, expect} from '@playwright/test';
+
+// See here how to get started:
+// https://playwright.dev/docs/intro
+test('logs veggies', async ({page}) => {
+  await page.goto('/');
+  await page.getByTestId('home-start-button').click();
+  await page.getByTestId('veggie-search-button').click();
+  await expect(page.getByTestId('veggie-search-options')).toBeVisible();
+  await page.getByTestId('veggie-search-option-apple').click();
+  await expect(page.getByText(/^First veggie added!/)).toBeVisible();
+  await expect(page.getByTestId('category-status-center-label')).toHaveText('This Week 1 Veggies');
+  await page.getByTestId('veggie-search-option-apricot').click();
+  await expect(page.getByTestId('category-status-center-label')).toHaveText('This Week 2 Veggies');
+
+  const elements = await page.getByTestId('toast-message').all();
+  for (const element of elements) {
+    await element.click();
+  }
+
+  await expect(page.getByTestId('toast-message')).toBeHidden();
+  await page.getByTestId('navbar-settings-link').click();
+  await page.getByTestId('navbar-log-link').click();
+  await expect(page.getByTestId('category-status-center-label')).toHaveText('This Week 2 Veggies');
+});
+
+test('filters veggies', async ({page}) => {
+  await page.goto('/');
+  await page.getByTestId('home-start-button').click();
+  await page.getByTestId('veggie-search-input').fill('cher');
+  await expect(page.getByTestId('veggie-search-option-cherry')).toBeVisible();
+  await expect(page.getByTestId('veggie-search-option-cherry tomato')).toBeVisible();
+});
+
+test('filters veggies in Finnish', async ({page}) => {
+  await page.goto('/');
+  await page.getByTestId('home-locale-button-fi').click();
+  await page.getByTestId('home-start-button').click();
+  await page.getByTestId('veggie-search-input').fill('kirsi');
+  await expect(page.getByTestId('veggie-search-option-cherry')).toBeVisible();
+  await expect(page.getByTestId('veggie-search-option-cherry tomato')).toBeVisible();
+});
+
+test('weekly challenges work', async ({page}) => {
+  await page.goto('/');
+  await page.getByTestId('home-start-button').click();
+  await page.getByTestId('veggie-search-button').click();
+  await expect(page.getByTestId('veggie-search-challenges')).toBeHidden();
+  await page.getByTestId('veggie-search-option-apple').click();
+  await expect(page.getByTestId('veggie-search-challenge')).toBeVisible();
+  await page.getByTestId('veggie-search-challenge').click();
+  await expect(page.getByText(/^You have completed your weekly challenge!/)).toBeVisible();
+});
+
+test('achievement notifications work', async ({page}) => {
+  await page.goto('/');
+  await page.getByTestId('home-start-button').click();
+  await page.getByTestId('veggie-search-button').click();
+  const elements = (
+    await page.getByTestId('veggie-search-group-Fruit').locator('.veggie-search__option').all()
+  ).slice(0, 15);
+  for (const element of elements) {
+    await element.click();
+  }
+  await expect(page.getByTestId('dialog')).toBeVisible();
+  await expect(page.getByTestId('badge-experimenterFruit-3')).toBeVisible();
+  await page.getByTestId('dialog-close-button').click();
+  await expect(page.getByTestId('dialog')).toBeHidden();
+});

src/components/AchievementBadge.vue

@@ -125,6 +125,7 @@ const achievementProps: AchievementProps = {
     :aria-label="
       $t(`achievements.${achievement}.ariaLabel`, achievementProps[achievement][level]!.textProps)
     "
+    :data-test-id="`badge-${achievement}-${level}`"
     class="badge"
     role="img"
   >

src/components/CategoryStatus.vue

@@ -19,6 +19,7 @@ withDefaults(
       keypath="categoryStatus.centerLabel"
       tag="h1"
       class="category-status__center-label"
+      data-test-id="category-status-center-label"
     >
       <span>{{ $t(totals ? 'categoryStatus.topLabelTotal' : 'categoryStatus.topLabel') }}</span>
       <span :class="totals ? 'text-5xl' : 'text-6xl'">{{ veggies.length }}</span>

src/components/NavBar.vue

@@ -6,24 +6,30 @@ defineProps<{
 </script>
 <template>
   <nav class="nav">
-    <RouterLink to="/log" class="nav__link nav__link--log" :aria-label="$t('views.log')">{{
-      $t('general.appTitle')
-    }}</RouterLink>
+    <RouterLink
+      :aria-label="$t('views.log')"
+      to="/log"
+      class="nav__link nav__link--log"
+      data-test-id="navbar-log-link"
+      >{{ $t('general.appTitle') }}</RouterLink
+    >
     <div class="flex-container">
       <RouterLink
         v-if="showStats"
-        class="nav__link"
-        to="/stats"
         :title="$t('views.stats')"
         :aria-label="$t('views.stats')"
+        to="/stats"
+        class="nav__link"
+        data-test-id="navbar-stats-link"
       >
         <IconComponent icon="chart" size="6vw" class="nav__link-icon" />
       </RouterLink>
       <RouterLink
-        class="nav__link"
-        to="/settings"
         :title="$t('views.settings')"
         :aria-label="$t('views.settings')"
+        to="/settings"
+        class="nav__link"
+        data-test-id="navbar-settings-link"
       >
         <IconComponent icon="cog" size="6vw" class="nav__link-icon" />
       </RouterLink>

src/components/ToastMessage.vue

@@ -64,7 +64,12 @@ const veggieEmojis = [
 const emoji = veggieEmojis[Math.floor(Math.random() * veggieEmojis.length)];
 </script>
 <template>
-  <div ref="toastMessage" class="toast-message" @click="$emit('close')">
+  <div
+    ref="toastMessage"
+    class="toast-message"
+    data-test-id="toast-message"
+    @click="$emit('close')"
+  >
     <div class="toast-message__content">
       <span class="text-2xl" aria-hidden="true">
         {{ emoji }}

src/components/VeggieSearch.vue

@@ -94,24 +94,26 @@ provide(KEYS.dropdownOptions, dropdownOptions);
 </script>
 <template>
   <Combobox
+    v-model="model"
+    v-slot="{open}"
     nullable
     multiple
-    v-model="model"
     as="div"
     class="relative h-12 z-20"
-    v-slot="{open}"
     @touchstart="touching = true"
   >
     <ComboboxInput
       :aria-label="$t('veggieSearch.search')"
       :placeholder="$t('veggieSearch.search')"
       class="veggie-search__input"
+      data-test-id="veggie-search-input"
       @change="query = $event.target.value"
     />
     <ComboboxButton
       ref="openButton"
       :class="open ? 'rotate-180 transform' : ''"
       class="veggie-search__button"
+      data-test-id="veggie-search-button"
     >
       <IconComponent icon="chevron" aria-hidden="true" />
     </ComboboxButton>
@@ -126,6 +128,7 @@ provide(KEYS.dropdownOptions, dropdownOptions);
         ref="optionsElement"
         :style="availableHeightForOptions"
         class="veggie-search__options"
+        data-test-id="veggie-search-options"
       >
         <li v-if="filteredVeggies().length === 0 && query !== ''" class="veggie-search__no-results">
           {{ $t('veggieSearch.noResults') }}

src/components/VeggieSearchChallenge.vue

@@ -7,12 +7,12 @@ const challenge = inject(KEYS.challenge);
 </script>
 
 <template>
-  <li v-if="challenge">
+  <li v-if="challenge" data-test-id="veggie-search-challenge">
     <div id="veggie-search-heading-challenge" class="veggie-search__heading">
       <span aria-hidden="true">🎖️</span>
       <span>{{ $t('veggieSearch.challenge') }}</span>
     </div>
-    <ul role="group" :aria-labelledby="'veggie-search-heading-challenge'">
+    <ul :aria-labelledby="'veggie-search-heading-challenge'" role="group">
       <VeggieSearchOption :veggie="challenge" />
     </ul>
   </li>

src/components/VeggieSearchGroup.vue

@@ -10,12 +10,12 @@ defineProps<{
 </script>
 
 <template>
-  <li v-if="items.length">
+  <li v-if="items.length" :data-test-id="`veggie-search-group-${category}`">
     <div :id="`veggie-search-heading-${category}`" class="veggie-search__heading">
       <span aria-hidden="true">{{ CATEGORY_EMOJI[category] }}</span>
       <span>{{ $t(`categories.${category}`) }} ({{ items.length }})</span>
     </div>
-    <ul role="group" :aria-labelledby="`veggie-search-heading-${category}`">
+    <ul :aria-labelledby="`veggie-search-heading-${category}`" role="group">
       <VeggieSearchOption
         v-for="{veggie, translation} in items"
         :key="veggie"

src/components/VeggieSearchOption.vue

@@ -11,7 +11,11 @@ const dropdownOptions = inject(KEYS.dropdownOptions)!;
 </script>
 <template>
   <ComboboxOption v-slot="{active, selected}" as="template" :key="veggie" :value="veggie">
-    <li :class="[dropdownOptions(active, selected), 'veggie-search__option']" role="menuitem">
+    <li
+      :class="[dropdownOptions(active, selected), 'veggie-search__option']"
+      role="menuitem"
+      :data-test-id="`veggie-search-option-${veggie}`"
+    >
       <span>
         {{ translation || $t(`veggies.${veggie}`) }}
       </span>

src/components/__tests__/VeggieSearch.spec.ts

@@ -24,33 +24,33 @@ describe('VeggieSearch', () => {
 
   it('filters veggies', async () => {
     const wrapper = mounter();
-    const input = wrapper.find('.veggie-search__input');
+    const input = wrapper.findByTestId('veggie-search-input');
     await input.setValue('tomato');
-    expect(wrapper.find('.veggie-search__options').isVisible()).toBe(true);
+    expect(wrapper.findByTestId('veggie-search-options').isVisible()).toBe(true);
     expect(wrapper.findAll('.veggie-search__heading').length).toBe(1);
     expect(wrapper.find('.veggie-search__option').text()).toContain('tomato');
     expect(wrapper.find('#veggie-search-heading-challenge').exists()).toBe(false);
   });
 
   it('shows all categories with matches', async () => {
     const wrapper = mounter();
-    const input = wrapper.find('.veggie-search__input');
+    const input = wrapper.findByTestId('veggie-search-input');
     await input.setValue('bar');
     expect(wrapper.findAll('.veggie-search__option').length).toBe(2);
     expect(wrapper.findAll('.veggie-search__heading').length).toBe(2);
   });
 
   it('displays no results', async () => {
     const wrapper = mounter();
-    const input = wrapper.find('.veggie-search__input');
+    const input = wrapper.findByTestId('veggie-search-input');
     await input.setValue('test');
     expect(wrapper.find('.veggie-search__option').exists()).toBe(false);
     expect(wrapper.find('.veggie-search__no-results').isVisible()).toBe(true);
   });
 
   it('shows selection', async () => {
     const wrapper = mounter(['tomato']);
-    const input = wrapper.find('.veggie-search__input');
+    const input = wrapper.findByTestId('veggie-search-input');
     await input.setValue('om');
     const listItem = wrapper.findByText('li', 'tomato');
     const notSelected = wrapper.findByText('li', 'pomelo');
@@ -60,14 +60,14 @@ describe('VeggieSearch', () => {
 
   it('shows list on button click', async () => {
     const wrapper = mounter();
-    await wrapper.find('.veggie-search__button').trigger('click');
-    expect(wrapper.find('.veggie-search__options').isVisible()).toBe(true);
+    await wrapper.findByTestId('veggie-search-button').trigger('click');
+    expect(wrapper.findByTestId('veggie-search-options').isVisible()).toBe(true);
     expect(wrapper.find('#veggie-search-heading-challenge').exists()).toBe(false);
   });
 
   it('shows challenge if available', async () => {
     const wrapper = mounter([], 'raspberry');
-    await wrapper.find('.veggie-search__button').trigger('click');
+    await wrapper.findByTestId('veggie-search-button').trigger('click');
     expect(wrapper.find('#veggie-search-heading-challenge').exists()).toBe(true);
   });
 });

src/components/__tests__/__snapshots__/AchievementBadge.spec.ts.snap

@@ -1,7 +1,7 @@
 // Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
 
 exports[`AchievementBadge > renders active 1`] = `
-"<div data-v-06381b3c="" aria-disabled="false" title="150 unique veggies" aria-label="150 unique veggies" class="badge" role="img">
+"<div data-v-06381b3c="" aria-disabled="false" title="150 unique veggies" aria-label="150 unique veggies" data-test-id="badge-completionist-3" class="badge" role="img">
   <div data-v-06381b3c="" class="badge__background badge__background--Gold" aria-hidden="true">
     <div data-v-06381b3c="" class="badge__emoji">🦅</div>
   </div>
@@ -10,7 +10,7 @@ exports[`AchievementBadge > renders active 1`] = `
 `;
 
 exports[`AchievementBadge > renders inactive 1`] = `
-"<div data-v-06381b3c="" aria-disabled="true" title="10 week streak of over 30 veggies" aria-label="10 week streak of over 30 veggies" class="badge" role="img">
+"<div data-v-06381b3c="" aria-disabled="true" title="10 week streak of over 30 veggies" aria-label="10 week streak of over 30 veggies" data-test-id="badge-hotStreak-2" class="badge" role="img">
   <div data-v-06381b3c="" class="badge__background badge__background--Silver" aria-hidden="true">
     <div data-v-06381b3c="" class="badge__emoji">🔥</div>
   </div>