diff --git a/src/lib/hash-parser-hoc.jsx b/src/lib/hash-parser-hoc.jsx index cf3953824662b2219f04a5587c60ed7f60b19e6a..04250aa6e9f1297f662574d649469e3bb610c333 100644 --- a/src/lib/hash-parser-hoc.jsx +++ b/src/lib/hash-parser-hoc.jsx @@ -1,4 +1,5 @@ import React from 'react'; +import bindAll from 'lodash.bindall'; /* Higher Order Component to get the project id from location.hash * @param {React.Component} WrappedComponent component to receive projectData prop @@ -8,24 +9,22 @@ const HashParserHOC = function (WrappedComponent) { class HashParserComponent extends React.Component { constructor (props) { super(props); - this.fetchProjectId = this.fetchProjectId.bind(this); - this.updateProject = this.updateProject.bind(this); + bindAll(this, [ + 'handleHashChange' + ]); this.state = { projectId: null }; } componentDidMount () { - window.addEventListener('hashchange', this.updateProject); - this.updateProject(); + window.addEventListener('hashchange', this.handleHashChange); + this.handleHashChange(); } componentWillUnmount () { - window.removeEventListener('hashchange', this.updateProject); + window.removeEventListener('hashchange', this.handleHashChange); } - fetchProjectId () { - return window.location.hash.substring(1); - } - updateProject () { - let projectId = this.fetchProjectId(); + handleHashChange () { + let projectId = window.location.hash.substring(1); if (projectId !== this.state.projectId) { if (projectId.length < 1) projectId = 0; this.setState({projectId: projectId}); diff --git a/test/unit/util/hash-project-loader-hoc.test.jsx b/test/unit/util/hash-project-loader-hoc.test.jsx index 9ab9af432accc09ae0ed7781b2642386ed056f59..5cf78747ad9b580c2aa506f1e949daa57f7f26e1 100644 --- a/test/unit/util/hash-project-loader-hoc.test.jsx +++ b/test/unit/util/hash-project-loader-hoc.test.jsx @@ -1,64 +1,34 @@ import React from 'react'; -import ProjectLoaderHOC from '../../../src/lib/project-loader-hoc.jsx'; import HashParserHOC from '../../../src/lib/hash-parser-hoc.jsx'; -import storage from '../../../src/lib/storage'; import {mount} from 'enzyme'; jest.mock('react-ga'); -describe('Hash/ProjectLoaderHOC', () => { - test('when there is no project data, it renders null', () => { - const Component = ({projectData}) => <div>{projectData}</div>; - const WrappedComponent = HashParserHOC(ProjectLoaderHOC(Component)); +describe('HashParserHOC', () => { + test('when there is a hash, it passes the hash as projectId', () => { + const Component = ({projectId}) => <div>{projectId}</div>; + const WrappedComponent = HashParserHOC(Component); window.location.hash = '#winning'; - const originalLoad = storage.load; - storage.load = jest.fn(() => Promise.resolve(null)); const mounted = mount(<WrappedComponent />); - storage.load = originalLoad; - window.location.hash = ''; - const mountedDiv = mounted.find('div'); - expect(mountedDiv.exists()).toEqual(false); + expect(mounted.state().projectId).toEqual('winning'); }); - test('when there is no hash, it loads the default project', () => { - const Component = ({projectData}) => <div>{projectData}</div>; - const WrappedComponent = HashParserHOC(ProjectLoaderHOC(Component)); + test('when there is no hash, it passes 0 as the projectId', () => { + const Component = ({projectId}) => <div>{projectId}</div>; + const WrappedComponent = HashParserHOC(Component); window.location.hash = ''; - const originalLoad = storage.load; - storage.load = jest.fn((type, id) => Promise.resolve(id)); const mounted = mount(<WrappedComponent />); expect(mounted.state().projectId).toEqual(0); - expect(storage.load).toHaveBeenCalledWith( - storage.AssetType.Project, 0, storage.DataFormat.JSON - ); - storage.load = originalLoad; - }); - - test('when there is a hash, it tries to load that project', () => { - const Component = ({projectData}) => <div>{projectData}</div>; - const WrappedComponent = HashParserHOC(ProjectLoaderHOC(Component)); - window.location.hash = '#winning'; - const originalLoad = storage.load; - storage.load = jest.fn((type, id) => Promise.resolve({data: id})); - const mounted = mount(<WrappedComponent />); - expect(mounted.state().projectId).toEqual('winning'); - expect(storage.load).toHaveBeenLastCalledWith( - storage.AssetType.Project, 'winning', storage.DataFormat.JSON - ); - storage.load = originalLoad; }); - test('when hash change happens, the project data state is changed', () => { - const Component = ({projectData}) => <div>{projectData}</div>; - const WrappedComponent = HashParserHOC(ProjectLoaderHOC(Component)); + test('when hash change happens, the projectId state is changed', () => { + const Component = ({projectId}) => <div>{projectId}</div>; + const WrappedComponent = HashParserHOC(Component); window.location.hash = ''; const mounted = mount(<WrappedComponent />); expect(mounted.state().projectId).toEqual(0); - const originalLoad = storage.load; - storage.load = jest.fn((type, id) => Promise.resolve({data: id})); window.location.hash = '#winning'; - mounted.instance().updateProject(); + mounted.instance().handleHashChange(); expect(mounted.state().projectId).toEqual('winning'); - storage.load = originalLoad; }); }); diff --git a/test/unit/util/project-loader-hoc.test.jsx b/test/unit/util/project-loader-hoc.test.jsx index 30278892f4c1b87a09a983d93f196ee3f6d37525..502ac0f62d45fd1f98bc5d03190ae5c7cf7d0737 100644 --- a/test/unit/util/project-loader-hoc.test.jsx +++ b/test/unit/util/project-loader-hoc.test.jsx @@ -33,4 +33,15 @@ describe('ProjectLoaderHOC', () => { storage.load = originalLoad; }); + test('when there is no project data, it renders null', () => { + const Component = ({projectData}) => <div>{projectData}</div>; + const WrappedComponent = ProjectLoaderHOC(Component); + const originalLoad = storage.load; + storage.load = jest.fn(() => Promise.resolve(null)); + const mounted = mount(<WrappedComponent />); + storage.load = originalLoad; + const mountedDiv = mounted.find('div'); + expect(mountedDiv.exists()).toEqual(false); + }); + });