chore: refactor the tests

Author: PatrickDinh

src/features/theme/components/theme-toggle.test.tsx

@@ -2,13 +2,14 @@ import { describe, it, expect } from 'vitest'
 import { render, waitFor } from '@/tests/testing-library'
 import { ThemeToggle } from '@/features/theme/components/theme-toggle'
 import { executeComponentTest } from '@/tests/test-component'
+import { themeConstants } from '../constant'
 
 describe('when the theme is toggled to dark', () => {
   it('the theme is set to dark', async () => {
     return executeComponentTest(
       () => render(<ThemeToggle />),
       async (component, user) => {
-        user.click(await component.findByTestId('theme-toggle-menu'))
+        user.click(await component.findByRole('button', { name: themeConstants.toggleButtonName }))
         user.click(await component.findByText('Dark'))
 
         await waitFor(() => expect(document.documentElement.classList.contains('dark')).toBe(true))

src/features/theme/components/theme-toggle.tsx

@@ -3,14 +3,15 @@ import { Moon, Sun } from 'lucide-react'
 import { Button } from '@/features/common/components/button'
 import { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuTrigger } from '@/features/common/components/dropdown-menu'
 import { useTheme } from '../hooks/use-theme'
+import { themeConstants } from '../constant'
 
 export function ThemeToggle() {
   const { setTheme } = useTheme()
 
   return (
     <DropdownMenu>
       <DropdownMenuTrigger asChild>
-        <Button variant="default" size="icon" data-testid="theme-toggle-menu">
+        <Button variant="default" size="icon" aria-label={themeConstants.toggleButtonName}>
           <Sun className="size-[1.2rem] rotate-0 scale-100 transition-all dark:-rotate-90 dark:scale-0" />
           <Moon className="absolute size-[1.2rem] rotate-90 scale-0 transition-all dark:rotate-0 dark:scale-100" />
           <span className="sr-only">Toggle theme</span>

src/features/theme/constant.ts

@@ -0,0 +1,3 @@
+export const themeConstants = {
+  toggleButtonName: 'Toggle theme',
+}