From 78da4c84d637ed351ac7f3da11fe12d075ac6c2c Mon Sep 17 00:00:00 2001
From: ronronscelestes <julie.plantey@gmail.com>
Date: Mon, 30 May 2022 11:19:02 +0200
Subject: [PATCH] renamed DialogTitle to DialogHeader + tests

---
 .../{DialogTitle.js => DialogHeader.js}       |  14 +-
 .../admin/src/components/AssetDialog/index.js |  10 +-
 .../AssetDialog/tests/DialogHeader.test.js    | 128 ++++++++++++++++++
 3 files changed, 142 insertions(+), 10 deletions(-)
 rename packages/core/upload/admin/src/components/AssetDialog/{DialogTitle.js => DialogHeader.js} (81%)
 create mode 100644 packages/core/upload/admin/src/components/AssetDialog/tests/DialogHeader.test.js

diff --git a/packages/core/upload/admin/src/components/AssetDialog/DialogTitle.js b/packages/core/upload/admin/src/components/AssetDialog/DialogHeader.js
similarity index 81%
rename from packages/core/upload/admin/src/components/AssetDialog/DialogTitle.js
rename to packages/core/upload/admin/src/components/AssetDialog/DialogHeader.js
index fd252cd895..039661da4a 100644
--- a/packages/core/upload/admin/src/components/AssetDialog/DialogTitle.js
+++ b/packages/core/upload/admin/src/components/AssetDialog/DialogHeader.js
@@ -10,7 +10,7 @@ import getTrad from '../../utils/getTrad';
 import { findRecursiveFolderMetadatas } from '../../utils';
 import { useFolderStructure } from '../../hooks/useFolderStructure';
 
