From e70c090439323f3c4479e1eaa68187f9ab6e7c35 Mon Sep 17 00:00:00 2001 From: Anssi Juvonen Date: Thu, 9 Jan 2025 15:24:52 +0200 Subject: [PATCH 01/14] Fix WeekEditor tests --- src/components/WeekEditor.vue | 2 +- src/components/__tests__/WeekEditor.spec.ts | 4 +++- 2 files changed, 4 insertions(+), 2 deletions(-) diff --git a/src/components/WeekEditor.vue b/src/components/WeekEditor.vue index 4c398b8..b4264ad 100644 --- a/src/components/WeekEditor.vue +++ b/src/components/WeekEditor.vue @@ -89,7 +89,7 @@ provide(KEYS.challenge, selectedChallenge); - + { it('renders', () => { const testDate = DateTime.fromFormat('30.12.2024', 'dd.MM.yyyy'); - activityStore.startDate = testDate; + // @ts-expect-error: getters are writable in tests + activityStore.getWeekStarts = [testDate, testDate.minus({weeks: 1})]; + activityStore.startDate = testDate.minus({weeks: 1}); activityStore.weeks.push({ startDate: testDate, veggies: ['cucumber', 'tomato'], From 7f4a4d8cf31994158ba86dc2550cd4a54ecce1cf Mon Sep 17 00:00:00 2001 From: Anssi Juvonen Date: Fri, 10 Jan 2025 08:42:29 +0200 Subject: [PATCH 02/14] Make sure real timers are used again, even if test fails --- src/components/__tests__/LogView.spec.ts | 20 +++++++++++--------- 1 file changed, 11 insertions(+), 9 deletions(-) diff --git a/src/components/__tests__/LogView.spec.ts b/src/components/__tests__/LogView.spec.ts index ed324b7..0b9990e 100644 --- a/src/components/__tests__/LogView.spec.ts +++ b/src/components/__tests__/LogView.spec.ts @@ -52,16 +52,18 @@ describe('LogView', () => { startDate: thisWeek, }); const wrapper = mount(LogView); - expect(wrapper.find('.front-page-animation').exists()).toBe(false); + try { + expect(wrapper.find('.front-page-animation').exists()).toBe(false); - vi.setSystemTime(thisWeek.plus({days: 1}).toJSDate()); - await new Promise((resolve) => setTimeout(resolve, 1000)); - expect(wrapper.find('.front-page-animation').exists()).toBe(false); + vi.setSystemTime(thisWeek.plus({days: 1}).toJSDate()); + await new Promise((resolve) => setTimeout(resolve, 1000)); + expect(wrapper.find('.front-page-animation').exists()).toBe(false); - vi.setSystemTime(thisWeek.plus({weeks: 1}).toJSDate()); - await new Promise((resolve) => setTimeout(resolve, 1000)); - expect(wrapper.find('.front-page-animation').exists()).toBe(true); - - vi.useRealTimers(); + vi.setSystemTime(thisWeek.plus({weeks: 1}).toJSDate()); + await new Promise((resolve) => setTimeout(resolve, 1000)); + expect(wrapper.find('.front-page-animation').exists()).toBe(true); + } finally { + vi.useRealTimers(); + } }); }); From f5993e344ef583e6e38e36c4a0681152fce0f907 Mon Sep 17 00:00:00 2001 From: Anssi Juvonen Date: Fri, 10 Jan 2025 08:43:01 +0200 Subject: [PATCH 03/14] Add copy and share icons --- src/components/IconComponent.vue | 6 ++++++ 1 file changed, 6 insertions(+) diff --git a/src/components/IconComponent.vue b/src/components/IconComponent.vue index c755f39..ead0cb4 100644 --- a/src/components/IconComponent.vue +++ b/src/components/IconComponent.vue @@ -9,6 +9,7 @@ import { mdiChevronDown, mdiClose, mdiCogOutline, + mdiContentCopy, mdiEarth, mdiFormatListChecks, mdiHistory, @@ -16,6 +17,7 @@ import { mdiPlus, mdiRadioboxBlank, mdiRadioboxMarked, + mdiShareVariant, mdiTrashCan, mdiTrophyOutline, } from '@mdi/js'; @@ -32,6 +34,7 @@ export type IconString = | 'chevron' | 'close' | 'cog' + | 'contentCopy' | 'earth' | 'formatListChecks' | 'history' @@ -39,6 +42,7 @@ export type IconString = | 'plus' | 'radioboxBlank' | 'radioboxMarked' + | 'shareVariant' | 'trashCan' | 'trophyOutline'; @@ -63,6 +67,7 @@ const icons = { chevron: mdiChevronDown, close: mdiClose, cog: mdiCogOutline, + contentCopy: mdiContentCopy, earth: mdiEarth, formatListChecks: mdiFormatListChecks, history: mdiHistory, @@ -70,6 +75,7 @@ const icons = { plus: mdiPlus, radioboxBlank: mdiRadioboxBlank, radioboxMarked: mdiRadioboxMarked, + shareVariant: mdiShareVariant, trashCan: mdiTrashCan, trophyOutline: mdiTrophyOutline, }; From a5af2daf32a83eebf39a278e8fde706fe18ab02a Mon Sep 17 00:00:00 2001 From: Anssi Juvonen Date: Fri, 10 Jan 2025 10:59:38 +0200 Subject: [PATCH 04/14] Add share buttons to all time stats --- src/components/AllTimeStatus.vue | 21 +++----- src/components/StatContainer.vue | 45 +++++++++++++++++ .../__snapshots__/AllTimeStatus.spec.ts.snap | 40 +++++++++++++-- src/i18n/en.json | 49 +++++++++++-------- src/i18n/fi.json | 49 +++++++++++-------- src/utils/constants.ts | 2 + 6 files changed, 146 insertions(+), 60 deletions(-) create mode 100644 src/components/StatContainer.vue diff --git a/src/components/AllTimeStatus.vue b/src/components/AllTimeStatus.vue index f3db489..e6a0827 100644 --- a/src/components/AllTimeStatus.vue +++ b/src/components/AllTimeStatus.vue @@ -1,6 +1,7 @@ + + diff --git a/src/components/__tests__/__snapshots__/AllTimeStatus.spec.ts.snap b/src/components/__tests__/__snapshots__/AllTimeStatus.spec.ts.snap index 110e52a..0343715 100644 --- a/src/components/__tests__/__snapshots__/AllTimeStatus.spec.ts.snap +++ b/src/components/__tests__/__snapshots__/AllTimeStatus.spec.ts.snap @@ -2,10 +2,40 @@ exports[`AllTimeStatus > renders 1`] = ` "
-
In Total 1 Weeks
-
Over 30 Veggies in 0 Weeks
-
In Total 0 Unique Veggies
-
At Most 0 Veggies in a Week
-
Completed 0 Weekly Challenges
+
In Total + Weeks +
+
Over 30 Veggies in + Weeks +
+
In Total + Unique Veggies +
+
At Most + Veggies in a Week +
+
Completed + Weekly Challenges +
" `; diff --git a/src/i18n/en.json b/src/i18n/en.json index 7304ead..1e576f6 100644 --- a/src/i18n/en.json +++ b/src/i18n/en.json @@ -85,6 +85,35 @@ "4": "Overdrive! 40 unique veggies this week unlocks this secret achievement!" } }, + "allTimeStatus": { + "atMostVeggies": { + "bottomLabel": "Veggies in a Week", + "shareText": "I've tried as many as {0} different vegetables in one week! Try this free app out: {1}", + "topLabel": "At Most" + }, + "completedChallenges": { + "bottomLabel": "Weekly Challenges", + "shareText": "I've completed {0} weekly Eat Your Veggies -challenges! Try this free app out: {1}", + "topLabel": "Completed" + }, + "copy": "Copy achievement to clipboard", + "over30Veggies": { + "bottomLabel": "Weeks", + "shareText": "I've managed to eat over 30 veggies in a week {0} times! Try this free app out: {1}", + "topLabel": "Over 30 Veggies in" + }, + "share": "Share achievement", + "totalWeeks": { + "bottomLabel": "Weeks", + "shareText": "I've used Eat Your Veggies now for {0} weeks! Try this free app out: {1}", + "topLabel": "In Total" + }, + "uniqueVeggies": { + "topLabel": "In Total", + "shareText": "So far, I've tried {0} unique veggies! Try this free app out: {1}", + "bottomLabel": "Unique Veggies" + } + }, "categories": { "Bean": "Beans And Legumes", "Fruit": "Fruits And Berries", @@ -829,26 +858,6 @@ "allTimeCategories": "Comparison By Categories", "chooseWeek": "Choose Week", "chosenStats": "Chosen Statistics", - "grid1": { - "topLabel": "In Total", - "bottomLabel": "Weeks" - }, - "grid2": { - "topLabel": "Over 30 Veggies in", - "bottomLabel": "Weeks" - }, - "grid3": { - "topLabel": "In Total", - "bottomLabel": "Unique Veggies" - }, - "grid4": { - "topLabel": "At Most", - "bottomLabel": "Veggies in a Week" - }, - "grid5": { - "topLabel": "Completed", - "bottomLabel": "Weekly Challenges" - }, "selectedWeek": "Week {0} ({1}-{2})", "week": "Wk {0}", "weeklyAmounts": "Weekly Amounts", diff --git a/src/i18n/fi.json b/src/i18n/fi.json index fa6f3fd..88e9e50 100644 --- a/src/i18n/fi.json +++ b/src/i18n/fi.json @@ -85,6 +85,35 @@ "4": "Ylikierroksilla! 40 erilaista kasvista tällä viikolla avaa tämän salaisen palkinnon!" } }, + "allTimeStatus": { + "atMostVeggies": { + "bottomLabel": "Kasvista viikossa", + "shareText": "Viikossa kokeilemieni erilaisten kasvisten enimmäismäärä on nyt {0}! Kokeile tätä ilmaista sovellusta: {1}", + "topLabel": "Enimmillään" + }, + "completedChallenges": { + "bottomLabel": "Viikkohaastetta", + "shareText": "Olen suorittanut {0} Eat Your Veggies -viikkohaastetta! Kokeile tätä ilmaista sovellusta: {1}", + "topLabel": "Suoritettu" + }, + "copy": "Kopioi saavutus leikepöydälle", + "over30Veggies": { + "topLabel": "Yli 30 kasvista", + "shareText": "Olen onnistunut syömään yli 30 kasvista viikossa {0} kertaa! Kokeile tätä ilmaista sovellusta: {1}", + "bottomLabel": "Viikolla" + }, + "share": "Jaa saavutus", + "totalWeeks": { + "bottomLabel": "Viikkoa", + "shareText": "Olen käyttänyt Eat Your Veggies -sovellusta {0} viikkoa! Kokeile tätä ilmaista sovellusta: {1}", + "topLabel": "Yhteensä" + }, + "uniqueVeggies": { + "bottomLabel": "Erilaista kasvista", + "shareText": "Olen syönyt yhteensä {0} erilaista kasvista! Kokeile tätä ilmaista sovellusta: {1}", + "topLabel": "Yhteensä" + } + }, "categories": { "Bean": "Pavut ja palkokasvit", "Fruit": "Hedelmät ja marjat", @@ -837,26 +866,6 @@ "allTimeCategories": "Vertailu ryhmittäin", "chooseWeek": "Valitse viikko", "chosenStats": "Valitut tilastot", - "grid1": { - "topLabel": "Yhteensä", - "bottomLabel": "Viikkoa" - }, - "grid2": { - "topLabel": "Yli 30 kasvista", - "bottomLabel": "Viikolla" - }, - "grid3": { - "topLabel": "Yhteensä", - "bottomLabel": "Erilaista kasvista" - }, - "grid4": { - "topLabel": "Enimmillään", - "bottomLabel": "Kasvista viikossa" - }, - "grid5": { - "topLabel": "Suoritettu", - "bottomLabel": "Viikkohaastetta" - }, "selectedWeek": "Viikko {0} ({1}-{2})", "week": "Vko {0}", "weeklyAmounts": "Lukumäärät viikoittain", diff --git a/src/utils/constants.ts b/src/utils/constants.ts index df6335d..177a4cd 100644 --- a/src/utils/constants.ts +++ b/src/utils/constants.ts @@ -1,6 +1,8 @@ import type {InjectionKey, Ref} from 'vue'; import {Category, type Locale} from './types'; +export const APP_URL = 'https://eatyourveggies.app'; + export const BUILD_TIME = __VITE_BUILD_TIME__; export const KEYS = { From 3ffd56afa63bb07075b0630a0304de6c9720b66f Mon Sep 17 00:00:00 2001 From: Anssi Juvonen Date: Fri, 10 Jan 2025 14:39:29 +0200 Subject: [PATCH 05/14] Improve and test stat containers --- e2e/stats.spec.ts | 18 +++-- src/components/AllTimeStatus.vue | 71 ++++++------------- src/components/StatContainer.vue | 39 +++++----- .../__tests__/AllTimeStatus.spec.ts | 14 ++-- .../__tests__/StatContainer.spec.ts | 71 +++++++++++++++++++ .../__snapshots__/AllTimeStatus.spec.ts.snap | 62 +++++++--------- 6 files changed, 161 insertions(+), 114 deletions(-) create mode 100644 src/components/__tests__/StatContainer.spec.ts diff --git a/e2e/stats.spec.ts b/e2e/stats.spec.ts index 49007e9..4ff7f05 100644 --- a/e2e/stats.spec.ts +++ b/e2e/stats.spec.ts @@ -42,11 +42,19 @@ test('shows all time stats', async ({page}) => { await page.getByTestId('veggie-search-challenge').locator('.veggie-search__option').click(); await page.goto('stats'); await page.getByTestId('stats-tab-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'); - await expect(page.getByTestId('all-time-challenges')).toHaveText('Completed 1 Weekly Challenges'); + await expect(page.getByTestId('all-time-status-totalWeeks')).toHaveText('In Total 1 Weeks'); + await expect(page.getByTestId('all-time-status-over30Veggies')).toHaveText( + 'Over 30 Veggies in 0 Weeks', + ); + await expect(page.getByTestId('all-time-status-uniqueVeggies')).toHaveText( + 'In Total 2 Unique Veggies', + ); + await expect(page.getByTestId('all-time-status-atMostVeggies')).toHaveText( + 'At Most 2 Veggies in a Week', + ); + await expect(page.getByTestId('all-time-status-completedChallenges')).toHaveText( + 'Completed 1 Weekly Challenges', + ); }); test('shows veggie list', async ({page}) => { diff --git a/src/components/AllTimeStatus.vue b/src/components/AllTimeStatus.vue index e6a0827..07c9cde 100644 --- a/src/components/AllTimeStatus.vue +++ b/src/components/AllTimeStatus.vue @@ -1,70 +1,43 @@ diff --git a/src/components/StatContainer.vue b/src/components/StatContainer.vue index 6332d17..465bdc2 100644 --- a/src/components/StatContainer.vue +++ b/src/components/StatContainer.vue @@ -22,24 +22,23 @@ const shareOrCopy = async () => ); - diff --git a/src/components/__tests__/AllTimeStatus.spec.ts b/src/components/__tests__/AllTimeStatus.spec.ts index a98361c..2319c86 100644 --- a/src/components/__tests__/AllTimeStatus.spec.ts +++ b/src/components/__tests__/AllTimeStatus.spec.ts @@ -19,7 +19,7 @@ describe('AllTimeStatus', () => { it('shows total weeks', () => { activityStore.startDate = DateTime.now().startOf('week').minus({weeks: 2}); const wrapper = mount(AllTimeStatus); - expect(wrapper.findByTestId('all-time-weeks').text()).toBe('In Total 3 Weeks'); + expect(wrapper.findByTestId('all-time-status-totalWeeks').text()).toBe('In Total 3 Weeks'); }); it('shows unique veggies', () => { @@ -35,7 +35,9 @@ describe('AllTimeStatus', () => { }, ); const wrapper = mount(AllTimeStatus); - expect(wrapper.findByTestId('all-time-unique').text()).toBe('In Total 5 Unique Veggies'); + expect(wrapper.findByTestId('all-time-status-uniqueVeggies').text()).toBe( + 'In Total 5 Unique Veggies', + ); }); it('shows weeks with over 30 veggies', () => { @@ -55,7 +57,9 @@ describe('AllTimeStatus', () => { }, ); const wrapper = mount(AllTimeStatus); - expect(wrapper.findByTestId('all-time-over-30').text()).toBe('Over 30 Veggies in 2 Weeks'); + expect(wrapper.findByTestId('all-time-status-over30Veggies').text()).toBe( + 'Over 30 Veggies in 2 Weeks', + ); }); it('shows highest number of veggies', () => { @@ -75,6 +79,8 @@ describe('AllTimeStatus', () => { }, ); const wrapper = mount(AllTimeStatus); - expect(wrapper.findByTestId('all-time-at-most').text()).toBe('At Most 31 Veggies in a Week'); + expect(wrapper.findByTestId('all-time-status-atMostVeggies').text()).toBe( + 'At Most 31 Veggies in a Week', + ); }); }); diff --git a/src/components/__tests__/StatContainer.spec.ts b/src/components/__tests__/StatContainer.spec.ts new file mode 100644 index 0000000..f08f4b6 --- /dev/null +++ b/src/components/__tests__/StatContainer.spec.ts @@ -0,0 +1,71 @@ +import {describe, it, expect, vi} from 'vitest'; +import {mount} from '@vue/test-utils'; +import StatContainer from '@/components/StatContainer.vue'; + +describe('StatContainer', () => { + it('renders different keys', () => { + const keys = { + totalWeeks: 'In Total 0 Weeks', + over30Veggies: 'Over 30 Veggies in 0 Weeks', + uniqueVeggies: 'In Total 0 Unique Veggies', + atMostVeggies: 'At Most 0 Veggies in a Week', + completedChallenges: 'Completed 0 Weekly Challenges', + }; + Object.entries(keys).forEach(([key, value]) => { + const wrapper = mount({ + template: '
', + components: { + StatContainer, + }, + data: () => ({ + statAmount: 0, + statKey: key, + }), + }); + expect(wrapper.text()).toBe(value); + }); + }); + + it('copies to clipboard', async () => { + const clipboard = navigator.clipboard; + Object.assign(navigator, { + clipboard: { + writeText: vi.fn(), + }, + }); + + const wrapper = mount(StatContainer, { + props: { + statAmount: 0, + statKey: 'totalWeeks', + }, + }); + + await wrapper.findByTestId('stat-container-copy-button-totalWeeks').trigger('click'); + expect(navigator.clipboard.writeText).toHaveBeenCalledWith( + "I've used Eat Your Veggies now for 0 weeks! Try this free app out: https://eatyourveggies.app", + ); + Object.assign(navigator, {clipboard}); + }); + + it('shares', async () => { + const share = navigator.share; + Object.assign(navigator, { + share: vi.fn(), + }); + + const wrapper = mount(StatContainer, { + props: { + statAmount: 0, + statKey: 'totalWeeks', + }, + }); + + await wrapper.findByTestId('stat-container-share-button-totalWeeks').trigger('click'); + expect(navigator.share).toHaveBeenCalledWith({ + url: 'https://eatyourveggies.app', + text: "I've used Eat Your Veggies now for 0 weeks! Try this free app out: https://eatyourveggies.app", + }); + Object.assign(navigator, {share}); + }); +}); diff --git a/src/components/__tests__/__snapshots__/AllTimeStatus.spec.ts.snap b/src/components/__tests__/__snapshots__/AllTimeStatus.spec.ts.snap index 0343715..1618d0e 100644 --- a/src/components/__tests__/__snapshots__/AllTimeStatus.spec.ts.snap +++ b/src/components/__tests__/__snapshots__/AllTimeStatus.spec.ts.snap @@ -1,41 +1,31 @@ // Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html exports[`AllTimeStatus > renders 1`] = ` -"
-
In Total - Weeks -
-
Over 30 Veggies in - Weeks -
-
In Total - Unique Veggies -
-
At Most - Veggies in a Week -
-
Completed - Weekly Challenges -
+"
+
In Total 1 Weeks
+
Over 30 Veggies in 0 Weeks
+
In Total 0 Unique Veggies
+
At Most 0 Veggies in a Week
+
Completed 0 Weekly Challenges
" `; From c16e1d947415eb2a750c29eac615acdb50b785f9 Mon Sep 17 00:00:00 2001 From: Anssi Juvonen Date: Fri, 10 Jan 2025 14:58:19 +0200 Subject: [PATCH 06/14] Fix translations and tooltips --- .../__tests__/__snapshots__/LogView.spec.ts.snap | 4 ++-- .../__tests__/__snapshots__/NavBar.spec.ts.snap | 2 +- .../__tests__/__snapshots__/SettingsView.spec.ts.snap | 2 +- .../__tests__/__snapshots__/StatsView.spec.ts.snap | 10 +++++----- src/i18n/en.json | 4 ++-- src/views/SettingsView.vue | 2 +- src/views/StatsView.vue | 2 +- 7 files changed, 13 insertions(+), 13 deletions(-) diff --git a/src/components/__tests__/__snapshots__/LogView.spec.ts.snap b/src/components/__tests__/__snapshots__/LogView.spec.ts.snap index 7b0d97f..9695086 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`] = ` -"

Weekly Progress

+"

Track Weekly Progress

@@ -15,7 +15,7 @@ exports[`LogView > renders 1`] = ` `; exports[`LogView > renders with data 1`] = ` -"

Weekly Progress

+"

Track Weekly Progress

diff --git a/src/components/__tests__/__snapshots__/NavBar.spec.ts.snap b/src/components/__tests__/__snapshots__/NavBar.spec.ts.snap index 9996d98..47c3dbd 100644 --- a/src/components/__tests__/__snapshots__/NavBar.spec.ts.snap +++ b/src/components/__tests__/__snapshots__/NavBar.spec.ts.snap @@ -1,7 +1,7 @@ // Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html exports[`NavBar > renders 1`] = ` -"
-
" diff --git a/src/components/__tests__/__snapshots__/StatsView.spec.ts.snap b/src/components/__tests__/__snapshots__/StatsView.spec.ts.snap index 36fdb96..751a90d 100644 --- a/src/components/__tests__/__snapshots__/StatsView.spec.ts.snap +++ b/src/components/__tests__/__snapshots__/StatsView.spec.ts.snap @@ -3,23 +3,23 @@ exports[`StatsView > renders current week by default 1`] = ` "

Statistics

-