mirror of
https://github.com/strapi/strapi.git
synced 2025-11-19 03:29:47 +00:00
Testing upload asset dialog (#11285)
This commit is contained in:
Marvin Frachet
mfrachet
parent
8a9e6f0a0f
commit
74ee11f764
@ -1,78 +0,0 @@
|
|||||||
import React from 'react';
|
|
||||||
import PropTypes from 'prop-types';
|
|
||||||
import styled from 'styled-components';
|
|
||||||
import {
|
|
||||||
Card,
|
|
||||||
CardAction,
|
|
||||||
CardAsset,
|
|
||||||
CardBody,
|
|
||||||
CardCheckbox,
|
|
||||||
CardContent,
|
|
||||||
CardHeader,
|
|
||||||
CardTitle,
|
|
||||||
CardSubtitle,
|
|
||||||
} from '@strapi/parts/Card';
|
|
||||||
import { IconButton } from '@strapi/parts/IconButton';
|
|
||||||
import EditIcon from '@strapi/icons/EditIcon';
|
|
||||||
import EmptyStatePicture from '@strapi/icons/EmptyStatePicture';
|
|
||||||
import { useIntl } from 'react-intl';
|
|
||||||
import { getTrad } from '../../utils';
|
|
||||||
|
|
||||||
const Extension = styled.span`
|
|
||||||
text-transform: uppercase;
|
|
||||||
`;
|
|
||||||
|
|
||||||
const IconWrapper = styled.span`
|
|
||||||
svg {
|
|
||||||
font-size: 3rem;
|
|
||||||
}
|
|
||||||
`;
|
|
||||||
|
|
||||||
export const UnknownAssetCard = ({ name, extension, selected, onSelect, onEdit, size }) => {
|
|
||||||
const { formatMessage } = useIntl();
|
|
||||||
|
|
||||||
return (
|
|
||||||
<Card>
|
|
||||||
<CardHeader>
|
|
||||||
{onSelect && <CardCheckbox value={selected} onValueChange={onSelect} />}
|
|
||||||
{onEdit && (
|
|
||||||
<CardAction position="end">
|
|
||||||
<IconButton
|
|
||||||
label={formatMessage({ id: getTrad('control-card.edit'), defaultMessage: 'Edit' })}
|
|
||||||
icon={<EditIcon />}
|
|
||||||
/>
|
|
||||||
</CardAction>
|
|
||||||
)}
|
|
||||||
<CardAsset size={size}>
|
|
||||||
<IconWrapper>
|
|
||||||
<EmptyStatePicture aria-label={name} />
|
|
||||||
</IconWrapper>
|
|
||||||
</CardAsset>
|
|
||||||
</CardHeader>
|
|
||||||
<CardBody>
|
|
||||||
<CardContent>
|
|
||||||
<CardTitle as="h2">{name}</CardTitle>
|
|
||||||
<CardSubtitle>
|
|
||||||
<Extension>{extension}</Extension>
|
|
||||||
</CardSubtitle>
|
|
||||||
</CardContent>
|
|
||||||
</CardBody>
|
|
||||||
</Card>
|
|
||||||
);
|
|
||||||
};
|
|
||||||
|
|
||||||
UnknownAssetCard.defaultProps = {
|
|
||||||
selected: false,
|
|
||||||
onEdit: undefined,
|
|
||||||
onSelect: undefined,
|
|
||||||
size: 'M',
|
|
||||||
};
|
|
||||||
|
|
||||||
UnknownAssetCard.propTypes = {
|
|
||||||
extension: PropTypes.string.isRequired,
|
|
||||||
name: PropTypes.string.isRequired,
|
|
||||||
onEdit: PropTypes.func,
|
|
||||||
onSelect: PropTypes.func,
|
|
||||||
selected: PropTypes.bool,
|
|
||||||
size: PropTypes.oneOf(['S', 'M']),
|
|
||||||
};
|
|
||||||
@ -1,296 +0,0 @@
|
|||||||
import React from 'react';
|
|
||||||
import { ThemeProvider, lightTheme } from '@strapi/parts';
|
|
||||||
import { render as renderTL } from '@testing-library/react';
|
|
||||||
import { UnknownAssetCard } from '../UnknownAssetCard';
|
|
||||||
import en from '../../../translations/en.json';
|
|
||||||
|
|
||||||
jest.mock('../../../utils', () => ({
|
|
||||||
...jest.requireActual('../../../utils'),
|
|
||||||
getTrad: x => x,
|
|
||||||
}));
|
|
||||||
|
|
||||||
jest.mock('react-intl', () => ({
|
|
||||||
useIntl: () => ({ formatMessage: jest.fn(({ id }) => en[id]) }),
|
|
||||||
}));
|
|
||||||
|
|
||||||
describe('UnknownAssetCard', () => {
|
|
||||||
it('snapshots the component', () => {
|
|
||||||
const { container } = renderTL(
|
|
||||||
<ThemeProvider theme={lightTheme}>
|
|
||||||
<UnknownAssetCard name="hello.png" extension="png" />
|
|
||||||
</ThemeProvider>
|
|
||||||
);
|
|
||||||
|
|
||||||
expect(container).toMatchInlineSnapshot(`
|
|
||||||
.c12 {
|
|
||||||
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;
|
|
||||||
}
|
|
||||||
|
|
||||||
.c0 {
|
|
||||||
background: #ffffff;
|
|
||||||
border-radius: 4px;
|
|
||||||
box-shadow: 0px 1px 4px rgba(33,33,52,0.1);
|
|
||||||
}
|
|
||||||
|
|
||||||
.c6 {
|
|
||||||
padding-top: 8px;
|
|
||||||
padding-right: 12px;
|
|
||||||
padding-bottom: 8px;
|
|
||||||
padding-left: 12px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.c1 {
|
|
||||||
display: -webkit-box;
|
|
||||||
display: -webkit-flex;
|
|
||||||
display: -ms-flexbox;
|
|
||||||
display: flex;
|
|
||||||
-webkit-flex-direction: row;
|
|
||||||
-ms-flex-direction: row;
|
|
||||||
flex-direction: row;
|
|
||||||
-webkit-box-pack: center;
|
|
||||||
-webkit-justify-content: center;
|
|
||||||
-ms-flex-pack: center;
|
|
||||||
justify-content: center;
|
|
||||||
-webkit-align-items: center;
|
|
||||||
-webkit-box-align: center;
|
|
||||||
-ms-flex-align: center;
|
|
||||||
align-items: center;
|
|
||||||
}
|
|
||||||
|
|
||||||
.c4 {
|
|
||||||
display: -webkit-box;
|
|
||||||
display: -webkit-flex;
|
|
||||||
display: -ms-flexbox;
|
|
||||||
display: flex;
|
|
||||||
-webkit-flex-direction: row;
|
|
||||||
-ms-flex-direction: row;
|
|
||||||
flex-direction: row;
|
|
||||||
-webkit-align-items: center;
|
|
||||||
-webkit-box-align: center;
|
|
||||||
-ms-flex-align: center;
|
|
||||||
align-items: center;
|
|
||||||
}
|
|
||||||
|
|
||||||
.c7 {
|
|
||||||
display: -webkit-box;
|
|
||||||
display: -webkit-flex;
|
|
||||||
display: -ms-flexbox;
|
|
||||||
display: flex;
|
|
||||||
-webkit-flex-direction: row;
|
|
||||||
-ms-flex-direction: row;
|
|
||||||
flex-direction: row;
|
|
||||||
-webkit-align-items: flex-start;
|
|
||||||
-webkit-box-align: flex-start;
|
|
||||||
-ms-flex-align: flex-start;
|
|
||||||
align-items: flex-start;
|
|
||||||
}
|
|
||||||
|
|
||||||
.c3 {
|
|
||||||
display: -webkit-box;
|
|
||||||
display: -webkit-flex;
|
|
||||||
display: -ms-flexbox;
|
|
||||||
display: flex;
|
|
||||||
-webkit-box-pack: center;
|
|
||||||
-webkit-justify-content: center;
|
|
||||||
-ms-flex-pack: center;
|
|
||||||
justify-content: center;
|
|
||||||
height: 10.25rem;
|
|
||||||
width: 100%;
|
|
||||||
background: repeating-conic-gradient(#f6f6f9 0% 25%,transparent 0% 50%) 50% / 20px 20px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.c9 {
|
|
||||||
font-weight: 500;
|
|
||||||
font-size: 0.75rem;
|
|
||||||
line-height: 1.33;
|
|
||||||
color: #32324d;
|
|
||||||
}
|
|
||||||
|
|
||||||
.c10 {
|
|
||||||
font-weight: 400;
|
|
||||||
font-size: 0.75rem;
|
|
||||||
line-height: 1.33;
|
|
||||||
color: #666687;
|
|
||||||
}
|
|
||||||
|
|
||||||
.c8 {
|
|
||||||
word-break: break-all;
|
|
||||||
}
|
|
||||||
|
|
||||||
.c2 {
|
|
||||||
position: relative;
|
|
||||||
border-bottom: 1px solid #eaeaef;
|
|
||||||
}
|
|
||||||
|
|
||||||
.c11 {
|
|
||||||
text-transform: uppercase;
|
|
||||||
}
|
|
||||||
|
|
||||||
.c5 svg {
|
|
||||||
font-size: 3rem;
|
|
||||||
}
|
|
||||||
|
|
||||||
<div>
|
|
||||||
<article
|
|
||||||
aria-labelledby="card-1-title"
|
|
||||||
class="c0"
|
|
||||||
tabindex="0"
|
|
||||||
>
|
|
||||||
<div
|
|
||||||
class="c1 c2"
|
|
||||||
>
|
|
||||||
<div
|
|
||||||
class="c3"
|
|
||||||
>
|
|
||||||
<div
|
|
||||||
class="c4"
|
|
||||||
>
|
|
||||||
<span
|
|
||||||
class="c5"
|
|
||||||
>
|
|
||||||
<svg
|
|
||||||
aria-label="hello.png"
|
|
||||||
fill="none"
|
|
||||||
height="1em"
|
|
||||||
viewBox="0 0 216 120"
|
|
||||||
width="1em"
|
|
||||||
xmlns="http://www.w3.org/2000/svg"
|
|
||||||
>
|
|
||||||
<g
|
|
||||||
opacity="0.8"
|
|
||||||
>
|
|
||||||
<path
|
|
||||||
clip-rule="evenodd"
|
|
||||||
d="M119 28a7 7 0 110 14h64a7 7 0 110 14h22a7 7 0 110 14h-19a7 7 0 100 14h6a7 7 0 110 14h-52a7.024 7.024 0 01-1.5-.161A7.024 7.024 0 01137 98H46a7 7 0 110-14H7a7 7 0 110-14h40a7 7 0 100-14H22a7 7 0 110-14h40a7 7 0 110-14h57zm90 56a7 7 0 110 14 7 7 0 010-14z"
|
|
||||||
fill="#D9D8FF"
|
|
||||||
fill-rule="evenodd"
|
|
||||||
/>
|
|
||||||
<path
|
|
||||||
clip-rule="evenodd"
|
|
||||||
d="M69.278 103.123l-4.07.572a4 4 0 01-4.517-3.404L49.557 21.069a4 4 0 013.404-4.518l78.231-10.994a4 4 0 014.518 3.404l.957 6.808"
|
|
||||||
fill="#fff"
|
|
||||||
fill-rule="evenodd"
|
|
||||||
/>
|
|
||||||
<path
|
|
||||||
clip-rule="evenodd"
|
|
||||||
d="M71.805 98.712l-3.696.526a3.618 3.618 0 01-4.096-3.085l-9.996-71.925a3.646 3.646 0 013.097-4.108l71.038-10.096a3.619 3.619 0 014.097 3.085l.859 6.18 9.205 66.599c.306 2.212-1.22 4.257-3.408 4.566a4.192 4.192 0 01-.07.01l-67.03 8.248z"
|
|
||||||
fill="#F0F0FF"
|
|
||||||
fill-rule="evenodd"
|
|
||||||
/>
|
|
||||||
<path
|
|
||||||
d="M69.278 103.123l-4.07.572a4 4 0 01-4.517-3.404L49.557 21.069a4 4 0 013.404-4.518l78.231-10.994a4 4 0 014.518 3.404l.957 6.808M137.5 20.38l.5 3.12"
|
|
||||||
stroke="#4945FF"
|
|
||||||
stroke-linecap="round"
|
|
||||||
stroke-opacity="0.83"
|
|
||||||
stroke-width="2.5"
|
|
||||||
/>
|
|
||||||
<path
|
|
||||||
clip-rule="evenodd"
|
|
||||||
d="M164.411 30.299L85.844 22.04a2.74 2.74 0 00-2.018.598 2.741 2.741 0 00-1.004 1.85l-8.363 79.561c-.079.755.155 1.471.598 2.018a2.74 2.74 0 001.85 1.004l78.567 8.258a2.739 2.739 0 002.018-.598 2.741 2.741 0 001.005-1.849l8.362-79.562a2.743 2.743 0 00-.598-2.018 2.74 2.74 0 00-1.85-1.004z"
|
|
||||||
fill="#fff"
|
|
||||||
fill-rule="evenodd"
|
|
||||||
stroke="#4945FF"
|
|
||||||
stroke-opacity="0.83"
|
|
||||||
stroke-width="2.5"
|
|
||||||
/>
|
|
||||||
<path
|
|
||||||
clip-rule="evenodd"
|
|
||||||
d="M92.99 30.585l62.655 6.585a3 3 0 012.67 3.297l-5.54 52.71a3 3 0 01-3.297 2.67L86.823 89.26a3 3 0 01-2.67-3.297l5.54-52.71a3 3 0 013.297-2.67z"
|
|
||||||
fill="#fff"
|
|
||||||
fill-rule="evenodd"
|
|
||||||
/>
|
|
||||||
<path
|
|
||||||
clip-rule="evenodd"
|
|
||||||
d="M92.74 73.878l9.798-6.608a4 4 0 015.168.594l7.173 7.723a1 1 0 001.362.096l15.34-12.43a4 4 0 015.878.936l9.98 15.438 1.434 2.392-.687 8.124a1 1 0 01-1.08.913l-.026-.003-56.963-6.329a1 1 0 01-.886-1.085l.755-8.199 2.755-1.562z"
|
|
||||||
fill="#F0F0FF"
|
|
||||||
fill-rule="evenodd"
|
|
||||||
/>
|
|
||||||
<path
|
|
||||||
clip-rule="evenodd"
|
|
||||||
d="M155.514 38.413l-62.655-6.585c-.48-.05-.936.098-1.284.38a1.744 1.744 0 00-.639 1.177l-5.54 52.71c-.05.48.099.936.38 1.284.282.348.697.589 1.178.64l62.654 6.585a1.746 1.746 0 001.924-1.558l5.54-52.71c.05-.48-.099-.936-.381-1.284a1.744 1.744 0 00-1.177-.639z"
|
|
||||||
stroke="#4945FF"
|
|
||||||
stroke-opacity="0.83"
|
|
||||||
stroke-width="2.5"
|
|
||||||
/>
|
|
||||||
<path
|
|
||||||
d="M104.405 55.916a6 6 0 101.254-11.933 6 6 0 00-1.254 11.934z"
|
|
||||||
fill="#F0F0FF"
|
|
||||||
stroke="#4945FF"
|
|
||||||
stroke-opacity="0.83"
|
|
||||||
stroke-width="2.5"
|
|
||||||
/>
|
|
||||||
<path
|
|
||||||
d="M90.729 75.425l11.809-8.155a4 4 0 015.168.594l7.173 7.723a1 1 0 001.362.096l15.34-12.43a4 4 0 015.878.936l11.064 17.557"
|
|
||||||
stroke="#4945FF"
|
|
||||||
stroke-linecap="round"
|
|
||||||
stroke-opacity="0.83"
|
|
||||||
stroke-width="2.5"
|
|
||||||
/>
|
|
||||||
</g>
|
|
||||||
</svg>
|
|
||||||
</span>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div
|
|
||||||
class="c6"
|
|
||||||
>
|
|
||||||
<div
|
|
||||||
class="c7"
|
|
||||||
>
|
|
||||||
<div
|
|
||||||
class="c8"
|
|
||||||
>
|
|
||||||
<h2
|
|
||||||
class="c9"
|
|
||||||
id="card-1-title"
|
|
||||||
>
|
|
||||||
hello.png
|
|
||||||
</h2>
|
|
||||||
<div
|
|
||||||
class="c10"
|
|
||||||
>
|
|
||||||
<span
|
|
||||||
class="c11"
|
|
||||||
>
|
|
||||||
png
|
|
||||||
</span>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</article>
|
|
||||||
<div
|
|
||||||
class="c12"
|
|
||||||
>
|
|
||||||
<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>
|
|
||||||
`);
|
|
||||||
});
|
|
||||||
});
|
|
||||||
@ -1,104 +0,0 @@
|
|||||||
import React from 'react';
|
|
||||||
import { ThemeProvider, lightTheme } from '@strapi/parts';
|
|
||||||
import { render as renderTL, screen, fireEvent, waitFor } from '@testing-library/react';
|
|
||||||
import { FromUrlForm } from '../FromUrlForm';
|
|
||||||
import en from '../../../../translations/en.json';
|
|
||||||
import { server } from './server';
|
|
||||||
|
|
||||||
jest.mock('../../../../utils', () => ({
|
|
||||||
...jest.requireActual('../../../../utils'),
|
|
||||||
getTrad: x => x,
|
|
||||||
}));
|
|
||||||
|
|
||||||
jest.mock('react-intl', () => ({
|
|
||||||
useIntl: () => ({ formatMessage: jest.fn(({ id }) => en[id]) }),
|
|
||||||
}));
|
|
||||||
|
|
||||||
describe('FromUrlForm', () => {
|
|
||||||
beforeAll(() => server.listen());
|
|
||||||
afterEach(() => server.resetHandlers());
|
|
||||||
afterAll(() => server.close());
|
|
||||||
|
|
||||||
it('snapshots the component with 4 URLs: 3 valid and one in failure', async () => {
|
|
||||||
const onAddAssetSpy = jest.fn();
|
|
||||||
|
|
||||||
renderTL(
|
|
||||||
<ThemeProvider theme={lightTheme}>
|
|
||||||
<FromUrlForm onClose={jest.fn()} onAddAsset={onAddAssetSpy} />
|
|
||||||
</ThemeProvider>
|
|
||||||
);
|
|
||||||
|
|
||||||
const urls = [
|
|
||||||
'http://localhost:5000/an-image.png',
|
|
||||||
'http://localhost:5000/a-pdf.pdf',
|
|
||||||
'http://localhost:5000/a-video.mp4',
|
|
||||||
'http://localhost:5000/not-working-like-cors.lutin',
|
|
||||||
].join('\n');
|
|
||||||
|
|
||||||
fireEvent.change(screen.getByLabelText('URL'), { target: { value: urls } });
|
|
||||||
fireEvent.click(screen.getByText('Next'));
|
|
||||||
|
|
||||||
const expectedAssets = [
|
|
||||||
{
|
|
||||||
name: 'http://localhost:5000/an-image.png',
|
|
||||||
ext: 'png',
|
|
||||||
mime: 'image/png',
|
|
||||||
source: 'url',
|
|
||||||
type: 'image',
|
|
||||||
url: 'http://localhost:5000/an-image.png',
|
|
||||||
rawFile: new File([''], 'image/png'),
|
|
||||||
},
|
|
||||||
{
|
|
||||||
name: 'http://localhost:5000/a-pdf.pdf',
|
|
||||||
ext: 'pdf',
|
|
||||||
mime: 'application/pdf',
|
|
||||||
source: 'url',
|
|
||||||
type: 'doc',
|
|
||||||
url: 'http://localhost:5000/a-pdf.pdf',
|
|
||||||
rawFile: new File([''], 'application/pdf'),
|
|
||||||
},
|
|
||||||
{
|
|
||||||
name: 'http://localhost:5000/a-video.mp4',
|
|
||||||
ext: 'mp4',
|
|
||||||
mime: 'video/mp4',
|
|
||||||
source: 'url',
|
|
||||||
type: 'video',
|
|
||||||
url: 'http://localhost:5000/a-video.mp4',
|
|
||||||
rawFile: new File([''], 'video/mp4'),
|
|
||||||
},
|
|
||||||
{
|
|
||||||
name: 'http://localhost:5000/not-working-like-cors.lutin',
|
|
||||||
ext: 'lutin',
|
|
||||||
mime: 'application/json',
|
|
||||||
source: 'url',
|
|
||||||
type: 'doc',
|
|
||||||
url: 'http://localhost:5000/not-working-like-cors.lutin',
|
|
||||||
rawFile: new File([''], 'something/weird'),
|
|
||||||
},
|
|
||||||
];
|
|
||||||
await waitFor(() => expect(onAddAssetSpy).toHaveBeenCalledWith(expectedAssets));
|
|
||||||
});
|
|
||||||
|
|
||||||
it('shows an error message when the asset does not exist', async () => {
|
|
||||||
const onAddAssetSpy = jest.fn();
|
|
||||||
|
|
||||||
renderTL(
|
|
||||||
<ThemeProvider theme={lightTheme}>
|
|
||||||
<FromUrlForm onClose={jest.fn()} onAddAsset={onAddAssetSpy} />
|
|
||||||
</ThemeProvider>
|
|
||||||
);
|
|
||||||
|
|
||||||
const urls = [
|
|
||||||
'http://localhost:5000/an-image.png',
|
|
||||||
'http://localhost:5000/a-pdf.pdf',
|
|
||||||
'http://localhost:5000/a-video.mp4',
|
|
||||||
'http://localhost:5000/not-working-like-cors.lutin',
|
|
||||||
'http://localhost:1234/some-where-not-existing.jpg',
|
|
||||||
].join('\n');
|
|
||||||
|
|
||||||
fireEvent.change(screen.getByLabelText('URL'), { target: { value: urls } });
|
|
||||||
fireEvent.click(screen.getByText('Next'));
|
|
||||||
|
|
||||||
await waitFor(() => expect(screen.getByText('Network Error')).toBeInTheDocument());
|
|
||||||
});
|
|
||||||
});
|
|
||||||
@ -11,7 +11,6 @@ import { KeyboardNavigable } from '@strapi/parts/KeyboardNavigable';
|
|||||||
import { DocAssetCard } from '../../AssetCard/DocAssetCard';
|
import { DocAssetCard } from '../../AssetCard/DocAssetCard';
|
||||||
import { ImageAssetCard } from '../../AssetCard/ImageAssetCard';
|
import { ImageAssetCard } from '../../AssetCard/ImageAssetCard';
|
||||||
import { VideoAssetCard } from '../../AssetCard/VideoAssetCard';
|
import { VideoAssetCard } from '../../AssetCard/VideoAssetCard';
|
||||||
import { UnknownAssetCard } from '../../AssetCard/UnknownAssetCard';
|
|
||||||
import { UploadingAssetCard } from '../../AssetCard/UploadingAssetCard';
|
import { UploadingAssetCard } from '../../AssetCard/UploadingAssetCard';
|
||||||
import { getTrad } from '../../../utils';
|
import { getTrad } from '../../../utils';
|
||||||
import { AssetType, AssetSource } from '../../../constants';
|
import { AssetType, AssetSource } from '../../../constants';
|
||||||
@ -148,19 +147,6 @@ export const PendingAssetStep = ({
|
|||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|
||||||
if (asset.type === AssetType.Unknown) {
|
|
||||||
return (
|
|
||||||
<GridItem col={4} key={assetKey}>
|
|
||||||
<UnknownAssetCard
|
|
||||||
id={assetKey}
|
|
||||||
name={asset.name}
|
|
||||||
extension={asset.ext}
|
|
||||||
size="S"
|
|
||||||
/>
|
|
||||||
</GridItem>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<GridItem col={4} key={assetKey}>
|
<GridItem col={4} key={assetKey}>
|
||||||
<DocAssetCard name={asset.name} extension={asset.ext} size="S" />
|
<DocAssetCard name={asset.name} extension={asset.ext} size="S" />
|
||||||
|
|||||||
@ -70,7 +70,7 @@ describe('PendingAssetStep', () => {
|
|||||||
);
|
);
|
||||||
|
|
||||||
expect(container).toMatchInlineSnapshot(`
|
expect(container).toMatchInlineSnapshot(`
|
||||||
.c52 {
|
.c50 {
|
||||||
border: 0;
|
border: 0;
|
||||||
-webkit-clip: rect(0 0 0 0);
|
-webkit-clip: rect(0 0 0 0);
|
||||||
clip: rect(0 0 0 0);
|
clip: rect(0 0 0 0);
|
||||||
@ -115,7 +115,7 @@ describe('PendingAssetStep', () => {
|
|||||||
align-items: center;
|
align-items: center;
|
||||||
}
|
}
|
||||||
|
|
||||||
.c49 {
|
.c47 {
|
||||||
display: -webkit-box;
|
display: -webkit-box;
|
||||||
display: -webkit-flex;
|
display: -webkit-flex;
|
||||||
display: -ms-flexbox;
|
display: -ms-flexbox;
|
||||||
@ -231,11 +231,11 @@ describe('PendingAssetStep', () => {
|
|||||||
border-bottom: 1px solid #eaeaef;
|
border-bottom: 1px solid #eaeaef;
|
||||||
}
|
}
|
||||||
|
|
||||||
.c48 {
|
.c46 {
|
||||||
border-top: 1px solid #eaeaef;
|
border-top: 1px solid #eaeaef;
|
||||||
}
|
}
|
||||||
|
|
||||||
.c50 > * + * {
|
.c48 > * + * {
|
||||||
margin-left: 8px;
|
margin-left: 8px;
|
||||||
}
|
}
|
||||||
|
|
||||||
@ -400,7 +400,7 @@ describe('PendingAssetStep', () => {
|
|||||||
background: #4945ff;
|
background: #4945ff;
|
||||||
}
|
}
|
||||||
|
|
||||||
.c51 {
|
.c49 {
|
||||||
-webkit-align-items: center;
|
-webkit-align-items: center;
|
||||||
-webkit-box-align: center;
|
-webkit-box-align: center;
|
||||||
-ms-flex-align: center;
|
-ms-flex-align: center;
|
||||||
@ -412,7 +412,7 @@ describe('PendingAssetStep', () => {
|
|||||||
background: #ffffff;
|
background: #ffffff;
|
||||||
}
|
}
|
||||||
|
|
||||||
.c51 .sc-fFYUIl {
|
.c49 .sc-fFYUIl {
|
||||||
display: -webkit-box;
|
display: -webkit-box;
|
||||||
display: -webkit-flex;
|
display: -webkit-flex;
|
||||||
display: -ms-flexbox;
|
display: -ms-flexbox;
|
||||||
@ -423,52 +423,52 @@ describe('PendingAssetStep', () => {
|
|||||||
align-items: center;
|
align-items: center;
|
||||||
}
|
}
|
||||||
|
|
||||||
.c51 .c16 {
|
.c49 .c16 {
|
||||||
color: #ffffff;
|
color: #ffffff;
|
||||||
}
|
}
|
||||||
|
|
||||||
.c51[aria-disabled='true'] {
|
.c49[aria-disabled='true'] {
|
||||||
border: 1px solid #dcdce4;
|
border: 1px solid #dcdce4;
|
||||||
background: #eaeaef;
|
background: #eaeaef;
|
||||||
}
|
}
|
||||||
|
|
||||||
.c51[aria-disabled='true'] .c16 {
|
.c49[aria-disabled='true'] .c16 {
|
||||||
color: #666687;
|
color: #666687;
|
||||||
}
|
}
|
||||||
|
|
||||||
.c51[aria-disabled='true'] svg > g,
|
.c49[aria-disabled='true'] svg > g,
|
||||||
.c51[aria-disabled='true'] svg path {
|
.c49[aria-disabled='true'] svg path {
|
||||||
fill: #666687;
|
fill: #666687;
|
||||||
}
|
}
|
||||||
|
|
||||||
.c51[aria-disabled='true']:active {
|
.c49[aria-disabled='true']:active {
|
||||||
border: 1px solid #dcdce4;
|
border: 1px solid #dcdce4;
|
||||||
background: #eaeaef;
|
background: #eaeaef;
|
||||||
}
|
}
|
||||||
|
|
||||||
.c51[aria-disabled='true']:active .c16 {
|
.c49[aria-disabled='true']:active .c16 {
|
||||||
color: #666687;
|
color: #666687;
|
||||||
}
|
}
|
||||||
|
|
||||||
.c51[aria-disabled='true']:active svg > g,
|
.c49[aria-disabled='true']:active svg > g,
|
||||||
.c51[aria-disabled='true']:active svg path {
|
.c49[aria-disabled='true']:active svg path {
|
||||||
fill: #666687;
|
fill: #666687;
|
||||||
}
|
}
|
||||||
|
|
||||||
.c51:hover {
|
.c49:hover {
|
||||||
background-color: #f6f6f9;
|
background-color: #f6f6f9;
|
||||||
}
|
}
|
||||||
|
|
||||||
.c51:active {
|
.c49:active {
|
||||||
background-color: #eaeaef;
|
background-color: #eaeaef;
|
||||||
}
|
}
|
||||||
|
|
||||||
.c51 .c16 {
|
.c49 .c16 {
|
||||||
color: #32324d;
|
color: #32324d;
|
||||||
}
|
}
|
||||||
|
|
||||||
.c51 svg > g,
|
.c49 svg > g,
|
||||||
.c51 svg path {
|
.c49 svg path {
|
||||||
fill: #32324d;
|
fill: #32324d;
|
||||||
}
|
}
|
||||||
|
|
||||||
@ -724,14 +724,6 @@ describe('PendingAssetStep', () => {
|
|||||||
text-transform: uppercase;
|
text-transform: uppercase;
|
||||||
}
|
}
|
||||||
|
|
||||||
.c47 {
|
|
||||||
text-transform: uppercase;
|
|
||||||
}
|
|
||||||
|
|
||||||
.c46 svg {
|
|
||||||
font-size: 3rem;
|
|
||||||
}
|
|
||||||
|
|
||||||
@media (max-width:68.75rem) {
|
@media (max-width:68.75rem) {
|
||||||
.c19 {
|
.c19 {
|
||||||
grid-column: span;
|
grid-column: span;
|
||||||
@ -1071,86 +1063,19 @@ describe('PendingAssetStep', () => {
|
|||||||
class="c38"
|
class="c38"
|
||||||
>
|
>
|
||||||
<span
|
<span
|
||||||
class="c46"
|
class="c39"
|
||||||
>
|
>
|
||||||
<svg
|
<svg
|
||||||
fill="none"
|
fill="none"
|
||||||
height="1em"
|
height="1em"
|
||||||
viewBox="0 0 216 120"
|
viewBox="0 0 24 24"
|
||||||
width="1em"
|
width="1em"
|
||||||
xmlns="http://www.w3.org/2000/svg"
|
xmlns="http://www.w3.org/2000/svg"
|
||||||
>
|
|
||||||
<g
|
|
||||||
opacity="0.8"
|
|
||||||
>
|
>
|
||||||
<path
|
<path
|
||||||
clip-rule="evenodd"
|
d="M20 22H6.5A3.5 3.5 0 013 18.5V5a3 3 0 013-3h14a1 1 0 011 1v18a1 1 0 01-1 1zm-1-2v-3H6.5a1.5 1.5 0 100 3H19z"
|
||||||
d="M119 28a7 7 0 110 14h64a7 7 0 110 14h22a7 7 0 110 14h-19a7 7 0 100 14h6a7 7 0 110 14h-52a7.024 7.024 0 01-1.5-.161A7.024 7.024 0 01137 98H46a7 7 0 110-14H7a7 7 0 110-14h40a7 7 0 100-14H22a7 7 0 110-14h40a7 7 0 110-14h57zm90 56a7 7 0 110 14 7 7 0 010-14z"
|
fill="#8E8EA9"
|
||||||
fill="#D9D8FF"
|
|
||||||
fill-rule="evenodd"
|
|
||||||
/>
|
/>
|
||||||
<path
|
|
||||||
clip-rule="evenodd"
|
|
||||||
d="M69.278 103.123l-4.07.572a4 4 0 01-4.517-3.404L49.557 21.069a4 4 0 013.404-4.518l78.231-10.994a4 4 0 014.518 3.404l.957 6.808"
|
|
||||||
fill="#fff"
|
|
||||||
fill-rule="evenodd"
|
|
||||||
/>
|
|
||||||
<path
|
|
||||||
clip-rule="evenodd"
|
|
||||||
d="M71.805 98.712l-3.696.526a3.618 3.618 0 01-4.096-3.085l-9.996-71.925a3.646 3.646 0 013.097-4.108l71.038-10.096a3.619 3.619 0 014.097 3.085l.859 6.18 9.205 66.599c.306 2.212-1.22 4.257-3.408 4.566a4.192 4.192 0 01-.07.01l-67.03 8.248z"
|
|
||||||
fill="#F0F0FF"
|
|
||||||
fill-rule="evenodd"
|
|
||||||
/>
|
|
||||||
<path
|
|
||||||
d="M69.278 103.123l-4.07.572a4 4 0 01-4.517-3.404L49.557 21.069a4 4 0 013.404-4.518l78.231-10.994a4 4 0 014.518 3.404l.957 6.808M137.5 20.38l.5 3.12"
|
|
||||||
stroke="#4945FF"
|
|
||||||
stroke-linecap="round"
|
|
||||||
stroke-opacity="0.83"
|
|
||||||
stroke-width="2.5"
|
|
||||||
/>
|
|
||||||
<path
|
|
||||||
clip-rule="evenodd"
|
|
||||||
d="M164.411 30.299L85.844 22.04a2.74 2.74 0 00-2.018.598 2.741 2.741 0 00-1.004 1.85l-8.363 79.561c-.079.755.155 1.471.598 2.018a2.74 2.74 0 001.85 1.004l78.567 8.258a2.739 2.739 0 002.018-.598 2.741 2.741 0 001.005-1.849l8.362-79.562a2.743 2.743 0 00-.598-2.018 2.74 2.74 0 00-1.85-1.004z"
|
|
||||||
fill="#fff"
|
|
||||||
fill-rule="evenodd"
|
|
||||||
stroke="#4945FF"
|
|
||||||
stroke-opacity="0.83"
|
|
||||||
stroke-width="2.5"
|
|
||||||
/>
|
|
||||||
<path
|
|
||||||
clip-rule="evenodd"
|
|
||||||
d="M92.99 30.585l62.655 6.585a3 3 0 012.67 3.297l-5.54 52.71a3 3 0 01-3.297 2.67L86.823 89.26a3 3 0 01-2.67-3.297l5.54-52.71a3 3 0 013.297-2.67z"
|
|
||||||
fill="#fff"
|
|
||||||
fill-rule="evenodd"
|
|
||||||
/>
|
|
||||||
<path
|
|
||||||
clip-rule="evenodd"
|
|
||||||
d="M92.74 73.878l9.798-6.608a4 4 0 015.168.594l7.173 7.723a1 1 0 001.362.096l15.34-12.43a4 4 0 015.878.936l9.98 15.438 1.434 2.392-.687 8.124a1 1 0 01-1.08.913l-.026-.003-56.963-6.329a1 1 0 01-.886-1.085l.755-8.199 2.755-1.562z"
|
|
||||||
fill="#F0F0FF"
|
|
||||||
fill-rule="evenodd"
|
|
||||||
/>
|
|
||||||
<path
|
|
||||||
clip-rule="evenodd"
|
|
||||||
d="M155.514 38.413l-62.655-6.585c-.48-.05-.936.098-1.284.38a1.744 1.744 0 00-.639 1.177l-5.54 52.71c-.05.48.099.936.38 1.284.282.348.697.589 1.178.64l62.654 6.585a1.746 1.746 0 001.924-1.558l5.54-52.71c.05-.48-.099-.936-.381-1.284a1.744 1.744 0 00-1.177-.639z"
|
|
||||||
stroke="#4945FF"
|
|
||||||
stroke-opacity="0.83"
|
|
||||||
stroke-width="2.5"
|
|
||||||
/>
|
|
||||||
<path
|
|
||||||
d="M104.405 55.916a6 6 0 101.254-11.933 6 6 0 00-1.254 11.934z"
|
|
||||||
fill="#F0F0FF"
|
|
||||||
stroke="#4945FF"
|
|
||||||
stroke-opacity="0.83"
|
|
||||||
stroke-width="2.5"
|
|
||||||
/>
|
|
||||||
<path
|
|
||||||
d="M90.729 75.425l11.809-8.155a4 4 0 015.168.594l7.173 7.723a1 1 0 001.362.096l15.34-12.43a4 4 0 015.878.936l11.064 17.557"
|
|
||||||
stroke="#4945FF"
|
|
||||||
stroke-linecap="round"
|
|
||||||
stroke-opacity="0.83"
|
|
||||||
stroke-width="2.5"
|
|
||||||
/>
|
|
||||||
</g>
|
|
||||||
</svg>
|
</svg>
|
||||||
</span>
|
</span>
|
||||||
</div>
|
</div>
|
||||||
@ -1173,12 +1098,25 @@ describe('PendingAssetStep', () => {
|
|||||||
class="c29"
|
class="c29"
|
||||||
>
|
>
|
||||||
<span
|
<span
|
||||||
class="c47"
|
class="c40"
|
||||||
>
|
>
|
||||||
mp4
|
mp4
|
||||||
</span>
|
</span>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
<div
|
||||||
|
class="c31"
|
||||||
|
>
|
||||||
|
<div
|
||||||
|
class="c32 c33 c34"
|
||||||
|
>
|
||||||
|
<span
|
||||||
|
class="c35 c36 c37"
|
||||||
|
>
|
||||||
|
Doc
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</article>
|
</article>
|
||||||
@ -1189,17 +1127,17 @@ describe('PendingAssetStep', () => {
|
|||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div
|
<div
|
||||||
class="c0 c48"
|
class="c0 c46"
|
||||||
>
|
>
|
||||||
<div
|
<div
|
||||||
class="c2"
|
class="c2"
|
||||||
>
|
>
|
||||||
<div
|
<div
|
||||||
class="c49 c50"
|
class="c47 c48"
|
||||||
>
|
>
|
||||||
<button
|
<button
|
||||||
aria-disabled="false"
|
aria-disabled="false"
|
||||||
class="c14 c51"
|
class="c14 c49"
|
||||||
type="button"
|
type="button"
|
||||||
>
|
>
|
||||||
<span
|
<span
|
||||||
@ -1208,7 +1146,7 @@ describe('PendingAssetStep', () => {
|
|||||||
</button>
|
</button>
|
||||||
</div>
|
</div>
|
||||||
<div
|
<div
|
||||||
class="c49 c50"
|
class="c47 c48"
|
||||||
>
|
>
|
||||||
<button
|
<button
|
||||||
aria-disabled="false"
|
aria-disabled="false"
|
||||||
@ -1226,7 +1164,7 @@ describe('PendingAssetStep', () => {
|
|||||||
</div>
|
</div>
|
||||||
</form>
|
</form>
|
||||||
<div
|
<div
|
||||||
class="c52"
|
class="c50"
|
||||||
>
|
>
|
||||||
<p
|
<p
|
||||||
aria-live="polite"
|
aria-live="polite"
|
||||||
|
|||||||
@ -1,8 +1,10 @@
|
|||||||
import React from 'react';
|
import React from 'react';
|
||||||
import { render as renderTL } from '@testing-library/react';
|
import { render as renderTL, fireEvent, screen, waitFor, within } from '@testing-library/react';
|
||||||
import { ThemeProvider, lightTheme } from '@strapi/parts';
|
import { ThemeProvider, lightTheme } from '@strapi/parts';
|
||||||
|
import { QueryClientProvider, QueryClient } from 'react-query';
|
||||||
import en from '../../../translations/en.json';
|
import en from '../../../translations/en.json';
|
||||||
import { UploadAssetDialog } from '../UploadAssetDialog';
|
import { UploadAssetDialog } from '../UploadAssetDialog';
|
||||||
|
import { server } from './server';
|
||||||
|
|
||||||
jest.mock('../../../utils', () => ({
|
jest.mock('../../../utils', () => ({
|
||||||
...jest.requireActual('../../../utils'),
|
...jest.requireActual('../../../utils'),
|
||||||
@ -10,17 +12,28 @@ jest.mock('../../../utils', () => ({
|
|||||||
}));
|
}));
|
||||||
|
|
||||||
jest.mock('react-intl', () => ({
|
jest.mock('react-intl', () => ({
|
||||||
useIntl: () => ({ formatMessage: jest.fn(({ id }) => en[id]) }),
|
useIntl: () => ({ formatMessage: jest.fn(({ id }) => en[id] || id) }),
|
||||||
}));
|
}));
|
||||||
|
|
||||||
const render = (props = { onSucces: () => {}, onError: () => {} }) =>
|
const queryClient = new QueryClient({
|
||||||
|
defaultOptions: {
|
||||||
|
queries: {
|
||||||
|
refetchOnWindowFocus: false,
|
||||||
|
},
|
||||||
|
},
|
||||||
|
});
|
||||||
|
|
||||||
|
const render = (props = { onSuccess: () => {}, onClose: () => {} }) =>
|
||||||
renderTL(
|
renderTL(
|
||||||
|
<QueryClientProvider client={queryClient}>
|
||||||
<ThemeProvider theme={lightTheme}>
|
<ThemeProvider theme={lightTheme}>
|
||||||
<UploadAssetDialog {...props} />
|
<UploadAssetDialog {...props} />
|
||||||
</ThemeProvider>,
|
</ThemeProvider>
|
||||||
|
</QueryClientProvider>,
|
||||||
{ container: document.body }
|
{ container: document.body }
|
||||||
);
|
);
|
||||||
|
|
||||||
|
<<<<<<< HEAD
|
||||||
describe('', () => {
|
describe('', () => {
|
||||||
it('snapshots the component', () => {
|
it('snapshots the component', () => {
|
||||||
const { container } = render();
|
const { container } = render();
|
||||||
@ -800,5 +813,171 @@ describe('', () => {
|
|||||||
</div>
|
</div>
|
||||||
</body>
|
</body>
|
||||||
`);
|
`);
|
||||||
|
=======
|
||||||
|
describe('UploadAssetDialog', () => {
|
||||||
|
beforeAll(() => server.listen());
|
||||||
|
afterEach(() => server.resetHandlers());
|
||||||
|
afterAll(() => server.close());
|
||||||
|
|
||||||
|
describe('from computer', () => {
|
||||||
|
it('snapshots the component', () => {
|
||||||
|
const { container } = render();
|
||||||
|
|
||||||
|
expect(container).toMatchSnapshot();
|
||||||
|
});
|
||||||
|
|
||||||
|
it('closes the dialog when clicking on cancel on the add asset step', () => {
|
||||||
|
const onCloseSpy = jest.fn();
|
||||||
|
render({ onClose: onCloseSpy, onSuccess: () => {} });
|
||||||
|
|
||||||
|
fireEvent.click(screen.getByText('app.components.Button.cancel'));
|
||||||
|
|
||||||
|
expect(onCloseSpy).toBeCalled();
|
||||||
|
});
|
||||||
|
|
||||||
|
it('closes the dialog when clicking on cancel on the pending asset step', () => {
|
||||||
|
const file = new File(['Some stuff'], 'test.png', { type: 'image/png' });
|
||||||
|
const onCloseSpy = jest.fn();
|
||||||
|
|
||||||
|
const { container } = render({ onClose: onCloseSpy, onSuccess: () => {} });
|
||||||
|
|
||||||
|
const fileList = [file];
|
||||||
|
fileList.item = i => fileList[i];
|
||||||
|
|
||||||
|
fireEvent.change(container.querySelector('[type="file"]'), { target: { files: fileList } });
|
||||||
|
fireEvent.click(screen.getByText('app.components.Button.cancel'));
|
||||||
|
|
||||||
|
expect(onCloseSpy).toBeCalled();
|
||||||
|
});
|
||||||
|
|
||||||
|
[
|
||||||
|
['png', 'image/png', 'Image'],
|
||||||
|
['mp4', 'video/mp4', 'Video'],
|
||||||
|
['pdf', 'application/pdf', 'Doc'],
|
||||||
|
['unknown', 'unknown', 'Doc'],
|
||||||
|
].forEach(([ext, mime, assetType]) => {
|
||||||
|
it(`shows a valid ${mime} file`, () => {
|
||||||
|
const onCloseSpy = jest.fn();
|
||||||
|
|
||||||
|
const file = new File(['Some stuff'], `test.${ext}`, { type: mime });
|
||||||
|
|
||||||
|
const fileList = [file];
|
||||||
|
fileList.item = i => fileList[i];
|
||||||
|
|
||||||
|
const { container } = render({ onClose: onCloseSpy, onSuccess: () => {} });
|
||||||
|
|
||||||
|
fireEvent.change(container.querySelector('[type="file"]'), {
|
||||||
|
target: { files: fileList },
|
||||||
|
});
|
||||||
|
|
||||||
|
expect(screen.getByText('Upload new asset')).toBeInTheDocument();
|
||||||
|
expect(screen.getByText('{number} assets selected')).toBeInTheDocument();
|
||||||
|
expect(
|
||||||
|
screen.getByText('Manage the assets before adding them to the Media Library')
|
||||||
|
).toBeInTheDocument();
|
||||||
|
expect(screen.getByText(`test.${ext}`)).toBeInTheDocument();
|
||||||
|
expect(screen.getByText(ext)).toBeInTheDocument();
|
||||||
|
expect(screen.getByText(assetType)).toBeInTheDocument();
|
||||||
|
});
|
||||||
|
});
|
||||||
|
});
|
||||||
|
|
||||||
|
describe('from url', () => {
|
||||||
|
it('snapshots the component', () => {
|
||||||
|
const { container } = render();
|
||||||
|
|
||||||
|
fireEvent.click(screen.getByText('From url'));
|
||||||
|
|
||||||
|
expect(container).toMatchSnapshot();
|
||||||
|
});
|
||||||
|
|
||||||
|
it('shows an error message when the asset does not exist', async () => {
|
||||||
|
render();
|
||||||
|
fireEvent.click(screen.getByText('From url'));
|
||||||
|
|
||||||
|
const urls = [
|
||||||
|
'http://localhost:5000/an-image.png',
|
||||||
|
'http://localhost:5000/a-pdf.pdf',
|
||||||
|
'http://localhost:5000/a-video.mp4',
|
||||||
|
'http://localhost:5000/not-working-like-cors.lutin',
|
||||||
|
'http://localhost:1234/some-where-not-existing.jpg',
|
||||||
|
].join('\n');
|
||||||
|
|
||||||
|
fireEvent.change(screen.getByLabelText('URL'), { target: { value: urls } });
|
||||||
|
fireEvent.click(screen.getByText('Next'));
|
||||||
|
|
||||||
|
await waitFor(() => expect(screen.getByText('Network Error')).toBeInTheDocument());
|
||||||
|
});
|
||||||
|
|
||||||
|
it('snapshots the component with 4 URLs: 3 valid and one in failure', async () => {
|
||||||
|
render();
|
||||||
|
fireEvent.click(screen.getByText('From url'));
|
||||||
|
|
||||||
|
const urls = [
|
||||||
|
'http://localhost:5000/an-image.png',
|
||||||
|
'http://localhost:5000/a-pdf.pdf',
|
||||||
|
'http://localhost:5000/a-video.mp4',
|
||||||
|
'http://localhost:5000/not-working-like-cors.lutin',
|
||||||
|
].join('\n');
|
||||||
|
|
||||||
|
fireEvent.change(screen.getByLabelText('URL'), { target: { value: urls } });
|
||||||
|
fireEvent.click(screen.getByText('Next'));
|
||||||
|
|
||||||
|
const assets = [
|
||||||
|
{
|
||||||
|
name: 'http://localhost:5000/an-image.png',
|
||||||
|
ext: 'png',
|
||||||
|
mime: 'image/png',
|
||||||
|
source: 'url',
|
||||||
|
type: 'image',
|
||||||
|
url: 'http://localhost:5000/an-image.png',
|
||||||
|
rawFile: new File([''], 'image/png'),
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: 'http://localhost:5000/a-pdf.pdf',
|
||||||
|
ext: 'pdf',
|
||||||
|
mime: 'application/pdf',
|
||||||
|
source: 'url',
|
||||||
|
type: 'doc',
|
||||||
|
url: 'http://localhost:5000/a-pdf.pdf',
|
||||||
|
rawFile: new File([''], 'application/pdf'),
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: 'http://localhost:5000/a-video.mp4',
|
||||||
|
ext: 'mp4',
|
||||||
|
mime: 'video/mp4',
|
||||||
|
source: 'url',
|
||||||
|
type: 'video',
|
||||||
|
url: 'http://localhost:5000/a-video.mp4',
|
||||||
|
rawFile: new File([''], 'video/mp4'),
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: 'http://localhost:5000/not-working-like-cors.lutin',
|
||||||
|
ext: 'lutin',
|
||||||
|
mime: 'application/json',
|
||||||
|
source: 'url',
|
||||||
|
type: 'doc',
|
||||||
|
url: 'http://localhost:5000/not-working-like-cors.lutin',
|
||||||
|
rawFile: new File([''], 'something/weird'),
|
||||||
|
},
|
||||||
|
];
|
||||||
|
|
||||||
|
await waitFor(() => expect(screen.getByText('{number} assets selected')).toBeInTheDocument());
|
||||||
|
expect(screen.getByText('Upload new asset')).toBeInTheDocument();
|
||||||
|
expect(
|
||||||
|
screen.getByText('Manage the assets before adding them to the Media Library')
|
||||||
|
).toBeInTheDocument();
|
||||||
|
|
||||||
|
assets.forEach(asset => {
|
||||||
|
const dialog = within(screen.getByRole('dialog'));
|
||||||
|
const card = within(dialog.getAllByLabelText(asset.name)[0]);
|
||||||
|
|
||||||
|
expect(card.getByText(asset.ext)).toBeInTheDocument();
|
||||||
|
expect(
|
||||||
|
card.getByText(asset.type.charAt(0).toUpperCase() + asset.type.slice(1))
|
||||||
|
).toBeInTheDocument();
|
||||||
|
});
|
||||||
|
});
|
||||||
|
>>>>>>> 86fa7a6ff (Testing upload asset dialog (#11285))
|
||||||
});
|
});
|
||||||
});
|
});
|
||||||
|
|||||||
File diff suppressed because it is too large
Load Diff
@ -2,7 +2,6 @@ export const AssetType = {
|
|||||||
Video: 'video',
|
Video: 'video',
|
||||||
Image: 'image',
|
Image: 'image',
|
||||||
Document: 'doc',
|
Document: 'doc',
|
||||||
Unknown: 'unknown', // useful when CORS prevents from getting the mime type of an asset
|
|
||||||
};
|
};
|
||||||
|
|
||||||
export const AssetSource = {
|
export const AssetSource = {
|
||||||
|
|||||||
@ -24,3 +24,5 @@ global.strapi = {
|
|||||||
};
|
};
|
||||||
|
|
||||||
global.prompt = jest.fn();
|
global.prompt = jest.fn();
|
||||||
|
|
||||||
|
global.URL.createObjectURL = file => `http://localhost:4000/assets/${file.name}`;
|
||||||
|
|||||||
Loading…
x
Reference in New Issue
Block a user