diff --git a/src/courseware/course/sequence/Sequence.test.jsx b/src/courseware/course/sequence/Sequence.test.jsx index 9e575c4f..14afec06 100644 --- a/src/courseware/course/sequence/Sequence.test.jsx +++ b/src/courseware/course/sequence/Sequence.test.jsx @@ -4,8 +4,7 @@ import { fireEvent, waitFor } from '@testing-library/dom'; import { cloneDeep } from 'lodash'; import { sendTrackEvent } from '@edx/frontend-platform/analytics'; import { - initialState, - messageEvent, render, screen, testUnits, + initialState, loadUnit, render, screen, testUnits, } from '../../../setupTest'; import Sequence from './Sequence'; @@ -23,51 +22,42 @@ describe('Sequence', () => { }; it('renders correctly without data', () => { - const { asFragment } = render( - , { initialState: {} }, - ); + render(, { initialState: {} }); expect(screen.getByText('Loading learning sequence...')).toBeInTheDocument(); expect(screen.queryByRole('button')).not.toBeInTheDocument(); - expect(asFragment()).toMatchSnapshot(); }); it('renders correctly for gated content', async () => { - const { asFragment } = render(); + render(); expect(screen.getByText('Loading locked content messaging...')).toBeInTheDocument(); // Only `Previous`, `Next` and `Bookmark` buttons. expect(screen.getAllByRole('button').length).toEqual(3); - const beforeLoadingUnit = asFragment(); - expect(beforeLoadingUnit).toMatchSnapshot(); - - window.postMessage(messageEvent, '*'); - await waitFor(() => expect(screen.getByText(/You must complete the prerequisite/)).toBeInTheDocument()); - expect(beforeLoadingUnit).toMatchDiffSnapshot(asFragment()); + expect(await screen.findByText('Content Locked')).toBeInTheDocument(); + expect(screen.getByAltText('fa-lock')).toBeInTheDocument(); + expect(screen.getByText(/You must complete the prerequisite/)).toBeInTheDocument(); + expect(screen.getByRole('button', { name: 'Go To Prerequisite Section' })).toBeInTheDocument(); + expect(screen.queryByText('Loading locked content messaging...')).not.toBeInTheDocument(); }); it('displays error message on sequence load failure', () => { const testState = cloneDeep(initialState); testState.courseware.sequenceStatus = 'failed'; - const { asFragment } = render(, { initialState: testState }); + render(, { initialState: testState }); expect(screen.getByText('There was an error loading this course.')).toBeInTheDocument(); - expect(asFragment()).toMatchSnapshot(); }); it('handles loading unit', async () => { - const { asFragment } = render(); + render(); expect(screen.getByText('Loading learning sequence...')).toBeInTheDocument(); // Renders navigation buttons plus one button for each unit. expect(screen.getAllByRole('button').length).toEqual(3 + testUnits.length); - const beforeLoadingUnit = asFragment(); - expect(beforeLoadingUnit).toMatchSnapshot(); - - window.postMessage(messageEvent, '*'); + loadUnit(); await waitFor(() => expect(screen.queryByText('Loading learning sequence...')).not.toBeInTheDocument()); // At this point there will be 2 `Previous` and 2 `Next` buttons. expect(screen.getAllByRole('button', { name: /previous|next/i }).length).toEqual(4); - expect(beforeLoadingUnit).toMatchDiffSnapshot(asFragment()); }); describe('sequence and unit navigation buttons', () => { @@ -89,7 +79,7 @@ describe('Sequence', () => { widget_placement: 'top', }); - window.postMessage(messageEvent, '*'); + loadUnit(); await waitFor(() => expect(screen.queryByText('Loading learning sequence...')).not.toBeInTheDocument()); const unitPreviousButton = screen.getAllByRole('button', { name: /previous/i }) .filter(button => button !== sequencePreviousButton)[0]; @@ -121,7 +111,7 @@ describe('Sequence', () => { widget_placement: 'top', }); - window.postMessage(messageEvent, '*'); + loadUnit(); await waitFor(() => expect(screen.queryByText('Loading learning sequence...')).not.toBeInTheDocument()); const unitNextButton = screen.getAllByRole('button', { name: /next/i }) .filter(button => button !== sequenceNextButton)[0]; @@ -162,7 +152,7 @@ describe('Sequence', () => { const previousSequenceHandler = jest.fn(); const unitId = '1'; render(); - window.postMessage(messageEvent, '*'); + loadUnit(); await waitFor(() => expect(screen.queryByText('Loading learning sequence...')).not.toBeInTheDocument()); screen.getAllByRole('button', { name: /previous/i }).forEach(button => fireEvent.click(button)); @@ -184,7 +174,7 @@ describe('Sequence', () => { unitNavigationHandler, nextSequenceHandler, unitId, sequenceId, }} />); - window.postMessage(messageEvent, '*'); + loadUnit(); await waitFor(() => expect(screen.queryByText('Loading learning sequence...')).not.toBeInTheDocument()); screen.getAllByRole('button', { name: /next/i }).forEach(button => fireEvent.click(button)); @@ -211,7 +201,7 @@ describe('Sequence', () => { {...mockData} {...{ unitNavigationHandler, previousSequenceHandler, nextSequenceHandler }} />, { initialState: testState }); - window.postMessage(messageEvent, '*'); + loadUnit(); await waitFor(() => expect(screen.queryByText('Loading learning sequence...')).not.toBeInTheDocument()); screen.getAllByRole('button', { name: /previous/i }).forEach(button => fireEvent.click(button)); diff --git a/src/courseware/course/sequence/SequenceContent.test.jsx b/src/courseware/course/sequence/SequenceContent.test.jsx index a0aa14c2..bbed341e 100644 --- a/src/courseware/course/sequence/SequenceContent.test.jsx +++ b/src/courseware/course/sequence/SequenceContent.test.jsx @@ -13,25 +13,24 @@ describe('Sequence Content', () => { }; it('displays loading message', () => { - const { asFragment } = render(, { initialState }); + render(, { initialState }); expect(screen.getByText('Loading learning sequence...')).toBeInTheDocument(); - expect(asFragment()).toMatchSnapshot(); }); it('displays messages for the locked content', async () => { - const { asFragment } = render(, { initialState }); + render(, { initialState }); expect(screen.getByText('Loading locked content messaging...')).toBeInTheDocument(); - expect(asFragment()).toMatchSnapshot(); - expect(await screen.findByText(/content locked/i)).toBeInTheDocument(); + expect(await screen.findByText('Content Locked')).toBeInTheDocument(); expect(screen.getByText('test-sequence')).toBeInTheDocument(); expect(screen.queryByText('Loading locked content messaging...')).not.toBeInTheDocument(); - expect(asFragment()).toMatchSnapshot(); + expect(screen.getByAltText('fa-lock')).toBeInTheDocument(); + expect(screen.getByText(/You must complete the prerequisite/)).toBeInTheDocument(); + expect(screen.getByRole('button', { name: 'Go To Prerequisite Section' })).toBeInTheDocument(); }); it('displays message for no content', () => { - const { asFragment } = render(, { initialState }); + render(, { initialState }); expect(screen.getByText('There is no content here.')).toBeInTheDocument(); - expect(asFragment()).toMatchSnapshot(); }); }); diff --git a/src/courseware/course/sequence/Unit.test.jsx b/src/courseware/course/sequence/Unit.test.jsx index f91734cd..4d25189a 100644 --- a/src/courseware/course/sequence/Unit.test.jsx +++ b/src/courseware/course/sequence/Unit.test.jsx @@ -3,7 +3,7 @@ import React from 'react'; import { cloneDeep } from 'lodash'; import { waitFor } from '@testing-library/dom'; import { - initialState, messageEvent, render, screen, + initialState, loadUnit, messageEvent, render, screen, } from '../../../setupTest'; import Unit from './Unit'; @@ -15,40 +15,40 @@ describe('Unit', () => { }; it('renders correctly', () => { - const { asFragment } = render(, { initialState }); + render(, { initialState }); expect(screen.getByText('Loading learning sequence...')).toBeInTheDocument(); expect(screen.getByTitle(mockData.id)).toHaveAttribute('height', String(0)); - expect(asFragment()).toMatchSnapshot(); + expect(screen.getByTitle(mockData.id)).toHaveAttribute( + 'src', `http://localhost:18000/xblock/${mockData.id}?show_title=0&show_bookmark_button=0`, + ); }); it('renders proper message for gated content', () => { // Clone initialState. const testState = cloneDeep(initialState); testState.models.units[mockData.id].graded = true; - const { asFragment } = render(, { initialState: testState }); + render(, { initialState: testState }); expect(screen.getByText('Loading locked content messaging...')).toBeInTheDocument(); - expect(asFragment()).toMatchSnapshot(); + expect(screen.getByText('Loading learning sequence...')).toBeInTheDocument(); }); it('handles receiving MessageEvent', async () => { - const { asFragment } = render(, { initialState }); - const beforePostingMessage = asFragment(); + render(, { initialState }); + loadUnit(); - window.postMessage(messageEvent, '*'); // Loading message is gone now. await waitFor(() => expect(screen.queryByText('Loading learning sequence...')).not.toBeInTheDocument()); // Iframe's height is set via message. expect(screen.getByTitle(mockData.id)).toHaveAttribute('height', String(messageEvent.payload.height)); - expect(beforePostingMessage).toMatchDiffSnapshot(asFragment()); }); - it('handles onLoaded after receiving MessageEvent', async () => { + it('calls onLoaded after receiving MessageEvent', async () => { const onLoaded = jest.fn(); render(, { initialState }); + loadUnit(); - window.postMessage(messageEvent, '*'); await waitFor(() => expect(onLoaded).toHaveBeenCalledTimes(1)); }); @@ -57,8 +57,8 @@ describe('Unit', () => { // Clone message and set different height. const testMessageWithOtherHeight = { ...messageEvent, payload: { height: 200 } }; render(, { initialState }); + loadUnit(); - window.postMessage(messageEvent, '*'); await waitFor(() => expect(screen.getByTitle(mockData.id)).toHaveAttribute('height', String(messageEvent.payload.height))); window.postMessage(testMessageWithOtherHeight, '*'); await waitFor(() => expect(screen.getByTitle(mockData.id)).toHaveAttribute('height', String(testMessageWithOtherHeight.payload.height))); @@ -69,8 +69,8 @@ describe('Unit', () => { // Clone message and set different type. const testMessageWithUnhandledType = { ...messageEvent, type: 'wrong type' }; render(, { initialState }); - window.postMessage(testMessageWithUnhandledType, '*'); + // HACK: We don't have a function we could reliably await here, so this test relies on the timeout of `waitFor`. // FIXME: After the last updates `toThrowErrorMatchingSnapshot` (due to a bug) started returning DOM // after the error, so we had to fall back to `toThrowError` assertion for better readability. diff --git a/src/courseware/course/sequence/__snapshots__/Sequence.test.jsx.snap b/src/courseware/course/sequence/__snapshots__/Sequence.test.jsx.snap deleted file mode 100644 index 19ba71c7..00000000 --- a/src/courseware/course/sequence/__snapshots__/Sequence.test.jsx.snap +++ /dev/null @@ -1,475 +0,0 @@ -// Jest Snapshot v1, https://goo.gl/fbAQLP - -exports[`Sequence displays error message on sequence load failure 1`] = ` - -

- There was an error loading this course. -

- -`; - -exports[`Sequence handles loading unit 1`] = ` - -
-
- -
-
-

- 3 -

- -
-
- -
-
-
-