From d05a68244977e3438de6eb53df3ab64d1b2aec77 Mon Sep 17 00:00:00 2001 From: gitdallas <5322142+gitdallas@users.noreply.github.com> Date: Thu, 18 Jan 2024 12:37:38 -0600 Subject: [PATCH] chore(SimpleDropdown):add tests, also some lints --- src/app/appLayout/AppToolbar.tsx | 42 +++- src/components/SimpleDropdown.tsx | 5 +- .../simpleDropdown.test.tsx.snap | 217 ++++++++++++++++++ src/components/__tests__/actionMenu.test.tsx | 190 ++++++++------- .../__tests__/simpleDropdown.test.tsx | 171 ++++++++++++++ 5 files changed, 516 insertions(+), 109 deletions(-) create mode 100644 src/components/__tests__/__snapshots__/simpleDropdown.test.tsx.snap create mode 100644 src/components/__tests__/simpleDropdown.test.tsx diff --git a/src/app/appLayout/AppToolbar.tsx b/src/app/appLayout/AppToolbar.tsx index 32e4d782..3312304e 100644 --- a/src/app/appLayout/AppToolbar.tsx +++ b/src/app/appLayout/AppToolbar.tsx @@ -1,12 +1,10 @@ import * as React from 'react'; import { useNavigate } from 'react-router-dom'; import { - Checkbox, Dropdown, DropdownItem, Icon, MenuToggle, - Radio, ToggleGroup, ToggleGroupItem, Toolbar, @@ -24,9 +22,11 @@ const AppToolbar: React.FunctionComponent = () => { const [helpOpen, setHelpOpen] = React.useState(false); const [userDropdownOpen, setUserDropdownOpen] = React.useState(false); const [kebabDropdownOpen, setKebabDropdownOpen] = React.useState(false); - const [isDarkTheme, setIsDarkTheme] = React.useState(window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches); + const [isDarkTheme, setIsDarkTheme] = React.useState( + window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches + ); - const applyTheme = (isDark) => { + const applyTheme = isDark => { const htmlElement = document.getElementsByTagName('html')[0]; if (htmlElement) { if (isDark) { @@ -87,14 +87,32 @@ const AppToolbar: React.FunctionComponent = () => { > - } isSelected={!isDarkTheme} onChange={() => { - setIsDarkTheme(false); - applyTheme(false); - }} /> - } isSelected={isDarkTheme} onChange={() => { - setIsDarkTheme(true); - applyTheme(true); - }} /> + + + + } + isSelected={!isDarkTheme} + onChange={() => { + setIsDarkTheme(false); + applyTheme(false); + }} + /> + + + + } + isSelected={isDarkTheme} + onChange={() => { + setIsDarkTheme(true); + applyTheme(true); + }} + /> diff --git a/src/components/SimpleDropdown.tsx b/src/components/SimpleDropdown.tsx index c4d78c2c..eb813eb8 100644 --- a/src/components/SimpleDropdown.tsx +++ b/src/components/SimpleDropdown.tsx @@ -24,7 +24,10 @@ export const SimpleDropdown: React.FC = ({ setIsOpen(isOpen)} - onSelect={onSelect} + onSelect={() => { + setIsOpen(false); + onSelect && onSelect(); + }} toggle={(toggleRef: React.Ref) => ( + + +`; + +exports[`snaptshot after toggle is clicked 1`] = ` + + +
+
+ +
+
+ +`; diff --git a/src/components/__tests__/actionMenu.test.tsx b/src/components/__tests__/actionMenu.test.tsx index 185f2f90..8617afc5 100644 --- a/src/components/__tests__/actionMenu.test.tsx +++ b/src/components/__tests__/actionMenu.test.tsx @@ -1,120 +1,118 @@ import React from 'react'; -import ActionMenu from '../ActionMenu'; import { render, screen } from '@testing-library/react'; import userEvent from '@testing-library/user-event'; +import ActionMenu from '../ActionMenu'; import '@testing-library/jest-dom'; test('renders proper dom including elipse icon', () => { - const item = { foo: 'bar' }; - const actionClicked = (_item: {foo: string}) => {}; - const { asFragment } = render( - - item={item} - actions={[{ label: 'Delete', onClick: actionClicked }]} + const item = { foo: 'bar' }; + const actionClicked = jest.fn(); + const { asFragment } = render( + + item={item} + actions={[{ label: 'Delete', onClick: actionClicked }]} /> - ); - expect(asFragment()).toMatchSnapshot(); - }); - - test('actions will not show before button is clicked', () => { - const user = userEvent.setup(); + ); + expect(asFragment()).toMatchSnapshot(); +}); - const item = { foo: 'bar' }; - const actionClicked = (_item: {foo: string}) => {}; - const { queryByText } = render( - - item={item} - actions={[{ label: 'Delete', onClick: actionClicked }]} +test('actions will not show before button is clicked', () => { + const item = { foo: 'bar' }; + const actionClicked = jest.fn(); + const { queryByText } = render( + + item={item} + actions={[{ label: 'Delete', onClick: actionClicked }]} /> - ); - expect(queryByText("Delete")).toBeNull(); - }); + ); + expect(queryByText('Delete')).toBeNull(); +}); - test('actions will show after button is clicked', async () => { - const user = userEvent.setup(); +test('actions will show after button is clicked', async () => { + const user = userEvent.setup(); - const item = { foo: 'bar' }; - const actionClicked = (_item: {foo: string}) => {}; - render( - - item={item} - actions={[{ label: 'Delete', onClick: actionClicked }]} + const item = { foo: 'bar' }; + const actionClicked = jest.fn(); + render( + + item={item} + actions={[{ label: 'Delete', onClick: actionClicked }]} /> - ); - const toggleButton = await screen.findByLabelText('Action Menu Toggle'); - await user.click(toggleButton); - expect(screen.getByText("Delete")).toBeVisible(); - }); + ); + const toggleButton = await screen.findByLabelText('Action Menu Toggle'); + await user.click(toggleButton); + expect(screen.getByText('Delete')).toBeVisible(); +}); - test('snapshot matches after opening the action menu', async () => { - const user = userEvent.setup(); +test('snapshot matches after opening the action menu', async () => { + const user = userEvent.setup(); - const item = { foo: 'bar' }; - const actionClicked = (_item: {foo: string}) => {}; - const { asFragment } = render( - - item={item} - actions={[{ label: 'Delete', onClick: actionClicked }]} + const item = { foo: 'bar' }; + const actionClicked = jest.fn(); + const { asFragment } = render( + + item={item} + actions={[{ label: 'Delete', onClick: actionClicked }]} /> - ); - const toggleButton = await screen.findByLabelText('Action Menu Toggle'); - await user.click(toggleButton); - expect(asFragment()).toMatchSnapshot(); - }); + ); + const toggleButton = await screen.findByLabelText('Action Menu Toggle'); + await user.click(toggleButton); + expect(asFragment()).toMatchSnapshot(); +}); - test('action callback should get called when clicked', async () => { - const user = userEvent.setup(); +test('action callback should get called when clicked', async () => { + const user = userEvent.setup(); - const item = { foo: 'bar' }; - const actionClicked = jest.fn(); - render( - - item={item} - actions={[{ label: 'Delete', onClick: actionClicked }]} + const item = { foo: 'bar' }; + const actionClicked = jest.fn(); + render( + + item={item} + actions={[{ label: 'Delete', onClick: actionClicked }]} /> - ); - expect(actionClicked).toHaveBeenCalledTimes(0); - const toggleButton = await screen.findByLabelText('Action Menu Toggle'); - await user.click(toggleButton); - const deleteButton = await screen.findByText("Delete"); - await user.click(deleteButton); - expect(actionClicked).toHaveBeenCalledTimes(1); - }); + ); + expect(actionClicked).toHaveBeenCalledTimes(0); + const toggleButton = await screen.findByLabelText('Action Menu Toggle'); + await user.click(toggleButton); + const deleteButton = await screen.findByText('Delete'); + await user.click(deleteButton); + expect(actionClicked).toHaveBeenCalledTimes(1); +}); - test('action menu closes after selection', async () => { - const user = userEvent.setup(); +test('action menu closes after selection', async () => { + const user = userEvent.setup(); - const item = { foo: 'bar' }; - const actionClicked = jest.fn(); - render( - - item={item} - actions={[{ label: 'Delete', onClick: actionClicked }]} + const item = { foo: 'bar' }; + const actionClicked = jest.fn(); + render( + + item={item} + actions={[{ label: 'Delete', onClick: actionClicked }]} /> - ); - const toggleButton = await screen.findByLabelText('Action Menu Toggle'); - await user.click(toggleButton); - const deleteButton = await screen.findByText("Delete"); - expect(deleteButton).toBeVisible(); - await user.click(deleteButton); - expect(deleteButton).not.toBeVisible(); - }); + ); + const toggleButton = await screen.findByLabelText('Action Menu Toggle'); + await user.click(toggleButton); + const deleteButton = await screen.findByText('Delete'); + expect(deleteButton).toBeVisible(); + await user.click(deleteButton); + expect(deleteButton).not.toBeVisible(); +}); - test('action menu closes if toggle is clicked again', async () => { - const user = userEvent.setup(); +test('action menu closes if toggle is clicked again', async () => { + const user = userEvent.setup(); - const item = { foo: 'bar' }; - const actionClicked = jest.fn(); - render( - - item={item} - actions={[{ label: 'Delete', onClick: actionClicked }]} + const item = { foo: 'bar' }; + const actionClicked = jest.fn(); + render( + + item={item} + actions={[{ label: 'Delete', onClick: actionClicked }]} /> - ); - const toggleButton = await screen.findByLabelText('Action Menu Toggle'); - await user.click(toggleButton); - const deleteButton = await screen.findByText("Delete"); - expect(deleteButton).toBeVisible(); - await user.click(toggleButton); - expect(deleteButton).not.toBeVisible(); - }); \ No newline at end of file + ); + const toggleButton = await screen.findByLabelText('Action Menu Toggle'); + await user.click(toggleButton); + const deleteButton = await screen.findByText('Delete'); + expect(deleteButton).toBeVisible(); + await user.click(toggleButton); + expect(deleteButton).not.toBeVisible(); +}); diff --git a/src/components/__tests__/simpleDropdown.test.tsx b/src/components/__tests__/simpleDropdown.test.tsx new file mode 100644 index 00000000..977b06e1 --- /dev/null +++ b/src/components/__tests__/simpleDropdown.test.tsx @@ -0,0 +1,171 @@ +import React from 'react'; +import { DropdownItem } from '@patternfly/react-core'; +import { render, screen } from '@testing-library/react'; +import userEvent from '@testing-library/user-event'; +import '@testing-library/jest-dom'; +import { SimpleDropdown } from '../SimpleDropdown'; + +const exampleItems = ['SSLv23', 'TLSv1', 'TLSv1.1', 'TLSv1.2', 'Disable SSL']; + +test('renders proper dom snapshot', () => { + const setSslProtocol = jest.fn(); + const { asFragment } = render( + ( + setSslProtocol(s)}> + {s} + + ))} + /> + ); + expect(asFragment()).toMatchSnapshot(); +}); + +test('dropdown label is visible', () => { + const setSslProtocol = jest.fn(); + render( + ( + setSslProtocol(s)}> + {s} + + ))} + /> + ); + expect(screen.getByText('dropdown label')).toBeVisible(); +}); + +test('options will not show before toggle is clicked', async () => { + const setSslProtocol = jest.fn(); + render( + ( + setSslProtocol(s)}> + {s} + + ))} + /> + ); + exampleItems.forEach(i => { + expect(screen.queryByText(i)).toBeNull(); + }); +}); + +test('snaptshot after toggle is clicked', async () => { + const user = userEvent.setup(); + const setSslProtocol = jest.fn(); + const { asFragment } = render( + ( + setSslProtocol(s)}> + {s} + + ))} + /> + ); + const toggleButton = await screen.findByText('dropdown label'); + await user.click(toggleButton); + expect(asFragment()).toMatchSnapshot(); +}); + +test('options will show after toggle is clicked', async () => { + const user = userEvent.setup(); + const setSslProtocol = jest.fn(); + render( + ( + setSslProtocol(s)}> + {s} + + ))} + /> + ); + const toggleButton = await screen.findByText('dropdown label'); + await user.click(toggleButton); + exampleItems.forEach(i => { + expect(screen.getByText(i)).toBeVisible(); + }); +}); + +test('menu will go away after toggle is clicked twice', async () => { + const user = userEvent.setup(); + const setSslProtocol = jest.fn(); + render( + ( + setSslProtocol(s)}> + {s} + + ))} + /> + ); + const toggleButton = await screen.findByText('dropdown label'); + await user.click(toggleButton); + expect(screen.getByRole('menu')).toBeVisible(); + await user.click(toggleButton); + expect(screen.getByRole('menu')).not.toBeVisible(); +}); + +test('menu will go away after option selected', async () => { + const user = userEvent.setup(); + const setSslProtocol = jest.fn(); + render( + ( + setSslProtocol(s)}> + {s} + + ))} + /> + ); + const toggleButton = await screen.findByText('dropdown label'); + await user.click(toggleButton); + const option = await screen.findByText(exampleItems[2]); + await user.click(option); + expect(screen.getByRole('menu')).not.toBeVisible(); +}); + +test('onclick callback should get called when clicked', async () => { + const user = userEvent.setup(); + const setSslProtocol = jest.fn(); + render( + ( + setSslProtocol(s)}> + {s} + + ))} + /> + ); + expect(setSslProtocol).toHaveBeenCalledTimes(0); + const toggleButton = await screen.findByText('dropdown label'); + await user.click(toggleButton); + const option = await screen.findByText(exampleItems[2]); + await user.click(option); + expect(setSslProtocol).toHaveBeenCalledTimes(1); + expect(setSslProtocol).toHaveBeenCalledWith(exampleItems[2]); +});