From 99a0f239cc730452f974590ddb404b2a3ae21010 Mon Sep 17 00:00:00 2001
From: Anssi Juvonen <anssi.juvonen@gofore.com>
Date: Mon, 16 Sep 2024 16:08:45 +0300
Subject: [PATCH] Add tests for log view

---
 e2e/log.spec.ts                               | 69 ++++++++++++++++++
 src/components/AchievementBadge.vue           |  1 +
 src/components/CategoryStatus.vue             |  1 +
 src/components/NavBar.vue                     | 20 ++++--
 src/components/ToastMessage.vue               |  7 +-
 src/components/VeggieSearch.vue               |  7 +-
 src/components/VeggieSearchChallenge.vue      |  4 +-
 src/components/VeggieSearchGroup.vue          |  4 +-
 src/components/VeggieSearchOption.vue         |  6 +-
 src/components/__tests__/VeggieSearch.spec.ts | 16 ++---
 .../AchievementBadge.spec.ts.snap             |  4 +-
 .../AchievementList.spec.ts.snap              | 72 +++++++++----------
 .../__snapshots__/LogView.spec.ts.snap        |  6 +-
 13 files changed, 153 insertions(+), 64 deletions(-)
 create mode 100644 e2e/log.spec.ts

diff --git a/e2e/log.spec.ts b/e2e/log.spec.ts
new file mode 100644
index 0000000..8710a48
--- /dev/null
+++ b/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();
+});
diff --git a/src/components/AchievementBadge.vue b/src/components/AchievementBadge.vue
index 0d81284..bd505b8 100644
--- a/src/components/AchievementBadge.vue
+++ b/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"
   >
diff --git a/src/components/CategoryStatus.vue b/src/components/CategoryStatus.vue
index 0c7571e..9f27f9c 100644
--- a/src/components/CategoryStatus.vue
+++ b/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>
diff --git a/src/components/NavBar.vue b/src/components/NavBar.vue
index 8c5da86..3ff67ef 100644
--- a/src/components/NavBar.vue
+++ b/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>
diff --git a/src/components/ToastMessage.vue b/src/components/ToastMessage.vue
index 14be327..a1397e7 100644
--- a/src/components/ToastMessage.vue
+++ b/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 }}
diff --git a/src/components/VeggieSearch.vue b/src/components/VeggieSearch.vue
index 1e3fffc..a466b61 100644
--- a/src/components/VeggieSearch.vue
+++ b/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') }}
diff --git a/src/components/VeggieSearchChallenge.vue b/src/components/VeggieSearchChallenge.vue
index 7c308c5..cd7b18c 100644
--- a/src/components/VeggieSearchChallenge.vue
+++ b/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>
diff --git a/src/components/VeggieSearchGroup.vue b/src/components/VeggieSearchGroup.vue
index 924f2fa..e7ea5a4 100644
--- a/src/components/VeggieSearchGroup.vue
+++ b/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"
diff --git a/src/components/VeggieSearchOption.vue b/src/components/VeggieSearchOption.vue
index 766e851..6a4e100 100644
--- a/src/components/VeggieSearchOption.vue
+++ b/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>
diff --git a/src/components/__tests__/VeggieSearch.spec.ts b/src/components/__tests__/VeggieSearch.spec.ts
index 96e9269..70508ae 100644
--- a/src/components/__tests__/VeggieSearch.spec.ts
+++ b/src/components/__tests__/VeggieSearch.spec.ts
@@ -24,9 +24,9 @@ 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);
@@ -34,7 +34,7 @@ describe('VeggieSearch', () => {
 
   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);
@@ -42,7 +42,7 @@ describe('VeggieSearch', () => {
 
   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);
@@ -50,7 +50,7 @@ describe('VeggieSearch', () => {
 
   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);
   });
 });
