diff --git a/src/components/GradesView/EditModal/OverrideTable/ReasonInput/__snapshots__/index.test.jsx.snap b/src/components/GradesView/EditModal/OverrideTable/ReasonInput/__snapshots__/index.test.jsx.snap deleted file mode 100644 index 153368f..0000000 --- a/src/components/GradesView/EditModal/OverrideTable/ReasonInput/__snapshots__/index.test.jsx.snap +++ /dev/null @@ -1,11 +0,0 @@ -// Jest Snapshot v1, https://goo.gl/fbAQLP - -exports[`ReasonInput component render snapshot 1`] = ` - -`; diff --git a/src/components/GradesView/EditModal/OverrideTable/ReasonInput/index.test.jsx b/src/components/GradesView/EditModal/OverrideTable/ReasonInput/index.test.jsx index fe1e03f..7f652b1 100644 --- a/src/components/GradesView/EditModal/OverrideTable/ReasonInput/index.test.jsx +++ b/src/components/GradesView/EditModal/OverrideTable/ReasonInput/index.test.jsx @@ -1,37 +1,34 @@ -import React from 'react'; -import { shallow } from '@edx/react-unit-test-utils'; - -import { Form } from '@openedx/paragon'; +import { render, screen } from '@testing-library/react'; import useReasonInputData from './hooks'; import ReasonInput from '.'; jest.mock('./hooks', () => jest.fn()); +jest.unmock('@openedx/paragon'); +jest.unmock('react'); + const hookProps = { - ref: 'reason-input-ref', + ref: jest.fn().mockName('hook.ref'), onChange: jest.fn().mockName('hook.onChange'), value: 'test-value', }; useReasonInputData.mockReturnValue(hookProps); -let el; describe('ReasonInput component', () => { beforeEach(() => { jest.clearAllMocks(); - el = shallow(); + render(); }); describe('behavior', () => { it('initializes hook data', () => { expect(useReasonInputData).toHaveBeenCalled(); }); }); - describe('render', () => { - test('snapshot', () => { - expect(el.snapshot).toMatchSnapshot(); - const control = el.instance.findByType(Form.Control)[0]; - expect(control.props.value).toEqual(hookProps.value); - expect(control.props.onChange).toEqual(hookProps.onChange); + describe('renders', () => { + it('input correctly', () => { + expect(screen.getByRole('textbox')).toBeInTheDocument(); + expect(screen.getByRole('textbox')).toHaveValue(hookProps.value); }); }); }); diff --git a/src/components/GradesView/EditModal/OverrideTable/__snapshots__/index.test.jsx.snap b/src/components/GradesView/EditModal/OverrideTable/__snapshots__/index.test.jsx.snap deleted file mode 100644 index 4437a1a..0000000 --- a/src/components/GradesView/EditModal/OverrideTable/__snapshots__/index.test.jsx.snap +++ /dev/null @@ -1,25 +0,0 @@ -// Jest Snapshot v1, https://goo.gl/fbAQLP - -exports[`OverrideTable component render snapshot 1`] = ` -, - "date": { - "formatted": 2000-01-01T00:00:00.000Z, - }, - "reason": , - }, - ] - } - itemCount={3} -/> -`; diff --git a/src/components/GradesView/EditModal/OverrideTable/index.test.jsx b/src/components/GradesView/EditModal/OverrideTable/index.test.jsx index 0c94811..712420a 100644 --- a/src/components/GradesView/EditModal/OverrideTable/index.test.jsx +++ b/src/components/GradesView/EditModal/OverrideTable/index.test.jsx @@ -1,65 +1,65 @@ import React from 'react'; -import { shallow } from '@edx/react-unit-test-utils'; +import { render, screen } from '@testing-library/react'; +import { IntlProvider } from '@edx/frontend-platform/i18n'; -import { DataTable } from '@openedx/paragon'; - -import { formatDateForDisplay } from 'utils'; - -import AdjustedGradeInput from './AdjustedGradeInput'; -import ReasonInput from './ReasonInput'; import useOverrideTableData from './hooks'; import OverrideTable from '.'; +jest.unmock('@openedx/paragon'); +jest.unmock('react'); +jest.unmock('@edx/frontend-platform/i18n'); + jest.mock('utils', () => ({ + ...jest.requireActual('utils'), formatDateForDisplay: (date) => ({ formatted: date }), })); jest.mock('./hooks', () => jest.fn()); -jest.mock('./AdjustedGradeInput', () => 'AdjustedGradeInput'); -jest.mock('./ReasonInput', () => 'ReasonInput'); const hookProps = { hide: false, data: [ - { test: 'data' }, - { andOther: 'test-data' }, + { filename: 'data' }, + { resultsSummary: 'test-data' }, ], - columns: 'test-columns', + columns: [{ + Header: 'Gradebook', + accessor: 'filename', + }, + { + Header: 'Download Summary', + accessor: 'resultsSummary', + }], }; -useOverrideTableData.mockReturnValue(hookProps); -let el; describe('OverrideTable component', () => { beforeEach(() => { jest .clearAllMocks() .useFakeTimers('modern') .setSystemTime(new Date('2000-01-01').getTime()); - el = shallow(); }); - describe('behavior', () => { + describe('hooks', () => { it('initializes hook data', () => { + useOverrideTableData.mockReturnValue(hookProps); + render(); expect(useOverrideTableData).toHaveBeenCalled(); }); }); - describe('render', () => { - test('null render if hide', () => { - useOverrideTableData.mockReturnValueOnce({ ...hookProps, hide: true }); - el = shallow(); - expect(el.isEmptyRender()).toEqual(true); + describe('behavior', () => { + it('null render if hide', () => { + useOverrideTableData.mockReturnValue({ ...hookProps, hide: true }); + render(); + expect(screen.queryByRole('table')).toBeNull(); }); - test('snapshot', () => { - expect(el.snapshot).toMatchSnapshot(); - const table = el.instance.findByType(DataTable)[0]; - expect(table.props.columns).toEqual(hookProps.columns); - const data = [...table.props.data]; - const inputRow = data.pop(); - const formattedDate = formatDateForDisplay(new Date()); - expect(data).toEqual(hookProps.data); - expect(inputRow).toMatchObject({ - adjustedGrade: , - date: formattedDate, - reason: , - }); + it('renders table with correct data', () => { + useOverrideTableData.mockReturnValue(hookProps); + render(); + const table = screen.getByRole('table'); + expect(table).toBeInTheDocument(); + expect(screen.getByText(hookProps.columns[0].Header)).toBeInTheDocument(); + expect(screen.getByText(hookProps.columns[1].Header)).toBeInTheDocument(); + expect(screen.getByText(hookProps.data[0].filename)).toBeInTheDocument(); + expect(screen.getByText(hookProps.data[1].resultsSummary)).toBeInTheDocument(); }); }); }); diff --git a/src/components/GradesView/EditModal/__snapshots__/index.test.jsx.snap b/src/components/GradesView/EditModal/__snapshots__/index.test.jsx.snap deleted file mode 100644 index 46a0c51..0000000 --- a/src/components/GradesView/EditModal/__snapshots__/index.test.jsx.snap +++ /dev/null @@ -1,91 +0,0 @@ -// Jest Snapshot v1, https://goo.gl/fbAQLP - -exports[`EditModal component render with error snapshot 1`] = ` - - -
- - - test-error - - -
- Showing most recent actions (max 5). To see more, please contact support -
-
- Note: Once you save, your changes will be visible to students. -
-
- - - - - Cancel - - - - - -`; - -exports[`EditModal component render without error snapshot 1`] = ` - - -
- - - -
- Showing most recent actions (max 5). To see more, please contact support -
-
- Note: Once you save, your changes will be visible to students. -
-
- - - - - Cancel - - - - - -`; diff --git a/src/components/GradesView/EditModal/index.test.jsx b/src/components/GradesView/EditModal/index.test.jsx index 3468096..2dcb384 100644 --- a/src/components/GradesView/EditModal/index.test.jsx +++ b/src/components/GradesView/EditModal/index.test.jsx @@ -1,126 +1,106 @@ -import React from 'react'; -import { shallow } from '@edx/react-unit-test-utils'; +import { render, screen } from '@testing-library/react'; +import userEvent from '@testing-library/user-event'; +import { IntlProvider } from '@edx/frontend-platform/i18n'; -import { - ActionRow, - ModalDialog, -} from '@openedx/paragon'; -import { useIntl } from '@edx/frontend-platform/i18n'; - -import { formatMessage } from 'testUtils'; - -import ModalHeaders from './ModalHeaders'; -import OverrideTable from './OverrideTable'; import useEditModalData from './hooks'; import EditModal from '.'; import messages from './messages'; jest.mock('./hooks', () => jest.fn()); -jest.mock('./ModalHeaders', () => 'ModalHeaders'); -jest.mock('./OverrideTable', () => 'OverrideTable'); +jest.mock('./ModalHeaders', () => jest.fn(() =>
ModalHeaders
)); +jest.mock('./OverrideTable', () => jest.fn(() =>
OverrideTable
)); + +jest.unmock('@openedx/paragon'); +jest.unmock('react'); +jest.unmock('@edx/frontend-platform/i18n'); const hookProps = { onClose: jest.fn().mockName('hooks.onClose'), error: 'test-error', handleAdjustedGradeClick: jest.fn().mockName('hooks.handleAdjustedGradeClick'), - isOpen: 'test-is-open', + isOpen: true, }; -useEditModalData.mockReturnValue(hookProps); -let el; describe('EditModal component', () => { beforeEach(() => { jest.clearAllMocks(); - el = shallow(); }); describe('behavior', () => { - it('initializes intl hook', () => { - expect(useIntl).toHaveBeenCalled(); - }); it('initializes component hooks', () => { + useEditModalData.mockReturnValue(hookProps); + render(); expect(useEditModalData).toHaveBeenCalled(); }); }); - describe('render', () => { - test('modal props', () => { - const modalProps = el.instance.findByType(ModalDialog)[0].props; - expect(modalProps.title).toEqual(formatMessage(messages.title)); - expect(modalProps.isOpen).toEqual(hookProps.isOpen); - expect(modalProps.onClose).toEqual(hookProps.onClose); - }); - const loadBody = () => { - const body = el.instance.findByType(ModalDialog)[0].children[0]; - const { children } = body.children[0]; - return { body, children }; + describe('renders', () => { + const testModal = () => { + it('modal properly', () => { + const modal = screen.getByRole('dialog', { title: messages.title.defaultMessage }); + expect(modal).toBeInTheDocument(); + }); + it('triggers onClose when closed', async () => { + const user = userEvent.setup(); + const closeButton = screen.getByRole('button', { name: messages.closeText.defaultMessage }); + await user.click(closeButton); + expect(hookProps.onClose).toHaveBeenCalled(); + }); }; const testBody = () => { - test('type', () => { - const { body } = loadBody(); - expect(body.type).toEqual('ModalDialog.Body'); + it('headers row', () => { + const headers = screen.getByText('ModalHeaders'); + expect(headers).toBeInTheDocument(); }); - test('headers row', () => { - const { children } = loadBody(); - expect(children[0]).toMatchObject(shallow()); + it('table row', () => { + const table = screen.getByText('OverrideTable'); + expect(table).toBeInTheDocument(); }); - test('table row', () => { - const { children } = loadBody(); - expect(children[2]).toMatchObject(shallow()); - }); - test('messages', () => { - const { children } = loadBody(); - expect(children[3].children[0].el).toEqual(formatMessage(messages.visibility)); - expect(children[4].children[0].el).toEqual(formatMessage(messages.saveVisibility)); + it('messages', () => { + const visibilityMessage = screen.getByText(messages.visibility.defaultMessage); + const saveVisibilityMessage = screen.getByText(messages.saveVisibility.defaultMessage); + expect(visibilityMessage).toBeInTheDocument(); + expect(saveVisibilityMessage).toBeInTheDocument(); }); }; const testFooter = () => { - let footer; - beforeEach(() => { - footer = el.instance.findByType(ModalDialog)[0].children; + it('adjusted grade button', async () => { + const user = userEvent.setup(); + const saveGradeButton = screen.getByRole('button', { name: messages.saveGrade.defaultMessage }); + expect(saveGradeButton).toBeInTheDocument(); + await user.click(saveGradeButton); + expect(hookProps.handleAdjustedGradeClick).toHaveBeenCalled(); }); - test('type', () => { - expect(footer[1].type).toEqual('ModalDialog.Footer'); - }); - test('contains action row', () => { - expect(footer[1].children[0].type).toEqual('ActionRow'); - }); - test('close button', () => { - const button = footer[1].findByType(ActionRow)[0].children[0]; - expect(button.children[0].el).toEqual(formatMessage(messages.closeText)); - expect(button.type).toEqual('ModalDialog.CloseButton'); - }); - test('adjusted grade button', () => { - const button = footer[1].findByType(ActionRow)[0].children[1]; - expect(button.children[0].el).toEqual(formatMessage(messages.saveGrade)); - expect(button.type).toEqual('Button'); - expect(button.props.onClick).toEqual(hookProps.handleAdjustedGradeClick); + it('close button', async () => { + const user = userEvent.setup(); + const cancelButton = screen.getByRole('button', { name: messages.closeText.defaultMessage }); + expect(cancelButton).toBeInTheDocument(); + await user.click(cancelButton); + expect(hookProps.onClose).toHaveBeenCalled(); }); }; describe('without error', () => { beforeEach(() => { useEditModalData.mockReturnValueOnce({ ...hookProps, error: undefined }); - el = shallow(); - }); - test('snapshot', () => { - expect(el.snapshot).toMatchSnapshot(); + render(); }); + testModal(); testBody(); testFooter(); test('alert row', () => { - const alert = loadBody().children[1]; - expect(alert.type).toEqual('Alert'); - expect(alert.props.show).toEqual(false); + const alert = screen.queryByRole('alert'); + expect(alert).toBeNull(); }); }); describe('with error', () => { - test('snapshot', () => { - expect(el.snapshot).toMatchSnapshot(); + beforeEach(() => { + useEditModalData.mockReturnValue(hookProps); + render(); }); + testModal(); testBody(); test('alert row', () => { - const alert = loadBody().children[1]; - expect(alert.type).toEqual('Alert'); - expect(alert.props.show).toEqual(true); - expect(alert.children[0].el).toEqual(hookProps.error); + const alert = screen.getByRole('alert'); + expect(alert).toBeInTheDocument(); + expect(alert).toHaveTextContent(hookProps.error); }); testFooter(); }); diff --git a/src/components/GradesView/FilterBadges/FilterBadge.test.jsx b/src/components/GradesView/FilterBadges/FilterBadge.test.jsx index 45dbec8..36369f4 100644 --- a/src/components/GradesView/FilterBadges/FilterBadge.test.jsx +++ b/src/components/GradesView/FilterBadges/FilterBadge.test.jsx @@ -1,10 +1,10 @@ import React from 'react'; -import { shallow } from '@edx/react-unit-test-utils'; +import { render, screen } from '@testing-library/react'; import { useIntl } from '@edx/frontend-platform/i18n'; import { formatMessage } from 'testUtils'; -import { Button } from '@openedx/paragon'; import { selectors } from 'data/redux/hooks'; +import userEvent from '@testing-library/user-event'; import FilterBadge from './FilterBadge'; jest.mock('@openedx/paragon', () => ({ @@ -18,7 +18,10 @@ jest.mock('data/redux/hooks', () => ({ }, })); -const handleClose = jest.fn(filters => ({ handleClose: filters })); +jest.unmock('@openedx/paragon'); +jest.unmock('react'); + +const handleClose = jest.fn(); const filterName = 'test-filter-name'; const hookProps = { @@ -32,12 +35,11 @@ const hookProps = { }; selectors.root.useFilterBadgeConfig.mockReturnValue(hookProps); -let el; describe('FilterBadge', () => { - beforeEach(() => { - el = shallow(); - }); - describe('behavior', () => { + describe('hooks', () => { + beforeEach(() => { + render(); + }); it('initializes intl hook', () => { expect(useIntl).toHaveBeenCalled(); }); @@ -46,49 +48,42 @@ describe('FilterBadge', () => { }); }); describe('render', () => { - const testDisplayName = () => { - test('formatted display name appears on badge', () => { - expect(el.instance.findByTestId('display-name')[0].children[0].el).toEqual(formatMessage(hookProps.displayName)); - }); - }; - const testCloseButton = () => { - test('close button forwards close method', () => { - expect(el.instance.findByType(Button)[0].props.onClick).toEqual(handleClose(hookProps.connectedFilters)); - }); - }; - test('empty render if isDefault', () => { + it('empty render if isDefault', () => { selectors.root.useFilterBadgeConfig.mockReturnValueOnce({ ...hookProps, isDefault: true, }); - el = shallow(); - expect(el.isEmptyRender()).toEqual(true); + render(); + expect(screen.queryByText(hookProps.displayName)).toBeNull(); }); describe('hide Value', () => { - beforeEach(() => { + it('renders display name, value is not shown and close button has correct behavior', async () => { selectors.root.useFilterBadgeConfig.mockReturnValueOnce({ ...hookProps, hideValue: true, }); - el = shallow(); - }); - testDisplayName(); - testCloseButton(); - test('snapshot', () => { - expect(el.snapshot).toMatchSnapshot(); - }); - test('value is note present in the badge', () => { - expect(el.instance.findByTestId('filter-value')[0].children).toHaveLength(0); + render(); + const user = userEvent.setup(); + expect(screen.getByTestId('display-name')).toHaveTextContent(formatMessage(hookProps.displayName)); + expect(screen.queryByTestId('filter-value')).toHaveTextContent(''); + const button = screen.getByRole('button', { name: /close/i }); + await user.click(button); + expect(handleClose).toHaveBeenCalledWith(hookProps.connectedFilters); }); }); describe('do not hide value', () => { - testDisplayName(); - testCloseButton(); - test('snapshot', () => { - expect(el.snapshot).toMatchSnapshot(); - }); - test('value is present in the badge', () => { - expect(el.instance.findByTestId('filter-value')[0].children[0].el).toBe(`: ${hookProps.value}`); + it('renders display name and value, and close button has correct behavior', async () => { + selectors.root.useFilterBadgeConfig.mockReturnValueOnce({ + ...hookProps, + hideValue: false, + }); + render(); + const user = userEvent.setup(); + expect(screen.getByTestId('display-name')).toHaveTextContent(formatMessage(hookProps.displayName)); + expect(screen.getByTestId('filter-value')).toHaveTextContent(`: ${hookProps.value}`); + const button = screen.getByRole('button', { name: /close/i }); + await user.click(button); + expect(handleClose).toHaveBeenCalledWith(hookProps.connectedFilters); }); }); }); diff --git a/src/components/GradesView/FilterBadges/__snapshots__/FilterBadge.test.jsx.snap b/src/components/GradesView/FilterBadges/__snapshots__/FilterBadge.test.jsx.snap deleted file mode 100644 index 84bc9ac..0000000 --- a/src/components/GradesView/FilterBadges/__snapshots__/FilterBadge.test.jsx.snap +++ /dev/null @@ -1,75 +0,0 @@ -// Jest Snapshot v1, https://goo.gl/fbAQLP - -exports[`FilterBadge render do not hide value snapshot 1`] = ` -
- - - a common name - - - : a common value - - - -
-
-`; - -exports[`FilterBadge render hide Value snapshot 1`] = ` -
- - - a common name - - - - -
-
-`; diff --git a/src/components/GradesView/FilterBadges/__snapshots__/test.jsx.snap b/src/components/GradesView/FilterBadges/__snapshots__/test.jsx.snap deleted file mode 100644 index 5d97e37..0000000 --- a/src/components/GradesView/FilterBadges/__snapshots__/test.jsx.snap +++ /dev/null @@ -1,21 +0,0 @@ -// Jest Snapshot v1, https://goo.gl/fbAQLP - -exports[`FilterBadges component snapshot - has a filterbadge with handleClose for each filter in badgeOrder 1`] = ` -
- - - -
-`; diff --git a/src/components/GradesView/FilterBadges/test.jsx b/src/components/GradesView/FilterBadges/test.jsx index 652fc67..71843ae 100644 --- a/src/components/GradesView/FilterBadges/test.jsx +++ b/src/components/GradesView/FilterBadges/test.jsx @@ -1,11 +1,13 @@ +/* eslint-disable import/no-extraneous-dependencies */ /* eslint-disable import/no-named-as-default */ import React from 'react'; -import { shallow } from '@edx/react-unit-test-utils'; +import { render, screen } from '@testing-library/react'; +import userEvent from '@testing-library/user-event'; import FilterBadges from '.'; -import FilterBadge from './FilterBadge'; -jest.mock('./FilterBadge', () => 'FilterBadge'); +jest.unmock('@openedx/paragon'); +jest.unmock('react'); const order = ['filter1', 'filter2', 'filter3']; jest.mock('data/constants/filters', () => ({ @@ -13,24 +15,24 @@ jest.mock('data/constants/filters', () => ({ badgeOrder: order, })); +// eslint-disable-next-line react/button-has-type +jest.mock('./FilterBadge', () => jest.fn(({ filterName, handleClose }) => )); + +const handleClose = jest.fn(); + describe('FilterBadges', () => { describe('component', () => { - let el; - let handleClose; - beforeEach(() => { - handleClose = jest.fn().mockName('this.props.handleClose'); - el = shallow(); - }); - test('snapshot - has a filterbadge with handleClose for each filter in badgeOrder', () => { - expect(el.snapshot).toMatchSnapshot(); - }); - test('has a filterbadge with handleClose for each filter in badgeOrder', () => { - const badgeProps = el.instance.findByType(FilterBadge).map(badgeEl => badgeEl.props); - // key prop is not rendered by react - expect(badgeProps[0]).toMatchObject({ filterName: order[0], handleClose }); - expect(badgeProps[1]).toMatchObject({ filterName: order[1], handleClose }); - expect(badgeProps[2]).toMatchObject({ filterName: order[2], handleClose }); - expect(badgeProps.length).toEqual(3); + it('has a filterbadge with handleClose for each filter in badgeOrder', async () => { + render(); + const user = userEvent.setup(); + const badge1 = screen.getByText(order[0]); + const badge2 = screen.getByText(order[1]); + const badge3 = screen.getByText(order[2]); + expect(badge1).toBeInTheDocument(); + expect(badge2).toBeInTheDocument(); + expect(badge3).toBeInTheDocument(); + await user.click(badge1); + expect(handleClose).toHaveBeenCalled(); }); }); }); diff --git a/src/components/GradesView/GradebookTable/__snapshots__/index.test.jsx.snap b/src/components/GradesView/GradebookTable/__snapshots__/index.test.jsx.snap deleted file mode 100644 index 0f09cf0..0000000 --- a/src/components/GradesView/GradebookTable/__snapshots__/index.test.jsx.snap +++ /dev/null @@ -1,32 +0,0 @@ -// Jest Snapshot v1, https://goo.gl/fbAQLP - -exports[`GradebookTable snapshot 1`] = ` -
- - - - - -
-`; diff --git a/src/components/GradesView/GradebookTable/index.test.jsx b/src/components/GradesView/GradebookTable/index.test.jsx index 00cbb99..46f06ee 100644 --- a/src/components/GradesView/GradebookTable/index.test.jsx +++ b/src/components/GradesView/GradebookTable/index.test.jsx @@ -1,39 +1,46 @@ -import React from 'react'; -import { shallow } from '@edx/react-unit-test-utils'; - -import { DataTable } from '@openedx/paragon'; +import { render, screen } from '@testing-library/react'; +import { IntlProvider } from '@edx/frontend-platform/i18n'; import useGradebookTableData from './hooks'; import GradebookTable from '.'; jest.mock('./hooks', () => jest.fn()); +jest.unmock('@openedx/paragon'); +jest.unmock('react'); +jest.unmock('@edx/frontend-platform/i18n'); + const hookProps = { - columns: ['some', 'columns'], - data: ['some', 'data'], + columns: [{ Header: 'Username', accessor: 'username' }, { Header: 'Email', accessor: 'email' }, { Header: 'Total Grade', accessor: 'totalGrade' }], + data: [{ username: 'instructor', email: 'instructor@example.com', totalGrade: '100' }, { username: 'student', email: 'student@example.com', totalGrade: '90' }], grades: ['a', 'few', 'grades'], nullMethod: jest.fn().mockName('hooks.nullMethod'), emptyContent: 'empty-table-content', }; -useGradebookTableData.mockReturnValue(hookProps); -let el; describe('GradebookTable', () => { - beforeEach(() => { - jest.clearAllMocks(); - el = shallow(); + it('renders Datatable correctly', () => { + useGradebookTableData.mockReturnValue(hookProps); + render(); + expect(useGradebookTableData).toHaveBeenCalled(); + const headers = screen.getAllByRole('columnheader'); + expect(headers).toHaveLength(3); + expect(headers[0]).toHaveTextContent(hookProps.columns[0].Header); + expect(headers[1]).toHaveTextContent(hookProps.columns[1].Header); + expect(headers[2]).toHaveTextContent(hookProps.columns[2].Header); + const rows = screen.getAllByRole('row'); + expect(rows).toHaveLength(3); + expect(screen.getByText(hookProps.data[0].username)).toBeInTheDocument(); + expect(screen.getByText(hookProps.data[0].email)).toBeInTheDocument(); + expect(screen.getByText(hookProps.data[0].totalGrade)).toBeInTheDocument(); }); - test('snapshot', () => { - expect(el.snapshot).toMatchSnapshot(); - }); - test('Datatable props', () => { - const datatable = el.instance.findByType(DataTable)[0]; - const { props } = datatable; - expect(props.columns).toEqual(hookProps.columns); - expect(props.data).toEqual(hookProps.data); - expect(props.itemCount).toEqual(hookProps.grades.length); - expect(props.RowStatusComponent).toEqual(hookProps.nullMethod); - expect(datatable.children[2].type).toEqual('DataTable.EmptyTable'); - expect(datatable.children[2].props.content).toEqual(hookProps.emptyContent); + it('renders empty table content when no data is available', () => { + useGradebookTableData.mockReturnValue({ + ...hookProps, + data: [], + grades: [], + }); + render(); + expect(screen.getByText(hookProps.emptyContent)).toBeInTheDocument(); }); });