-export const DialogTitle = ({ currentFolder, onChangeFolder }) => {
+export const DialogHeader = ({ currentFolder, onChangeFolder }) => {
   const { formatMessage } = useIntl();
 
   const { data, isLoading } = useFolderStructure();
@@ -26,11 +26,15 @@ export const DialogTitle = ({ currentFolder, onChangeFolder }) => {
     <ModalHeader>
       <Stack horizontal spacing={4}>
         {currentFolder && (
-          <button type="button" onClick={() => onChangeFolder(folderMetadatas?.parentId)}>
+          <button
+            aria-label="Go back"
+            type="button"
+            onClick={() => onChangeFolder(folderMetadatas?.parentId)}
+          >
             <Icon color="neutral500" as={ArrowLeft} />
           </button>
         )}
-        <Breadcrumbs label="Category model, name field">
+        <Breadcrumbs label={`Add new assets ${folderLabel ? `, ${folderLabel}` : ''}`}>
           <Crumb>
             {formatMessage({
               id: getTrad('header.actions.add-assets'),
@@ -44,12 +48,12 @@ export const DialogTitle = ({ currentFolder, onChangeFolder }) => {
   );
 };
 
-DialogTitle.defaultProps = {
+DialogHeader.defaultProps = {
   currentFolder: undefined,
   onChangeFolder: undefined,
 };
 
-DialogTitle.propTypes = {
+DialogHeader.propTypes = {
   currentFolder: PropTypes.number,
   onChangeFolder: PropTypes.func,
 };
diff --git a/packages/core/upload/admin/src/components/AssetDialog/index.js b/packages/core/upload/admin/src/components/AssetDialog/index.js
index 323e00ee57..82e9db14a1 100644
--- a/packages/core/upload/admin/src/components/AssetDialog/index.js
+++ b/packages/core/upload/admin/src/components/AssetDialog/index.js
@@ -20,7 +20,7 @@ import { useFolders } from '../../hooks/useFolders';
 import useModalQueryParams from '../../hooks/useModalQueryParams';
 import { AssetDefinition } from '../../constants';
 import getAllowedFiles from '../../utils/getAllowedFiles';
-import { DialogTitle } from './DialogTitle';
+import { DialogHeader } from './DialogHeader';
 import { DialogFooter } from './DialogFooter';
 import { EditAssetDialog } from '../EditAssetDialog';
 import { moveElement } from '../../utils/moveElement';
@@ -98,7 +98,7 @@ export const AssetDialog = ({
   if (isLoading) {
     return (
       <ModalLayout onClose={onClose} labelledBy="asset-dialog-title" aria-busy>
-        <DialogTitle />
+        <DialogHeader />
         <Flex justifyContent="center" paddingTop={4} paddingBottom={4}>
           <Loader>
             {formatMessage({
@@ -115,7 +115,7 @@ export const AssetDialog = ({
   if (hasError) {
     return (
       <ModalLayout onClose={onClose} labelledBy="asset-dialog-title">
-        <DialogTitle />
+        <DialogHeader />
         <AnErrorOccurred />
         <DialogFooter onClose={onClose} />
       </ModalLayout>
@@ -125,7 +125,7 @@ export const AssetDialog = ({
   if (!canRead) {
     return (
       <ModalLayout onClose={onClose} labelledBy="asset-dialog-title">
-        <DialogTitle />
+        <DialogHeader />
         <NoPermissions />
         <DialogFooter onClose={onClose} />
       </ModalLayout>
@@ -160,7 +160,7 @@ export const AssetDialog = ({
 
   return (
     <ModalLayout onClose={onClose} labelledBy="asset-dialog-title" aria-busy={isLoading}>
-      <DialogTitle currentFolder={queryObject?.folder} onChangeFolder={handleFolderChange} />
+      <DialogHeader currentFolder={queryObject?.folder} onChangeFolder={handleFolderChange} />
 
       <TabGroup
         label={formatMessage({
diff --git a/packages/core/upload/admin/src/components/AssetDialog/tests/DialogHeader.test.js b/packages/core/upload/admin/src/components/AssetDialog/tests/DialogHeader.test.js
new file mode 100644
index 0000000000..b6215575d8
--- /dev/null
+++ b/packages/core/upload/admin/src/components/AssetDialog/tests/DialogHeader.test.js
@@ -0,0 +1,128 @@
+import React from 'react';
+import { ThemeProvider, lightTheme } from '@strapi/design-system';
+import { IntlProvider } from 'react-intl';
+import { QueryClientProvider, QueryClient } from 'react-query';
+import { fireEvent, render, screen } from '@testing-library/react';
+import { useFolderStructure } from '../../../hooks/useFolderStructure';
+import { DialogHeader } from '../DialogHeader';
+
+jest.mock('../../../utils', () => ({
+  ...jest.requireActual('../../../utils'),
+  getTrad: x => x,
+}));
+
+jest.mock('../../../hooks/useFolderStructure');
+
+const setup = props => {
+  const withDefaults = {
+    currentFolder: null,
+    onChangeFolder: jest.fn(),
+    ...props,
+  };
+
+  const queryClient = new QueryClient({
+    defaultOptions: {
+      queries: {
+        retry: false,
+        refetchOnWindowFocus: false,
+      },
+    },
+  });
+
+  return render(
+    <QueryClientProvider client={queryClient}>
+      <ThemeProvider theme={lightTheme}>
+        <IntlProvider locale="en" messages={{}}>
+          <DialogHeader {...withDefaults} />
+        </IntlProvider>
+      </ThemeProvider>
+    </QueryClientProvider>
+  );
+};
+
+describe('Upload || components || DialogHeader', () => {
+  it('should render folder name and back button', () => {
+    useFolderStructure.mockReturnValueOnce({
+      isLoading: false,
+      error: null,
+      data: [
+        {
+          value: null,
+          label: 'Media Library',
+          children: [
+            {
+              value: 1,
+              label: 'Cats',
+              children: [
+                {
+                  value: 2,
+                  label: 'Michka',
+                  children: [],
+                },
+              ],
+            },
+          ],
+        },
+      ],
+    });
+    const handleChangeFolderSpy = jest.fn();
+    const { queryByText } = setup({ currentFolder: 2, onChangeFolder: handleChangeFolderSpy });
+
+    expect(queryByText('Michka')).toBeInTheDocument();
+
+    const goBackButton = screen.getByLabelText('Go back');
+    expect(goBackButton).toBeInTheDocument();
+
+    fireEvent.click(goBackButton);
+    expect(handleChangeFolderSpy).toHaveBeenCalled();
+  });
+
+  it('should truncate long folder name', () => {
+    useFolderStructure.mockReturnValueOnce({
+      isLoading: false,
+      error: null,
+      data: [
+        {
+          value: null,
+          label: 'Media Library',
+          children: [
+            {
+              value: 1,
+              label: 'This is a really really long folder name that should be truncated',
+              children: [],
+            },
+          ],
+        },
+      ],
+    });
+    const { queryByText } = setup({ currentFolder: 1 });
+
+    expect(
+      queryByText('This is a really really long folder name that should be trun...')
+    ).toBeInTheDocument();
+  });
+
+  it('should not render folder name and back button', () => {
+    useFolderStructure.mockReturnValueOnce({
+      isLoading: false,
+      error: null,
+      data: [
+        {
+          value: null,
+          label: 'Media Library',
+          children: [
+            {
+              value: 1,
+              label: 'Cats',
+              children: [],
+            },
+          ],
+        },
+      ],
+    });
+    const { queryByText } = setup();
+
+    expect(queryByText('Cats')).not.toBeInTheDocument();
+    expect(screen.queryByLabelText('Go back')).not.toBeInTheDocument();
+  });
+});