Wabrez/video test coverage (#549)

* Added unit tests for custom video player button

* Added unit tests for image asset component

* Added unit tests for video asset component

src/react/components/pages/editorPage/assetPreview.tsx → src/react/components/assetPreview/assetPreview.tsx

@@ -1,6 +1,6 @@
 import React from "react";
-import { IAsset, AssetType } from "../../../../models/applicationState";
-import { strings } from "../../../../common/strings";
+import { IAsset, AssetType } from "../../../models/applicationState";
+import { strings } from "../../../common/strings";
 import { ImageAsset } from "./imageAsset";
 import { VideoAsset } from "./videoAsset";
 

src/react/components/assetPreview/imageAsset.test.tsx

@@ -0,0 +1,68 @@
+import React from "react";
+import { IAssetProps } from "./assetPreview";
+import { ReactWrapper, mount } from "enzyme";
+import { ImageAsset } from "./imageAsset";
+import MockFactory from "../../../common/mockFactory";
+
+describe("Image Asset Component", () => {
+    // tslint:disable-next-line:max-line-length
+    const dataUri = "data:image/gif;base64,R0lGODlhEAAQAMQAAORHHOVSKudfOulrSOp3WOyDZu6QdvCchPGolfO0o/XBs/fNwfjZ0frl3/zy7////wAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAACH5BAkAABAALAAAAAAQABAAAAVVICSOZGlCQAosJ6mu7fiyZeKqNKToQGDsM8hBADgUXoGAiqhSvp5QAnQKGIgUhwFUYLCVDFCrKUE1lBavAViFIDlTImbKC5Gm2hB0SlBCBMQiB0UjIQA7";
+    let wrapper: ReactWrapper<IAssetProps> = null;
+    const onLoadHandler = jest.fn();
+    MockFactory.createTestAsset("test");
+    const defaultProps: IAssetProps = {
+        asset: {
+            ...MockFactory.createTestAsset("test"),
+            path: dataUri,
+        },
+        onLoaded: onLoadHandler,
+    };
+
+    function createComponent(props?: IAssetProps): ReactWrapper<IAssetProps> {
+        props = props || defaultProps;
+        return mount(<ImageAsset {...props} />);
+    }
+
+    it("renders landscape image correctly", () => {
+        const props = { ...defaultProps };
+        props.asset.size = {
+            width: 800,
+            height: 600,
+        };
+
+        wrapper = createComponent(props);
+        const img = wrapper.find("img");
+
+        expect(img.exists()).toBe(true);
+        expect(img.props()).toEqual(expect.objectContaining({
+            className: "landscape",
+            src: defaultProps.asset.path,
+        }));
+    });
+
+    it("renders portrait image correctly", () => {
+        const props = { ...defaultProps };
+        props.asset.size = {
+            width: 600,
+            height: 800,
+        };
+
+        wrapper = createComponent(props);
+        const img = wrapper.find("img");
+
+        expect(img.exists()).toBe(true);
+        expect(img.props()).toEqual(expect.objectContaining({
+            className: "portrait",
+            src: defaultProps.asset.path,
+        }));
+    });
+
+    it("raises onLoad handler when image has completed loading", () => {
+        wrapper = createComponent();
+
+        const img = wrapper.find("img").getDOMNode() as HTMLImageElement;
+        img.dispatchEvent(new Event("load"));
+
+        expect(onLoadHandler).toBeCalledWith(expect.any(HTMLImageElement));
+    });
+});

src/react/components/assetPreview/videoAsset.test.tsx

@@ -0,0 +1,222 @@
+import React from "react";
+import { ReactWrapper, mount } from "enzyme";
+import { IVideoAssetProps, VideoAsset, IVideoPlayerState, IVideoAssetState } from "./videoAsset";
+import MockFactory from "../../../common/mockFactory";
+import { CustomVideoPlayerButton } from "../common/videoPlayer/customVideoPlayerButton";
+
+import { Player } from "video-react";
+import { AssetType, AssetState } from "../../../models/applicationState";
+
+describe("Video Asset Component", () => {
+    let wrapper: ReactWrapper<IVideoAssetProps, IVideoAssetState> = null;
+    let onVideoStateChangeHandler: (state: Readonly<IVideoPlayerState>, prev: Readonly<IVideoPlayerState>) => void;
+    const videoPlayerMock = Player as jest.Mocked<typeof Player>;
+    const onLoadedHandler = jest.fn();
+    const onActivatedHandler = jest.fn();
+    const onDeactivatedHandler = jest.fn();
+    const onChildSelectedHandler = jest.fn();
+    const defaultProps: IVideoAssetProps = {
+        asset: MockFactory.createVideoTestAsset("test-video"),
+        autoPlay: false,
+        onLoaded: onLoadedHandler,
+        onActivated: onActivatedHandler,
+        onDeactivated: onDeactivatedHandler,
+        onChildAssetSelected: onChildSelectedHandler,
+    };
+
+    beforeEach(() => {
+        videoPlayerMock.prototype.subscribeToStateChange = jest.fn((handler) => onVideoStateChangeHandler = handler);
+        videoPlayerMock.prototype.pause = jest.fn();
+        videoPlayerMock.prototype.seek = jest.fn((timestamp) => {
+            mockPaused(timestamp);
+        });
+    });
+
+    function createComponent(props?: IVideoAssetProps): ReactWrapper<IVideoAssetProps, IVideoAssetState> {
+        props = props || defaultProps;
+
+        return mount(<VideoAsset {...props} />);
+    }
+
+    it("renders correctly", () => {
+        wrapper = createComponent();
+
+        expect(wrapper.find(Player).exists()).toBe(true);
+        expect(wrapper.find(CustomVideoPlayerButton).length).toEqual(2);
+    });
+
+    it("resets loaded state when asset changes", () => {
+        wrapper = createComponent();
+        mockLoaded();
+
+        const newAsset = MockFactory.createVideoTestAsset("new-video-asset");
+        wrapper.setProps({ asset: newAsset });
+        expect(wrapper.state().loaded).toBe(false);
+    });
+
+    it("seeks the video player to the spcified timestamp when timestamp changes", () => {
+        const expectedTime = 10.2;
+        wrapper = createComponent();
+        mockLoaded();
+
+        wrapper.setProps({ timestamp: expectedTime });
+        expect(videoPlayerMock.prototype.seek).toBeCalledWith(expectedTime);
+    });
+
+    it("moves to the next tagged frame when clicking the next button", () => {
+        const childAssets = MockFactory.createChildVideoAssets(defaultProps.asset);
+        const currentAsset = childAssets[0];
+        const expectedAsset = {
+            ...childAssets[1],
+            state: AssetState.Visited,
+        };
+
+        videoPlayerMock.prototype.getState = jest.fn(() => {
+            return {
+                player: {
+                    currentTime: currentAsset.timestamp,
+                },
+            };
+        });
+
+        const props: IVideoAssetProps = {
+            ...defaultProps,
+            childAssets: childAssets,
+            timestamp: currentAsset.timestamp,
+        };
+
+        wrapper = createComponent(props);
+        mockLoaded();
+
+        wrapper.find(CustomVideoPlayerButton).at(1).simulate("click");
+
+        expect(videoPlayerMock.prototype.pause).toBeCalled();
+        expect(videoPlayerMock.prototype.seek).toBeCalledWith(expectedAsset.timestamp);
+        expect(onChildSelectedHandler).toBeCalledWith(expectedAsset);
+    });
+
+    it("moves to the previous tagged frame when clicking the back button", () => {
+        const childAssets = MockFactory.createChildVideoAssets(defaultProps.asset);
+        const currentAsset = childAssets[4];
+        const expectedAsset = {
+            ...childAssets[3],
+            state: AssetState.Visited,
+        };
+
+        videoPlayerMock.prototype.getState = jest.fn(() => {
+            return {
+                player: {
+                    currentTime: currentAsset.timestamp,
+                },
+            };
+        });
+
+        const props: IVideoAssetProps = {
+            ...defaultProps,
+            childAssets: childAssets,
+            timestamp: currentAsset.timestamp,
+        };
+
+        wrapper = createComponent(props);
+        mockLoaded();
+
+        wrapper.find(CustomVideoPlayerButton).at(0).simulate("click");
+
+        expect(videoPlayerMock.prototype.pause).toBeCalled();
+        expect(videoPlayerMock.prototype.seek).toBeCalledWith(expectedAsset.timestamp);
+        expect(onChildSelectedHandler).toBeCalledWith(expectedAsset);
+    });
+
+    it("raises the onLoad and activated handlers when the video has been loaded", () => {
+        wrapper = createComponent();
+        mockLoaded();
+
+        expect(onLoadedHandler).toBeCalledWith(expect.any(HTMLVideoElement));
+        expect(onActivatedHandler).toBeCalledWith(expect.any(HTMLVideoElement));
+        expect(wrapper.state().loaded).toBe(true);
+    });
+
+    it("raises the child asset selected and deactivated handlers when the video is paused", () => {
+        const expectedTime = 10.5;
+        wrapper = createComponent();
+        mockLoaded();
+        mockPaused(expectedTime);
+
+        expect(onDeactivatedHandler).toBeCalledWith(expect.any(HTMLVideoElement));
+        expect(onChildSelectedHandler).toBeCalledWith(expect.objectContaining({
+            type: AssetType.VideoFrame,
+            path: `${defaultProps.asset.path}#t=${expectedTime}`,
+            timestamp: expectedTime,
+            parent: defaultProps.asset,
+        }));
+    });
+
+    it("raises the activated handler when the video resumes", () => {
+        wrapper = createComponent();
+        mockLoaded();
+        mockPaused(4.0);
+
+        onLoadedHandler.mockReset();
+        onDeactivatedHandler.mockReset();
+
+        mockResume();
+
+        expect(onLoadedHandler).not.toBeCalled();
+        expect(onDeactivatedHandler).not.toBeCalled();
+        expect(onActivatedHandler).toBeCalledWith(expect.any(HTMLVideoElement));
+    });
+
+    function mockLoaded() {
+        const state: IVideoPlayerState = {
+            readyState: 4,
+            paused: false,
+            currentTime: 0,
+            seeking: false,
+        };
+
+        const prev: IVideoPlayerState = {
+            readyState: 1,
+            paused: false,
+            currentTime: 0,
+            seeking: false,
+        };
+
+        onVideoStateChangeHandler(state, prev);
+    }
+
+    function mockPaused(currentTime: number) {
+        const state: IVideoPlayerState = {
+            readyState: 4,
+            paused: true,
+            currentTime,
+            seeking: false,
+        };
+
+        const prev: IVideoPlayerState = {
+            readyState: 4,
+            paused: false,
+            currentTime: 2.0,
+            seeking: true,
+        };
+
+        onVideoStateChangeHandler(state, prev);
+    }
+
+    function mockResume() {
+        const state: IVideoPlayerState = {
+            readyState: 4,
+            paused: false,
+            currentTime: 0,
+            seeking: false,
+        };
+
+        const prev: IVideoPlayerState = {
+            readyState: 4,
+            paused: true,
+            currentTime: 0,
+            seeking: false,
+        };
+
+        onVideoStateChangeHandler(state, prev);
+    }
+});

src/react/components/pages/editorPage/videoAsset.tsx → src/react/components/assetPreview/videoAsset.tsx

@@ -5,9 +5,9 @@ import {
     TimeDivider, PlaybackRateMenuButton, VolumeMenuButton,
 } from "video-react";
 import { IAssetProps } from "./assetPreview";
-import { IAsset, AssetType, AssetState } from "../../../../models/applicationState";
-import { AssetService } from "../../../../services/assetService";
-import { CustomVideoPlayerButton } from "../../common/videoPlayer/customVideoPlayerButton";
+import { IAsset, AssetType, AssetState } from "../../../models/applicationState";
+import { AssetService } from "../../../services/assetService";
+import { CustomVideoPlayerButton } from "../common/videoPlayer/customVideoPlayerButton";
 
 export interface IVideoAssetProps extends IAssetProps, React.Props<VideoAsset> {
     autoPlay?: boolean;
@@ -156,6 +156,7 @@ export class VideoAsset extends React.Component<IVideoAssetProps> {
             const parentAsset = this.props.asset.parent || this.props.asset;
             const childPath = `${parentAsset.path}#t=${state.currentTime}`;
             const childAsset = AssetService.createAssetFromFilePath(childPath);
+            childAsset.state = AssetState.Visited;
             childAsset.type = AssetType.VideoFrame;
             childAsset.parent = parentAsset;
             childAsset.timestamp = state.currentTime;