Updated tests to verify project actions were called as expected

src/react/components/pages/editorPage/editorPage.test.tsx

@@ -1,23 +1,22 @@
 import React from "react";
 import { Provider } from "react-redux";
 import { BrowserRouter as Router } from "react-router-dom";
-import _ from "lodash";
 import { mount, ReactWrapper } from "enzyme";
 import { Store, AnyAction } from "redux";
 import EditorPage, { IEditorPageProps } from "./editorPage";
 import { AssetProviderFactory } from "../../../../providers/storage/assetProvider";
 import { IApplicationState, IProject, IAssetMetadata } from "../../../../models/applicationState";
 import IProjectActions, * as projectActions from "../../../../redux/actions/projectActions";
-import { AssetService } from "../../../../services/assetService";
 import createReduxStore from "../../../../redux/store/store";
 import MockFactory from "../../../../common/mockFactory";
+import { AssetService } from "../../../../services/assetService";
 
 jest.mock("../../../../services/projectService");
 import ProjectService from "../../../../services/projectService";
-import EditorSideBar from "./editorSideBar";
 
 describe("Editor Page Component", () => {
-    const assetServiceMock: jest.Mocked<typeof AssetService> = null;
+    let assetServiceMock: jest.Mocked<typeof AssetService> = null;
+    let projectServiceMock: jest.Mocked<typeof ProjectService> = null;
 
     function createCompoent(store, props: IEditorPageProps): ReactWrapper {
         return mount(
@@ -30,15 +29,24 @@ describe("Editor Page Component", () => {
     }
 
     beforeEach(() => {
-        const assetServiceMock = AssetService as jest.Mocked<typeof AssetService>;
+        assetServiceMock = AssetService as jest.Mocked<typeof AssetService>;
         assetServiceMock.prototype.getAssetMetadata = jest.fn((asset) => {
             const assetMetadata: IAssetMetadata = {
-                asset,
+                asset: { ...asset },
                 regions: [],
                 timestamp: null,
             };
             return Promise.resolve(assetMetadata);
         });
+
+        projectServiceMock = ProjectService as jest.Mocked<typeof ProjectService>;
+        projectServiceMock.prototype.save = jest.fn((project) => Promise.resolve({ ...project }));
+
+        AssetProviderFactory.create = jest.fn(() => {
+            return {
+                getAssets: jest.fn(() => Promise.resolve([])),
+            };
+        });
     });
 
     it("Sets project state from redux store", () => {
@@ -54,49 +62,46 @@ describe("Editor Page Component", () => {
         expect(editorPage.prop("project")).toEqual(testProject);
     });
 
-    it("Loads project assets when state changes", () => {
-        const assetServiceMock = AssetService as jest.Mocked<typeof AssetService>;
-        assetServiceMock.prototype.getAssetMetadata = jest.fn((asset) => {
-            const assetMetadata: IAssetMetadata = {
-                asset,
-                regions: [],
-                timestamp: null,
-            };
-            return Promise.resolve(assetMetadata);
-        });
+    it("Loads project assets when state changes", (done) => {
         const testProject = MockFactory.createTestProject("TestProject");
         const testAssets = MockFactory.createTestAssets(5);
-        testProject.assets = _.keyBy(testAssets, "id");
         const store = createStore(testProject, true);
         const props = createProps(testProject.id);
 
         AssetProviderFactory.create = jest.fn(() => {
             return {
-                export: jest.fn(() => Promise.resolve()),
+                getAssets: jest.fn(() => Promise.resolve(testAssets)),
             };
         });
 
-        assetServiceMock.prototype.save = jest.fn((asset) => Promise.resolve(asset));
+        let savedAssetMetadata: IAssetMetadata = null;
+
+        assetServiceMock.prototype.save = jest.fn((assetMetadata) => {
+            savedAssetMetadata = { ...assetMetadata };
+            return Promise.resolve(savedAssetMetadata);
+        });
 
         const wrapper = createCompoent(store, props);
         const editorPage = wrapper.find(EditorPage).childAt(0);
 
-        wrapper.setProps({
-            project: testProject,
-        });
+        const partialProject = {
+            id: testProject.id,
+            name: testProject.name,
+        };
 
         setImmediate(() => {
-            expect(editorPage.prop("project")).toEqual(testProject);
-            expect(editorPage.state("assets")).toEqual(testProject.assets);
+            expect(editorPage.prop("project")).toEqual(expect.objectContaining(partialProject));
+            expect(editorPage.state("assets").length).toEqual(testAssets.length);
+            expect(editorPage.state("selectedAsset")).toEqual(savedAssetMetadata);
+            done();
         });
     });
 
-    it("Raises onAssetSelected handler when an asset is selected from the sidebar", async () => {
-        // register a test asset provider to retrieve assets
-        AssetProviderFactory.register("testProvider", () => MockFactory.createAssetProvider());
+    it("Raises onAssetSelected handler when an asset is selected from the sidebar", (done) => {
         // create test project and asset
         const testProject = MockFactory.createTestProject("TestProject");
-        const testAsset = MockFactory.createTestAsset("TestAsset");
+        const testAssets = MockFactory.createTestAssets(5);
+        const defaultAsset = testAssets[0];
 
         // mock store and props
         const store = createStore(testProject, true);
@@ -105,32 +110,35 @@ describe("Editor Page Component", () => {
         // mock out the asset provider create method
         AssetProviderFactory.create = jest.fn(() => {
             return {
-                export: jest.fn(() => Promise.resolve()),
+                getAssets: jest.fn(() => Promise.resolve(testAssets)),
             };
         });
 
+        let savedAssetMetadata: IAssetMetadata = null;
+
         // mock out the asset service save method
-        assetServiceMock.prototype.save = jest.fn((asset) => Promise.resolve(asset));
-
-        // create mock editor page
-        const wrapper = createCompoent(store, props);
-        const editorPage = wrapper.find(EditorPage).childAt(0);
-
-        // set testAsset as selected asset, changing the state
-        // which should raise onassetselected handler
-        wrapper.setState({
-            selectedAsset: testAsset,
+        assetServiceMock.prototype.save = jest.fn((assetMetadata) => {
+            savedAssetMetadata = { ...assetMetadata };
+            return Promise.resolve(savedAssetMetadata);
         });
 
-        // spy for onassetselected handler
-        const editorSideBar = wrapper.find(EditorSideBar);
-        const onAssetSelectedSpy = jest.spyOn(editorSideBar.props(), "onAssetSelected");
+        const loadAssetMetadataSpy = jest.spyOn(props.actions, "loadAssetMetadata");
+        const saveAssetMetadataSpy = jest.spyOn(props.actions, "saveAssetMetadata");
+        const saveProjectSpy = jest.spyOn(props.actions, "saveProject");
+
+        // create mock editor page
+        createCompoent(store, props);
+
+        const partialProject = {
+            id: testProject.id,
+            name: testProject.name,
+        };
 
         setImmediate(() => {
-            // expect mocked asset service to call get asset metadate with the mock asset
-            expect(assetServiceMock.prototype.getAssetMetadata).toBeCalledWith(testAsset);
-            // expect the spy to be called
-            expect(onAssetSelectedSpy).toBeCalled();
+            expect(loadAssetMetadataSpy).toBeCalledWith(expect.objectContaining(partialProject), defaultAsset);
+            expect(saveAssetMetadataSpy).toBeCalledWith(expect.objectContaining(partialProject), savedAssetMetadata);
+            expect(saveProjectSpy).toBeCalledWith(expect.objectContaining(partialProject));
+            done();
         });
     });
 });
@@ -164,8 +172,8 @@ function createProps(projectId: string): IEditorPageProps {
                 projectId,
             },
             isExact: true,
-            path: `https://localhost:3000/projects/${projectId}/export`,
-            url: `https://localhost:3000/projects/${projectId}/export`,
+            path: `https://localhost:3000/projects/${projectId}/edit`,
+            url: `https://localhost:3000/projects/${projectId}/edit`,
         },
     };
 }