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

[fix] ML table headers and asset count
This commit is contained in:
Julie Plantey 2022-12-22 14:25:15 +01:00 committed by GitHub
commit f488558cd0
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
5 changed files with 23 additions and 22 deletions

View File

@ -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();
});

View File

@ -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>
);
})}

View File

@ -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();
});

View File

@ -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 }
)) ||
''
}

View File

@ -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();
});