diff --git a/src/components/__tests__/__snapshots__/AchievementBadge.spec.ts.snap b/src/components/__tests__/__snapshots__/AchievementBadge.spec.ts.snap
index a9ff440..cdf74dc 100644
--- a/src/components/__tests__/__snapshots__/AchievementBadge.spec.ts.snap
+++ b/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>
diff --git a/src/components/__tests__/__snapshots__/AchievementList.spec.ts.snap b/src/components/__tests__/__snapshots__/AchievementList.spec.ts.snap
index 2451f58..f86c3e9 100644
--- a/src/components/__tests__/__snapshots__/AchievementList.spec.ts.snap
+++ b/src/components/__tests__/__snapshots__/AchievementList.spec.ts.snap
@@ -5,19 +5,19 @@ exports[`AchievementList > renders 1`] = `
   <div data-v-1c120264="">
     <p data-v-1c120264="" class="achievement-list__label">The Completionist</p>
     <div data-v-1c120264="" class="achievement-list__badge-container">
-      <div data-v-06381b3c="" data-v-1c120264="" aria-disabled="true" title="40 unique veggies" aria-label="40 unique veggies" class="badge" role="img">
+      <div data-v-06381b3c="" data-v-1c120264="" aria-disabled="true" title="40 unique veggies" aria-label="40 unique veggies" data-test-id="badge-completionist-1" class="badge" role="img">
         <div data-v-06381b3c="" class="badge__background badge__background--Bronze" aria-hidden="true">
           <div data-v-06381b3c="" class="badge__emoji">🐣</div>
         </div>
         <div data-v-06381b3c="" aria-hidden="true" class="badge__text">40 veggies</div>
       </div>
-      <div data-v-06381b3c="" data-v-1c120264="" aria-disabled="true" title="80 unique veggies" aria-label="80 unique veggies" class="badge" role="img">
+      <div data-v-06381b3c="" data-v-1c120264="" aria-disabled="true" title="80 unique veggies" aria-label="80 unique veggies" data-test-id="badge-completionist-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>
         <div data-v-06381b3c="" aria-hidden="true" class="badge__text">80 veggies</div>
       </div>
-      <div data-v-06381b3c="" data-v-1c120264="" aria-disabled="true" title="150 unique veggies" aria-label="150 unique veggies" class="badge" role="img">
+      <div data-v-06381b3c="" data-v-1c120264="" aria-disabled="true" 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>
@@ -28,19 +28,19 @@ exports[`AchievementList > renders 1`] = `
   <div data-v-1c120264="">
     <p data-v-1c120264="" class="achievement-list__label">Challenge Accepted</p>
     <div data-v-1c120264="" class="achievement-list__badge-container">
-      <div data-v-06381b3c="" data-v-1c120264="" aria-disabled="true" title="5 completed weekly challenges" aria-label="5 completed weekly challenges" class="badge" role="img">
+      <div data-v-06381b3c="" data-v-1c120264="" aria-disabled="true" title="5 completed weekly challenges" aria-label="5 completed weekly challenges" data-test-id="badge-challengeAccepted-1" class="badge" role="img">
         <div data-v-06381b3c="" class="badge__background badge__background--Bronze" aria-hidden="true">
           <div data-v-06381b3c="" class="badge__emoji">🛴</div>
         </div>
         <div data-v-06381b3c="" aria-hidden="true" class="badge__text">5 challenges</div>
       </div>
-      <div data-v-06381b3c="" data-v-1c120264="" aria-disabled="true" title="10 completed weekly challenges" aria-label="10 completed weekly challenges" class="badge" role="img">
+      <div data-v-06381b3c="" data-v-1c120264="" aria-disabled="true" title="10 completed weekly challenges" aria-label="10 completed weekly challenges" data-test-id="badge-challengeAccepted-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>
         <div data-v-06381b3c="" aria-hidden="true" class="badge__text">10 challenges</div>
       </div>
