Skip to content

Commit

Permalink
Fix heading level and tests
Browse files Browse the repository at this point in the history
  • Loading branch information
@ajuvonen
ajuvonen committed Nov 7, 2024
1 parent 10c43bb commit ca622b1
Show file tree
Hide file tree
Showing 8 changed files with 726 additions and 43 deletions.
6 changes: 1 addition & 5 deletions src/components/CategoryStatus.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -13,11 +13,7 @@ withDefaults(
</script>
<template>
<div class="category-status__chart-background">
<CategoryStatusChart
:veggies="veggies"
:totals="totals"
aria-labelledby="category-status-center-label"
/>
<CategoryStatusChart :veggies="veggies" :totals="totals" />
<i18n-t
id="category-status-center-label"
scope="global"
Expand Down
2 changes: 1 addition & 1 deletion src/components/ContentElement.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -11,7 +11,7 @@ withDefaults(
</script>
<template>
<div class="flex-container flex-col">
<h1 class="label-like" :aria-hidden="ariaHidden">{{ title }}</h1>
<h2 class="label-like" :aria-hidden="ariaHidden">{{ title }}</h2>
<slot />
</div>
</template>
8 changes: 4 additions & 4 deletions src/components/__tests__/CategoryStatus.spec.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,32 +5,32 @@ import CategoryStatus from '@/components/CategoryStatus.vue';
describe('CategoryStatus', () => {
it('renders', () => {
const wrapper = mount(CategoryStatus, {
shallow: true,
props: {
veggies: ['carrot', 'onion', 'ginger'],
},
global: {
stubs: {
'i18n-t': false,
CategoryStatusChart: true,
},
},
});
expect(wrapper.find('h1').text()).toBe('This Week 3 Veggies');
expect(wrapper.find('#category-status-center-label').text()).toBe('This Week 3 Veggies');
});

it('renders with totals prop', () => {
const wrapper = mount(CategoryStatus, {
shallow: true,
props: {
totals: true,
veggies: ['potato', 'chili'],
},
global: {
stubs: {
'i18n-t': false,
CategoryStatusChart: true,
},
},
});
expect(wrapper.find('h1').text()).toBe('In Total 2 Actions');
expect(wrapper.find('#category-status-center-label').text()).toBe('In Total 2 Actions');
});
});
12 changes: 10 additions & 2 deletions src/components/__tests__/VeggieList.spec.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,21 +5,29 @@ import VeggieList from '@/components/VeggieList.vue';
describe('VeggieList', () => {
it('renders', () => {
const wrapper = mount(VeggieList, {
shallow: true,
props: {
uniqueVeggies: [],
},
global: {
stubs: {
VeggieCompletionChart: true,
},
},
});
expect(wrapper.html()).toMatchSnapshot();
});

it('renders with data', () => {
const uniqueVeggies = ['wheat', 'apple', 'cucumber', 'lychee'];
const wrapper = mount(VeggieList, {
shallow: true,
props: {
uniqueVeggies,
},
global: {
stubs: {
VeggieCompletionChart: true,
},
},
});
uniqueVeggies.forEach((veggie) => {
expect(wrapper.findByTestId(`veggie-list-status-${veggie}`).text()).toBe('(complete)');
Expand Down
48 changes: 24 additions & 24 deletions src/components/__tests__/__snapshots__/AchievementList.spec.ts.snap
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,8 +3,8 @@
exports[`AchievementList > renders 1`] = `
"<div data-v-1c120264="" class="flex min-h-0">
<div data-v-1c120264="" class="achievement-list" data-test-id="achievement-list">
<div data-v-1c120264="" class="flex-container flex-col flex-1">
<h1 class="label-like" aria-hidden="false">This week's toil</h1>
<div data-v-1c120264="" class="flex-container flex-col">
<h2 class="label-like" aria-hidden="false">This week's toil</h2>
<div data-v-1c120264="" class="achievement-list__badge-container">
<div data-v-06381b3c="" data-v-1c120264="" aria-disabled="true" title="30 unique veggies this week" aria-label="30 unique veggies this week" data-test-id="badge-thirtyVeggies-3" class="badge" role="img">
<div data-v-06381b3c="" class="badge__background badge__background--Gold" aria-hidden="true">
Expand All @@ -15,8 +15,8 @@ exports[`AchievementList > renders 1`] = `
<!--v-if-->
</div>
</div>
<div data-v-1c120264="" class="flex-container flex-col flex-1">
<h1 class="label-like" aria-hidden="false">The Completionist</h1>
<div data-v-1c120264="" class="flex-container flex-col">
<h2 class="label-like" aria-hidden="false">The Completionist</h2>
<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" data-test-id="badge-completionist-1" class="badge" role="img">
<div data-v-06381b3c="" class="badge__background badge__background--Bronze" aria-hidden="true">
Expand All @@ -38,8 +38,8 @@ exports[`AchievementList > renders 1`] = `
</div>
</div>
</div>
<div data-v-1c120264="" class="flex-container flex-col flex-1">
<h1 class="label-like" aria-hidden="false">Challenge Accepted</h1>
<div data-v-1c120264="" class="flex-container flex-col">
<h2 class="label-like" aria-hidden="false">Challenge Accepted</h2>
<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" data-test-id="badge-challengeAccepted-1" class="badge" role="img">
<div data-v-06381b3c="" class="badge__background badge__background--Bronze" aria-hidden="true">
Expand All @@ -61,8 +61,8 @@ exports[`AchievementList > renders 1`] = `
</div>
</div>
</div>
<div data-v-1c120264="" class="flex-container flex-col flex-1">
<h1 class="label-like" aria-hidden="false">The Committed</h1>
<div data-v-1c120264="" class="flex-container flex-col">
<h2 class="label-like" aria-hidden="false">The Committed</h2>
<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" data-test-id="badge-committed-1" class="badge" role="img">
<div data-v-06381b3c="" class="badge__background badge__background--Bronze" aria-hidden="true">
Expand All @@ -84,8 +84,8 @@ exports[`AchievementList > renders 1`] = `
</div>
</div>
</div>
<div data-v-1c120264="" class="flex-container flex-col flex-1">
<h1 class="label-like" aria-hidden="false">Hot Streak</h1>
<div data-v-1c120264="" class="flex-container flex-col">
<h2 class="label-like" aria-hidden="false">Hot Streak</h2>
<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" data-test-id="badge-hotStreak-1" class="badge" role="img">
<div data-v-06381b3c="" class="badge__background badge__background--Bronze" aria-hidden="true">
Expand All @@ -107,8 +107,8 @@ exports[`AchievementList > renders 1`] = `
</div>
</div>
</div>
<div data-v-1c120264="" class="flex-container flex-col flex-1">
<h1 class="label-like" aria-hidden="false">The Experimenter</h1>
<div data-v-1c120264="" class="flex-container flex-col">
<h2 class="label-like" aria-hidden="false">The Experimenter</h2>
<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" data-test-id="badge-experimenterFruit-3" class="badge" role="img">
<div data-v-06381b3c="" class="badge__background badge__background--Gold" aria-hidden="true">
Expand Down Expand Up @@ -155,8 +155,8 @@ exports[`AchievementList > renders 1`] = `
exports[`AchievementList > renders with badges enabled 1`] = `
"<div data-v-1c120264="" class="flex min-h-0">
<div data-v-1c120264="" class="achievement-list" data-test-id="achievement-list">
<div data-v-1c120264="" class="flex-container flex-col flex-1">
<h1 class="label-like" aria-hidden="false">This week's toil</h1>
<div data-v-1c120264="" class="flex-container flex-col">
<h2 class="label-like" aria-hidden="false">This week's toil</h2>
<div data-v-1c120264="" class="achievement-list__badge-container">
<div data-v-06381b3c="" data-v-1c120264="" aria-disabled="false" title="30 unique veggies this week" aria-label="30 unique veggies this week" data-test-id="badge-thirtyVeggies-3" class="badge" role="img">
<div data-v-06381b3c="" class="badge__background badge__background--Gold" aria-hidden="true">
Expand All @@ -172,8 +172,8 @@ exports[`AchievementList > renders with badges enabled 1`] = `
</div>
</div>
</div>
<div data-v-1c120264="" class="flex-container flex-col flex-1">
<h1 class="label-like" aria-hidden="false">The Completionist</h1>
<div data-v-1c120264="" class="flex-container flex-col">
<h2 class="label-like" aria-hidden="false">The Completionist</h2>
<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" data-test-id="badge-completionist-1" class="badge" role="img">
<div data-v-06381b3c="" class="badge__background badge__background--Bronze" aria-hidden="true">
Expand All @@ -195,8 +195,8 @@ exports[`AchievementList > renders with badges enabled 1`] = `
</div>
</div>
</div>
<div data-v-1c120264="" class="flex-container flex-col flex-1">
<h1 class="label-like" aria-hidden="false">Challenge Accepted</h1>
<div data-v-1c120264="" class="flex-container flex-col">
<h2 class="label-like" aria-hidden="false">Challenge Accepted</h2>
<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" data-test-id="badge-challengeAccepted-1" class="badge" role="img">
<div data-v-06381b3c="" class="badge__background badge__background--Bronze" aria-hidden="true">
Expand All @@ -218,8 +218,8 @@ exports[`AchievementList > renders with badges enabled 1`] = `
</div>
</div>
</div>
<div data-v-1c120264="" class="flex-container flex-col flex-1">
<h1 class="label-like" aria-hidden="false">The Committed</h1>
<div data-v-1c120264="" class="flex-container flex-col">
<h2 class="label-like" aria-hidden="false">The Committed</h2>
<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" data-test-id="badge-committed-1" class="badge" role="img">
<div data-v-06381b3c="" class="badge__background badge__background--Bronze" aria-hidden="true">
Expand All @@ -241,8 +241,8 @@ exports[`AchievementList > renders with badges enabled 1`] = `
</div>
</div>
</div>
<div data-v-1c120264="" class="flex-container flex-col flex-1">
<h1 class="label-like" aria-hidden="false">Hot Streak</h1>
<div data-v-1c120264="" class="flex-container flex-col">
<h2 class="label-like" aria-hidden="false">Hot Streak</h2>
<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" data-test-id="badge-hotStreak-1" class="badge" role="img">
<div data-v-06381b3c="" class="badge__background badge__background--Bronze" aria-hidden="true">
Expand All @@ -264,8 +264,8 @@ exports[`AchievementList > renders with badges enabled 1`] = `
</div>
</div>
</div>
<div data-v-1c120264="" class="flex-container flex-col flex-1">
<h1 class="label-like" aria-hidden="false">The Experimenter</h1>
<div data-v-1c120264="" class="flex-container flex-col">
<h2 class="label-like" aria-hidden="false">The Experimenter</h2>
<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" data-test-id="badge-experimenterFruit-3" class="badge" role="img">
<div data-v-06381b3c="" class="badge__background badge__background--Gold" aria-hidden="true">
Expand Down
2 changes: 1 addition & 1 deletion src/components/__tests__/__snapshots__/LogView.spec.ts.snap
View file
Original file line number Diff line number Diff line change
Expand Up @@ -22,7 +22,7 @@ exports[`LogView > renders with data 1`] = `
</div>
<div data-v-8e44268d="" class="category-status__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" 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 data-v-8e44268d="" id="category-status-center-label" 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></div>
</div>
<div data-v-cd627eac="" class="flex min-h-0">
<transition-group-stub data-v-cd627eac="" name="tags" tag="ul" appear="false" persisted="false" css="true" class="tags__container">
Expand Down
Loading

0 comments on commit ca622b1

Please sign in to comment.