Add tests for stats view

ajuvonen · Sep 17, 2024 · 7f8f66d · 7f8f66d
1 parent 771783d
commit 7f8f66d
Show file tree

Hide file tree

Showing 9 changed files with 123 additions and 24 deletions.
diff --git a/e2e/log.spec.ts b/e2e/log.spec.ts
@@ -19,8 +19,8 @@ test('logs veggies', async ({page}) => {
   }
 
   await expect(page.getByTestId('toast-message')).toBeHidden();
-  await page.getByTestId('navbar-settings-link').click();
-  await page.getByTestId('navbar-log-link').click();
+  await page.getByTestId('navbar-link-settings').click();
+  await page.getByTestId('navbar-link-log').click();
   await expect(page.getByTestId('category-status-center-label')).toHaveText('This Week 2 Veggies');
 });
 

diff --git a/e2e/settings.spec.ts b/e2e/settings.spec.ts
@@ -3,11 +3,11 @@ import {test, expect} from '@playwright/test';
 test('locale settings work', async ({page}) => {
   await page.goto('/');
   await page.getByTestId('home-start-button').click();
-  await page.getByTestId('navbar-settings-link').click();
+  await page.getByTestId('navbar-link-settings').click();
   await expect(page).toHaveURL('settings');
   await page.getByTestId('locale-button-fi').click();
   await expect(page.getByText('Tyhjennä')).toBeVisible();
-  await page.getByTestId('navbar-log-link').click();
+  await page.getByTestId('navbar-link-log').click();
   await expect(page.getByTestId('veggie-search-input')).toHaveAttribute(
     'placeholder',
     'Etsi kasviksia',
@@ -17,7 +17,7 @@ test('locale settings work', async ({page}) => {
 test('reset works', async ({page}) => {
   await page.goto('/');
   await page.getByTestId('home-start-button').click();
-  await page.getByTestId('navbar-settings-link').click();
+  await page.getByTestId('navbar-link-settings').click();
   await page.getByTestId('locale-button-fi').click();
   await page.getByTestId('reset-button').click();
   await page.getByTestId('confirm-button').click();
@@ -28,7 +28,7 @@ test('reset works', async ({page}) => {
 test('q&a works', async ({page}) => {
   await page.goto('/');
   await page.getByTestId('home-start-button').click();
-  await page.getByTestId('navbar-settings-link').click();
+  await page.getByTestId('navbar-link-settings').click();
   await page.getByTestId('qa-button-appPurpose').click();
   await page.getByTestId('qa-button-contact').click();
   await expect(page.getByTestId('qa-panel-appPurpose')).toBeVisible();

diff --git a/e2e/stats.spec.ts b/e2e/stats.spec.ts
@@ -0,0 +1,73 @@
+import {test, expect} from '@playwright/test';
+
+test("shows current week's veggies", async ({page}) => {
+  await page.goto('/');
+  await page.getByTestId('home-start-button').click();
+  await page.getByTestId('veggie-search-button').click();
+  await page.getByText(/^apple$/).click();
+  await page.getByText('Apricot').click();
+  await page.getByText('Avocado').click();
+  const elements = await page.getByTestId('toast-message').all();
+  for (const element of elements) {
+    await element.click();
+  }
+  await page.getByTestId('navbar-link-stats').click();
+  await expect(page.getByTestId('tag-apple')).toBeVisible();
+  await expect(page.getByTestId('tag-apricot')).toBeVisible();
+  await expect(page.getByTestId('tag-avocado')).toBeVisible();
+  await page.getByTestId('tag-apple').click();
+  await page.getByTestId('tag-apricot').click();
+  await expect(page.getByTestId('tag-apple')).toBeHidden();
+  await expect(page.getByTestId('tag-apricot')).toBeHidden();
+  await page.getByTestId('navbar-link-log').click();
+  await expect(page.getByTestId('category-status-center-label')).toHaveText('This Week 1 Veggies');
+});
+
+test('shows last five weeks', async ({page}) => {
+  await page.goto('/');
+  await page.getByTestId('home-start-button').click();
+  await page.getByTestId('veggie-search-button').click();
+  await page.getByText('Apricot').click();
+  await page.goto('stats');
+  await page.getByTestId('stats-dropdown-button').click();
+  await page.getByTestId('stats-dropdown-option-1').click();
+  await expect(page.getByTestId('weekly-amounts-chart')).toBeVisible();
+  await expect(page.getByTestId('weekly-categories-chart')).toBeVisible();
+  await expect(page.locator('#weekly-amounts-chart-table')).toBeAttached();
+  await expect(page.locator('#weekly-categories-chart-table')).toBeAttached();
+});
+
+test('shows all time stats', async ({page}) => {
+  await page.goto('/');
+  await page.getByTestId('home-start-button').click();
+  await page.getByTestId('veggie-search-button').click();
+  await page.getByText('Apricot').click();
+  await page.getByText('Avocado').click();
+  await page.goto('stats');
+  await page.getByTestId('stats-dropdown-button').click();
+  await page.getByTestId('stats-dropdown-option-2').click();
+  await expect(page.getByTestId('all-time-weeks')).toHaveText('In Total 1 Weeks');
+  await expect(page.getByTestId('all-time-over-30')).toHaveText('Over 30 Veggies in 0 Weeks');
+  await expect(page.getByTestId('all-time-unique')).toHaveText('In Total 2 Unique Veggies');
+  await expect(page.getByTestId('all-time-at-most')).toHaveText('At Most 2 Veggies in a Week');
+});
+
+test('shows achievements', 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 page.getByTestId('dialog-close-button').click();
+  await page.goto('stats');
+  await page.getByTestId('stats-dropdown-button').click();
+  await page.getByTestId('stats-dropdown-option-3').click();
+  await expect(page.getByTestId('badge-experimenterFruit-3')).toHaveAttribute(
+    'aria-disabled',
+    'false',
+  );
+});
diff --git a/src/components/AllTimeStatus.vue b/src/components/AllTimeStatus.vue
@@ -16,26 +16,46 @@ const atMostVeggies = computed(() =>
 </script>
 <template>
   <div class="chart-background status__container">
-    <div class="status__item">
+    <i18n-t
+      keypath="categoryStatus.centerLabel"
+      tag="div"
+      class="status__item"
+      data-test-id="all-time-weeks"
+    >
       <span>{{ $t('stats.grid1.topLabel') }}</span>
       <span class="text-5xl">{{ getTotalWeeks }}</span>
       <span>{{ $t('stats.grid1.bottomLabel') }}</span>
-    </div>
-    <div class="status__item">
+    </i18n-t>
+    <i18n-t
+      keypath="categoryStatus.centerLabel"
+      tag="div"
+      class="status__item"
+      data-test-id="all-time-over-30"
+    >
       <span>{{ $t('stats.grid2.topLabel') }}</span>
       <span class="text-5xl">{{ over30Veggies }}</span>
       <span>{{ $t('stats.grid2.bottomLabel') }}</span>
-    </div>
-    <div class="status__item">
+    </i18n-t>
+    <i18n-t
+      keypath="categoryStatus.centerLabel"
+      tag="div"
+      class="status__item"
+      data-test-id="all-time-unique"
+    >
       <span>{{ $t('stats.grid3.topLabel') }}</span>
       <span class="text-5xl">{{ uniqueVeggies.length }}</span>
       <span>{{ $t('stats.grid3.bottomLabel') }}</span>
-    </div>
-    <div class="status__item">
+    </i18n-t>
+    <i18n-t
+      keypath="categoryStatus.centerLabel"
+      tag="div"
+      class="status__item"
+      data-test-id="all-time-at-most"
+    >
       <span>{{ $t('stats.grid4.topLabel') }}</span>
       <span class="text-5xl">{{ atMostVeggies }}</span>
       <span>{{ $t('stats.grid4.bottomLabel') }}</span>
-    </div>
+    </i18n-t>
   </div>
 </template>
 <style lang="scss" scoped>

diff --git a/src/components/NavBar.vue b/src/components/NavBar.vue
@@ -10,7 +10,7 @@ defineProps<{
       :aria-label="$t('views.log')"
       to="/log"
       class="nav__link nav__link--log"
-      data-test-id="navbar-log-link"
+      data-test-id="navbar-link-log"
       >{{ $t('general.appTitle') }}</RouterLink
     >
     <div class="flex-container">
@@ -20,7 +20,7 @@ defineProps<{
         :aria-label="$t('views.stats')"
         to="/stats"
         class="nav__link"
-        data-test-id="navbar-stats-link"
+        data-test-id="navbar-link-stats"
       >
         <IconComponent icon="chart" size="6vw" class="nav__link-icon" />
       </RouterLink>
@@ -29,7 +29,7 @@ defineProps<{
         :aria-label="$t('views.settings')"
         to="/settings"
         class="nav__link"
-        data-test-id="navbar-settings-link"
+        data-test-id="navbar-link-settings"
       >
         <IconComponent icon="cog" size="6vw" class="nav__link-icon" />
       </RouterLink>

diff --git a/src/components/TagsComponent.vue b/src/components/TagsComponent.vue
@@ -34,7 +34,12 @@ const translatedVeggies = computed(() => {
 </script>
 <template>
   <TransitionGroup name="tags" tag="ul" class="tags__container">
-    <li v-for="{veggie, translation} in translatedVeggies" :key="veggie" class="tags__tag">
+    <li
+      v-for="{veggie, translation} in translatedVeggies"
+      :key="veggie"
+      :data-test-id="`tag-${veggie}`"
+      class="tags__tag"
+    >
       <ButtonComponent
         :aria-label="$t(ariaKey, [translation])"
         :variant="variant"

diff --git a/src/components/__tests__/__snapshots__/LogView.spec.ts.snap b/src/components/__tests__/__snapshots__/LogView.spec.ts.snap
@@ -44,12 +44,12 @@ exports[`LogView > renders with data 1`] = `
   <h1 data-v-8e44268d="" class="category-status__center-label" data-test-id="category-status-center-label"><span data-v-8e44268d="">This Week</span> <span data-v-8e44268d="" class="text-6xl">1</span> <span data-v-8e44268d="">Veggies</span></h1>
 </div>
 <transition-group-stub data-v-cd627eac="" name="tags" tag="ul" appear="false" persisted="false" css="true" class="tags__container">
-  <li data-v-cd627eac="" class="tags__tag"><button data-v-24e38f3d="" data-v-cd627eac="" class="button button--tag button--primary" aria-label="Add rice">
+  <li data-v-cd627eac="" data-test-id="tag-rice" class="tags__tag"><button data-v-24e38f3d="" data-v-cd627eac="" class="button button--tag button--primary" aria-label="Add rice">
       <!--v-if--><svg data-v-cd627eac="" viewBox="0 0 24 24" aria-hidden="true" style="width: 1.25rem; height: 1.25rem;">
         <path d="M19,13H13V19H11V13H5V11H11V5H13V11H19V13Z" class="transition-all"></path>
       </svg> rice
     </button></li>
-  <li data-v-cd627eac="" class="tags__tag"><button data-v-24e38f3d="" data-v-cd627eac="" class="button button--tag button--primary" aria-label="Add rye">
+  <li data-v-cd627eac="" data-test-id="tag-rye" class="tags__tag"><button data-v-24e38f3d="" data-v-cd627eac="" class="button button--tag button--primary" aria-label="Add rye">
       <!--v-if--><svg data-v-cd627eac="" viewBox="0 0 24 24" aria-hidden="true" style="width: 1.25rem; height: 1.25rem;">
         <path d="M19,13H13V19H11V13H5V11H11V5H13V11H19V13Z" class="transition-all"></path>
       </svg> rye

diff --git a/src/i18n/en.json b/src/i18n/en.json
@@ -189,7 +189,7 @@
       "bottomLabel": "Unique Veggies"
     },
     "grid4": {
-      "topLabel": "At most",
+      "topLabel": "At Most",
       "bottomLabel": "Veggies in a Week"
     },
     "week": "Wk {0}",

diff --git a/src/views/StatsView.vue b/src/views/StatsView.vue
@@ -32,7 +32,7 @@ const getOptionClasses = useMemoize((active: boolean, selected: boolean) => {
   <Listbox v-model="selectedStat" class="relative z-10" as="div" v-slot="{open}">
     <div class="flex-container flex-col">
       <ListboxLabel class="label-like">{{ $t('stats.chosenStats') }}</ListboxLabel>
-      <ListboxButton class="stats__list-box-button">
+      <ListboxButton class="stats__list-box-button" data-test-id="stats-dropdown-button">
         <span class="truncate">{{ $t(`stats.${selectedStat}`) }}</span>
         <IconComponent :class="open ? 'rotate-180 transform' : ''" icon="chevron" />
       </ListboxButton>
@@ -44,11 +44,12 @@ const getOptionClasses = useMemoize((active: boolean, selected: boolean) => {
     >
       <ListboxOptions class="stats__list-box-options">
         <ListboxOption
-          v-slot="{active, selected}"
-          as="template"
           v-for="item in [0, 1, 2, 3]"
+          v-slot="{active, selected}"
           :key="item"
           :value="item"
+          :data-test-id="`stats-dropdown-option-${item}`"
+          as="template"
         >
           <li
             :class="[getOptionClasses(active, selected), 'stats__list-box-option']"