-      <div data-v-06381b3c="" data-v-1c120264="" aria-disabled="true" title="20 completed weekly challenges" aria-label="20 completed weekly challenges" class="badge" role="img">
+      <div data-v-06381b3c="" data-v-1c120264="" aria-disabled="true" title="20 completed weekly challenges" aria-label="20 completed weekly challenges" data-test-id="badge-challengeAccepted-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>
@@ -51,19 +51,19 @@ exports[`AchievementList > renders 1`] = `
   <div data-v-1c120264="">
     <p data-v-1c120264="" class="achievement-list__label">The Committed</p>
     <div data-v-1c120264="" class="achievement-list__badge-container">
-      <div data-v-06381b3c="" data-v-1c120264="" aria-disabled="true" title="3 months of active use" aria-label="3 months of active use" class="badge" role="img">
+      <div data-v-06381b3c="" data-v-1c120264="" aria-disabled="true" title="3 months of active use" aria-label="3 months of active use" data-test-id="badge-committed-1" class="badge" role="img">
         <div data-v-06381b3c="" class="badge__background badge__background--Bronze" aria-hidden="true">
           <div data-v-06381b3c="" class="badge__emoji">🌱</div>
         </div>
         <div data-v-06381b3c="" aria-hidden="true" class="badge__text">3 months</div>
       </div>
-      <div data-v-06381b3c="" data-v-1c120264="" aria-disabled="true" title="6 months of active use" aria-label="6 months of active use" class="badge" role="img">
+      <div data-v-06381b3c="" data-v-1c120264="" aria-disabled="true" title="6 months of active use" aria-label="6 months of active use" data-test-id="badge-committed-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>
         <div data-v-06381b3c="" aria-hidden="true" class="badge__text">6 months</div>
       </div>
-      <div data-v-06381b3c="" data-v-1c120264="" aria-disabled="true" title="12 months of active use" aria-label="12 months of active use" class="badge" role="img">
+      <div data-v-06381b3c="" data-v-1c120264="" aria-disabled="true" title="12 months of active use" aria-label="12 months of active use" data-test-id="badge-committed-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>
@@ -74,19 +74,19 @@ exports[`AchievementList > renders 1`] = `
   <div data-v-1c120264="">
     <p data-v-1c120264="" class="achievement-list__label">Hot Streak</p>
     <div data-v-1c120264="" class="achievement-list__badge-container">
-      <div data-v-06381b3c="" data-v-1c120264="" aria-disabled="true" title="5 week streak of over 30 veggies" aria-label="5 week streak of over 30 veggies" class="badge" role="img">
+      <div data-v-06381b3c="" data-v-1c120264="" aria-disabled="true" title="5 week streak of over 30 veggies" aria-label="5 week streak of over 30 veggies" data-test-id="badge-hotStreak-1" class="badge" role="img">
         <div data-v-06381b3c="" class="badge__background badge__background--Bronze" aria-hidden="true">
           <div data-v-06381b3c="" class="badge__emoji">🌶️</div>
         </div>
         <div data-v-06381b3c="" aria-hidden="true" class="badge__text">5 Weeks</div>
       </div>
-      <div data-v-06381b3c="" data-v-1c120264="" 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="" data-v-1c120264="" 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>
         <div data-v-06381b3c="" aria-hidden="true" class="badge__text">10 Weeks</div>
       </div>
