yujunjun/strapi
1
0
Fork 0
mirror of https://github.com/strapi/strapi.git synced 2025-11-01 10:23:34 +00:00
Code Issues Packages Projects Releases Wiki Activity

Chore: Fix AssetCardBase tests

Browse Source
This commit is contained in:
Gustav Hansen 2022-11-16 20:02:26 +01:00
parent 49c4ba2e73
commit ea9d957a29
1 changed files with 59 additions and 36 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

95
packages/core/upload/admin/src/components/AssetCard/tests/AssetCardBase.test.js
View File

@ -1,23 +1,24 @@
import React from 'react';
import { ThemeProvider, lightTheme } from '@strapi/design-system';
import { render as renderRTL, fireEvent, waitFor } from '@testing-library/react';
import { render as renderRTL } from '@testing-library/react';
import userEvent from '@testing-library/user-event';
import { IntlProvider } from 'react-intl';
import { AssetCardBase } from '../AssetCardBase';
describe('AssetCardBase', () => {
const render = (props) =>
renderRTL(
<IntlProvider locale="en" messages={{}} defaultLocale="en">
<ThemeProvider theme={lightTheme}>
<AssetCardBase name="Card" extension="png" {...props} />
</ThemeProvider>
</IntlProvider>
);
const render = (props) =>
renderRTL(
<IntlProvider locale="en" messages={{}} defaultLocale="en">
<ThemeProvider theme={lightTheme}>
<AssetCardBase name="Card" extension="png" {...props} />
</ThemeProvider>
</IntlProvider>
);
describe('AssetCardBase', () => {
describe('Interaction', () => {
it('should call onSelect when the checkbox is clicked', () => {
it('should call onSelect when the checkbox is clicked', async () => {
const user = userEvent.setup();
const onSelect = jest.fn();
const { getByRole } = render({
onSelect,
@ -25,63 +26,61 @@ describe('AssetCardBase', () => {
const checkbox = getByRole('checkbox');
fireEvent.click(checkbox);
await user.click(checkbox);
expect(onSelect).toHaveBeenCalledTimes(1);
});
it('should call onEdit when the edit button is clicked after the card has been hovered', async () => {
it('should call onEdit when the edit button is clicked', async () => {
const onEdit = jest.fn();
const user = userEvent.setup();
const { getAllByRole } = render({
const { getByRole } = render({
onEdit,
});
const [card, button] = getAllByRole('button');
const editButton = getByRole('button', {
name: /edit/i,
});
await user.hover(card);
waitFor(() => expect(button.parentElement).toHaveStyle('opacity: 1'));
fireEvent.click(button);
await user.click(editButton);
expect(onEdit).toHaveBeenCalledTimes(1);
});
it('should call onRemove when the remove button is clicked after the card has been hovered', async () => {
it('should call onRemove when the remove button is clicked', async () => {
const onRemove = jest.fn();
const user = userEvent.setup();
const { getAllByRole } = render({
const { getByRole } = render({
onRemove,
});
const [card, button] = getAllByRole('button');
const removeButton = getByRole('button', {
name: /remove from selection/i,
});
await user.hover(card);
waitFor(() => expect(button.parentElement).toHaveStyle('opacity: 1'));
await user.click(button);
await user.click(removeButton);
expect(onRemove).toHaveBeenCalledTimes(1);
});
it('should call onEdit when the card is clicked', () => {
it('should call onEdit when the card is clicked', async () => {
const onEdit = jest.fn();
const user = userEvent.setup();
const { getAllByRole } = render({
onEdit,
});
const card = getAllByRole('button')[0];
fireEvent.click(card);
await user.click(card);
expect(onEdit).toHaveBeenCalledTimes(1);
});
});
describe('Keyboard Navigation', () => {
it('should focus checkbox when the card is first tabbed too', async () => {
it('should focus the checkbox when the card is first tabbed once', async () => {
const user = userEvent.setup();
const { getByRole } = render({
onSelect: jest.fn(),
@ -94,22 +93,46 @@ describe('AssetCardBase', () => {
expect(getByRole('checkbox')).toHaveFocus();
});
it('should focus the edit button and change their opacity when the card is tabbed too', async () => {
it('should focus remove from selection when the card is first tabbed twice', async () => {
const user = userEvent.setup();
const { getAllByRole } = render({
const { getByRole } = render({
onSelect: jest.fn(),
onEdit: jest.fn(),
onRemove: jest.fn(),
});
// checkbox
await user.tab();
// Remove from selection
await user.tab();
const button = getAllByRole('button')[1];
const removeSelectionButton = getByRole('button', {
name: /remove from selection/i,
});
waitFor(() => expect(button.parentElement).toHaveStyle('opacity: 1'));
expect(removeSelectionButton).toHaveFocus();
});
expect(button).toHaveFocus();
it('should focus the edit button when the card is three times', async () => {
const user = userEvent.setup();
const { getByRole } = render({
onSelect: jest.fn(),
onEdit: jest.fn(),
onRemove: jest.fn(),
});
// checkbox
await user.tab();
// Remove from selection
await user.tab();
// Edit
await user.tab();
const editButton = getByRole('button', {
name: /edit/i,
});
expect(editButton).toHaveFocus();
});
});
});