yujunjun/strapi
1
0
Fork 0
mirror of https://github.com/strapi/strapi.git synced 2025-12-30 00:37:24 +00:00
Code Issues Packages Projects Releases Wiki Activity

fix folder navigation being link or button + tests

Browse Source
This commit is contained in:
Julie Plantey 2022-11-24 16:52:35 +01:00
parent 16e5a8d706
commit da676b2c4c
8 changed files with 334 additions and 239 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

476
packages/core/upload/admin/src/components/AssetDialog/BrowseStep/tests/__snapshots__/index.test.js.snap
View File

File diff suppressed because it is too large Load Diff

3
packages/core/upload/admin/src/components/AssetDialog/BrowseStep/tests/index.test.js
View File

@ -97,6 +97,7 @@ const ComponentFixture = (props) => {
onChangeSort={jest.fn()}
onChangeFolder={jest.fn()}
onEditAsset={jest.fn()}
onEditFolder={jest.fn()}
onSelectAllAsset={jest.fn()}
onSelectAsset={jest.fn()}
pagination={{ pageCount: 1 }}
@ -118,7 +119,7 @@ describe('BrowseStep', () => {
jest.clearAllMocks();
});
it('renders and match snapshot', () => {
it.only('renders and match snapshot', () => {
const { container } = setup();
expect(container).toMatchSnapshot();
});

1
packages/core/upload/admin/src/components/FolderGridList/tests/__snapshots__/FolderGridList.test.js.snap
View File

@ -14,7 +14,6 @@ exports[`FolderGridList renders and match snapshots 1`] = `
}
.c0 {
padding-top: 8px;
padding-bottom: 8px;
}

23
packages/core/upload/admin/src/components/TableList/TableRows.js
View File

@ -28,11 +28,11 @@ export const TableRows = ({
}) => {
const { formatMessage } = useIntl();
const handleRowClickFn = (element, elementType) => {
const handleRowClickFn = (element, elementType, id) => {
if (elementType === 'asset') {
onEditAsset(element);
} else {
onChangeFolder(element.id);
onChangeFolder(id);
}
};
@ -41,7 +41,17 @@ export const TableRows = ({
return (
<Tbody>
{rows.map((element) => {
const { alternativeText, id, name, ext, url, mime, formats, type: elementType } = element;
const {
alternativeText,
id,
name,
ext,
url,
mime,
folderURL,
formats,
type: elementType,
} = element;
const fileType = mime?.split('/')?.[0];
const canBeSelected =
@ -53,7 +63,7 @@ export const TableRows = ({
<Tr
key={id}
{...onRowClick({
fn: () => handleRowClickFn(element, elementType),
fn: () => handleRowClickFn(element, elementType, id),
})}
>
<Td {...stopPropagation}>
@ -92,12 +102,13 @@ export const TableRows = ({
<Flex justifyContent="flex-end">
{elementType === 'folder' && (
<IconButton
forwardedAs={Link}
forwardedAs={folderURL ? Link : 'button'}
label={formatMessage({
id: getTrad('list.folders.link-label'),
defaultMessage: 'Access folder',
})}
// to={getFolderURL(pathname, query, element)}
to={folderURL}
onClick={() => !folderURL && onChangeFolder(id)}
noBorder
>
<Eye />

19
packages/core/upload/admin/src/components/TableList/tests/TableList.test.js
View File

@ -13,7 +13,8 @@ jest.mock('@strapi/helper-plugin', () => ({
}));
const PROPS_FIXTURE = {
canUpdate: false,
canUpdate: true,
indeterminate: false,
rows: [
{
alternativeText: 'alternative text',
@ -110,8 +111,22 @@ describe('TableList', () => {
expect(onSelectAllSpy).toHaveBeenCalledTimes(1);
});
it('should display indeterminate state of bulk select checkbox', () => {
const { getByRole } = setup({ indeterminate: true });
expect(getByRole('checkbox', { name: 'Select all folders & assets' })).toBePartiallyChecked();
});
it('should not display indeterminate state of bulk select checkbox if checkbox is disabled', () => {
const { getByRole } = setup({ indeterminate: true, shouldDisableBulkSelect: true });
expect(
getByRole('checkbox', { name: 'Select all folders & assets' })
).not.toBePartiallyChecked();
});
it('should disable bulk select when users do not have update permissions', () => {
const { getByRole } = setup({ canUpdate: false });
const { getByRole } = setup({ shouldDisableBulkSelect: true });
expect(getByRole('checkbox', { name: 'Select all folders & assets' })).toBeDisabled();
});

33
packages/core/upload/admin/src/components/TableList/tests/TableRows.test.js
View File

@ -110,6 +110,12 @@ describe('TableList | TableRows', () => {
expect(getByRole('checkbox', { name: 'Select michka asset', hidden: true })).toBeDisabled();
});
it('should disable select asset checkbox when users if the file type is not allowed', () => {
const { getByRole } = setup({ allowedTypes: [] });
expect(getByRole('checkbox', { name: 'Select michka asset', hidden: true })).toBeDisabled();
});
it('should call onEditAsset callback', () => {
const onEditAssetSpy = jest.fn();
const { getByRole } = setup({ onEditAsset: onEditAssetSpy });
@ -141,12 +147,27 @@ describe('TableList | TableRows', () => {
expect(onEditFolderSpy).toHaveBeenCalledTimes(1);
});
it('should display folder link', () => {
const { getByRole } = setup({ rows: [FOLDER_FIXTURE] });
it('should display folder navigation as a link if no folder url exists', () => {
const { getByRole } = setup({ rows: [{ ...FOLDER_FIXTURE, folderURL: 'plugins/upload' }] });
expect(getByRole('link', { name: 'Access folder', hidden: true })).toBeInTheDocument();
});
it('should display folder nagivation as a button if a folder url exists', () => {
const { getByRole } = setup({ rows: [FOLDER_FIXTURE] });
expect(getByRole('button', { name: 'Access folder', hidden: true })).toBeInTheDocument();
});
it('should call onChangeFolder when clicking on folder navigation button', () => {
const onChangeFolderSpy = jest.fn();
const { getByRole } = setup({ rows: [FOLDER_FIXTURE], onChangeFolder: onChangeFolderSpy });
fireEvent.click(getByRole('button', { name: 'Access folder', hidden: true }));
expect(onChangeFolderSpy).toHaveBeenCalledWith(2);
});
it('should reflect non selected folder state', () => {
const { getByRole } = setup({ rows: [FOLDER_FIXTURE] });
@ -169,6 +190,14 @@ describe('TableList | TableRows', () => {
).toBeDisabled();
});
it('should disable select folder checkbox when folder selection is not allowed', () => {
const { getByRole } = setup({ rows: [FOLDER_FIXTURE], isFolderSelectionAllowed: false });
expect(
getByRole('checkbox', { name: 'Select folder 1 folder', hidden: true })
).toBeDisabled();
});
it('should not display size and ext', () => {
const { getAllByText } = setup({ rows: [FOLDER_FIXTURE] });

8
packages/core/upload/admin/src/pages/App/MediaLibrary.js
View File

@ -119,7 +119,12 @@ export const MediaLibrary = () => {
push(pathname);
}
const folders = foldersData?.map((folder) => ({ ...folder, type: 'folder' })) ?? [];
const folders =
foldersData?.map((folder) => ({
...folder,
type: 'folder',
folderURL: getFolderURL(pathname, query, folder.id),
})) ?? [];
const folderCount = folders?.length || 0;
const assets = assetsData?.results?.map((asset) => ({ ...asset, type: 'asset' })) || [];
const assetCount = assets?.length ?? 0;
@ -275,6 +280,7 @@ export const MediaLibrary = () => {
assetCount={assetCount}
canUpdate={canUpdate}
folderCount={folderCount}
// folderURL={getFolderURL(pathname, query, folderID)}
indeterminate={indeterminateBulkSelect}
onChangeSort={handleChangeSort}
onChangeFolder={(folderID) => push(getFolderURL(pathname, query, folderID))}

10
packages/core/upload/admin/src/utils/tests/getFolderURL.test.js
View File

@ -2,9 +2,7 @@ import { getFolderURL } from '..';
const FIXTURE_PATHNAME = '/media-library';
const FIXTURE_QUERY = {};
const FIXTURE_FOLDER = {
id: 1,
};
const FIXTURE_FOLDER = 1;
describe('getFolderURL', () => {
test('returns a path for the root of the media library', () => {
@ -13,19 +11,19 @@ describe('getFolderURL', () => {
test('returns a path for a folder', () => {
expect(getFolderURL(FIXTURE_PATHNAME, FIXTURE_QUERY, FIXTURE_FOLDER)).toStrictEqual(
`${FIXTURE_PATHNAME}?folder=${FIXTURE_FOLDER.id}`
`${FIXTURE_PATHNAME}?folder=${FIXTURE_FOLDER}`
);
});
test('removes _q query parameter', () => {
expect(
getFolderURL(FIXTURE_PATHNAME, { ...FIXTURE_QUERY, _q: 'search' }, FIXTURE_FOLDER)
).toStrictEqual(`${FIXTURE_PATHNAME}?folder=${FIXTURE_FOLDER.id}`);
).toStrictEqual(`${FIXTURE_PATHNAME}?folder=${FIXTURE_FOLDER}`);
});
test('keeps and stringifies query parameter', () => {
expect(
getFolderURL(FIXTURE_PATHNAME, { ...FIXTURE_QUERY, some: 'thing' }, FIXTURE_FOLDER)
).toStrictEqual(`${FIXTURE_PATHNAME}?some=thing&folder=${FIXTURE_FOLDER.id}`);
).toStrictEqual(`${FIXTURE_PATHNAME}?some=thing&folder=${FIXTURE_FOLDER}`);
});
});