-      <div data-v-06381b3c="" data-v-1c120264="" aria-disabled="true" title="20 week streak of over 30 veggies" aria-label="20 week streak of over 30 veggies" class="badge" role="img">
+      <div data-v-06381b3c="" data-v-1c120264="" aria-disabled="true" title="20 week streak of over 30 veggies" aria-label="20 week streak of over 30 veggies" data-test-id="badge-hotStreak-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>
@@ -97,37 +97,37 @@ exports[`AchievementList > renders 1`] = `
   <div data-v-1c120264="">
     <p data-v-1c120264="" class="achievement-list__label">The Experimenter</p>
     <div data-v-1c120264="" class="achievement-list__badge-container">
-      <div data-v-06381b3c="" data-v-1c120264="" aria-disabled="true" title="15 unique fruits and berries" aria-label="15 unique fruits and berries" class="badge" role="img">
+      <div data-v-06381b3c="" data-v-1c120264="" aria-disabled="true" title="15 unique fruits and berries" aria-label="15 unique fruits and berries" data-test-id="badge-experimenterFruit-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>
         <div data-v-06381b3c="" aria-hidden="true" class="badge__text">Fruits</div>
       </div>
-      <div data-v-06381b3c="" data-v-1c120264="" aria-disabled="true" title="15 unique vegetables" aria-label="15 unique vegetables" class="badge" role="img">
+      <div data-v-06381b3c="" data-v-1c120264="" aria-disabled="true" title="15 unique vegetables" aria-label="15 unique vegetables" data-test-id="badge-experimenterVegetable-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>
         <div data-v-06381b3c="" aria-hidden="true" class="badge__text">Vegetables</div>
       </div>
-      <div data-v-06381b3c="" data-v-1c120264="" aria-disabled="true" title="15 unique leafy greens" aria-label="15 unique leafy greens" class="badge" role="img">
+      <div data-v-06381b3c="" data-v-1c120264="" aria-disabled="true" title="15 unique leafy greens" aria-label="15 unique leafy greens" data-test-id="badge-experimenterLeafy-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>
         <div data-v-06381b3c="" aria-hidden="true" class="badge__text">Leafy Greens</div>
       </div>
-      <div data-v-06381b3c="" data-v-1c120264="" aria-disabled="true" title="15 unique roots and bulbs" aria-label="15 unique roots and bulbs" class="badge" role="img">
+      <div data-v-06381b3c="" data-v-1c120264="" aria-disabled="true" title="15 unique roots and bulbs" aria-label="15 unique roots and bulbs" data-test-id="badge-experimenterRoot-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>
         <div data-v-06381b3c="" aria-hidden="true" class="badge__text">Roots</div>
       </div>
-      <div data-v-06381b3c="" data-v-1c120264="" aria-disabled="true" title="15 unique beans and legumes" aria-label="15 unique beans and legumes" class="badge" role="img">
+      <div data-v-06381b3c="" data-v-1c120264="" aria-disabled="true" title="15 unique beans and legumes" aria-label="15 unique beans and legumes" data-test-id="badge-experimenterBean-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>
         <div data-v-06381b3c="" aria-hidden="true" class="badge__text">Beans</div>
       </div>
-      <div data-v-06381b3c="" data-v-1c120264="" aria-disabled="true" title="15 unique grains, nuts and seeds" aria-label="15 unique grains, nuts and seeds" class="badge" role="img">
+      <div data-v-06381b3c="" data-v-1c120264="" aria-disabled="true" title="15 unique grains, nuts and seeds" aria-label="15 unique grains, nuts and seeds" data-test-id="badge-experimenterGrain-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>
@@ -143,19 +143,19 @@ exports[`AchievementList > renders with badges enabled 1`] = `
   <div data-v-1c120264="">
     <p data-v-1c120264="" class="achievement-list__label">The Completionist</p>
     <div data-v-1c120264="" class="achievement-list__badge-container">
-      <div data-v-06381b3c="" data-v-1c120264="" aria-disabled="false" title="40 unique veggies" aria-label="40 unique veggies" class="badge" role="img">
+      <div data-v-06381b3c="" data-v-1c120264="" aria-disabled="false" title="40 unique veggies" aria-label="40 unique veggies" data-test-id="badge-completionist-1" class="badge" role="img">
         <div data-v-06381b3c="" class="badge__background badge__background--Bronze" aria-hidden="true">
           <div data-v-06381b3c="" class="badge__emoji">🐣</div>
         </div>
         <div data-v-06381b3c="" aria-hidden="true" class="badge__text">40 veggies</div>
       </div>
-      <div data-v-06381b3c="" data-v-1c120264="" aria-disabled="false" title="80 unique veggies" aria-label="80 unique veggies" class="badge" role="img">
+      <div data-v-06381b3c="" data-v-1c120264="" aria-disabled="false" title="80 unique veggies" aria-label="80 unique veggies" data-test-id="badge-completionist-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>
         <div data-v-06381b3c="" aria-hidden="true" class="badge__text">80 veggies</div>
       </div>
