rewrite ThemeSwitch tests

src/components/ThemeSwitch/index.test.tsx

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