From fffe240a830e97106b802fc704b5beade26e4f06 Mon Sep 17 00:00:00 2001 From: pmakode-akamai Date: Thu, 5 Sep 2024 12:44:45 +0530 Subject: [PATCH 1/4] Add unit tests for SelectableTableRow component --- .../SelectableTableRow.test.tsx | 80 +++++++++++++++++++ 1 file changed, 80 insertions(+) create mode 100644 packages/manager/src/components/SelectableTableRow/SelectableTableRow.test.tsx diff --git a/packages/manager/src/components/SelectableTableRow/SelectableTableRow.test.tsx b/packages/manager/src/components/SelectableTableRow/SelectableTableRow.test.tsx new file mode 100644 index 00000000000..9b72de40d5f --- /dev/null +++ b/packages/manager/src/components/SelectableTableRow/SelectableTableRow.test.tsx @@ -0,0 +1,80 @@ +import { fireEvent } from '@testing-library/react'; +import * as React from 'react'; + +import { renderWithTheme } from 'src/utilities/testHelpers'; + +import { TableCell } from '../TableCell'; +import { SelectableTableRow } from './SelectableTableRow'; + +const cells = [ + { id: 1, label: 'child-cell-1' }, + { id: 2, label: 'child-cell-2' }, + { id: 3, label: 'child-cell-3' }, +]; + +const defaultArgs = { + children: cells.map((cell) => ( + {cell.label} + )), + handleToggleCheck: vi.fn(), + isChecked: false, +}; + +const ariaLabel = 'Select all entities on page'; + +describe('SelectableTableRow', () => { + it('should render table row with checkbox and child content', () => { + const { getAllByText, getByRole, getByText } = renderWithTheme( + + ); + + const checkbox = getByRole('checkbox', { + name: ariaLabel, + }); + + expect(checkbox).toBeInTheDocument(); + + cells.forEach((cell) => { + expect(getByText(cell.label)).toBeInTheDocument(); + }); + + expect(getAllByText(/child-cell-/i)).toHaveLength(cells.length); + }); + + it('should call handleToggleCheck on click', () => { + const { getByRole } = renderWithTheme( + + ); + + const checkbox = getByRole('checkbox', { + name: ariaLabel, + }); + + fireEvent.click(checkbox); + expect(defaultArgs.handleToggleCheck).toHaveBeenCalled(); + }); + + it('should show checked checkbox correctly if checked', () => { + const { getByRole } = renderWithTheme( + + ); + + const checkbox = getByRole('checkbox', { + name: ariaLabel, + }); + + expect(checkbox).toBeChecked(); + }); + + it('should show unchecked checkbox correctly if unchecked', () => { + const { getByRole } = renderWithTheme( + + ); + + const checkbox = getByRole('checkbox', { + name: ariaLabel, + }); + + expect(checkbox).not.toBeChecked(); + }); +}); From 7cfea7fc75040af314da2fc9fe50325d95954b27 Mon Sep 17 00:00:00 2001 From: pmakode-akamai Date: Thu, 5 Sep 2024 14:04:23 +0530 Subject: [PATCH 2/4] Wrap SelectableTableRow with wrapWithTableBody --- .../SelectableTableRow.test.tsx | 22 ++++++++++--------- 1 file changed, 12 insertions(+), 10 deletions(-) diff --git a/packages/manager/src/components/SelectableTableRow/SelectableTableRow.test.tsx b/packages/manager/src/components/SelectableTableRow/SelectableTableRow.test.tsx index 9b72de40d5f..25a36627807 100644 --- a/packages/manager/src/components/SelectableTableRow/SelectableTableRow.test.tsx +++ b/packages/manager/src/components/SelectableTableRow/SelectableTableRow.test.tsx @@ -1,7 +1,7 @@ -import { fireEvent } from '@testing-library/react'; +import { fireEvent, render } from '@testing-library/react'; import * as React from 'react'; -import { renderWithTheme } from 'src/utilities/testHelpers'; +import { wrapWithTableBody } from 'src/utilities/testHelpers'; import { TableCell } from '../TableCell'; import { SelectableTableRow } from './SelectableTableRow'; @@ -24,8 +24,8 @@ const ariaLabel = 'Select all entities on page'; describe('SelectableTableRow', () => { it('should render table row with checkbox and child content', () => { - const { getAllByText, getByRole, getByText } = renderWithTheme( - + const { getAllByText, getByRole, getByText } = render( + wrapWithTableBody() ); const checkbox = getByRole('checkbox', { @@ -42,8 +42,8 @@ describe('SelectableTableRow', () => { }); it('should call handleToggleCheck on click', () => { - const { getByRole } = renderWithTheme( - + const { getByRole } = render( + wrapWithTableBody() ); const checkbox = getByRole('checkbox', { @@ -55,8 +55,10 @@ describe('SelectableTableRow', () => { }); it('should show checked checkbox correctly if checked', () => { - const { getByRole } = renderWithTheme( - + const { getByRole } = render( + wrapWithTableBody( + + ) ); const checkbox = getByRole('checkbox', { @@ -67,8 +69,8 @@ describe('SelectableTableRow', () => { }); it('should show unchecked checkbox correctly if unchecked', () => { - const { getByRole } = renderWithTheme( - + const { getByRole } = render( + wrapWithTableBody() ); const checkbox = getByRole('checkbox', { From 1e543efcf5aeb82d6f7d0ff0c6de7403722c7704 Mon Sep 17 00:00:00 2001 From: pmakode-akamai Date: Thu, 5 Sep 2024 14:07:34 +0530 Subject: [PATCH 3/4] Added changeset: Add unit tests for SelectableTableRow component --- packages/manager/.changeset/pr-10890-tests-1725525454848.md | 5 +++++ 1 file changed, 5 insertions(+) create mode 100644 packages/manager/.changeset/pr-10890-tests-1725525454848.md diff --git a/packages/manager/.changeset/pr-10890-tests-1725525454848.md b/packages/manager/.changeset/pr-10890-tests-1725525454848.md new file mode 100644 index 00000000000..84b807992ef --- /dev/null +++ b/packages/manager/.changeset/pr-10890-tests-1725525454848.md @@ -0,0 +1,5 @@ +--- +"@linode/manager": Tests +--- + +Add unit tests for SelectableTableRow component ([#10890](https://github.com/linode/manager/pull/10890)) From 20c3ae1de224bc5fc228e29159d4b7d95e97f4e8 Mon Sep 17 00:00:00 2001 From: pmakode-akamai Date: Fri, 6 Sep 2024 11:25:00 +0530 Subject: [PATCH 4/4] Refactor unit tests to use for toggling --- .../SelectableTableRow.test.tsx | 46 +++++++++---------- 1 file changed, 21 insertions(+), 25 deletions(-) diff --git a/packages/manager/src/components/SelectableTableRow/SelectableTableRow.test.tsx b/packages/manager/src/components/SelectableTableRow/SelectableTableRow.test.tsx index 25a36627807..143c26a228d 100644 --- a/packages/manager/src/components/SelectableTableRow/SelectableTableRow.test.tsx +++ b/packages/manager/src/components/SelectableTableRow/SelectableTableRow.test.tsx @@ -54,29 +54,25 @@ describe('SelectableTableRow', () => { expect(defaultArgs.handleToggleCheck).toHaveBeenCalled(); }); - it('should show checked checkbox correctly if checked', () => { - const { getByRole } = render( - wrapWithTableBody( - - ) - ); - - const checkbox = getByRole('checkbox', { - name: ariaLabel, - }); - - expect(checkbox).toBeChecked(); - }); - - it('should show unchecked checkbox correctly if unchecked', () => { - const { getByRole } = render( - wrapWithTableBody() - ); - - const checkbox = getByRole('checkbox', { - name: ariaLabel, - }); - - expect(checkbox).not.toBeChecked(); - }); + it.each([ + [true, 'checked'], + [false, 'unchecked'], + ])( + 'should correctly reflect the checkbox state when isChecked is %s', + (isChecked) => { + const { getByRole } = render( + wrapWithTableBody( + + ) + ); + + const checkbox = getByRole('checkbox', { name: ariaLabel }); + + if (isChecked) { + expect(checkbox).toBeChecked(); + } else { + expect(checkbox).not.toBeChecked(); + } + } + ); });