-      <div data-v-06381b3c="" data-v-1c120264="" aria-disabled="true" title="150 unique veggies" aria-label="150 unique veggies" class="badge" role="img">
+      <div data-v-06381b3c="" data-v-1c120264="" aria-disabled="true" 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>
@@ -166,19 +166,19 @@ exports[`AchievementList > renders with badges enabled 1`] = `
   <div data-v-1c120264="">
     <p data-v-1c120264="" class="achievement-list__label">Challenge Accepted</p>
     <div data-v-1c120264="" class="achievement-list__badge-container">
-      <div data-v-06381b3c="" data-v-1c120264="" aria-disabled="true" title="5 completed weekly challenges" aria-label="5 completed weekly challenges" class="badge" role="img">
+      <div data-v-06381b3c="" data-v-1c120264="" aria-disabled="true" title="5 completed weekly challenges" aria-label="5 completed weekly challenges" data-test-id="badge-challengeAccepted-1" class="badge" role="img">
         <div data-v-06381b3c="" class="badge__background badge__background--Bronze" aria-hidden="true">
           <div data-v-06381b3c="" class="badge__emoji">🛴</div>
         </div>
         <div data-v-06381b3c="" aria-hidden="true" class="badge__text">5 challenges</div>
       </div>
-      <div data-v-06381b3c="" data-v-1c120264="" aria-disabled="true" title="10 completed weekly challenges" aria-label="10 completed weekly challenges" class="badge" role="img">
+      <div data-v-06381b3c="" data-v-1c120264="" aria-disabled="true" title="10 completed weekly challenges" aria-label="10 completed weekly challenges" data-test-id="badge-challengeAccepted-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>
         <div data-v-06381b3c="" aria-hidden="true" class="badge__text">10 challenges</div>
       </div>
-      <div data-v-06381b3c="" data-v-1c120264="" aria-disabled="true" title="20 completed weekly challenges" aria-label="20 completed weekly challenges" class="badge" role="img">
+      <div data-v-06381b3c="" data-v-1c120264="" aria-disabled="true" title="20 completed weekly challenges" aria-label="20 completed weekly challenges" data-test-id="badge-challengeAccepted-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>
@@ -189,19 +189,19 @@ exports[`AchievementList > renders with badges enabled 1`] = `
   <div data-v-1c120264="">
     <p data-v-1c120264="" class="achievement-list__label">The Committed</p>
     <div data-v-1c120264="" class="achievement-list__badge-container">
-      <div data-v-06381b3c="" data-v-1c120264="" aria-disabled="true" title="3 months of active use" aria-label="3 months of active use" class="badge" role="img">
+      <div data-v-06381b3c="" data-v-1c120264="" aria-disabled="true" title="3 months of active use" aria-label="3 months of active use" data-test-id="badge-committed-1" class="badge" role="img">
         <div data-v-06381b3c="" class="badge__background badge__background--Bronze" aria-hidden="true">
           <div data-v-06381b3c="" class="badge__emoji">🌱</div>
         </div>
         <div data-v-06381b3c="" aria-hidden="true" class="badge__text">3 months</div>
       </div>
-      <div data-v-06381b3c="" data-v-1c120264="" aria-disabled="true" title="6 months of active use" aria-label="6 months of active use" class="badge" role="img">
+      <div data-v-06381b3c="" data-v-1c120264="" aria-disabled="true" title="6 months of active use" aria-label="6 months of active use" data-test-id="badge-committed-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>
         <div data-v-06381b3c="" aria-hidden="true" class="badge__text">6 months</div>
       </div>
-      <div data-v-06381b3c="" data-v-1c120264="" aria-disabled="true" title="12 months of active use" aria-label="12 months of active use" class="badge" role="img">
+      <div data-v-06381b3c="" data-v-1c120264="" aria-disabled="true" title="12 months of active use" aria-label="12 months of active use" data-test-id="badge-committed-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>
@@ -212,19 +212,19 @@ exports[`AchievementList > renders with badges enabled 1`] = `
   <div data-v-1c120264="">
     <p data-v-1c120264="" class="achievement-list__label">Hot Streak</p>
     <div data-v-1c120264="" class="achievement-list__badge-container">
-      <div data-v-06381b3c="" data-v-1c120264="" aria-disabled="true" title="5 week streak of over 30 veggies" aria-label="5 week streak of over 30 veggies" class="badge" role="img">
+      <div data-v-06381b3c="" data-v-1c120264="" aria-disabled="true" title="5 week streak of over 30 veggies" aria-label="5 week streak of over 30 veggies" data-test-id="badge-hotStreak-1" class="badge" role="img">
         <div data-v-06381b3c="" class="badge__background badge__background--Bronze" aria-hidden="true">
           <div data-v-06381b3c="" class="badge__emoji">🌶️</div>
         </div>
         <div data-v-06381b3c="" aria-hidden="true" class="badge__text">5 Weeks</div>
       </div>
-      <div data-v-06381b3c="" data-v-1c120264="" 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="" data-v-1c120264="" 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>
         <div data-v-06381b3c="" aria-hidden="true" class="badge__text">10 Weeks</div>
       </div>
-      <div data-v-06381b3c="" data-v-1c120264="" aria-disabled="true" title="20 week streak of over 30 veggies" aria-label="20 week streak of over 30 veggies" class="badge" role="img">
+      <div data-v-06381b3c="" data-v-1c120264="" aria-disabled="true" title="20 week streak of over 30 veggies" aria-label="20 week streak of over 30 veggies" data-test-id="badge-hotStreak-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>
@@ -235,37 +235,37 @@ exports[`AchievementList > renders with badges enabled 1`] = `
   <div data-v-1c120264="">
     <p data-v-1c120264="" class="achievement-list__label">The Experimenter</p>
     <div data-v-1c120264="" class="achievement-list__badge-container">
