Merge pull request #15243 from strapi/fix/ML-header-tooltip-and-asset…

…-count [fix] ML table headers and asset count
strapi · Dec 22, 2022 · f488558 · f488558
2 parents 0118b4e + a092e99
commit f488558
Show file tree

Hide file tree

Showing 5 changed files with 23 additions and 22 deletions.
diff --git a/packages/core/upload/admin/src/components/AssetDialog/BrowseStep/tests/index.test.js b/packages/core/upload/admin/src/components/AssetDialog/BrowseStep/tests/index.test.js
@@ -250,11 +250,11 @@ describe('BrowseStep', () => {
     it('should render the table headers', () => {
       usePersistentState.mockReturnValueOnce([viewOptions.LIST]);
 
-      const { getByText } = setup();
-      expect(getByText('preview')).toBeInTheDocument();
+      const { getByText, getByRole } = setup();
+      expect(getByRole('gridcell', { name: 'preview' })).toBeInTheDocument();
       expect(getByText('name')).toBeInTheDocument();
-      expect(getByText('extension')).toBeInTheDocument();
-      expect(getByText('size')).toBeInTheDocument();
+      expect(getByRole('gridcell', { name: 'extension' })).toBeInTheDocument();
+      expect(getByRole('gridcell', { name: 'size' })).toBeInTheDocument();
       expect(getByText('created')).toBeInTheDocument();
       expect(getByText('last update')).toBeInTheDocument();
     });

diff --git a/packages/core/upload/admin/src/components/TableList/index.js b/packages/core/upload/admin/src/components/TableList/index.js
@@ -80,8 +80,8 @@ export const TableList = ({
                 }
                 key={key}
               >
-                {isSortable ? (
-                  <Tooltip label={sortLabel}>
+                <Tooltip label={isSortable ? sortLabel : tableHeaderLabel}>
+                  {isSortable ? (
                     <Typography
                       onClick={() => handleClickSort(isSorted, name)}
                       as={isSorted ? 'span' : 'button'}
@@ -91,12 +91,12 @@ export const TableList = ({
                     >
                       {tableHeaderLabel}
                     </Typography>
-                  </Tooltip>
-                ) : (
-                  <Typography textColor="neutral600" variant="sigma">
-                    {tableHeaderLabel}
-                  </Typography>
-                )}
+                  ) : (
+                    <Typography textColor="neutral600" variant="sigma">
+                      {tableHeaderLabel}
+                    </Typography>
+                  )}
+                </Tooltip>
               </Th>
             );
           })}

diff --git a/packages/core/upload/admin/src/components/TableList/tests/TableList.test.js b/packages/core/upload/admin/src/components/TableList/tests/TableList.test.js
@@ -61,13 +61,13 @@ const ComponentFixture = (props) => {
 const setup = (props) => render(<ComponentFixture {...props} />);
 
 describe('TableList', () => {
-  it('should render table headers labels', () => {
-    const { getByText } = setup();
+  it.only('should render table headers labels', () => {
+    const { getByText, getByRole } = setup();
 
-    expect(getByText('preview')).toBeInTheDocument();
+    expect(getByRole('gridcell', { name: 'preview' })).toBeInTheDocument();
     expect(getByText('name')).toBeInTheDocument();
-    expect(getByText('extension')).toBeInTheDocument();
-    expect(getByText('size')).toBeInTheDocument();
+    expect(getByRole('gridcell', { name: 'extension' })).toBeInTheDocument();
+    expect(getByRole('gridcell', { name: 'size' })).toBeInTheDocument();
     expect(getByText('created')).toBeInTheDocument();
     expect(getByText('last update')).toBeInTheDocument();
   });

diff --git a/packages/core/upload/admin/src/pages/App/MediaLibrary/index.js b/packages/core/upload/admin/src/pages/App/MediaLibrary/index.js
@@ -136,6 +136,7 @@ export const MediaLibrary = () => {
     assetsData?.results?.map((asset) => ({ ...asset, type: 'asset', isSelectable: canUpdate })) ||
     [];
   const assetCount = assets?.length ?? 0;
+  const totalAssetCount = assetsData?.pagination?.total;
 
   const isLoading = isCurrentFolderLoading || foldersLoading || permissionsLoading || assetsLoading;
   const [showUploadAssetDialog, setShowUploadAssetDialog] = useState(false);
@@ -458,7 +459,7 @@ export const MediaLibrary = () => {
                           id: getTrad('list.assets.title'),
                           defaultMessage: 'Assets ({count})',
                         },
-                        { count: assetCount }
+                        { count: totalAssetCount }
                       )) ||
                     ''
                   }

diff --git a/packages/core/upload/admin/src/pages/App/MediaLibrary/tests/MediaLibrary.test.js b/packages/core/upload/admin/src/pages/App/MediaLibrary/tests/MediaLibrary.test.js
@@ -559,11 +559,11 @@ describe('Media library homepage', () => {
       it('should render the table headers', () => {
         usePersistentState.mockReturnValueOnce([viewOptions.LIST]);
 
-        const { getByText } = renderML();
-        expect(getByText('preview')).toBeInTheDocument();
+        const { getByText, getByRole } = renderML();
+        expect(getByRole('gridcell', { name: 'preview' })).toBeInTheDocument();
         expect(getByText('name')).toBeInTheDocument();
-        expect(getByText('extension')).toBeInTheDocument();
-        expect(getByText('size')).toBeInTheDocument();
+        expect(getByRole('gridcell', { name: 'extension' })).toBeInTheDocument();
+        expect(getByRole('gridcell', { name: 'size' })).toBeInTheDocument();
         expect(getByText('created')).toBeInTheDocument();
         expect(getByText('last update')).toBeInTheDocument();
       });