Chore: Fix AssetCardBase tests

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

@@ -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) =>
-  const render = (props) =>
+  renderRTL(
-    renderRTL(
+    <IntlProvider locale="en" messages={{}} defaultLocale="en">
-      <IntlProvider locale="en" messages={{}} defaultLocale="en">
+      <ThemeProvider theme={lightTheme}>
-        <ThemeProvider theme={lightTheme}>
+        <AssetCardBase name="Card" extension="png" {...props} />
-          <AssetCardBase name="Card" extension="png" {...props} />
+      </ThemeProvider>
-        </ThemeProvider>
+    </IntlProvider>
-      </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);
+      await user.click(editButton);
-
-      waitFor(() => expect(button.parentElement).toHaveStyle('opacity: 1'));
-
-      fireEvent.click(button);
 
       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);
+      await user.click(removeButton);
-
-      waitFor(() => expect(button.parentElement).toHaveStyle('opacity: 1'));
-
-      await user.click(button);
 
       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();
     });
   });
 });