BulkDeleteButton: Add tests

packages/core/upload/admin/src/hooks/__mocks__/useBulkRemove.js

@@ -0,0 +1,5 @@
+export const useBulkRemove = jest.fn().mockReturnValue({
+  isLoading: false,
+  error: null,
+  remove: jest.fn(),
+});

packages/core/upload/admin/src/pages/App/tests/BulkActions.test.js

@@ -7,6 +7,8 @@ import { IntlProvider } from 'react-intl';
 
 import { BulkActions } from '../components/BulkActions';
 
+jest.mock('../../../hooks/useBulkRemove');
+
 jest.mock('@strapi/helper-plugin', () => ({
   ...jest.requireActual('@strapi/helper-plugin'),
   useNotification: jest.fn(),
@@ -41,7 +43,7 @@ const setup = (
   );
 };
 
-describe('Header', () => {
+describe('BulkActions', () => {
   afterEach(() => {
     jest.clearAllMocks();
   });

packages/core/upload/admin/src/pages/App/tests/BulkDeleteButton.test.js

@@ -0,0 +1,79 @@
+import React from 'react';
+import { ThemeProvider, lightTheme } from '@strapi/design-system';
+import { QueryClientProvider, QueryClient } from 'react-query';
+import { render, fireEvent, waitFor, act } from '@testing-library/react';
+import { MemoryRouter } from 'react-router-dom';
+import { IntlProvider } from 'react-intl';
+
+import { BulkDeleteButton } from '../components/BulkDeleteButton';
+import { useBulkRemove } from '../../../hooks/useBulkRemove';
+
+jest.mock('../../../hooks/useBulkRemove');
+
+const setup = (
+  props = {
+    selected: [],
+    onSuccess: jest.fn(),
+  }
+) => {
+  const queryClient = new QueryClient({
+    defaultOptions: {
+      queries: {
+        retry: false,
+        refetchOnWindowFocus: false,
+      },
+    },
+  });
+
+  return render(
+    <QueryClientProvider client={queryClient}>
+      <ThemeProvider theme={lightTheme}>
+        <MemoryRouter>
+          <IntlProvider locale="en">
+            <BulkDeleteButton {...props} />
+          </IntlProvider>
+        </MemoryRouter>
+      </ThemeProvider>
+    </QueryClientProvider>
+  );
+};
+
+describe('BulkDeleteButton', () => {
+  afterEach(() => {
+    jest.clearAllMocks();
+  });
+
+  test('renders', () => {
+    const { container } = setup();
+
+    expect(container).toMatchSnapshot();
+  });
+
+  test('opens confirm dialog before the API call', () => {
+    const onSuccessSpy = jest.fn();
+    const { getByText } = setup({
+      onSuccess: onSuccessSpy,
+      selected: [{ type: 'asset' }],
+    });
+    const removeSpy = jest.fn().mockResolvedValueOnce({});
+
+    useBulkRemove.mockReturnValueOnce({
+      isLoading: false,
+      error: null,
+      remove: removeSpy,
+    });
+
+    act(() => {
+      fireEvent.click(getByText('Delete'));
+    });
+
+    expect(getByText('Are you sure you want to delete this?')).toBeInTheDocument();
+
+    act(() => {
+      fireEvent.click(getByText('Confirm'));
+    });
+
+    expect(removeSpy).toBeCalledWith([{ type: 'asset' }]);
+    waitFor(() => expect(onSuccessSpy).toBeCalledTimes(1));
+  });
+});

packages/core/upload/admin/src/pages/App/tests/__snapshots__/BulkActions.test.js.snap

@@ -1,6 +1,6 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`Header renders 1`] = `
+exports[`BulkActions renders 1`] = `
 .c12 {
   border: 0;
   -webkit-clip: rect(0 0 0 0);

packages/core/upload/admin/src/pages/App/tests/__snapshots__/BulkDeleteButton.test.js.snap

@@ -0,0 +1,223 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`BulkDeleteButton renders 1`] = `
+.c7 {
+  border: 0;
+  -webkit-clip: rect(0 0 0 0);
+  clip: rect(0 0 0 0);
+  height: 1px;
+  margin: -1px;
+  overflow: hidden;
+  padding: 0;
+  position: absolute;
+  width: 1px;
+}
+
+.c6 {
+  font-weight: 600;
+  color: #32324d;
+  font-size: 0.75rem;
+  line-height: 1.33;
+}
+
+.c3 {
+  padding-right: 8px;
+}
+
+.c0 {
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  cursor: pointer;
+  padding: 8px;
+  border-radius: 4px;
+  background: #ffffff;
+  border: 1px solid #dcdce4;
+  position: relative;
+  outline: none;
+}
+
+.c0 svg {
+  height: 12px;
+  width: 12px;
+}
+
+.c0 svg > g,
+.c0 svg path {
+  fill: #ffffff;
+}
+
+.c0[aria-disabled='true'] {
+  pointer-events: none;
+}
+
+.c0:after {
+  -webkit-transition-property: all;
+  transition-property: all;
+  -webkit-transition-duration: 0.2s;
+  transition-duration: 0.2s;
+  border-radius: 8px;
+  content: '';
+  position: absolute;
+  top: -4px;
+  bottom: -4px;
+  left: -4px;
+  right: -4px;
+  border: 2px solid transparent;
+}
+
+.c0:focus-visible {
+  outline: none;
+}
+
+.c0:focus-visible:after {
+  border-radius: 8px;
+  content: '';
+  position: absolute;
+  top: -5px;
+  bottom: -5px;
+  left: -5px;
+  right: -5px;
+  border: 2px solid #4945ff;
+}
+
+.c4 {
+  height: 100%;
+}
+
+.c1 {
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+  padding: 8px 16px;
+  background: #4945ff;
+  border: 1px solid #4945ff;
+  border: 1px solid #f5c0b8;
+  background: #fcecea;
+}
+
+.c1 .c2 {
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+}
+
+.c1 .c5 {
+  color: #ffffff;
+}
+
+.c1[aria-disabled='true'] {
+  border: 1px solid #dcdce4;
+  background: #eaeaef;
+}
+
+.c1[aria-disabled='true'] .c5 {
+  color: #666687;
+}
+
+.c1[aria-disabled='true'] svg > g,
+.c1[aria-disabled='true'] svg path {
+  fill: #666687;
+}
+
+.c1[aria-disabled='true']:active {
+  border: 1px solid #dcdce4;
+  background: #eaeaef;
+}
+
+.c1[aria-disabled='true']:active .c5 {
+  color: #666687;
+}
+
+.c1[aria-disabled='true']:active svg > g,
+.c1[aria-disabled='true']:active svg path {
+  fill: #666687;
+}
+
+.c1:hover {
+  background-color: #ffffff;
+}
+
+.c1:active {
+  background-color: #ffffff;
+  border: 1px solid #d02b20;
+}
+
+.c1:active .c5 {
+  color: #d02b20;
+}
+
+.c1:active svg > g,
+.c1:active svg path {
+  fill: #d02b20;
+}
+
+.c1 .c5 {
+  color: #b72b1a;
+}
+
+.c1 svg > g,
+.c1 svg path {
+  fill: #b72b1a;
+}
+
+<div>
+  <button
+    aria-disabled="false"
+    class="c0 c1"
+    type="button"
+  >
+    <div
+      aria-hidden="true"
+      class="c2 c3 c4"
+    >
+      <svg
+        fill="none"
+        height="1em"
+        viewBox="0 0 24 24"
+        width="1em"
+        xmlns="http://www.w3.org/2000/svg"
+      >
+        <path
+          d="M3.236 6.149a.2.2 0 00-.197.233L6 24h12l2.96-17.618a.2.2 0 00-.196-.233H3.236zM21.8 1.983c.11 0 .2.09.2.2v1.584a.2.2 0 01-.2.2H2.2a.2.2 0 01-.2-.2V2.183c0-.11.09-.2.2-.2h5.511c.9 0 1.631-1.09 1.631-1.983h5.316c0 .894.73 1.983 1.631 1.983H21.8z"
+          fill="#32324D"
+        />
+      </svg>
+    </div>
+    <span
+      class="c5 c6"
+    >
+      Delete
+    </span>
+  </button>
+  <div
+    class="c7"
+  >
+    <p
+      aria-live="polite"
+      aria-relevant="all"
+      id="live-region-log"
+      role="log"
+    />
+    <p
+      aria-live="polite"
+      aria-relevant="all"
+      id="live-region-status"
+      role="status"
+    />
+    <p
+      aria-live="assertive"
+      aria-relevant="all"
+      id="live-region-alert"
+      role="alert"
+    />
+  </div>
+</div>
+`;