test: replacing shallow snapshots with RTL (#2266)
This commit is contained in:
jacobo-dominguez-wgu
committed by
GitHub
GitHub
parent
f3332a214f
commit
eaba380417
@@ -1,36 +1,12 @@
|
||||
import React from 'react';
|
||||
import { IntlProvider } from '@edx/frontend-platform/i18n';
|
||||
import TestRenderer from 'react-test-renderer';
|
||||
import { AppContext } from '@edx/frontend-platform/react';
|
||||
import { Context as ResponsiveContext } from 'react-responsive';
|
||||
import { render, initializeMocks, screen } from '@src/testUtils';
|
||||
|
||||
import Placeholder from './Placeholder';
|
||||
|
||||
describe('<Placeholder />', () => {
|
||||
beforeEach(() => initializeMocks());
|
||||
it('renders correctly', () => {
|
||||
const component = (
|
||||
<ResponsiveContext.Provider value={{ width: 1280 }}>
|
||||
<IntlProvider locale="en" messages={{}}>
|
||||
<AppContext.Provider
|
||||
value={{
|
||||
authenticatedUser: null,
|
||||
config: {
|
||||
LMS_BASE_URL: process.env.LMS_BASE_URL,
|
||||
SITE_NAME: process.env.SITE_NAME,
|
||||
LOGIN_URL: process.env.LOGIN_URL,
|
||||
LOGOUT_URL: process.env.LOGOUT_URL,
|
||||
LOGO_URL: process.env.LOGO_URL,
|
||||
},
|
||||
}}
|
||||
>
|
||||
<Placeholder />
|
||||
</AppContext.Provider>
|
||||
</IntlProvider>
|
||||
</ResponsiveContext.Provider>
|
||||
);
|
||||
|
||||
const wrapper = TestRenderer.create(component);
|
||||
|
||||
expect(wrapper.toJSON()).toMatchSnapshot();
|
||||
render(<Placeholder />);
|
||||
expect(screen.getByText(/Under Construction/)).toBeInTheDocument();
|
||||
});
|
||||
});
|
||||
|
||||
@@ -1,13 +0,0 @@
|
||||
// Jest Snapshot v1, https://goo.gl/fbAQLP
|
||||
|
||||
exports[`<Placeholder /> renders correctly 1`] = `
|
||||
<div
|
||||
className="Placeholder"
|
||||
>
|
||||
<h1>
|
||||
Under Construction
|
||||
<br />
|
||||
Coming Soon
|
||||
</h1>
|
||||
</div>
|
||||
`;
|
||||
@@ -1,5 +1,7 @@
|
||||
import React from 'react';
|
||||
import { render, fireEvent, act } from '@testing-library/react';
|
||||
import {
|
||||
render, fireEvent, act, screen,
|
||||
} from '@testing-library/react';
|
||||
import { IntlProvider } from '@edx/frontend-platform/i18n';
|
||||
import { initializeMockApp } from '@edx/frontend-platform';
|
||||
import { configureStore } from '@reduxjs/toolkit';
|
||||
@@ -53,7 +55,10 @@ describe('VideoUploader', () => {
|
||||
});
|
||||
|
||||
it('renders as expected with default behavior', async () => {
|
||||
expect(await renderComponent(store, setLoadingMock)).toMatchSnapshot();
|
||||
await renderComponent(store);
|
||||
expect(screen.getByPlaceholderText('Paste your video ID or URL')).toBeInTheDocument();
|
||||
expect(screen.getByText('Drag and drop video here or click to upload')).toBeInTheDocument();
|
||||
expect(screen.getByRole('button', { name: 'Submit' })).toBeInTheDocument();
|
||||
});
|
||||
|
||||
it('calls onURLUpload when URL submit button is clicked', async () => {
|
||||
|
||||
@@ -1,384 +0,0 @@
|
||||
// Jest Snapshot v1, https://goo.gl/fbAQLP
|
||||
|
||||
exports[`VideoUploader renders as expected with default behavior 1`] = `
|
||||
{
|
||||
"asFragment": [Function],
|
||||
"baseElement": <body>
|
||||
<div>
|
||||
<div
|
||||
data-testid="redux-provider"
|
||||
>
|
||||
<div
|
||||
data-testid="browser-router"
|
||||
>
|
||||
<div
|
||||
class="d-flex flex-column"
|
||||
>
|
||||
<div
|
||||
class="d-flex justify-content-end flex-row"
|
||||
>
|
||||
<button
|
||||
aria-label="Close"
|
||||
class="btn-icon btn-icon-primary btn-icon-md position-absolute mr-2 mt-2"
|
||||
type="button"
|
||||
>
|
||||
<span
|
||||
class="btn-icon__icon-container"
|
||||
>
|
||||
<span
|
||||
class="pgn__icon btn-icon__icon"
|
||||
>
|
||||
<svg
|
||||
aria-hidden="true"
|
||||
fill="none"
|
||||
focusable="false"
|
||||
height="24"
|
||||
role="img"
|
||||
viewBox="0 0 24 24"
|
||||
width="24"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
>
|
||||
<path
|
||||
d="M19 6.41 17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12 19 6.41Z"
|
||||
fill="currentColor"
|
||||
/>
|
||||
</svg>
|
||||
</span>
|
||||
</span>
|
||||
</button>
|
||||
</div>
|
||||
<div
|
||||
class="pgn__dropzone"
|
||||
data-testid="dropzone-container"
|
||||
role="presentation"
|
||||
tabindex="0"
|
||||
>
|
||||
<input
|
||||
accept="video/*,.mp4,.mov"
|
||||
style="border: 0px; clip: rect(0px, 0px, 0px, 0px); clip-path: inset(50%); height: 1px; margin: 0px -1px -1px 0px; overflow: hidden; padding: 0px; position: absolute; width: 1px; white-space: nowrap;"
|
||||
tabindex="-1"
|
||||
type="file"
|
||||
/>
|
||||
<div
|
||||
class="d-flex flex-column justify-content-around align-items-center w-100"
|
||||
>
|
||||
<div
|
||||
class="d-flex flex-column"
|
||||
>
|
||||
<div
|
||||
class="justify-content-center align-self-center rounded-circle bg-light-300 p-2.5"
|
||||
>
|
||||
<span
|
||||
class="pgn__icon text-muted"
|
||||
style="height: 2rem; width: 2rem;"
|
||||
>
|
||||
<svg
|
||||
aria-hidden="true"
|
||||
fill="none"
|
||||
focusable="false"
|
||||
height="24"
|
||||
role="img"
|
||||
viewBox="0 0 24 24"
|
||||
width="24"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
>
|
||||
<path
|
||||
d="M5 10h4v6h6v-6h4l-7-7-7 7zm0 8v2h14v-2H5z"
|
||||
fill="currentColor"
|
||||
/>
|
||||
</svg>
|
||||
</span>
|
||||
</div>
|
||||
<div
|
||||
class="d-flex align-self-center justify-content-center flex-wrap flex-column pt-3"
|
||||
>
|
||||
<span>
|
||||
Drag and drop video here or click to upload
|
||||
</span>
|
||||
<span
|
||||
class="x-small align-self-center pt-2"
|
||||
>
|
||||
Upload MP4 or MOV files (5 GB max)
|
||||
</span>
|
||||
</div>
|
||||
<div
|
||||
class="small align-self-center justify-content-center mx-2 text-dark font-weight-normal pt-3"
|
||||
>
|
||||
OR
|
||||
</div>
|
||||
<div
|
||||
class="zindex-9 video-id-prompt py-3"
|
||||
>
|
||||
<div
|
||||
class="input-group"
|
||||
>
|
||||
<div
|
||||
class="pgn__form-control-decorator-group has-appended-node has-trailing-element m-0"
|
||||
>
|
||||
<input
|
||||
aria-describedby="basic-addon2"
|
||||
aria-label="Paste your video ID or URL"
|
||||
class="form-control"
|
||||
placeholder="Paste your video ID or URL"
|
||||
value=""
|
||||
/>
|
||||
<div
|
||||
class="pgn__form-control-decorator pgn__form-control-decorator-trailing"
|
||||
>
|
||||
<button
|
||||
aria-label="Submit"
|
||||
class="btn-icon btn-icon-primary btn-icon-inline url-submit-button"
|
||||
type="button"
|
||||
>
|
||||
<span
|
||||
class="btn-icon__icon-container"
|
||||
>
|
||||
<span
|
||||
class="pgn__icon btn-icon__icon"
|
||||
>
|
||||
<svg
|
||||
aria-hidden="true"
|
||||
fill="none"
|
||||
focusable="false"
|
||||
height="24"
|
||||
role="img"
|
||||
viewBox="0 0 24 24"
|
||||
width="24"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
>
|
||||
<path
|
||||
d="m12 4-1.41 1.41L16.17 11H4v2h12.17l-5.58 5.59L12 20l8-8-8-8Z"
|
||||
fill="currentColor"
|
||||
/>
|
||||
</svg>
|
||||
</span>
|
||||
</span>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
,
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</body>,
|
||||
"container": <div>
|
||||
<div
|
||||
data-testid="redux-provider"
|
||||
>
|
||||
<div
|
||||
data-testid="browser-router"
|
||||
>
|
||||
<div
|
||||
class="d-flex flex-column"
|
||||
>
|
||||
<div
|
||||
class="d-flex justify-content-end flex-row"
|
||||
>
|
||||
<button
|
||||
aria-label="Close"
|
||||
class="btn-icon btn-icon-primary btn-icon-md position-absolute mr-2 mt-2"
|
||||
type="button"
|
||||
>
|
||||
<span
|
||||
class="btn-icon__icon-container"
|
||||
>
|
||||
<span
|
||||
class="pgn__icon btn-icon__icon"
|
||||
>
|
||||
<svg
|
||||
aria-hidden="true"
|
||||
fill="none"
|
||||
focusable="false"
|
||||
height="24"
|
||||
role="img"
|
||||
viewBox="0 0 24 24"
|
||||
width="24"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
>
|
||||
<path
|
||||
d="M19 6.41 17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12 19 6.41Z"
|
||||
fill="currentColor"
|
||||
/>
|
||||
</svg>
|
||||
</span>
|
||||
</span>
|
||||
</button>
|
||||
</div>
|
||||
<div
|
||||
class="pgn__dropzone"
|
||||
data-testid="dropzone-container"
|
||||
role="presentation"
|
||||
tabindex="0"
|
||||
>
|
||||
<input
|
||||
accept="video/*,.mp4,.mov"
|
||||
style="border: 0px; clip: rect(0px, 0px, 0px, 0px); clip-path: inset(50%); height: 1px; margin: 0px -1px -1px 0px; overflow: hidden; padding: 0px; position: absolute; width: 1px; white-space: nowrap;"
|
||||
tabindex="-1"
|
||||
type="file"
|
||||
/>
|
||||
<div
|
||||
class="d-flex flex-column justify-content-around align-items-center w-100"
|
||||
>
|
||||
<div
|
||||
class="d-flex flex-column"
|
||||
>
|
||||
<div
|
||||
class="justify-content-center align-self-center rounded-circle bg-light-300 p-2.5"
|
||||
>
|
||||
<span
|
||||
class="pgn__icon text-muted"
|
||||
style="height: 2rem; width: 2rem;"
|
||||
>
|
||||
<svg
|
||||
aria-hidden="true"
|
||||
fill="none"
|
||||
focusable="false"
|
||||
height="24"
|
||||
role="img"
|
||||
viewBox="0 0 24 24"
|
||||
width="24"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
>
|
||||
<path
|
||||
d="M5 10h4v6h6v-6h4l-7-7-7 7zm0 8v2h14v-2H5z"
|
||||
fill="currentColor"
|
||||
/>
|
||||
</svg>
|
||||
</span>
|
||||
</div>
|
||||
<div
|
||||
class="d-flex align-self-center justify-content-center flex-wrap flex-column pt-3"
|
||||
>
|
||||
<span>
|
||||
Drag and drop video here or click to upload
|
||||
</span>
|
||||
<span
|
||||
class="x-small align-self-center pt-2"
|
||||
>
|
||||
Upload MP4 or MOV files (5 GB max)
|
||||
</span>
|
||||
</div>
|
||||
<div
|
||||
class="small align-self-center justify-content-center mx-2 text-dark font-weight-normal pt-3"
|
||||
>
|
||||
OR
|
||||
</div>
|
||||
<div
|
||||
class="zindex-9 video-id-prompt py-3"
|
||||
>
|
||||
<div
|
||||
class="input-group"
|
||||
>
|
||||
<div
|
||||
class="pgn__form-control-decorator-group has-appended-node has-trailing-element m-0"
|
||||
>
|
||||
<input
|
||||
aria-describedby="basic-addon2"
|
||||
aria-label="Paste your video ID or URL"
|
||||
class="form-control"
|
||||
placeholder="Paste your video ID or URL"
|
||||
value=""
|
||||
/>
|
||||
<div
|
||||
class="pgn__form-control-decorator pgn__form-control-decorator-trailing"
|
||||
>
|
||||
<button
|
||||
aria-label="Submit"
|
||||
class="btn-icon btn-icon-primary btn-icon-inline url-submit-button"
|
||||
type="button"
|
||||
>
|
||||
<span
|
||||
class="btn-icon__icon-container"
|
||||
>
|
||||
<span
|
||||
class="pgn__icon btn-icon__icon"
|
||||
>
|
||||
<svg
|
||||
aria-hidden="true"
|
||||
fill="none"
|
||||
focusable="false"
|
||||
height="24"
|
||||
role="img"
|
||||
viewBox="0 0 24 24"
|
||||
width="24"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
>
|
||||
<path
|
||||
d="m12 4-1.41 1.41L16.17 11H4v2h12.17l-5.58 5.59L12 20l8-8-8-8Z"
|
||||
fill="currentColor"
|
||||
/>
|
||||
</svg>
|
||||
</span>
|
||||
</span>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
,
|
||||
</div>
|
||||
</div>
|
||||
</div>,
|
||||
"debug": [Function],
|
||||
"findAllByAltText": [Function],
|
||||
"findAllByDisplayValue": [Function],
|
||||
"findAllByLabelText": [Function],
|
||||
"findAllByPlaceholderText": [Function],
|
||||
"findAllByRole": [Function],
|
||||
"findAllByTestId": [Function],
|
||||
"findAllByText": [Function],
|
||||
"findAllByTitle": [Function],
|
||||
"findByAltText": [Function],
|
||||
"findByDisplayValue": [Function],
|
||||
"findByLabelText": [Function],
|
||||
"findByPlaceholderText": [Function],
|
||||
"findByRole": [Function],
|
||||
"findByTestId": [Function],
|
||||
"findByText": [Function],
|
||||
"findByTitle": [Function],
|
||||
"getAllByAltText": [Function],
|
||||
"getAllByDisplayValue": [Function],
|
||||
"getAllByLabelText": [Function],
|
||||
"getAllByPlaceholderText": [Function],
|
||||
"getAllByRole": [Function],
|
||||
"getAllByTestId": [Function],
|
||||
"getAllByText": [Function],
|
||||
"getAllByTitle": [Function],
|
||||
"getByAltText": [Function],
|
||||
"getByDisplayValue": [Function],
|
||||
"getByLabelText": [Function],
|
||||
"getByPlaceholderText": [Function],
|
||||
"getByRole": [Function],
|
||||
"getByTestId": [Function],
|
||||
"getByText": [Function],
|
||||
"getByTitle": [Function],
|
||||
"queryAllByAltText": [Function],
|
||||
"queryAllByDisplayValue": [Function],
|
||||
"queryAllByLabelText": [Function],
|
||||
"queryAllByPlaceholderText": [Function],
|
||||
"queryAllByRole": [Function],
|
||||
"queryAllByTestId": [Function],
|
||||
"queryAllByText": [Function],
|
||||
"queryAllByTitle": [Function],
|
||||
"queryByAltText": [Function],
|
||||
"queryByDisplayValue": [Function],
|
||||
"queryByLabelText": [Function],
|
||||
"queryByPlaceholderText": [Function],
|
||||
"queryByRole": [Function],
|
||||
"queryByTestId": [Function],
|
||||
"queryByText": [Function],
|
||||
"queryByTitle": [Function],
|
||||
"rerender": [Function],
|
||||
"unmount": [Function],
|
||||
}
|
||||
`;
|
||||
@@ -1,392 +0,0 @@
|
||||
// Jest Snapshot v1, https://goo.gl/fbAQLP
|
||||
|
||||
exports[`VideoUploadEditor renders as expected with default behavior 1`] = `
|
||||
{
|
||||
"asFragment": [Function],
|
||||
"baseElement": <body>
|
||||
<div>
|
||||
<div
|
||||
data-testid="redux-provider"
|
||||
>
|
||||
<div
|
||||
data-testid="browser-router"
|
||||
>
|
||||
<div
|
||||
class="d-flex marked-area flex-column p-3"
|
||||
>
|
||||
<div
|
||||
class="d-flex flex-column"
|
||||
>
|
||||
<div
|
||||
class="d-flex justify-content-end flex-row"
|
||||
>
|
||||
<button
|
||||
aria-label="Close"
|
||||
class="btn-icon btn-icon-primary btn-icon-md position-absolute mr-2 mt-2"
|
||||
type="button"
|
||||
>
|
||||
<span
|
||||
class="btn-icon__icon-container"
|
||||
>
|
||||
<span
|
||||
class="pgn__icon btn-icon__icon"
|
||||
>
|
||||
<svg
|
||||
aria-hidden="true"
|
||||
fill="none"
|
||||
focusable="false"
|
||||
height="24"
|
||||
role="img"
|
||||
viewBox="0 0 24 24"
|
||||
width="24"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
>
|
||||
<path
|
||||
d="M19 6.41 17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12 19 6.41Z"
|
||||
fill="currentColor"
|
||||
/>
|
||||
</svg>
|
||||
</span>
|
||||
</span>
|
||||
</button>
|
||||
</div>
|
||||
<div
|
||||
class="pgn__dropzone"
|
||||
data-testid="dropzone-container"
|
||||
role="presentation"
|
||||
tabindex="0"
|
||||
>
|
||||
<input
|
||||
accept="video/*,.mp4,.mov"
|
||||
style="border: 0px; clip: rect(0px, 0px, 0px, 0px); clip-path: inset(50%); height: 1px; margin: 0px -1px -1px 0px; overflow: hidden; padding: 0px; position: absolute; width: 1px; white-space: nowrap;"
|
||||
tabindex="-1"
|
||||
type="file"
|
||||
/>
|
||||
<div
|
||||
class="d-flex flex-column justify-content-around align-items-center w-100"
|
||||
>
|
||||
<div
|
||||
class="d-flex flex-column"
|
||||
>
|
||||
<div
|
||||
class="justify-content-center align-self-center rounded-circle bg-light-300 p-2.5"
|
||||
>
|
||||
<span
|
||||
class="pgn__icon text-muted"
|
||||
style="height: 2rem; width: 2rem;"
|
||||
>
|
||||
<svg
|
||||
aria-hidden="true"
|
||||
fill="none"
|
||||
focusable="false"
|
||||
height="24"
|
||||
role="img"
|
||||
viewBox="0 0 24 24"
|
||||
width="24"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
>
|
||||
<path
|
||||
d="M5 10h4v6h6v-6h4l-7-7-7 7zm0 8v2h14v-2H5z"
|
||||
fill="currentColor"
|
||||
/>
|
||||
</svg>
|
||||
</span>
|
||||
</div>
|
||||
<div
|
||||
class="d-flex align-self-center justify-content-center flex-wrap flex-column pt-3"
|
||||
>
|
||||
<span>
|
||||
Drag and drop video here or click to upload
|
||||
</span>
|
||||
<span
|
||||
class="x-small align-self-center pt-2"
|
||||
>
|
||||
Upload MP4 or MOV files (5 GB max)
|
||||
</span>
|
||||
</div>
|
||||
<div
|
||||
class="small align-self-center justify-content-center mx-2 text-dark font-weight-normal pt-3"
|
||||
>
|
||||
OR
|
||||
</div>
|
||||
<div
|
||||
class="zindex-9 video-id-prompt py-3"
|
||||
>
|
||||
<div
|
||||
class="input-group"
|
||||
>
|
||||
<div
|
||||
class="pgn__form-control-decorator-group has-appended-node has-trailing-element m-0"
|
||||
>
|
||||
<input
|
||||
aria-describedby="basic-addon2"
|
||||
aria-label="Paste your video ID or URL"
|
||||
class="form-control"
|
||||
placeholder="Paste your video ID or URL"
|
||||
value=""
|
||||
/>
|
||||
<div
|
||||
class="pgn__form-control-decorator pgn__form-control-decorator-trailing"
|
||||
>
|
||||
<button
|
||||
aria-label="Submit"
|
||||
class="btn-icon btn-icon-primary btn-icon-inline url-submit-button"
|
||||
type="button"
|
||||
>
|
||||
<span
|
||||
class="btn-icon__icon-container"
|
||||
>
|
||||
<span
|
||||
class="pgn__icon btn-icon__icon"
|
||||
>
|
||||
<svg
|
||||
aria-hidden="true"
|
||||
fill="none"
|
||||
focusable="false"
|
||||
height="24"
|
||||
role="img"
|
||||
viewBox="0 0 24 24"
|
||||
width="24"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
>
|
||||
<path
|
||||
d="m12 4-1.41 1.41L16.17 11H4v2h12.17l-5.58 5.59L12 20l8-8-8-8Z"
|
||||
fill="currentColor"
|
||||
/>
|
||||
</svg>
|
||||
</span>
|
||||
</span>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
,
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</body>,
|
||||
"container": <div>
|
||||
<div
|
||||
data-testid="redux-provider"
|
||||
>
|
||||
<div
|
||||
data-testid="browser-router"
|
||||
>
|
||||
<div
|
||||
class="d-flex marked-area flex-column p-3"
|
||||
>
|
||||
<div
|
||||
class="d-flex flex-column"
|
||||
>
|
||||
<div
|
||||
class="d-flex justify-content-end flex-row"
|
||||
>
|
||||
<button
|
||||
aria-label="Close"
|
||||
class="btn-icon btn-icon-primary btn-icon-md position-absolute mr-2 mt-2"
|
||||
type="button"
|
||||
>
|
||||
<span
|
||||
class="btn-icon__icon-container"
|
||||
>
|
||||
<span
|
||||
class="pgn__icon btn-icon__icon"
|
||||
>
|
||||
<svg
|
||||
aria-hidden="true"
|
||||
fill="none"
|
||||
focusable="false"
|
||||
height="24"
|
||||
role="img"
|
||||
viewBox="0 0 24 24"
|
||||
width="24"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
>
|
||||
<path
|
||||
d="M19 6.41 17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12 19 6.41Z"
|
||||
fill="currentColor"
|
||||
/>
|
||||
</svg>
|
||||
</span>
|
||||
</span>
|
||||
</button>
|
||||
</div>
|
||||
<div
|
||||
class="pgn__dropzone"
|
||||
data-testid="dropzone-container"
|
||||
role="presentation"
|
||||
tabindex="0"
|
||||
>
|
||||
<input
|
||||
accept="video/*,.mp4,.mov"
|
||||
style="border: 0px; clip: rect(0px, 0px, 0px, 0px); clip-path: inset(50%); height: 1px; margin: 0px -1px -1px 0px; overflow: hidden; padding: 0px; position: absolute; width: 1px; white-space: nowrap;"
|
||||
tabindex="-1"
|
||||
type="file"
|
||||
/>
|
||||
<div
|
||||
class="d-flex flex-column justify-content-around align-items-center w-100"
|
||||
>
|
||||
<div
|
||||
class="d-flex flex-column"
|
||||
>
|
||||
<div
|
||||
class="justify-content-center align-self-center rounded-circle bg-light-300 p-2.5"
|
||||
>
|
||||
<span
|
||||
class="pgn__icon text-muted"
|
||||
style="height: 2rem; width: 2rem;"
|
||||
>
|
||||
<svg
|
||||
aria-hidden="true"
|
||||
fill="none"
|
||||
focusable="false"
|
||||
height="24"
|
||||
role="img"
|
||||
viewBox="0 0 24 24"
|
||||
width="24"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
>
|
||||
<path
|
||||
d="M5 10h4v6h6v-6h4l-7-7-7 7zm0 8v2h14v-2H5z"
|
||||
fill="currentColor"
|
||||
/>
|
||||
</svg>
|
||||
</span>
|
||||
</div>
|
||||
<div
|
||||
class="d-flex align-self-center justify-content-center flex-wrap flex-column pt-3"
|
||||
>
|
||||
<span>
|
||||
Drag and drop video here or click to upload
|
||||
</span>
|
||||
<span
|
||||
class="x-small align-self-center pt-2"
|
||||
>
|
||||
Upload MP4 or MOV files (5 GB max)
|
||||
</span>
|
||||
</div>
|
||||
<div
|
||||
class="small align-self-center justify-content-center mx-2 text-dark font-weight-normal pt-3"
|
||||
>
|
||||
OR
|
||||
</div>
|
||||
<div
|
||||
class="zindex-9 video-id-prompt py-3"
|
||||
>
|
||||
<div
|
||||
class="input-group"
|
||||
>
|
||||
<div
|
||||
class="pgn__form-control-decorator-group has-appended-node has-trailing-element m-0"
|
||||
>
|
||||
<input
|
||||
aria-describedby="basic-addon2"
|
||||
aria-label="Paste your video ID or URL"
|
||||
class="form-control"
|
||||
placeholder="Paste your video ID or URL"
|
||||
value=""
|
||||
/>
|
||||
<div
|
||||
class="pgn__form-control-decorator pgn__form-control-decorator-trailing"
|
||||
>
|
||||
<button
|
||||
aria-label="Submit"
|
||||
class="btn-icon btn-icon-primary btn-icon-inline url-submit-button"
|
||||
type="button"
|
||||
>
|
||||
<span
|
||||
class="btn-icon__icon-container"
|
||||
>
|
||||
<span
|
||||
class="pgn__icon btn-icon__icon"
|
||||
>
|
||||
<svg
|
||||
aria-hidden="true"
|
||||
fill="none"
|
||||
focusable="false"
|
||||
height="24"
|
||||
role="img"
|
||||
viewBox="0 0 24 24"
|
||||
width="24"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
>
|
||||
<path
|
||||
d="m12 4-1.41 1.41L16.17 11H4v2h12.17l-5.58 5.59L12 20l8-8-8-8Z"
|
||||
fill="currentColor"
|
||||
/>
|
||||
</svg>
|
||||
</span>
|
||||
</span>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
,
|
||||
</div>
|
||||
</div>
|
||||
</div>,
|
||||
"debug": [Function],
|
||||
"findAllByAltText": [Function],
|
||||
"findAllByDisplayValue": [Function],
|
||||
"findAllByLabelText": [Function],
|
||||
"findAllByPlaceholderText": [Function],
|
||||
"findAllByRole": [Function],
|
||||
"findAllByTestId": [Function],
|
||||
"findAllByText": [Function],
|
||||
"findAllByTitle": [Function],
|
||||
"findByAltText": [Function],
|
||||
"findByDisplayValue": [Function],
|
||||
"findByLabelText": [Function],
|
||||
"findByPlaceholderText": [Function],
|
||||
"findByRole": [Function],
|
||||
"findByTestId": [Function],
|
||||
"findByText": [Function],
|
||||
"findByTitle": [Function],
|
||||
"getAllByAltText": [Function],
|
||||
"getAllByDisplayValue": [Function],
|
||||
"getAllByLabelText": [Function],
|
||||
"getAllByPlaceholderText": [Function],
|
||||
"getAllByRole": [Function],
|
||||
"getAllByTestId": [Function],
|
||||
"getAllByText": [Function],
|
||||
"getAllByTitle": [Function],
|
||||
"getByAltText": [Function],
|
||||
"getByDisplayValue": [Function],
|
||||
"getByLabelText": [Function],
|
||||
"getByPlaceholderText": [Function],
|
||||
"getByRole": [Function],
|
||||
"getByTestId": [Function],
|
||||
"getByText": [Function],
|
||||
"getByTitle": [Function],
|
||||
"queryAllByAltText": [Function],
|
||||
"queryAllByDisplayValue": [Function],
|
||||
"queryAllByLabelText": [Function],
|
||||
"queryAllByPlaceholderText": [Function],
|
||||
"queryAllByRole": [Function],
|
||||
"queryAllByTestId": [Function],
|
||||
"queryAllByText": [Function],
|
||||
"queryAllByTitle": [Function],
|
||||
"queryByAltText": [Function],
|
||||
"queryByDisplayValue": [Function],
|
||||
"queryByLabelText": [Function],
|
||||
"queryByPlaceholderText": [Function],
|
||||
"queryByRole": [Function],
|
||||
"queryByTestId": [Function],
|
||||
"queryByText": [Function],
|
||||
"queryByTitle": [Function],
|
||||
"rerender": [Function],
|
||||
"unmount": [Function],
|
||||
}
|
||||
`;
|
||||
@@ -3,7 +3,7 @@ import { IntlProvider } from '@edx/frontend-platform/i18n';
|
||||
import { initializeMockApp } from '@edx/frontend-platform';
|
||||
import { AppProvider } from '@edx/frontend-platform/react';
|
||||
import { configureStore } from '@reduxjs/toolkit';
|
||||
import { render, fireEvent } from '@testing-library/react';
|
||||
import { render, fireEvent, screen } from '@testing-library/react';
|
||||
import '@testing-library/jest-dom';
|
||||
import VideoUploadEditor from '.';
|
||||
|
||||
@@ -44,7 +44,8 @@ describe('VideoUploadEditor', () => {
|
||||
});
|
||||
|
||||
it('renders as expected with default behavior', async () => {
|
||||
expect(await renderComponent(store)).toMatchSnapshot();
|
||||
await renderComponent(store);
|
||||
expect(screen.getByText('Drag and drop video here or click to upload')).toBeInTheDocument();
|
||||
});
|
||||
|
||||
it('calls window.history.back when close button is clicked', async () => {
|
||||
|
||||
@@ -1,11 +0,0 @@
|
||||
// Jest Snapshot v1, https://goo.gl/fbAQLP
|
||||
|
||||
exports[`FileInput component snapshot 1`] = `
|
||||
<div>
|
||||
<input
|
||||
accept=".srt"
|
||||
class="upload d-none"
|
||||
type="file"
|
||||
/>
|
||||
</div>
|
||||
`;
|
||||
@@ -20,8 +20,8 @@ describe('FileInput component', () => {
|
||||
};
|
||||
el = render(<FileInput {...props} />);
|
||||
});
|
||||
test('snapshot', () => {
|
||||
expect(el.container).toMatchSnapshot();
|
||||
test('renders component', () => {
|
||||
expect(el.container.querySelector('input[type="file"]')).toBeInTheDocument();
|
||||
});
|
||||
test('only accepts allowed file types', () => {
|
||||
expect(el.container.querySelector('input').accept).toEqual('.srt');
|
||||
|
||||
@@ -1,7 +1,6 @@
|
||||
import React from 'react';
|
||||
import { render, screen } from '@testing-library/react';
|
||||
import userEvent from '@testing-library/user-event';
|
||||
import renderer from 'react-test-renderer';
|
||||
|
||||
import SelectableBox from '..';
|
||||
|
||||
@@ -18,10 +17,9 @@ const SelectableRadio = (props) => <SelectableBox type={radioType} {...props}>{r
|
||||
describe('<SelectableBox />', () => {
|
||||
describe('correct rendering', () => {
|
||||
it('renders without props', () => {
|
||||
const tree = renderer.create((
|
||||
<SelectableBox>SelectableBox</SelectableBox>
|
||||
)).toJSON();
|
||||
expect(tree).toMatchSnapshot();
|
||||
render(<SelectableBox>SelectableBox</SelectableBox>);
|
||||
expect(screen.getByText('SelectableBox')).toBeInTheDocument();
|
||||
expect(screen.getByRole('button', { name: 'SelectableBox' })).toBeInTheDocument();
|
||||
});
|
||||
it('correct render when type prop is changed', () => {
|
||||
const { rerender } = render(<SelectableRadio type="checkbox" />);
|
||||
|
||||
@@ -1,22 +0,0 @@
|
||||
// Jest Snapshot v1, https://goo.gl/fbAQLP
|
||||
|
||||
exports[`<SelectableBox /> correct rendering renders without props 1`] = `
|
||||
<div
|
||||
className="pgn__selectable_box pgn__selectable_box-active"
|
||||
onClick={[Function]}
|
||||
onFocus={[Function]}
|
||||
onKeyPress={[Function]}
|
||||
role="button"
|
||||
tabIndex={0}
|
||||
>
|
||||
<input
|
||||
checked={false}
|
||||
className="pgn__form-radio-input"
|
||||
hidden={true}
|
||||
onChange={[Function]}
|
||||
tabIndex={-1}
|
||||
type="radio"
|
||||
/>
|
||||
SelectableBox
|
||||
</div>
|
||||
`;
|
||||
Reference in New Issue
Block a user