yujunjun/strapi
1
0
Fork 0
mirror of https://github.com/strapi/strapi.git synced 2025-12-28 07:33:17 +00:00
Code Issues Packages Projects Releases Wiki Activity

fix tests

Browse Source
This commit is contained in:
mfrachet 2021-09-22 16:27:59 +02:00
parent 955a98eeb0
commit b519373202
2 changed files with 356 additions and 8 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

29
packages/core/upload/admin/src/components/UploadAssetDialog/PendingAssetStep/PendingAssetStep.js
View File

@ -1,4 +1,4 @@
import React, { useState } from 'react';
import React, { useState, useRef } from 'react';
import PropTypes from 'prop-types';
import { ModalHeader, ModalBody, ModalFooter } from '@strapi/parts/ModalLayout';
import { ButtonText, Text } from '@strapi/parts/Text';
@ -16,6 +16,12 @@ import { UploadingAssetCard } from '../../AssetCard/UploadingAssetCard';
import { getTrad } from '../../../utils';
import { AssetType, AssetSource } from '../../../constants';
const Status = {
Idle: 'IDLE',
Uploading: 'UPLOADING',
Intermediate: 'INTERMEDIATE',
};
export const PendingAssetStep = ({
onClose,
assets,
@ -23,16 +29,29 @@ export const PendingAssetStep = ({
onCancelUpload,
onUploadSucceed,
}) => {
const assetCountRef = useRef(0);
const { formatMessage } = useIntl();
const [isUploading, setIsUploading] = useState(false);
const [uploadStatus, setUploadStatus] = useState(Status.Idle);
const handleSubmit = async e => {
e.preventDefault();
setIsUploading(true);
setUploadStatus(Status.Uploading);
};
const handleStatusChange = (status, file) => {
if (status === 'success' || status === 'error') {
assetCountRef.current++;
// There's no "terminated" status. When all the files have called their
// onUploadSucceed callback, the parent component filters the asset list
// and closes the modal when the asset list is empty
if (assetCountRef.current === assets.length) {
assetCountRef.current = 0;
setUploadStatus(Status.Intermediate);
}
}
if (status === 'success') {
onUploadSucceed(file);
}
@ -81,7 +100,7 @@ export const PendingAssetStep = ({
{assets.map(asset => {
const assetKey = asset.url;
if (isUploading) {
if (uploadStatus === Status.Uploading || uploadStatus === Status.Intermediate) {
return (
<GridItem col={4} key={assetKey}>
<UploadingAssetCard
@ -160,7 +179,7 @@ export const PendingAssetStep = ({
</Button>
}
endActions={
<Button type="submit" loading={isUploading}>
<Button type="submit" loading={uploadStatus === Status.Uploading}>
{formatMessage(
{
id: getTrad('modal.upload-list.footer.button.singular'),

335
packages/core/upload/admin/src/pages/App/components/tests/ListView.test.js
View File

@ -1,6 +1,7 @@
import React from 'react';
import { ThemeProvider, lightTheme } from '@strapi/parts';
import { render as renderTL } from '@testing-library/react';
import { MemoryRouter } from 'react-router';
import { ListView } from '../ListView';
import en from '../../../../translations/en.json';
@ -121,13 +122,85 @@ const data = [
describe('MediaLibrary / ListView', () => {
it('snapshots the listview', () => {
const { container } = renderTL(
<ThemeProvider theme={lightTheme}>
<ListView assets={data} />
</ThemeProvider>
<MemoryRouter>
<ThemeProvider theme={lightTheme}>
<ListView assets={data} />
</ThemeProvider>
</MemoryRouter>
);
expect(container).toMatchInlineSnapshot(`
.c36 {
font-weight: 400;
font-size: 0.875rem;
line-height: 1.43;
color: #32324d;
}
.c27 {
padding-top: 24px;
}
.c35 {
padding-right: 16px;
padding-left: 16px;
}
.c37 {
padding-left: 12px;
}
.c28 {
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: justify;
-webkit-justify-content: space-between;
-ms-flex-pack: justify;
justify-content: space-between;
-webkit-align-items: flex-end;
-webkit-box-align: flex-end;
-ms-flex-align: flex-end;
align-items: flex-end;
}
.c29 {
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;
}
.c33 {
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: justify;
-webkit-justify-content: space-between;
-ms-flex-pack: justify;
justify-content: space-between;
-webkit-align-items: center;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
}
.c43 {
border: 0;
-webkit-clip: rect(0 0 0 0);
clip: rect(0 0 0 0);
@ -139,6 +212,128 @@ describe('MediaLibrary / ListView', () => {
width: 1px;
}
.c30 {
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-flex-direction: column;
-ms-flex-direction: column;
flex-direction: column;
}
.c30 > * {
margin-top: 0;
margin-bottom: 0;
}
.c30 > * + * {
margin-top: 0px;
}
.c31 {
position: relative;
border: 1px solid #dcdce4;
padding-right: 12px;
border-radius: 4px;
background: #ffffff;
overflow: hidden;
}
.c31:focus-within {
border: 1px solid #4945ff;
}
.c38 {
background: transparent;
border: none;
position: relative;
z-index: 1;
}
.c38 svg {
height: 0.6875rem;
width: 0.6875rem;
}
.c38 svg path {
fill: #666687;
}
.c39 {
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
background: none;
border: none;
}
.c39 svg {
width: 0.375rem;
}
.c40 > * + * {
margin-left: 4px;
}
.c41 {
padding: 12px;
border-radius: 4px;
-webkit-text-decoration: none;
text-decoration: none;
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
}
.c42 {
font-size: 0.7rem;
pointer-events: none;
}
.c42 svg path {
fill: #c0c0cf;
}
.c42:focus svg path,
.c42:hover svg path {
fill: #c0c0cf;
}
.c44 {
font-size: 0.7rem;
}
.c44 svg path {
fill: #666687;
}
.c44:focus svg path,
.c44:hover svg path {
fill: #4a4a6a;
}
.c32 {
position: absolute;
left: 0;
right: 0;
bottom: 0;
top: 0;
width: 100%;
background: transparent;
border: none;
}
.c32:focus {
outline: none;
}
.c34 {
min-height: 2.5rem;
}
.c0 {
display: grid;
grid-template-columns: repeat(auto-fit,minmax(250px,1fr));
@ -556,6 +751,140 @@ describe('MediaLibrary / ListView', () => {
</div>
<div
class="c27"
>
<div
class="c28"
>
<div
class="c29"
>
<div>
<div
class="c30"
>
<div
class="c31"
>
<button
aria-disabled="false"
aria-expanded="false"
aria-haspopup="listbox"
aria-labelledby="select-1-label select-1-content"
class="c32"
id="select-1"
type="button"
/>
<div
class="c33 c34"
>
<div
class="c29"
>
<div
class="c35"
>
<span
class="c36"
id="select-1-content"
>
10
</span>
</div>
</div>
<div
class="c29"
>
<button
aria-hidden="true"
class="c37 c38 c39"
tabindex="-1"
type="button"
>
<svg
fill="none"
height="1em"
viewBox="0 0 14 8"
width="1em"
xmlns="http://www.w3.org/2000/svg"
>
<path
clip-rule="evenodd"
d="M14 .889a.86.86 0 01-.26.625L7.615 7.736A.834.834 0 017 8a.834.834 0 01-.615-.264L.26 1.514A.861.861 0 010 .889c0-.24.087-.45.26-.625A.834.834 0 01.875 0h12.25c.237 0 .442.088.615.264a.86.86 0 01.26.625z"
fill="#32324D"
fill-rule="evenodd"
/>
</svg>
</button>
</div>
</div>
</div>
</div>
</div>
</div>
<nav
aria-label="pagination"
class=""
>
<ul
class="c29 c40"
>
<li>
<a
aria-current="page"
aria-disabled="true"
class="c41 c42 active"
href="/"
tabindex="-1"
>
<div
class="c43"
/>
<svg
aria-hidden="true"
fill="none"
height="1em"
viewBox="0 0 10 16"
width="1em"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M9.88 14.12L3.773 8 9.88 1.88 8 0 0 8l8 8 1.88-1.88z"
fill="#32324D"
/>
</svg>
</a>
</li>
<li>
<a
aria-current="page"
aria-disabled="false"
class="c41 c44 active"
href="/?page=1"
>
<div
class="c43"
/>
<svg
aria-hidden="true"
fill="none"
height="1em"
viewBox="0 0 10 16"
width="1em"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M0 1.88L6.107 8 0 14.12 1.88 16l8-8-8-8L0 1.88z"
fill="#32324D"
/>
</svg>
</a>
</li>
</ul>
</nav>
</div>
</div>
<div
class="c43"
>
<p
aria-live="polite"