-      <div data-v-06381b3c="" data-v-1c120264="" aria-disabled="false" title="15 unique fruits and berries" aria-label="15 unique fruits and berries" class="badge" role="img">
+      <div data-v-06381b3c="" data-v-1c120264="" aria-disabled="false" title="15 unique fruits and berries" aria-label="15 unique fruits and berries" data-test-id="badge-experimenterFruit-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>
         <div data-v-06381b3c="" aria-hidden="true" class="badge__text">Fruits</div>
       </div>
-      <div data-v-06381b3c="" data-v-1c120264="" aria-disabled="false" title="15 unique vegetables" aria-label="15 unique vegetables" class="badge" role="img">
+      <div data-v-06381b3c="" data-v-1c120264="" aria-disabled="false" title="15 unique vegetables" aria-label="15 unique vegetables" data-test-id="badge-experimenterVegetable-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>
         <div data-v-06381b3c="" aria-hidden="true" class="badge__text">Vegetables</div>
       </div>
-      <div data-v-06381b3c="" data-v-1c120264="" aria-disabled="false" title="15 unique leafy greens" aria-label="15 unique leafy greens" class="badge" role="img">
+      <div data-v-06381b3c="" data-v-1c120264="" aria-disabled="false" title="15 unique leafy greens" aria-label="15 unique leafy greens" data-test-id="badge-experimenterLeafy-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>
         <div data-v-06381b3c="" aria-hidden="true" class="badge__text">Leafy Greens</div>
       </div>
-      <div data-v-06381b3c="" data-v-1c120264="" aria-disabled="false" title="15 unique roots and bulbs" aria-label="15 unique roots and bulbs" class="badge" role="img">
+      <div data-v-06381b3c="" data-v-1c120264="" aria-disabled="false" title="15 unique roots and bulbs" aria-label="15 unique roots and bulbs" data-test-id="badge-experimenterRoot-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>
         <div data-v-06381b3c="" aria-hidden="true" class="badge__text">Roots</div>
       </div>
-      <div data-v-06381b3c="" data-v-1c120264="" aria-disabled="false" title="15 unique beans and legumes" aria-label="15 unique beans and legumes" class="badge" role="img">
+      <div data-v-06381b3c="" data-v-1c120264="" aria-disabled="false" title="15 unique beans and legumes" aria-label="15 unique beans and legumes" data-test-id="badge-experimenterBean-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>
         <div data-v-06381b3c="" aria-hidden="true" class="badge__text">Beans</div>
       </div>
