Andal.LND/frontend-app-authoring
6
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

test: Adding missing test to reach coverage/patch

Browse Source
This commit is contained in:
XnpioChV
2023-05-05 14:05:36 -05:00
parent 15393f3da1
commit 5c432a03db
9 changed files with 362 additions and 9 deletions
Download Patch File Download Diff File Expand all files Collapse all files

29
src/editors/containers/VideoGallery/hooks.test.js
View File

@@ -36,6 +36,7 @@ jest.mock('../../data/redux', () => ({
jest.mock('../../hooks', () => ({
...jest.requireActual('../../hooks'),
navigateCallback: jest.fn((args) => ({ navigateCallback: args })),
navigateTo: jest.fn((args) => ({ navigateTo: args })),
}));
const state = new MockUseState(hooks);
@@ -194,6 +195,23 @@ describe('VideoGallery hooks', () => {
beforeEach(() => {
load();
});
describe('selectBtnProps', () => {
test('on click, if sets selection', () => {
const highlighted = 'videoId';
state.mockVal(state.keys.highlighted, highlighted);
load();
expect(appHooks.navigateTo).not.toHaveBeenCalled();
hook.selectBtnProps.onClick();
expect(appHooks.navigateTo).toHaveBeenCalled();
});
test('on click, sets showSelectVideoError to true if nothing is highlighted', () => {
state.mockVal(state.keys.highlighted, null);
load();
hook.selectBtnProps.onClick();
expect(appHooks.navigateTo).not.toHaveBeenCalled();
expect(state.setState.showSelectVideoError).toHaveBeenCalledWith(true);
});
});
describe('galleryProps', () => {
it('returns highlighted value, initialized to null', () => {
expect(hook.galleryProps.highlighted).toEqual(state.stateVals.highlighted);
@@ -229,6 +247,17 @@ describe('VideoGallery hooks', () => {
});
});
});
describe('fileInputHooks', () => {
test('click calls current.click on the ref', () => {
jest.spyOn(hooks, hookKeys.handleVideoUpload).mockImplementationOnce();
expect(hooks.handleVideoUpload).not.toHaveBeenCalled();
hook = hooks.fileInputProps();
expect(hooks.handleVideoUpload).toHaveBeenCalled();
expect(appHooks.navigateTo).not.toHaveBeenCalled();
hook.click();
expect(appHooks.navigateTo).toHaveBeenCalled();
});
});
describe('videoProps', () => {
const videoList = {
galleryProps: 'some gallery props',

14
src/editors/containers/VideoGallery/index.test.jsx
View File

@@ -1,5 +1,5 @@
import React from 'react';
import { shallow } from 'enzyme';
import { shallow, mount } from 'enzyme';
import SelectionModal from '../../sharedComponents/SelectionModal';
import hooks from './hooks';
@@ -7,6 +7,8 @@ import * as module from '.';
jest.mock('../../sharedComponents/SelectionModal', () => 'SelectionModal');
const mockHandleVideoUploadHook = jest.fn();
jest.mock('./hooks', () => ({
buildVideos: jest.fn(() => []),
videoProps: jest.fn(() => ({
@@ -40,7 +42,7 @@ jest.mock('./hooks', () => ({
selectBtnProps: { select: 'btnProps' },
})),
handleCancel: jest.fn(),
handleVideoUpload: jest.fn(),
handleVideoUpload: () => mockHandleVideoUploadHook,
}));
jest.mock('../../data/redux', () => ({
@@ -70,6 +72,7 @@ describe('VideoGallery', () => {
const videoProps = hooks.videoProps();
beforeEach(() => {
el = shallow(<module.VideoGallery {...props} />);
mockHandleVideoUploadHook.mockReset();
});
it('provides confirm action, forwarding selectBtnProps from imgHooks', () => {
expect(el.find(SelectionModal).props().selectBtnProps).toEqual(
@@ -90,5 +93,12 @@ describe('VideoGallery', () => {
it('provides a FileInput component with fileInput props from imgHooks', () => {
expect(el.find(SelectionModal).props().fileInput).toMatchObject(videoProps.fileInput);
});
it('handleVideoUpload called if there are no videos', () => {
el = mount(<module.VideoGallery {...props} />);
expect(mockHandleVideoUploadHook).not.toHaveBeenCalled();
el.setProps({ rawVideos: {}, isLoaded: true });
el.mount();
expect(mockHandleVideoUploadHook).toHaveBeenCalled();
});
});
});

2
src/editors/containers/VideoUploadEditor/__snapshots__/index.test.jsx.snap
View File

@@ -74,6 +74,7 @@ exports[`VideoUploadEditor renders without errors 1`] = `
/>
<button
class="border-start-0"
data-testid="inputSaveButton"
type="button"
>
<icon
@@ -151,6 +152,7 @@ exports[`VideoUploader renders without errors 1`] = `
/>
<button
class="border-start-0"
data-testid="inputSaveButton"
type="button"
>
<icon

2
src/editors/containers/VideoUploadEditor/index.jsx
View File

@@ -70,7 +70,7 @@ export const VideoUploader = ({ onUpload, errorMessage }) => {
onKeyDown={(e) => e.key === 'Enter' && handleSaveButtonClick()}
onClick={(event) => event.preventDefault()}
/>
<button className="border-start-0" type="button" onClick={handleSaveButtonClick}>
<button className="border-start-0" type="button" onClick={handleSaveButtonClick} data-testid="inputSaveButton">
<Icon src={ArrowForward} className="rounded-circle text-dark" />
</button>
</div>

15
src/editors/containers/VideoUploadEditor/index.test.jsx
View File

@@ -4,6 +4,7 @@ import { render, fireEvent, act } from '@testing-library/react';
import '@testing-library/jest-dom';
import VideoUploadEditor, { VideoUploader } from '.';
import * as hooks from './hooks';
import * as appHooks from '../../hooks';
const mockDispatch = jest.fn();
const mockOnUpload = jest.fn();
@@ -11,6 +12,10 @@ const mockOnUpload = jest.fn();
jest.mock('react-redux', () => ({
useDispatch: () => mockDispatch,
}));
jest.mock('../../hooks', () => ({
...jest.requireActual('../../hooks'),
navigateTo: jest.fn((args) => ({ navigateTo: args })),
}));
const defaultEditorProps = {
intl: {},
@@ -52,6 +57,16 @@ describe('VideoUploadEditor', () => {
expect(input.value).toBe('test value');
});
it('click on the save button', () => {
const { getByPlaceholderText, getByTestId } = renderEditorComponent();
const testValue = 'test vale';
const input = getByPlaceholderText('Paste your video ID or URL');
fireEvent.change(input, { target: { value: testValue } });
const button = getByTestId('inputSaveButton');
fireEvent.click(button);
expect(appHooks.navigateTo).toHaveBeenCalled();
});
it('shows error message with unsupported files', async () => {
const { getByTestId, findByText } = renderEditorComponent();
const fileInput = getByTestId('fileInput');

4
src/editors/data/redux/thunkActions/video.js
View File

@@ -18,7 +18,7 @@ export const loadVideoData = (selectedVideoId, selectedVideoUrl) => (dispatch, g
edx_video_id: selectedVideo.edx_video_id,
thumbnail: selectedVideo.course_video_image_url,
duration: selectedVideo.duration,
transcripts: selectedVideo.transcripts,
transcriptsFromSelected: selectedVideo.transcripts,
selectedVideoTranscriptUrls: selectedVideo.transcript_urls,
};
}
@@ -36,7 +36,7 @@ export const loadVideoData = (selectedVideoId, selectedVideoUrl) => (dispatch, g
// Use the selected video url first
const videoSourceUrl = selectedVideoUrl != null ? selectedVideoUrl : videoUrl;
const [licenseType, licenseOptions] = module.parseLicense({ licenseData: studioView, level: 'block' });
const transcripts = rawVideoData.transcripts ? rawVideoData.transcripts
const transcripts = rawVideoData.transcriptsFromSelected ? rawVideoData.transcriptsFromSelected
: module.parseTranscripts({ transcriptsData: studioView });
const [courseLicenseType, courseLicenseDetails] = module.parseLicense({

8
src/editors/data/services/cms/urls.test.js
View File

@@ -14,6 +14,7 @@ import {
checkTranscriptsForImport,
replaceTranscript,
courseAdvanceSettings,
mediaTranscriptURL,
videoFeatures,
courseVideos,
} from './urls';
@@ -145,4 +146,11 @@ describe('cms url methods', () => {
.toEqual(`${studioEndpointUrl}/videos/${learningContextId}`);
});
});
describe('mediaTranscriptURL', () => {
it('returns url with studioEndpointUrl', () => {
const transcriptUrl = 'this-is-a-transcript';
expect(mediaTranscriptURL({ studioEndpointUrl, transcriptUrl }))
.toEqual(`${studioEndpointUrl}${transcriptUrl}`);
});
});
});

20
src/editors/sharedComponents/SelectionModal/GalleryCard.test.jsx
View File

@@ -5,19 +5,31 @@ import { Image } from '@edx/paragon';
import { GalleryCard } from './GalleryCard';
describe('GalleryCard component', () => {
const img = {
const asset = {
externalUrl: 'props.img.externalUrl',
displayName: 'props.img.displayName',
dateAdded: 12345,
};
let el;
beforeEach(() => {
el = shallow(<GalleryCard asset={img} />);
el = shallow(<GalleryCard asset={asset} />);
});
test(`snapshot: dateAdded=${img.dateAdded}`, () => {
test(`snapshot: dateAdded=${asset.dateAdded}`, () => {
expect(el).toMatchSnapshot();
});
it('loads Image with src from image external url', () => {
expect(el.find(Image).props().src).toEqual(img.externalUrl);
expect(el.find(Image).props().src).toEqual(asset.externalUrl);
});
it('snapshot with status badge', () => {
el = shallow(<GalleryCard asset={{ ...asset, status: 'failed', statusBadgeVariant: 'danger' }} />);
expect(el).toMatchSnapshot();
});
it('snapshot with duration badge', () => {
el = shallow(<GalleryCard asset={{ ...asset, duration: 60 }} />);
expect(el).toMatchSnapshot();
});
it('snapshot with duration transcripts', () => {
el = shallow(<GalleryCard asset={{ ...asset, transcripts: ['es'] }} />);
expect(el).toMatchSnapshot();
});
});

277
src/editors/sharedComponents/SelectionModal/__snapshots__/GalleryCard.test.jsx.snap
View File

@@ -1,5 +1,282 @@
// Jest Snapshot v1, https://goo.gl/fbAQLP
exports[`GalleryCard component snapshot with duration badge 1`] = `
<SelectableBox
className="card bg-white"
key="props.img.externalUrl"
style={
Object {
"border": "none",
"boxShadow": "none",
"padding": "10px 20px",
}
}
type="radio"
>
<div
className="card-div d-flex flex-row flex-nowrap"
>
<div
style={
Object {
"height": "100px",
"margin": "18px 0 0 0",
"position": "relative",
"width": "200px",
}
}
>
<Image
src="props.img.externalUrl"
style={
Object {
"border": "none",
"height": "100px",
"width": "200px",
}
}
/>
<Component
style={
Object {
"backgroundColor": "black",
"bottom": "6px",
"position": "absolute",
"right": "6px",
}
}
variant="dark"
>
01:00
</Component>
</div>
<div
className="card-text p-3"
style={
Object {
"marginTop": "10px",
}
}
>
<h3
className="text-primary-500"
>
props.img.displayName
</h3>
<p
className="text-gray-500"
style={
Object {
"fontSize": "11px",
}
}
>
<FormattedMessage
defaultMessage="Added {date} at {time}"
description="File date-added string"
id="authoring.selectionmodal.addedDate.label"
values={
Object {
"date": <FormattedDate
value={12345}
/>,
"time": <FormattedTime
value={12345}
/>,
}
}
/>
</p>
</div>
</div>
</SelectableBox>
`;
exports[`GalleryCard component snapshot with duration transcripts 1`] = `
<SelectableBox
className="card bg-white"
key="props.img.externalUrl"
style={
Object {
"border": "none",
"boxShadow": "none",
"padding": "10px 20px",
}
}
type="radio"
>
<div
className="card-div d-flex flex-row flex-nowrap"
>
<div
style={
Object {
"height": "100px",
"margin": "18px 0 0 0",
"position": "relative",
"width": "200px",
}
}
>
<Image
src="props.img.externalUrl"
style={
Object {
"border": "none",
"height": "100px",
"width": "200px",
}
}
/>
</div>
<div
className="card-text p-3"
style={
Object {
"marginTop": "10px",
}
}
>
<h3
className="text-primary-500"
>
props.img.displayName
</h3>
<div
style={
Object {
"margin": "0 0 5px 0",
}
}
>
<injectIntl(ShimmedIntlComponent)
transcripts={
Array [
"es",
]
}
/>
</div>
<p
className="text-gray-500"
style={
Object {
"fontSize": "11px",
}
}
>
<FormattedMessage
defaultMessage="Added {date} at {time}"
description="File date-added string"
id="authoring.selectionmodal.addedDate.label"
values={
Object {
"date": <FormattedDate
value={12345}
/>,
"time": <FormattedTime
value={12345}
/>,
}
}
/>
</p>
</div>
</div>
</SelectableBox>
`;
exports[`GalleryCard component snapshot with status badge 1`] = `
<SelectableBox
className="card bg-white"
key="props.img.externalUrl"
style={
Object {
"border": "none",
"boxShadow": "none",
"padding": "10px 20px",
}
}
type="radio"
>
<div
className="card-div d-flex flex-row flex-nowrap"
>
<div
style={
Object {
"height": "100px",
"margin": "18px 0 0 0",
"position": "relative",
"width": "200px",
}
}
>
<Image
src="props.img.externalUrl"
style={
Object {
"border": "none",
"height": "100px",
"width": "200px",
}
}
/>
<Component
style={
Object {
"left": "6px",
"position": "absolute",
"top": "6px",
}
}
variant="danger"
>
failed
</Component>
</div>
<div
className="card-text p-3"
style={
Object {
"marginTop": "10px",
}
}
>
<h3
className="text-primary-500"
>
props.img.displayName
</h3>
<p
className="text-gray-500"
style={
Object {
"fontSize": "11px",
}
}
>
<FormattedMessage
defaultMessage="Added {date} at {time}"
description="File date-added string"
id="authoring.selectionmodal.addedDate.label"
values={
Object {
"date": <FormattedDate
value={12345}
/>,
"time": <FormattedTime
value={12345}
/>,
}
}
/>
</p>
</div>
</div>
</SelectableBox>
`;
exports[`GalleryCard component snapshot: dateAdded=12345 1`] = `
<SelectableBox
className="card bg-white"