Skip to content

Commit

Permalink
Replace stats dropdown with a tabpanel
Browse files Browse the repository at this point in the history
  • Loading branch information
@ajuvonen
ajuvonen committed Nov 18, 2024
1 parent 76c43b8 commit f2c3a3b
Show file tree
Hide file tree
Showing 9 changed files with 151 additions and 162 deletions.
30 changes: 13 additions & 17 deletions e2e/stats.spec.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -31,8 +31,7 @@ test('shows last five weeks', async ({page}) => {
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 page.getByTestId('stats-tab-1').click();
await expect(page.getByTestId('weekly-amounts-chart')).toBeVisible();
await expect(page.getByTestId('weekly-categories-chart')).toBeVisible();
await expect(page.locator('#weekly-amounts-table')).toBeAttached();
Expand All @@ -46,14 +45,23 @@ test('shows all time stats', async ({page}) => {
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 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');
});

test('shows veggie list', 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-tab-3').click();
await expect(page.getByTestId('veggie-list-status-apricot')).toHaveText('(complete)');
});

test('shows achievements', async ({page}) => {
await page.goto('/');
await page.getByTestId('home-start-button').click();
Expand All @@ -66,21 +74,9 @@ test('shows achievements', async ({page}) => {
}
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 page.getByTestId('stats-tab-4').click();
await expect(page.getByTestId('badge-experimenterFruit-3')).toHaveAttribute(
'aria-disabled',
'false',
);
});

test('shows veggie list', 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-4').click();
await expect(page.getByTestId('veggie-list-status-apricot')).toHaveText('(complete)');
});
17 changes: 16 additions & 1 deletion src/components/IconComponent.vue
View file
Original file line number Diff line number Diff line change
@@ -1,34 +1,44 @@
<script setup lang="ts">
import {
mdiCalendarWeekOutline,
mdiChartBar,
mdiChartLine,
mdiCheckboxBlankOutline,
mdiCheckboxMarkedOutline,
mdiCheckCircleOutline,
mdiChevronDown,
mdiClose,
mdiCogOutline,
mdiEarth,
mdiFormatListChecks,
mdiHistory,
mdiMinus,
mdiPlus,
mdiRadioboxBlank,
mdiRadioboxMarked,
mdiTrashCan,
mdiTrophyOutline,
} from '@mdi/js';
export type IconString =
| 'calendarWeekOutline'
| 'chart'
| 'chartLine'
| 'check'
| 'checkboxBlank'
| 'checkboxMarked'
| 'chevron'
| 'close'
| 'cog'
| 'earth'
| 'formatListChecks'
| 'history'
| 'minus'
| 'plus'
| 'radioboxBlank'
| 'radioboxMarked'
| 'trashCan';
| 'trashCan'
| 'trophyOutline';
withDefaults(
defineProps<{
Expand All @@ -41,19 +51,24 @@ withDefaults(
);
const icons = {
calendarWeekOutline: mdiCalendarWeekOutline,
chart: mdiChartBar,
chartLine: mdiChartLine,
check: mdiCheckCircleOutline,
checkboxBlank: mdiCheckboxBlankOutline,
checkboxMarked: mdiCheckboxMarkedOutline,
chevron: mdiChevronDown,
close: mdiClose,
cog: mdiCogOutline,
earth: mdiEarth,
formatListChecks: mdiFormatListChecks,
history: mdiHistory,
minus: mdiMinus,
plus: mdiPlus,
radioboxBlank: mdiRadioboxBlank,
radioboxMarked: mdiRadioboxMarked,
trashCan: mdiTrashCan,
trophyOutline: mdiTrophyOutline,
};
</script>
<template>
Expand Down
20 changes: 8 additions & 12 deletions src/components/__tests__/StatsView.spec.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -29,8 +29,7 @@ describe('StatsView', () => {
});
const wrapper = mount(StatsView);

await wrapper.findByTestId('stats-dropdown-button').trigger('click');
await wrapper.findByTestId('stats-dropdown-option-1').trigger('click');
await wrapper.findByTestId('stats-tab-1').trigger('click');
expect(wrapper.find('#weekly-amounts-table').exists()).toBe(true);
expect(wrapper.find('#weekly-categories-table').exists()).toBe(true);
});
Expand All @@ -43,34 +42,31 @@ describe('StatsView', () => {
});
const wrapper = mount(StatsView);

await wrapper.findByTestId('stats-dropdown-button').trigger('click');
await wrapper.findByTestId('stats-dropdown-option-2').trigger('click');
await wrapper.findByTestId('stats-tab-2').trigger('click');
expect(wrapper.find('#category-status-table').exists()).toBe(true);
});

