From bfec23350bb4c962f81ac3efffed15db42fe79fe Mon Sep 17 00:00:00 2001 From: Ye-Chan Kang Date: Mon, 11 Mar 2024 20:48:43 +0900 Subject: [PATCH] refactor: test code describe name --- src/components/Checkbox/Checkbox.test.tsx | 50 ++++++++++ src/components/Checkbox/checkbox.test.tsx | 2 +- src/components/Dialog/Dialog.test.tsx | 86 +++++++++++++++++ src/components/Dialog/dialog.test.tsx | 2 +- src/components/Dropdown/Dropdown.test.tsx | 50 ++++++++++ src/components/Dropdown/dropdown.test.tsx | 2 +- src/components/Input/Input.test.tsx | 24 +++++ src/components/Select/Select.test.tsx | 111 ++++++++++++++++++++++ src/components/Select/select.test.tsx | 4 +- src/components/Switch/Switch.test.tsx | 42 ++++++++ src/components/Textarea/Textarea.test.tsx | 25 +++++ src/components/Toast/Toast.test.tsx | 77 +++++++++++++++ src/components/Toggle/Toggle.test.tsx | 19 ++++ src/components/Tooltip/Tooltip.test.tsx | 56 +++++++++++ 14 files changed, 545 insertions(+), 5 deletions(-) create mode 100644 src/components/Checkbox/Checkbox.test.tsx create mode 100644 src/components/Dialog/Dialog.test.tsx create mode 100644 src/components/Dropdown/Dropdown.test.tsx create mode 100644 src/components/Input/Input.test.tsx create mode 100644 src/components/Select/Select.test.tsx create mode 100644 src/components/Switch/Switch.test.tsx create mode 100644 src/components/Textarea/Textarea.test.tsx create mode 100644 src/components/Toast/Toast.test.tsx create mode 100644 src/components/Toggle/Toggle.test.tsx create mode 100644 src/components/Tooltip/Tooltip.test.tsx diff --git a/src/components/Checkbox/Checkbox.test.tsx b/src/components/Checkbox/Checkbox.test.tsx new file mode 100644 index 0000000..492a24f --- /dev/null +++ b/src/components/Checkbox/Checkbox.test.tsx @@ -0,0 +1,50 @@ +import '@testing-library/jest-dom'; +import React from 'react'; +import { describe, expect, it } from 'vitest'; + +import { Checkbox, Label } from '../..'; +import { fireEvent, render, screen } from '../../libs/test'; + +describe('Checkbox', () => { + it('Checkbox icon must be customizable and work when clicked.', () => { + render( +
+ + + + } + /> +
+ +

+ You agree to our Terms of Service and Privacy Policy. +

+
+
, + ); + + const checkbox = screen.getByRole('checkbox-test'); + expect(checkbox).toBeInTheDocument(); + + const checkIcon = document.querySelector('svg[role="checkbox-icon"]'); + expect(checkIcon).toBeInTheDocument(); + + const styledEl = checkIcon?.parentElement; + expect(styledEl).toBeInTheDocument(); + + if (styledEl) { + const beforeBgStyle = styledEl.style.background; + fireEvent.click(checkbox); + + expect(styledEl).not.toHaveStyle(`background: ${beforeBgStyle}`); + } else { + console.error('styledEl is null.'); + } + }); +}); diff --git a/src/components/Checkbox/checkbox.test.tsx b/src/components/Checkbox/checkbox.test.tsx index 8c56ad5..492a24f 100644 --- a/src/components/Checkbox/checkbox.test.tsx +++ b/src/components/Checkbox/checkbox.test.tsx @@ -2,7 +2,7 @@ import '@testing-library/jest-dom'; import React from 'react'; import { describe, expect, it } from 'vitest'; -import { Checkbox, Label } from '../../'; +import { Checkbox, Label } from '../..'; import { fireEvent, render, screen } from '../../libs/test'; describe('Checkbox', () => { diff --git a/src/components/Dialog/Dialog.test.tsx b/src/components/Dialog/Dialog.test.tsx new file mode 100644 index 0000000..3641700 --- /dev/null +++ b/src/components/Dialog/Dialog.test.tsx @@ -0,0 +1,86 @@ +import '@testing-library/jest-dom'; +import React from 'react'; +import { describe, expect, it } from 'vitest'; + +import { + Button, + Dialog, + DialogClose, + DialogContent, + DialogDescription, + DialogFooter, + DialogHeader, + DialogTitle, + DialogToggle, + Input, + InputDesc, + InputGroup, + Label, +} from '../..'; +import { fireEvent, render, screen } from '../../libs/test'; + +describe('Dialog', () => { + it('Should appear DialogContent when click DialogToggle', () => { + render( + + + + + + + Create project + Great project names are short and memorable. + + + + + You can @mention other users to link to them. + + + + + + + + + + + , + ); + + const toggleBtn = screen.getByText('ToggleButton'); + expect(toggleBtn).toBeInTheDocument(); + + fireEvent.click(toggleBtn); + + const projectLabel = screen.getByLabelText(/project/i); + expect(projectLabel).toBeInTheDocument(); + fireEvent.change(projectLabel, { target: { value: 'blur blur' } }); + + const closeBtn = screen.getByText('Close'); + expect(closeBtn).toBeInTheDocument(); + + fireEvent.click(closeBtn); + + expect(projectLabel).not.toBeInTheDocument(); + + fireEvent.click(toggleBtn); + + const dialogTitle = screen.getByText('Create project'); + expect(dialogTitle).toBeInTheDocument(); + + const dialogBGs = document.getElementsByClassName('bmates-modal-bg'); + expect(dialogBGs.length).toBe(1); + + fireEvent.click(dialogBGs[0]); + + expect(closeBtn).not.toBeInTheDocument(); + }); +}); diff --git a/src/components/Dialog/dialog.test.tsx b/src/components/Dialog/dialog.test.tsx index f1c3a72..3641700 100644 --- a/src/components/Dialog/dialog.test.tsx +++ b/src/components/Dialog/dialog.test.tsx @@ -16,7 +16,7 @@ import { InputDesc, InputGroup, Label, -} from '../../'; +} from '../..'; import { fireEvent, render, screen } from '../../libs/test'; describe('Dialog', () => { diff --git a/src/components/Dropdown/Dropdown.test.tsx b/src/components/Dropdown/Dropdown.test.tsx new file mode 100644 index 0000000..74325f4 --- /dev/null +++ b/src/components/Dropdown/Dropdown.test.tsx @@ -0,0 +1,50 @@ +import '@testing-library/jest-dom'; +import React from 'react'; +import { describe, expect, it } from 'vitest'; + +import { + Dropdown, + DropdownContent, + DropdownDivider, + DropdownItem, + DropdownLabel, + DropdownShortcut, + DropdownToggle, +} from '..'; +import { fireEvent, render, screen } from '../../libs/test'; + +describe('Dropdown', () => { + it('Should appear DropdownContent when click DropdownToggle', () => { + render( + + DropdownToggle + + Share Social + + + GitHub + ⌘+T + + + Facebook + Twitter + + , + ); + + const toggleBtn = screen.getByText('DropdownToggle'); + expect(toggleBtn).toBeInTheDocument(); + + fireEvent.click(toggleBtn); + + const dropdownLabel = screen.getByText('Share Social'); + expect(dropdownLabel).toBeInTheDocument(); + + const dropdownItem = screen.getByText('Twitter'); + expect(dropdownItem).toBeInTheDocument(); + + fireEvent.click(dropdownItem); + + expect(dropdownLabel).not.toBeInTheDocument(); + }); +}); diff --git a/src/components/Dropdown/dropdown.test.tsx b/src/components/Dropdown/dropdown.test.tsx index 8a71ec2..74325f4 100644 --- a/src/components/Dropdown/dropdown.test.tsx +++ b/src/components/Dropdown/dropdown.test.tsx @@ -10,7 +10,7 @@ import { DropdownLabel, DropdownShortcut, DropdownToggle, -} from '../'; +} from '..'; import { fireEvent, render, screen } from '../../libs/test'; describe('Dropdown', () => { diff --git a/src/components/Input/Input.test.tsx b/src/components/Input/Input.test.tsx new file mode 100644 index 0000000..777db1d --- /dev/null +++ b/src/components/Input/Input.test.tsx @@ -0,0 +1,24 @@ +import '@testing-library/jest-dom'; +import React from 'react'; +import { expect, it } from 'vitest'; + +import { Input, InputGroup, Label } from '../..'; +import { fireEvent, render, screen } from '../../libs/test'; + +describe('Input', () => { + it('Fill out the Input', async () => { + render( + + + + , + {}, + ); + const emailValue = 'bandmator@bandmate.com'; + const emailInput = screen.getByLabelText(/email/i); + + fireEvent.change(emailInput, { target: { value: emailValue } }); + + expect(emailInput).toHaveValue(emailValue); + }); +}); diff --git a/src/components/Select/Select.test.tsx b/src/components/Select/Select.test.tsx new file mode 100644 index 0000000..36025c8 --- /dev/null +++ b/src/components/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('Select', () => { + 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/Select/select.test.tsx b/src/components/Select/select.test.tsx index 0efdd90..36025c8 100644 --- a/src/components/Select/select.test.tsx +++ b/src/components/Select/select.test.tsx @@ -2,7 +2,7 @@ import '@testing-library/jest-dom'; import React from 'react'; import { describe, expect, it } from 'vitest'; -import { Select, SelectContent, SelectDivider, SelectItem, SelectLabel, SelectToggle } from '../'; +import { Select, SelectContent, SelectDivider, SelectItem, SelectLabel, SelectToggle } from '..'; import { fireEvent, render, screen } from '../../libs/test'; const items = [ @@ -29,7 +29,7 @@ const items = [ }, ]; -describe('UI test', () => { +describe('Select', () => { it('Should appear SelectContent when click SelectToggle', () => { render(