unit test help
My tests dont seem to toggle/switch the icon. the renderSuspended just shows the icon 'light mode' sun thing no matter what. anyone know what part of this test is incorrect/?
KHi @devin schumacher. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave:
Dimport { mockNuxtImport, renderSuspended } from '@nuxt/test-utils/runtime';
import { screen } from '@testing-library/vue';
import userEvent from '@testing-library/user-event';
import { describe, it, expect, beforeEach } from 'vitest';
import ColorModeButton from '~/components/ColorModeButton.vue';
const colorMode = {
_preference: 'light' as 'light' | 'dark',
get preference() {
return this._preference;
},
set preference(val: 'light' | 'dark') {
this._preference = val;
},
get value() {
return this._preference;
}
};
mockNuxtImport('useColorMode', () => {
return () => colorMode;
});
describe('ColorModeButton', () => {
beforeEach(() => {
colorMode.preference = 'light';
});
it('should render a toggle button with sun icon in light mode', async () => {
await renderSuspended(ColorModeButton);
const button = await screen.findByRole('button', { name: /toggle color mode/i });
const icon = await button.querySelector('span')
expect(icon).toHaveClass('i-lucide:sun');
});
// TODO: fix this test...cant figure out why clicking on the button wont switch the icon
// it('should display a moon icon when the sun is clicked', async () => {
// const user = userEvent.setup()
// await renderSuspended(ColorModeButton);
// const button = await screen.findByRole('button', { name: /toggle color mode/i });
// await user.click(button);
// const icon = await button.querySelector('span');
// expect(icon).toHaveClass('i-lucide:moon');
// });
});import { mockNuxtImport, renderSuspended } from '@nuxt/test-utils/runtime';
import { screen } from '@testing-library/vue';
import userEvent from '@testing-library/user-event';
import { describe, it, expect, beforeEach } from 'vitest';
import ColorModeButton from '~/components/ColorModeButton.vue';
const colorMode = {
_preference: 'light' as 'light' | 'dark',
get preference() {
return this._preference;
},
set preference(val: 'light' | 'dark') {
this._preference = val;
},
get value() {
return this._preference;
}
};
mockNuxtImport('useColorMode', () => {
return () => colorMode;
});
describe('ColorModeButton', () => {
beforeEach(() => {
colorMode.preference = 'light';
});
it('should render a toggle button with sun icon in light mode', async () => {
await renderSuspended(ColorModeButton);
const button = await screen.findByRole('button', { name: /toggle color mode/i });
const icon = await button.querySelector('span')
expect(icon).toHaveClass('i-lucide:sun');
});
// TODO: fix this test...cant figure out why clicking on the button wont switch the icon
// it('should display a moon icon when the sun is clicked', async () => {
// const user = userEvent.setup()
// await renderSuspended(ColorModeButton);
// const button = await screen.findByRole('button', { name: /toggle color mode/i });
// await user.click(button);
// const icon = await button.querySelector('span');
// expect(icon).toHaveClass('i-lucide:moon');
// });
});test code ^^
Dand component code below:
D<template>
<client-only>
<u-button
:icon="isDark ? 'i-lucide-moon' : 'i-lucide-sun'"
color="neutral"
variant="ghost"
aria-label="Toggle color mode"
@click="isDark = !isDark"
></u-button>
<template #fallback>
<div class="size-8"></div>
</template>
</client-only>
</template>
<script setup lang="ts">
import { useColorMode } from '#imports'
const colorMode = useColorMode()
const isDark = computed({
get() {
return colorMode.value === 'dark'
},
set() {
colorMode.preference = colorMode.value === 'dark' ? 'light' : 'dark'
}
})
</script><template>
<client-only>
<u-button
:icon="isDark ? 'i-lucide-moon' : 'i-lucide-sun'"
color="neutral"
variant="ghost"
aria-label="Toggle color mode"
@click="isDark = !isDark"
></u-button>
<template #fallback>
<div class="size-8"></div>
</template>
</client-only>
</template>
<script setup lang="ts">
import { useColorMode } from '#imports'
const colorMode = useColorMode()
const isDark = computed({
get() {
return colorMode.value === 'dark'
},
set() {
colorMode.preference = colorMode.value === 'dark' ? 'light' : 'dark'
}
})
</script>Sorry @devin schumacher, I seem to be having a bit of trouble. Don't worry though, I've pinged my support and they will try to fix me up! :technologist:
Perhaps try again in 15mins?
Perhaps try again in 15mins?