it('renders achievements', async () => {
it('renders veggie list', async () => {
activityStore.startDate = DateTime.now().startOf('week');
activityStore.weeks.push({
startDate: DateTime.now().startOf('week'),
veggies: ['apple', 'raspberry', 'chickpea'],
});
const wrapper = mount(StatsView);

await wrapper.findByTestId('stats-dropdown-button').trigger('click');
await wrapper.findByTestId('stats-dropdown-option-3').trigger('click');
expect(wrapper.findByTestId('achievement-list').exists()).toBe(true);
await wrapper.findByTestId('stats-tab-3').trigger('click');
expect(wrapper.findByTestId('veggie-list').exists()).toBe(true);
});

it('renders veggie list', async () => {
it('renders achievements', async () => {
activityStore.startDate = DateTime.now().startOf('week');
activityStore.weeks.push({
startDate: DateTime.now().startOf('week'),
veggies: ['apple', 'raspberry', 'chickpea'],
});
const wrapper = mount(StatsView);

await wrapper.findByTestId('stats-dropdown-button').trigger('click');
await wrapper.findByTestId('stats-dropdown-option-4').trigger('click');
expect(wrapper.findByTestId('veggie-list').exists()).toBe(true);
await wrapper.findByTestId('stats-tab-4').trigger('click');
expect(wrapper.findByTestId('achievement-list').exists()).toBe(true);
});
});
72 changes: 41 additions & 31 deletions src/components/__tests__/__snapshots__/StatsView.spec.ts.snap
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,35 +2,45 @@

exports[`StatsView > renders current week by default 1`] = `
"<h1 data-v-a19ac338="" class="sr-only">Statistics</h1>
<div class="relative z-20" data-headlessui-state="">
<div data-v-a19ac338="" class="flex-container flex-col"><label data-v-a19ac338="" id="headlessui-listbox-label-v-0" data-headlessui-state="" class="label-like">Chosen Statistics</label><button data-v-a19ac338="" id="headlessui-listbox-button-v-1" type="button" aria-haspopup="listbox" aria-expanded="false" data-headlessui-state="" class="stats__list-box-button" data-test-id="stats-dropdown-button"><span data-v-a19ac338="" class="truncate">This week's veggies</span><svg data-v-a19ac338="" style="width: 1.25rem; height: 1.25rem;" class="flex-shrink-0" viewBox="0 0 24 24" aria-hidden="true">
<path d="M7.41,8.58L12,13.17L16.59,8.58L18,10L12,16L6,10L7.41,8.58Z" class="transition-all"></path>
</svg></button></div>
<transition-stub data-v-a19ac338="" leaveactiveclass="transition duration-100 ease-in" leavefromclass="opacity-100" leavetoclass="opacity-0" appear="false" persisted="false" css="true">
<!---->
</transition-stub>
</div>
<transition-group-stub data-v-cd627eac="" data-v-a19ac338="" name="tags" tag="ul" appear="false" persisted="false" css="true" class="tags__container">
<li data-v-cd627eac="" data-test-id="tag-apple" class="tags__tag"><button data-v-24e38f3d="" data-v-cd627eac="" class="button button--tag button--remove" aria-label="Remove apple">
<!--v-if--><svg data-v-cd627eac="" style="width: 1.25rem; height: 1.25rem;" class="flex-shrink-0" viewBox="0 0 24 24" aria-hidden="true">
<path d="M19,13H5V11H19V13Z" class="transition-all"></path>
</svg> apple
</button></li>
<li data-v-cd627eac="" data-test-id="tag-chickpea" class="tags__tag"><button data-v-24e38f3d="" data-v-cd627eac="" class="button button--tag button--remove" aria-label="Remove chickpea">
<!--v-if--><svg data-v-cd627eac="" style="width: 1.25rem; height: 1.25rem;" class="flex-shrink-0" viewBox="0 0 24 24" aria-hidden="true">
<path d="M19,13H5V11H19V13Z" class="transition-all"></path>
</svg> chickpea
</button></li>
<li data-v-cd627eac="" data-test-id="tag-raspberry" class="tags__tag"><button data-v-24e38f3d="" data-v-cd627eac="" class="button button--tag button--remove" aria-label="Remove raspberry">
<!--v-if--><svg data-v-cd627eac="" style="width: 1.25rem; height: 1.25rem;" class="flex-shrink-0" viewBox="0 0 24 24" aria-hidden="true">
<path d="M19,13H5V11H19V13Z" class="transition-all"></path>
</svg> raspberry
</button></li>
</transition-group-stub>
<!--v-if-->
<!--v-if-->
<!--v-if-->
<!--v-if-->
<!--v-if-->
<!--v-if-->"
<button aria-hidden="true" style="position: fixed; height: 0px; padding: 0px; overflow: hidden; clip: rect(0px, 0px, 0px, 0px); white-space: nowrap; border-width: 0px;" type="button"></button>
<div data-v-a19ac338="" role="tablist" aria-orientation="horizontal" class="grid grid-cols-5 gap-2"><button data-v-24e38f3d="" data-v-a19ac338="" class="button button--primary !bg-transparent justify-center" aria-label="This week's veggies" title="This week's veggies" data-test-id="stats-tab-0" id="headlessui-tabs-tab-v-0" role="tab" aria-selected="true" tabindex="0" data-headlessui-state="selected">
<!--v-if--><svg data-v-a19ac338="" style="width: 1.25rem; height: 1.25rem;" class="flex-shrink-0" viewBox="0 0 24 24" aria-hidden="true">
<path d="M5 3H6V1H8V3H16V1H18V3H19C20.11 3 21 3.89 21 5V19C21 20.1 20.11 21 19 21H5C3.9 21 3 20.11 3 19V5C3 3.89 3.9 3 5 3M5 19H19V9H5V19M5 7H19V5H5V7M17 11V13H7V11H17" class="transition-all"></path>
</svg>
</button><button data-v-24e38f3d="" data-v-a19ac338="" class="button button--primary justify-center" aria-label="Last five weeks" title="Last five weeks" data-test-id="stats-tab-1" id="headlessui-tabs-tab-v-1" role="tab" aria-selected="false" tabindex="-1" data-headlessui-state="">
<!--v-if--><svg data-v-a19ac338="" style="width: 1.25rem; height: 1.25rem;" class="flex-shrink-0" viewBox="0 0 24 24" aria-hidden="true">
<path d="M16,11.78L20.24,4.45L21.97,5.45L16.74,14.5L10.23,10.75L5.46,19H22V21H2V3H4V17.54L9.5,8L16,11.78Z" class="transition-all"></path>
</svg>
</button><button data-v-24e38f3d="" data-v-a19ac338="" class="button button--primary justify-center" aria-label="All time" title="All time" data-test-id="stats-tab-2" id="headlessui-tabs-tab-v-2" role="tab" aria-selected="false" tabindex="-1" data-headlessui-state="">
<!--v-if--><svg data-v-a19ac338="" style="width: 1.25rem; height: 1.25rem;" class="flex-shrink-0" viewBox="0 0 24 24" aria-hidden="true">
<path d="M13.5,8H12V13L16.28,15.54L17,14.33L13.5,12.25V8M13,3A9,9 0 0,0 4,12H1L4.96,16.03L9,12H6A7,7 0 0,1 13,5A7,7 0 0,1 20,12A7,7 0 0,1 13,19C11.07,19 9.32,18.21 8.06,16.94L6.64,18.36C8.27,20 10.5,21 13,21A9,9 0 0,0 22,12A9,9 0 0,0 13,3" class="transition-all"></path>
</svg>
</button><button data-v-24e38f3d="" data-v-a19ac338="" class="button button--primary justify-center" aria-label="Veggie list" title="Veggie list" data-test-id="stats-tab-3" id="headlessui-tabs-tab-v-3" role="tab" aria-selected="false" tabindex="-1" data-headlessui-state="">
<!--v-if--><svg data-v-a19ac338="" style="width: 1.25rem; height: 1.25rem;" class="flex-shrink-0" viewBox="0 0 24 24" aria-hidden="true">
<path d="M18 2C17.1 2 16 3 16 4H8C8 3 6.9 2 6 2H2V11C2 12 3 13 4 13H6.2C6.6 15 7.9 16.7 11 17V19.08C8 19.54 8 22 8 22H16C16 22 16 19.54 13 19.08V17C16.1 16.7 17.4 15 17.8 13H20C21 13 22 12 22 11V2H18M6 11H4V4H6V11M16 11.5C16 13.43 15.42 15 12 15C8.59 15 8 13.43 8 11.5V6H16V11.5M20 11H18V4H20V11Z" class="transition-all"></path>
</svg>
</button><button data-v-24e38f3d="" data-v-a19ac338="" class="button button--primary justify-center" aria-label="Achievements" title="Achievements" data-test-id="stats-tab-4" id="headlessui-tabs-tab-v-4" role="tab" aria-selected="false" tabindex="-1" data-headlessui-state="">
<!--v-if--><svg data-v-a19ac338="" style="width: 1.25rem; height: 1.25rem;" class="flex-shrink-0" viewBox="0 0 24 24" aria-hidden="true">
<path d="M3,5H9V11H3V5M5,7V9H7V7H5M11,7H21V9H11V7M11,15H21V17H11V15M5,20L1.5,16.5L2.91,15.09L5,17.17L9.59,12.59L11,14L5,20Z" class="transition-all"></path>
</svg>
</button></div>
<div data-v-a19ac338="" class="flex flex-grow min-h-0">
<transition-group-stub data-v-cd627eac="" data-v-a19ac338="" name="tags" tag="ul" appear="false" persisted="false" css="true" class="tags__container" id="headlessui-tabs-panel-v-5" role="tabpanel" tabindex="0" data-headlessui-state="selected">
<li data-v-cd627eac="" data-test-id="tag-apple" class="tags__tag"><button data-v-24e38f3d="" data-v-cd627eac="" class="button button--tag button--remove" aria-label="Remove apple">
<!--v-if--><svg data-v-cd627eac="" style="width: 1.25rem; height: 1.25rem;" class="flex-shrink-0" viewBox="0 0 24 24" aria-hidden="true">
<path d="M19,13H5V11H19V13Z" class="transition-all"></path>
</svg> apple
</button></li>
<li data-v-cd627eac="" data-test-id="tag-chickpea" class="tags__tag"><button data-v-24e38f3d="" data-v-cd627eac="" class="button button--tag button--remove" aria-label="Remove chickpea">
<!--v-if--><svg data-v-cd627eac="" style="width: 1.25rem; height: 1.25rem;" class="flex-shrink-0" viewBox="0 0 24 24" aria-hidden="true">
<path d="M19,13H5V11H19V13Z" class="transition-all"></path>
</svg> chickpea
</button></li>
<li data-v-cd627eac="" data-test-id="tag-raspberry" class="tags__tag"><button data-v-24e38f3d="" data-v-cd627eac="" class="button button--tag button--remove" aria-label="Remove raspberry">
<!--v-if--><svg data-v-cd627eac="" style="width: 1.25rem; height: 1.25rem;" class="flex-shrink-0" viewBox="0 0 24 24" aria-hidden="true">
<path d="M19,13H5V11H19V13Z" class="transition-all"></path>
</svg> raspberry
</button></li>
</transition-group-stub><span data-v-a19ac338="" aria-hidden="true" style="position: fixed; height: 0px; padding: 0px; overflow: hidden; clip: rect(0px, 0px, 0px, 0px); white-space: nowrap; border-width: 0px;" id="headlessui-tabs-panel-v-6" role="tabpanel" tabindex="-1" class="stats__tab"></span><span data-v-a19ac338="" aria-hidden="true" style="position: fixed; height: 0px; padding: 0px; overflow: hidden; clip: rect(0px, 0px, 0px, 0px); white-space: nowrap; border-width: 0px;" id="headlessui-tabs-panel-v-7" role="tabpanel" tabindex="-1" class="stats__tab"></span><span data-v-a19ac338="" aria-hidden="true" style="position: fixed; height: 0px; padding: 0px; overflow: hidden; clip: rect(0px, 0px, 0px, 0px); white-space: nowrap; border-width: 0px;" id="headlessui-tabs-panel-v-8" role="tabpanel" tabindex="-1"></span><span data-v-a19ac338="" aria-hidden="true" style="position: fixed; height: 0px; padding: 0px; overflow: hidden; clip: rect(0px, 0px, 0px, 0px); white-space: nowrap; border-width: 0px;" id="headlessui-tabs-panel-v-9" role="tabpanel" tabindex="-1"></span>
</div>"
`;
20 changes: 12 additions & 8 deletions src/components/charts/WeeklyAmountsChart.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -53,20 +53,24 @@ const chartOptions = computed(() => {
defineExpose({chartData});
</script>
<template>
<ContentElement :title="$t('stats.weeklyAmounts')" :labelAttrs="{'aria-hidden': true}">
<div class="relative flex-1">
<ContentElement
:title="$t('stats.weeklyAmounts')"
:labelAttrs="{'aria-hidden': true}"
class="flex-1"
>
<div class="relative flex-grow">
<Line
:options="chartOptions"
:data="chartData"
data-test-id="weekly-amounts-chart"
aria-describedby="weekly-amounts-table"
/>
<ChartScreenReaderTable
id="weekly-amounts-table"
:title="$t('stats.weeklyAmounts')"
:columnHeaders="chartData.labels"
:data="chartData.datasets.map(prop('data'))"
/>
</div>
<ChartScreenReaderTable
id="weekly-amounts-table"
:title="$t('stats.weeklyAmounts')"
:columnHeaders="chartData.labels"
:data="chartData.datasets.map(prop('data'))"
/>
</ContentElement>
</template>
22 changes: 13 additions & 9 deletions src/components/charts/WeeklyCategoriesChart.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -69,21 +69,25 @@ const chartOptions = computed(() => {
defineExpose({chartData});
</script>
<template>
<ContentElement :title="$t('stats.weeklyCategories')" :labelAttrs="{'aria-hidden': true}">
<div class="relative flex-1">
<ContentElement
:title="$t('stats.weeklyCategories')"
:labelAttrs="{'aria-hidden': true}"
class="flex-1"
>
<div class="relative flex-grow">
<Bar
:options="chartOptions"
:data="chartData"
data-test-id="weekly-categories-chart"
aria-describedby="weekly-categories-table"
/>
<ChartScreenReaderTable
id="weekly-categories-table"
:title="$t('stats.0')"
:columnHeaders="chartData.labels"
:rowHeaders="chartData.datasets.map(prop('label'))"
:data="chartData.datasets.map(prop('data'))"
/>
</div>
<ChartScreenReaderTable
id="weekly-categories-table"
:title="$t('stats.weeklyCategories')"
:columnHeaders="chartData.labels"
:rowHeaders="chartData.datasets.map(prop('label'))"
:data="chartData.datasets.map(prop('data'))"
/>
</ContentElement>
</template>
5 changes: 2 additions & 3 deletions src/i18n/en.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -733,9 +733,8 @@
"0": "This week's veggies",
"1": "Last five weeks",
"2": "All time",
"3": "Achievements",
"4": "Veggie list",
"5": "Popularity",
"3": "Veggie list",
"4": "Achievements",
"allTimeCategories": "Comparison By Categories",
"chosenStats": "Chosen Statistics",
"grid1": {
Expand Down
5 changes: 2 additions & 3 deletions src/i18n/fi.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -741,9 +741,8 @@
"0": "Tämän viikon kasvikset",
"1": "Viimeiset viisi viikkoa",
"2": "Kokonaistilastot",
"3": "Saavutukset",
"4": "Kasvislista",
"5": "Suosio",
"3": "Kasvislista",
"4": "Saavutukset",
"allTimeCategories": "Vertailu ryhmittäin",
"chosenStats": "Valitut tilastot",
"grid1": {
Expand Down
Loading

0 comments on commit f2c3a3b

Please sign in to comment.