diff --git a/src/components/ThemeSwitch/index.test.tsx b/src/components/ThemeSwitch/index.test.tsx index f3eb956..b4f4e1f 100644 --- a/src/components/ThemeSwitch/index.test.tsx +++ b/src/components/ThemeSwitch/index.test.tsx @@ -1,21 +1,32 @@ -import { cleanup, fireEvent, render, waitFor } from '@testing-library/react' -import ThemeSwitch from '.' +import { cleanup, fireEvent, render, screen } from '@testing-library/react' +import ThemeSwitch, { getIconName } from '.' describe('ThemeSwitch', () => { afterEach(cleanup) it('renders correctly', async () => { - const { container } = render() - await waitFor(() => container.querySelector('aside')) - expect(container.querySelector('aside')).toBeInTheDocument() + render() + const button = await screen.findByRole('combobox') + expect(button).toBeInTheDocument() }) - it('checkbox can be changed', async () => { - const { container } = render() + it('button can be clicked', async () => { + render() + const button = await screen.findByRole('combobox') + fireEvent.click(button) + }) - const toggle = container.querySelector('input') - const label = container.querySelector('label') - fireEvent.click(label) - fireEvent.change(toggle, { target: { checked: true } }) + it('getIconName', () => { + let theme = 'light' + const icon = getIconName(theme) + expect(icon).toBe('Sun') + + theme = 'dark' + const icon2 = getIconName(theme) + expect(icon2).toBe('Moon') + + theme = 'system' + const icon3 = getIconName(theme) + expect(icon3).toBe('Monitor') }) })