Skip to content

Commit 8c565ac

Browse files
committed
test: add tests
1 parent bfbe233 commit 8c565ac

3 files changed

Lines changed: 142 additions & 8 deletions

File tree

src/library-authoring/component-comparison/CompareChangesWidget.test.tsx

Lines changed: 26 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -19,11 +19,11 @@ describe('<CompareChangesWidget />', () => {
1919
render(<CompareChangesWidget usageKey={usageKey} />);
2020

2121
// By default we see the new version:
22-
const newTab = screen.getByRole('tab', { name: 'New version' });
22+
const newTab = await screen.findByRole('tab', { name: 'New version' });
2323
expect(newTab).toBeInTheDocument();
2424
expect(newTab).toHaveClass('active');
2525

26-
const newTabPanel = screen.getByRole('tabpanel', { name: 'New version' });
26+
const newTabPanel = await screen.findByRole('tabpanel', { name: 'New version' });
2727
const newIframe = within(newTabPanel).getByTitle('Preview');
2828
expect(newIframe).toBeVisible();
2929
expect(newIframe).toHaveAttribute(
@@ -32,10 +32,10 @@ describe('<CompareChangesWidget />', () => {
3232
);
3333

3434
// Now switch to the "old version" tab:
35-
const oldTab = screen.getByRole('tab', { name: 'Old version' });
35+
const oldTab = await screen.findByRole('tab', { name: 'Old version' });
3636
fireEvent.click(oldTab);
3737

38-
const oldTabPanel = screen.getByRole('tabpanel', { name: 'Old version' });
38+
const oldTabPanel = await screen.findByRole('tabpanel', { name: 'Old version' });
3939
expect(oldTabPanel).toBeVisible();
4040
const oldIframe = within(oldTabPanel).getByTitle('Preview');
4141
expect(oldIframe).toBeVisible();
@@ -49,11 +49,11 @@ describe('<CompareChangesWidget />', () => {
4949
render(<CompareChangesWidget usageKey={usageKey} oldVersion={7} newVersion="published" />);
5050

5151
// By default we see the new version:
52-
const newTab = screen.getByRole('tab', { name: 'New version' });
52+
const newTab = await screen.findByRole('tab', { name: 'New version' });
5353
expect(newTab).toBeInTheDocument();
5454
expect(newTab).toHaveClass('active');
5555

56-
const newTabPanel = screen.getByRole('tabpanel', { name: 'New version' });
56+
const newTabPanel = await screen.findByRole('tabpanel', { name: 'New version' });
5757
const newIframe = within(newTabPanel).getByTitle('Preview');
5858
expect(newIframe).toBeVisible();
5959
expect(newIframe).toHaveAttribute(
@@ -62,10 +62,10 @@ describe('<CompareChangesWidget />', () => {
6262
);
6363

6464
// Now switch to the "old version" tab:
65-
const oldTab = screen.getByRole('tab', { name: 'Old version' });
65+
const oldTab = await screen.findByRole('tab', { name: 'Old version' });
6666
fireEvent.click(oldTab);
6767

68-
const oldTabPanel = screen.getByRole('tabpanel', { name: 'Old version' });
68+
const oldTabPanel = await screen.findByRole('tabpanel', { name: 'Old version' });
6969
expect(oldTabPanel).toBeVisible();
7070
const oldIframe = within(oldTabPanel).getByTitle('Preview');
7171
expect(oldIframe).toBeVisible();
@@ -74,4 +74,22 @@ describe('<CompareChangesWidget />', () => {
7474
`http://localhost:18010/xblocks/v2/${usageKey}/embed/student_view/?version=7`,
7575
);
7676
});
77+
78+
it('renders side-by-side compare mode with both iframes and expected sources', async () => {
79+
render(<CompareChangesWidget usageKey={usageKey} oldVersion={7} newVersion="published" sideBySide />);
80+
81+
expect(await screen.findByText('Old version')).toBeInTheDocument();
82+
expect(await screen.findByText('New version')).toBeInTheDocument();
83+
84+
const iframes = await screen.findAllByTitle('Preview');
85+
expect(iframes).toHaveLength(2);
86+
expect(iframes[0]).toHaveAttribute(
87+
'src',
88+
`http://localhost:18010/xblocks/v2/${usageKey}/embed/student_view/?version=7`,
89+
);
90+
expect(iframes[1]).toHaveAttribute(
91+
'src',
92+
`http://localhost:18010/xblocks/v2/${usageKey}/embed/student_view/?version=published`,
93+
);
94+
});
7795
});
Lines changed: 45 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,45 @@
1+
import { render, screen, initializeMocks } from '@src/testUtils';
2+
3+
import HistoryCompareChangesModal from './HistoryCompareChangesModal';
4+
5+
jest.mock('@src/library-authoring/component-comparison/CompareChangesWidget', () => ({
6+
__esModule: true,
7+
default: jest.fn(({ usageKey, oldTitle, oldVersion, newVersion, sideBySide, showTitle }) => (
8+
<div
9+
data-testid="compare-changes-widget"
10+
data-usage-key={usageKey}
11+
data-old-title={oldTitle ?? ''}
12+
data-old-version={String(oldVersion ?? '')}
13+
data-new-version={String(newVersion ?? '')}
14+
data-side-by-side={String(sideBySide)}
15+
data-show-title={String(showTitle)}
16+
/>
17+
)),
18+
}));
19+
20+
describe('<HistoryCompareChangesModal />', () => {
21+
beforeEach(() => {
22+
initializeMocks();
23+
});
24+
25+
it('renders the comparison widget with the selected versions', async () => {
26+
render(
27+
<HistoryCompareChangesModal
28+
isOpen
29+
onClose={jest.fn()}
30+
usageKey="lb:org:lib:type:id"
31+
oldTitle="Electron Arcs"
32+
oldVersion={3}
33+
newVersion="published"
34+
/>,
35+
);
36+
37+
expect(await screen.findByText('Preview changes: Electron Arcs')).toBeInTheDocument();
38+
expect(await screen.findByTestId('compare-changes-widget')).toHaveAttribute('data-usage-key', 'lb:org:lib:type:id');
39+
expect(await screen.findByTestId('compare-changes-widget')).toHaveAttribute('data-old-title', 'Electron Arcs');
40+
expect(await screen.findByTestId('compare-changes-widget')).toHaveAttribute('data-old-version', '3');
41+
expect(await screen.findByTestId('compare-changes-widget')).toHaveAttribute('data-new-version', 'published');
42+
expect(await screen.findByTestId('compare-changes-widget')).toHaveAttribute('data-side-by-side', 'true');
43+
expect(await screen.findByTestId('compare-changes-widget')).toHaveAttribute('data-show-title', 'true');
44+
});
45+
});
Lines changed: 71 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,71 @@
1+
import { userEvent } from '@testing-library/user-event';
2+
import {
3+
initializeMocks,
4+
render,
5+
screen,
6+
findByDeepTextContent,
7+
} from '@src/testUtils';
8+
9+
import {
10+
mockLibraryBlockDraftHistory,
11+
mockLibraryBlockPublishHistory,
12+
mockLibraryBlockPublishHistoryEntries,
13+
} from '@src/library-authoring/data/api.mocks';
14+
import { HistoryDraftLogGroup, HistoryPublishLogGroup } from './HistoryLogGroup';
15+
16+
mockLibraryBlockDraftHistory.applyMock();
17+
mockLibraryBlockPublishHistory.applyMock();
18+
mockLibraryBlockPublishHistoryEntries.applyMock();
19+
20+
const draftEntries = mockLibraryBlockDraftHistory.data;
21+
const publishGroup = mockLibraryBlockPublishHistory.data[0];
22+
23+
describe('<HistoryLogGroup />', () => {
24+
beforeEach(() => {
25+
initializeMocks();
26+
});
27+
28+
it('opens the compare modal from a draft entry action menu', async () => {
29+
const user = userEvent.setup();
30+
31+
render(
32+
<HistoryDraftLogGroup
33+
itemId={mockLibraryBlockDraftHistory.usageKey}
34+
displayName="Test Component"
35+
entries={draftEntries}
36+
/>,
37+
);
38+
39+
const trigger = await findByDeepTextContent(/Test Component is a draft/i);
40+
await user.click(trigger);
41+
42+
const firstEntry = await findByDeepTextContent(/test_user_1 edited.*Electron Arcs/i);
43+
expect(firstEntry).toBeInTheDocument();
44+
45+
await user.click(await screen.findAllByRole('button', { name: /more actions/i }).then(buttons => buttons[0]));
46+
await user.click(await screen.findByText('Show this version'));
47+
48+
expect(await screen.findByText('Preview changes: Electron Arcs')).toBeInTheDocument();
49+
});
50+
51+
it('shows publish history entries and opens the compare modal after expanding', async () => {
52+
const user = userEvent.setup();
53+
54+
render(
55+
<HistoryPublishLogGroup
56+
{...publishGroup}
57+
itemId={mockLibraryBlockPublishHistory.usageKeyWithGroups}
58+
/>,
59+
);
60+
61+
const publishTrigger = await findByDeepTextContent(/author published.*Protons/i);
62+
await user.click(publishTrigger);
63+
64+
expect(await findByDeepTextContent(/test_user edited.*Protons/i)).toBeInTheDocument();
65+
66+
await user.click(await screen.findByRole('button', { name: /more actions/i }));
67+
await user.click(await screen.findByText('Show this version'));
68+
69+
expect(await screen.findByText('Preview changes: Protons')).toBeInTheDocument();
70+
});
71+
});

0 commit comments

Comments
 (0)