import sinon from 'sinon'; import * as svgUtils from '@src/util/svg'; import ConnectionMap from '@src/map/connection-map.class'; import { SG_CLASS_CARD_GROUP, SG_CLASS_IS_SCOUT_COMPANY } from '@src/map/subsidiary-list-group.class'; import misawaFixture from './fixtures/misawa-homes-chugoku.json'; import tataFixture from './fixtures/tata-steel.json'; import { getDataTree } from '@src/data'; import { SG_CLASS_CIRCLE_G, SG_CLASS_WITH_ID } from '../src/map/subsidiary-list-group.class'; import * as _ from 'lodash'; import { CLASS_ACTION_COMPANY_PAGE, CLASS_ACTION_TARGET_LIST } from '../src/map/subsidiary-hover-menu'; import { JSDOM } from 'jsdom'; const misawaTree = getDataTree(misawaFixture, '065Q0Y-E'); const tataTree = getDataTree(tataFixture, '05LYCN-E'); const parseTranslateStringStub = sinon.stub(svgUtils, 'parseTranslateString'); parseTranslateStringStub.returns({ x: 0, y: 0 }); describe('Renders a connection map SVG', () => { let svgDoc; let node; let dom; beforeAll(() => { dom = new JSDOM('', { beforeParse(window) { (window as any).SVGElement.prototype.getBBox = () => ({ x: 1, y: 1, width: 100, height: 100 }); } }).window.document; }); beforeEach(() => { svgDoc = dom.createElementNS('http://www.w3.org/2000/svg', 'svg'); svgDoc.classList.add('test-svg'); dom.body.appendChild(svgDoc); node = dom.querySelector('svg'); }); afterEach(() => { svgDoc = null; node = null; dom.body.innerHTML = ''; }); it('Misawa map', () => { const connectionMap = new ConnectionMap(node); connectionMap.bindConnectionMapNavigationEventToNodes(jest.fn()); connectionMap.bindCompanyPageNavigationEventToNodes(jest.fn()); connectionMap.bindCompanyViewEventToNodes(jest.fn()); connectionMap.bindLatestNewsViewEventToNodes(jest.fn()); connectionMap.bindAddToTargetListNavigationEventToNodes(jest.fn()); connectionMap.render(misawaTree); expect(node).toMatchSnapshot(); }); it('Tata map', () => { const connectionMap = new ConnectionMap(node); connectionMap.bindConnectionMapNavigationEventToNodes(jest.fn()); connectionMap.bindCompanyPageNavigationEventToNodes(jest.fn()); connectionMap.bindCompanyViewEventToNodes(jest.fn()); connectionMap.bindLatestNewsViewEventToNodes(jest.fn()); connectionMap.bindAddToTargetListNavigationEventToNodes(jest.fn()); connectionMap.render(tataTree); expect(node).toMatchSnapshot(); }); it("Doesn't navigate", () => { const navFn = jest.fn(); const connectionMap = new ConnectionMap(node); connectionMap.bindConnectionMapNavigationEventToNodes(navFn); connectionMap.bindCompanyPageNavigationEventToNodes(jest.fn()); connectionMap.bindCompanyViewEventToNodes(jest.fn()); connectionMap.bindLatestNewsViewEventToNodes(jest.fn()); connectionMap.bindAddToTargetListNavigationEventToNodes(jest.fn()); connectionMap.render(misawaTree); const card = node.querySelector(`.${SG_CLASS_CARD_GROUP}`); const evt = dom.createEvent('MouseEvent'); evt.initEvent('click', false, true); card.dispatchEvent(evt); expect(navFn).not.toHaveBeenCalled(); }); it('Navigates to another connection map', () => { const subsidiaryId = '006XN0-E'; const navFn = jest.fn(); const connectionMap = new ConnectionMap(node); connectionMap.bindConnectionMapNavigationEventToNodes(navFn); connectionMap.bindCompanyPageNavigationEventToNodes(jest.fn()); connectionMap.bindCompanyViewEventToNodes(jest.fn()); connectionMap.bindLatestNewsViewEventToNodes(jest.fn()); connectionMap.bindAddToTargetListNavigationEventToNodes(jest.fn()); connectionMap.render(tataTree); const card = node.querySelector( `.${SG_CLASS_IS_SCOUT_COMPANY}.${SG_CLASS_WITH_ID( subsidiaryId )} .${SG_CLASS_CARD_GROUP}` ); const evt = dom.createEvent('MouseEvent'); evt.initEvent('click', false, true); card.dispatchEvent(evt); expect(navFn).toHaveBeenCalled(); expect(navFn).toHaveBeenCalledWith( _.chain(tataFixture) .filter(company => company.entityId === subsidiaryId) .first() .get(['company', 'scoutId']) .value() ); }); it('Navigates to a company page map', () => { const subsidiaryId = '006XN0-E'; const navFn = jest.fn(); const connectionMap = new ConnectionMap(node); connectionMap.bindConnectionMapNavigationEventToNodes(jest.fn()); connectionMap.bindCompanyPageNavigationEventToNodes(navFn); connectionMap.bindCompanyViewEventToNodes(jest.fn()); connectionMap.bindLatestNewsViewEventToNodes(jest.fn()); connectionMap.bindAddToTargetListNavigationEventToNodes(jest.fn()); connectionMap.render(tataTree); // Hover over card to make hover menu display const card = node.querySelector( `.${SG_CLASS_IS_SCOUT_COMPANY}.${SG_CLASS_WITH_ID( subsidiaryId )} .${SG_CLASS_CARD_GROUP}` ); const mouseOverEvt = dom.createEvent('MouseEvent'); mouseOverEvt.initEvent('mouseover', false, true); card.dispatchEvent(mouseOverEvt); // Click over card to make hover menu display const hoverMenuCompanyLink = node.querySelector( `.${CLASS_ACTION_COMPANY_PAGE}` ); const clickEvt = dom.createEvent('MouseEvent'); clickEvt.initEvent('click', false, true); hoverMenuCompanyLink.dispatchEvent(clickEvt); expect(navFn).toHaveBeenCalled(); expect(navFn).toHaveBeenCalledWith( _.chain(tataFixture) .filter(company => company.entityId === subsidiaryId) .first() .get(['company', 'scoutId']) .value() ); }); it('Adds a company to a target list', () => { const subsidiaryId = '006XN0-E'; const addFn = jest.fn(); const connectionMap = new ConnectionMap(node); connectionMap.bindConnectionMapNavigationEventToNodes(jest.fn()); connectionMap.bindCompanyPageNavigationEventToNodes(jest.fn()); connectionMap.bindCompanyViewEventToNodes(jest.fn()); connectionMap.bindLatestNewsViewEventToNodes(jest.fn()); connectionMap.bindAddToTargetListNavigationEventToNodes(addFn); connectionMap.render(tataTree); // Hover over card to make hover menu display const card = node.querySelector( `.${SG_CLASS_IS_SCOUT_COMPANY}.${SG_CLASS_WITH_ID( subsidiaryId )} .${SG_CLASS_CARD_GROUP}` ); const mouseOverEvt = dom.createEvent('MouseEvent'); mouseOverEvt.initEvent('mouseover', false, true); card.dispatchEvent(mouseOverEvt); // Click over card to make hover menu display const hoverMenuTargetListLink = node.querySelector( `.${CLASS_ACTION_TARGET_LIST}` ); const clickEvt = dom.createEvent('MouseEvent'); clickEvt.initEvent('click', false, true); hoverMenuTargetListLink.dispatchEvent(clickEvt); expect(addFn).toHaveBeenCalled(); expect(addFn).toHaveBeenCalledWith( _.chain(tataFixture) .filter(company => company.entityId === subsidiaryId) .first() .get(['company', 'scoutId']) .value() ); }); it('Opens a sub tree and close it', () => { const subsidiaryId = '06L16K-E'; // TATA STEEL UK LTD. const addFn = jest.fn(); const connectionMap = new ConnectionMap(node); connectionMap.bindConnectionMapNavigationEventToNodes(jest.fn()); connectionMap.bindCompanyPageNavigationEventToNodes(jest.fn()); connectionMap.bindCompanyViewEventToNodes(jest.fn()); connectionMap.bindLatestNewsViewEventToNodes(jest.fn()); connectionMap.bindAddToTargetListNavigationEventToNodes(addFn); connectionMap.render(tataTree); // Hover over card to make hover menu display const card = node.querySelector( `.${SG_CLASS_WITH_ID(subsidiaryId)} .${SG_CLASS_CIRCLE_G}` ); const clickEvt = dom.createEvent('MouseEvent'); clickEvt.initEvent('click', false, true); card.dispatchEvent(clickEvt); expect(node).toMatchSnapshot(); card.dispatchEvent(clickEvt); expect(node).toMatchSnapshot(); }); it('Opens a sub -> sub tree and close them', () => { const subsidiaryId = '06L16K-E'; // TATA STEEL UK LTD. const subSubsidiaryId = '002C4C-E'; // CORUS GROUP LTD. const addFn = jest.fn(); const connectionMap = new ConnectionMap(node); connectionMap.bindConnectionMapNavigationEventToNodes(jest.fn()); connectionMap.bindCompanyPageNavigationEventToNodes(jest.fn()); connectionMap.bindCompanyViewEventToNodes(jest.fn()); connectionMap.bindLatestNewsViewEventToNodes(jest.fn()); connectionMap.bindAddToTargetListNavigationEventToNodes(addFn); connectionMap.render(tataTree); const clickEvt = dom.createEvent('MouseEvent'); clickEvt.initEvent('click', false, true); const cardOne = node.querySelector( `.${SG_CLASS_WITH_ID(subsidiaryId)} .${SG_CLASS_CIRCLE_G}` ); cardOne.dispatchEvent(clickEvt); const cardTwo = node.querySelector( `.${SG_CLASS_WITH_ID(subSubsidiaryId)} .${SG_CLASS_CIRCLE_G}` ); cardTwo.dispatchEvent(clickEvt); expect(node).toMatchSnapshot(); cardTwo.dispatchEvent(clickEvt); expect(node).toMatchSnapshot(); cardOne.dispatchEvent(clickEvt); expect(node).toMatchSnapshot(); }); });