Andal.LND/frontend-app-authoring
4
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

test: upgrading user-event to v14 (#2277)

Browse Source
This commit is contained in:
jacobo-dominguez-wgu
2025-07-17 10:26:16 -06:00
committed by GitHub
parent a51ff99042
commit 2db6d89fca
73 changed files with 1007 additions and 777 deletions
Download Patch File Download Diff File Expand all files Collapse all files

32
src/library-authoring/components/CollectionCard.test.tsx
View File

@@ -2,7 +2,7 @@ import userEvent from '@testing-library/user-event';
import type MockAdapter from 'axios-mock-adapter';
import {
initializeMocks, render as baseRender, screen, waitFor, waitForElementToBeRemoved, within, fireEvent,
initializeMocks, render as baseRender, screen, waitFor, within, fireEvent,
} from '../../testUtils';
import { LibraryProvider } from '../common/context/LibraryContext';
import { type CollectionHit } from '../../search-manager';
@@ -82,11 +82,12 @@ describe('<CollectionCard />', () => {
});
it('should navigate to the collection if the open menu clicked', async () => {
const user = userEvent.setup();
render(<CollectionCard hit={collectionHitSample} />);
// Open menu
expect(screen.getByTestId('collection-card-menu-toggle')).toBeInTheDocument();
userEvent.click(screen.getByTestId('collection-card-menu-toggle'));
await user.click(screen.getByTestId('collection-card-menu-toggle'));
// Open menu item
const openMenuItem = screen.getByRole('button', { name: 'Open' });
@@ -103,12 +104,13 @@ describe('<CollectionCard />', () => {
});
it('should navigate to the collection if double clicked', async () => {
const user = userEvent.setup();
render(<CollectionCard hit={collectionHitSample} />);
// Card title
const cardTitle = screen.getByText('Collection Display Formated Name');
expect(cardTitle).toBeInTheDocument();
userEvent.dblClick(cardTitle);
await user.dblClick(cardTitle);
await waitFor(() => {
expect(mockNavigate).toHaveBeenCalledWith({
@@ -119,6 +121,7 @@ describe('<CollectionCard />', () => {
});
it('should show confirmation box, delete collection and show toast to undo deletion', async () => {
const user = userEvent.setup();
const url = getLibraryCollectionApiUrl(collectionHitSample.contextKey, collectionHitSample.blockId);
axiosMock.onDelete(url).reply(204);
render(<CollectionCard hit={collectionHitSample} />);
@@ -126,29 +129,29 @@ describe('<CollectionCard />', () => {
expect(screen.queryByText('Collection Display Formated Name')).toBeInTheDocument();
// Open menu
let menuBtn = await screen.findByRole('button', { name: messages.collectionCardMenuAlt.defaultMessage });
userEvent.click(menuBtn);
await user.click(menuBtn);
// find and click delete menu option.
expect(screen.queryByText('Delete')).toBeInTheDocument();
let deleteBtn = await screen.findByRole('button', { name: 'Delete' });
userEvent.click(deleteBtn);
await user.click(deleteBtn);
// verify confirmation dialog and click on cancel button
let dialog = await screen.findByRole('dialog', { name: 'Delete this collection?' });
expect(dialog).toBeInTheDocument();
const cancelBtn = await screen.findByRole('button', { name: 'Cancel' });
userEvent.click(cancelBtn);
await user.click(cancelBtn);
expect(axiosMock.history.delete.length).toEqual(0);
expect(cancelBtn).not.toBeInTheDocument();
// Open menu
menuBtn = await screen.findByRole('button', { name: messages.collectionCardMenuAlt.defaultMessage });
userEvent.click(menuBtn);
await user.click(menuBtn);
// click on confirm button to delete
deleteBtn = await screen.findByRole('button', { name: 'Delete' });
userEvent.click(deleteBtn);
await user.click(deleteBtn);
dialog = await screen.findByRole('dialog', { name: 'Delete this collection?' });
const confirmBtn = await within(dialog).findByRole('button', { name: 'Delete' });
userEvent.click(confirmBtn);
await waitForElementToBeRemoved(() => screen.queryByRole('dialog', { name: 'Delete this collection?' }));
await user.click(confirmBtn);
expect(screen.queryByRole('dialog', { name: 'Delete this collection?' })).not.toBeInTheDocument();
await waitFor(() => {
expect(axiosMock.history.delete.length).toEqual(1);
@@ -170,19 +173,20 @@ describe('<CollectionCard />', () => {
it('should show failed toast on delete collection failure', async () => {
const url = getLibraryCollectionApiUrl(collectionHitSample.contextKey, collectionHitSample.blockId);
axiosMock.onDelete(url).reply(404);
const user = userEvent.setup();
render(<CollectionCard hit={collectionHitSample} />);
expect(screen.queryByText('Collection Display Formated Name')).toBeInTheDocument();
// Open menu
const menuBtn = await screen.findByRole('button', { name: messages.collectionCardMenuAlt.defaultMessage });
userEvent.click(menuBtn);
await user.click(menuBtn);
// find and click delete menu option.
const deleteBtn = await screen.findByRole('button', { name: 'Delete' });
userEvent.click(deleteBtn);
await user.click(deleteBtn);
const dialog = await screen.findByRole('dialog', { name: 'Delete this collection?' });
const confirmBtn = await within(dialog).findByRole('button', { name: 'Delete' });
userEvent.click(confirmBtn);
await waitForElementToBeRemoved(() => screen.queryByRole('dialog', { name: 'Delete this collection?' }));
await user.click(confirmBtn);
expect(screen.queryByRole('dialog', { name: 'Delete this collection?' })).not.toBeInTheDocument();
await waitFor(() => {
expect(axiosMock.history.delete.length).toEqual(1);