-      <div data-v-06381b3c="" data-v-1c120264="" aria-disabled="false" title="15 unique grains, nuts and seeds" aria-label="15 unique grains, nuts and seeds" class="badge" role="img">
+      <div data-v-06381b3c="" data-v-1c120264="" aria-disabled="false" title="15 unique grains, nuts and seeds" aria-label="15 unique grains, nuts and seeds" data-test-id="badge-experimenterGrain-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>
diff --git a/src/components/__tests__/__snapshots__/LogView.spec.ts.snap b/src/components/__tests__/__snapshots__/LogView.spec.ts.snap
index 14ca96b..ef5ace0 100644
--- a/src/components/__tests__/__snapshots__/LogView.spec.ts.snap
+++ b/src/components/__tests__/__snapshots__/LogView.spec.ts.snap
@@ -1,7 +1,7 @@
 // Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
 
 exports[`LogView > renders 1`] = `
-"<div class="relative h-12 z-20" data-headlessui-state=""><input data-v-487fdf11="" value="" id="headlessui-combobox-input-v-0" aria-expanded="false" aria-autocomplete="list" role="combobox" type="text" tabindex="0" data-headlessui-state="" aria-label="Search For Veggies" placeholder="Search For Veggies" class="veggie-search__input"><button data-v-487fdf11="" id="headlessui-combobox-button-v-1" type="button" tabindex="-1" aria-haspopup="listbox" aria-expanded="false" data-headlessui-state="" class="veggie-search__button"><svg data-v-487fdf11="" viewBox="0 0 24 24" aria-hidden="true" style="width: 1.25rem; height: 1.25rem;">
+"<div class="relative h-12 z-20" data-headlessui-state=""><input data-v-487fdf11="" value="" id="headlessui-combobox-input-v-0" aria-expanded="false" aria-autocomplete="list" role="combobox" type="text" tabindex="0" data-headlessui-state="" aria-label="Search For Veggies" placeholder="Search For Veggies" class="veggie-search__input" data-test-id="veggie-search-input"><button data-v-487fdf11="" id="headlessui-combobox-button-v-1" type="button" tabindex="-1" aria-haspopup="listbox" aria-expanded="false" data-headlessui-state="" class="veggie-search__button" data-test-id="veggie-search-button"><svg data-v-487fdf11="" viewBox="0 0 24 24" aria-hidden="true" style="width: 1.25rem; height: 1.25rem;">
       <path d="M7.41,8.58L12,13.17L16.59,8.58L18,10L12,16L6,10L7.41,8.58Z" class="transition-all"></path>
     </svg></button>
   <!---->
@@ -34,14 +34,14 @@ exports[`LogView > renders 1`] = `
 `;
 
 exports[`LogView > renders with data 1`] = `
-"<div class="relative h-12 z-20" data-headlessui-state=""><input data-v-487fdf11="" value="" id="headlessui-combobox-input-v-0" aria-expanded="false" aria-autocomplete="list" role="combobox" type="text" tabindex="0" data-headlessui-state="" aria-label="Search For Veggies" placeholder="Search For Veggies" class="veggie-search__input"><button data-v-487fdf11="" id="headlessui-combobox-button-v-1" type="button" tabindex="-1" aria-haspopup="listbox" aria-expanded="false" data-headlessui-state="" class="veggie-search__button"><svg data-v-487fdf11="" viewBox="0 0 24 24" aria-hidden="true" style="width: 1.25rem; height: 1.25rem;">
+"<div class="relative h-12 z-20" data-headlessui-state=""><input data-v-487fdf11="" value="" id="headlessui-combobox-input-v-0" aria-expanded="false" aria-autocomplete="list" role="combobox" type="text" tabindex="0" data-headlessui-state="" aria-label="Search For Veggies" placeholder="Search For Veggies" class="veggie-search__input" data-test-id="veggie-search-input"><button data-v-487fdf11="" id="headlessui-combobox-button-v-1" type="button" tabindex="-1" aria-haspopup="listbox" aria-expanded="false" data-headlessui-state="" class="veggie-search__button" data-test-id="veggie-search-button"><svg data-v-487fdf11="" viewBox="0 0 24 24" aria-hidden="true" style="width: 1.25rem; height: 1.25rem;">
       <path d="M7.41,8.58L12,13.17L16.59,8.58L18,10L12,16L6,10L7.41,8.58Z" class="transition-all"></path>
     </svg></button>
   <!---->
 </div>
 <div data-v-8e44268d="" class="chart-background log-view__chart">
   <category-status-chart-stub data-v-8e44268d="" veggies="wheat" totals="false"></category-status-chart-stub>
-  <h1 data-v-8e44268d="" class="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>
+  <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">