diff --git a/src/components/common/Select/select.test.tsx b/src/components/common/Select/select.test.tsx new file mode 100644 index 0000000..c2c1ed7 --- /dev/null +++ b/src/components/common/Select/select.test.tsx @@ -0,0 +1,111 @@ +import '@testing-library/jest-dom'; +import React from 'react'; +import { describe, expect, it } from 'vitest'; + +import { Select, SelectContent, SelectDivider, SelectItem, SelectLabel, SelectToggle } from '../'; +import { fireEvent, render, screen } from '../../../libs/test'; + +const items = [ + { + label: 'Cat', + value: 'cat', + }, + { + label: 'Dog', + value: 'dog', + }, + { + label: 'Fox', + value: 'fox', + }, + { + label: 'Nilgai', + value: 'nilgai', + }, + { + label: 'Numbird', + value: 'nunbird', + disabled: true, + }, +]; + +describe('UI test', () => { + it('Should appear SelectContent when click SelectToggle', () => { + render( + , + ); + + const toggleBtn = screen.getByText('SelectToggle'); + expect(toggleBtn).toBeInTheDocument(); + + // open Select content + fireEvent.click(toggleBtn); + + const selectLabel = screen.getByText('Animals'); + expect(selectLabel).toBeInTheDocument(); + + // test whole items. + items.forEach(item => { + const itemLI = screen.getByText(item.label); + expect(itemLI).toBeInTheDocument(); + + if (item.disabled == true) { + expect(itemLI).toHaveAttribute('disabled'); + } else expect(itemLI).not.toBeDisabled(); + }); + + // when click item, select content should be closed. + fireEvent.click(screen.getByText(items[0].label)); + expect(selectLabel).not.toBeInTheDocument(); + }); + + it('Multiple Select', () => { + render( + , + ); + + const toggleBtn = screen.getByText('SelectToggle'); + expect(toggleBtn).toBeInTheDocument(); + + items.forEach(item => { + if (item.disabled) return; + + // open Select content + fireEvent.click(toggleBtn); + + const itemLI = screen.getByRole('option', { name: item.label }); + expect(itemLI).toBeInTheDocument(); + + // select item (and close Select content) + fireEvent.click(itemLI); + // reopen Select content + fireEvent.click(toggleBtn); + + // Is Selected? + const itemLI2 = screen.getByRole('option', { name: item.label }); + expect(itemLI2).toHaveAttribute('aria-selected', 'true'); + }); + }); +}); diff --git a/src/components/common/Toast/toast.test.tsx b/src/components/common/Toast/toast.test.tsx index 6d29e42..e048413 100644 --- a/src/components/common/Toast/toast.test.tsx +++ b/src/components/common/Toast/toast.test.tsx @@ -66,7 +66,7 @@ describe('Toast', () => { fireEvent.click(description); - waitFor(() => { + await waitFor(() => { // when click toast, it should be removed. expect(title).not.toBeInTheDocument();