Variants unit tests

assets/scripts/info_bubble/Variants.jsx

@@ -4,7 +4,7 @@ import { connect } from 'react-redux'
 import { segmentsChanged } from '../segments/view'
 import { injectIntl, intlShape } from 'react-intl'
 import { getSegmentInfo } from '../segments/info'
-import { VARIANT_ICONS } from '../segments/variant_icons'
+import VARIANT_ICONS from '../segments/variant_icons.json'
 import { getVariantArray } from '../segments/variant_utils'
 import {
   INFO_BUBBLE_TYPE_SEGMENT,
@@ -13,7 +13,7 @@ import {
 } from './constants'
 import { setBuildingVariant, changeSegmentVariant } from '../store/actions/street'
 
-class Variants extends React.Component {
+export class Variants extends React.Component {
   static propTypes = {
     intl: intlShape.isRequired,
     type: PropTypes.number,

assets/scripts/info_bubble/__tests__/Variants.test.js

@@ -0,0 +1,88 @@
+/* eslint-env jest */
+import React from 'react'
+import { Variants } from '../Variants'
+import { shallow } from 'enzyme'
+import { IntlProvider } from 'react-intl'
+
+import { getSegmentInfo } from '../../segments/info'
+import {
+  INFO_BUBBLE_TYPE_SEGMENT,
+  INFO_BUBBLE_TYPE_LEFT_BUILDING,
+  INFO_BUBBLE_TYPE_RIGHT_BUILDING
+} from '../constants'
+
+jest.mock('../../streets/data_model', () => {})
+jest.mock('../../segments/view')
+jest.mock('../../segments/info')
+jest.mock('../../segments/variant_icons.json', () => require('../../segments/__mocks__/variant_icons.json'))
+
+describe('Variants', () => {
+  const intlProvider = new IntlProvider({ locale: 'en' }, {})
+  const { intl } = intlProvider.getChildContext()
+  it('does not render component', () => {
+    const wrapper = shallow(<Variants intl={intl} />)
+    expect(wrapper).toMatchSnapshot()
+  })
+  describe('INFO_BUBBLE_TYPE_SEGMENT', () => {
+    let segment
+    beforeEach(() => {
+      segment = { variants: ['direction', 'public-transit-asphalt'] } // coming from info.json
+      getSegmentInfo.mockImplementation(() => segment)
+    })
+    const type = INFO_BUBBLE_TYPE_SEGMENT
+    const streetSegment = { variantString: 'inbound|regular', segmentType: 'streetcar' }
+    it('renders segment type correctly', () => {
+      const wrapper = shallow(<Variants intl={intl} type={type} position={0} variant={streetSegment.variantString} segmentType={streetSegment.segmentType} />)
+      expect(wrapper).toMatchSnapshot()
+    })
+    it('onClick calls changeSegmentVariant', () => {
+      const changeSegmentVariant = jest.fn()
+      const wrapper = shallow(<Variants changeSegmentVariant={changeSegmentVariant} intl={intl} type={type} position={0} variant={streetSegment.variantString} segmentType={streetSegment.segmentType} />)
+      wrapper.find('button').first().simulate('click')
+      expect(changeSegmentVariant).toHaveBeenCalledTimes(1)
+      expect(changeSegmentVariant).toHaveBeenCalledWith(0, 'direction', 'inbound')
+    })
+  })
+  describe('INFO_BUBBLE_TYPE_LEFT_BUILDING', () => {
+    const type = INFO_BUBBLE_TYPE_LEFT_BUILDING
+    it('onClick calls setBuildingVariant', () => {
+      const setBuildingVariant = jest.fn()
+      const wrapper = shallow(<Variants setBuildingVariant={setBuildingVariant} intl={intl} type={type} position={'left'} variant={'residential'} />)
+      wrapper.find('button').first().simulate('click')
+      expect(setBuildingVariant).toHaveBeenCalledTimes(1)
+      expect(setBuildingVariant).toHaveBeenCalledWith('left', 'waterfront')
+    })
+    it('renders left building correctly', () => {
+      const wrapper = shallow(<Variants intl={intl} type={type} position={'left'} variant={'residential'} />)
+      expect(wrapper).toMatchSnapshot()
+    })
+  })
+  describe('INFO_BUBBLE_TYPE_RIGHT_BUILDING', () => {
+    const type = INFO_BUBBLE_TYPE_RIGHT_BUILDING
+    it('onClick calls setBuildingVariant', () => {
+      const setBuildingVariant = jest.fn()
+      const wrapper = shallow(<Variants setBuildingVariant={setBuildingVariant} intl={intl} type={type} position={'right'} variant={'residential'} />)
+      wrapper.find('button').first().simulate('click')
+      expect(setBuildingVariant).toHaveBeenCalledTimes(1)
+      expect(setBuildingVariant).toHaveBeenCalledWith('right', 'waterfront')
+    })
+    it('renders left building correctly', () => {
+      const wrapper = shallow(<Variants intl={intl} type={type} position={'right'} variant={'residential'} />)
+      expect(wrapper).toMatchSnapshot()
+    })
+  })
+  describe('flag', () => {
+    let segment
+    beforeEach(() => {
+      segment = { variants: ['building-z', 'waterfront'] } // coming from info.json
+      getSegmentInfo.mockImplementation(() => segment)
+    })
+    const type = INFO_BUBBLE_TYPE_SEGMENT
+    const streetSegment = { variantString: 'inbound|regular', segmentType: 'streetcar' }
+    const flags = { 'flag': { value: 't' } }
+    it('renders with flag correctly', () => {
+      const wrapper = shallow(<Variants intl={intl} type={type} position={0} variant={streetSegment.variantString} segmentType={streetSegment.segmentType} flags={flags} />)
+      expect(wrapper).toMatchSnapshot()
+    })
+  })
+})

assets/scripts/info_bubble/__tests__/__snapshots__/Variants.test.js.snap

@@ -0,0 +1,147 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Variants INFO_BUBBLE_TYPE_LEFT_BUILDING renders left building correctly 1`] = `
+<div
+  className="variants"
+>
+  <button
+    disabled={false}
+    key="building.waterfront"
+    onClick={[Function]}
+    title="Waterfront"
+  >
+    <svg
+      className="icon"
+      style={
+        Object {
+          "fill": "#ff0",
+        }
+      }
+      xmlns="http://www.w3.org/1999/svg"
+      xmlnsXlink="http://www.w3.org/1999/xlink"
+    >
+      <use
+        xlinkHref="#icon-waterfront"
+      />
+    </svg>
+  </button>
+</div>
+`;
+
+exports[`Variants INFO_BUBBLE_TYPE_RIGHT_BUILDING renders left building correctly 1`] = `
+<div
+  className="variants"
+>
+  <button
+    disabled={false}
+    key="building.waterfront"
+    onClick={[Function]}
+    title="Waterfront"
+  >
+    <svg
+      className="icon"
+      style={
+        Object {
+          "fill": "#ff0",
+        }
+      }
+      xmlns="http://www.w3.org/1999/svg"
+      xmlnsXlink="http://www.w3.org/1999/xlink"
+    >
+      <use
+        xlinkHref="#icon-waterfront"
+      />
+    </svg>
+  </button>
+</div>
+`;
+
+exports[`Variants INFO_BUBBLE_TYPE_SEGMENT renders segment type correctly 1`] = `
+<div
+  className="variants"
+>
+  <button
+    disabled={true}
+    key="direction.inbound"
+    onClick={[Function]}
+    title="Inbound"
+  >
+    <svg
+      className="icon"
+      style={null}
+      xmlns="http://www.w3.org/1999/svg"
+      xmlnsXlink="http://www.w3.org/1999/xlink"
+    >
+      <use
+        xlinkHref="#icon-direction-inbound"
+      />
+    </svg>
+  </button>
+  <button
+    disabled={false}
+    key="direction.outbound"
+    onClick={[Function]}
+    title="Outbound"
+  >
+    <svg
+      className="icon"
+      style={null}
+      xmlns="http://www.w3.org/1999/svg"
+      xmlnsXlink="http://www.w3.org/1999/xlink"
+    >
+      <use
+        xlinkHref="#icon-direction-outbound"
+      />
+    </svg>
+  </button>
+  <button
+    disabled={false}
+    key="direction.empty"
+    onClick={[Function]}
+    title="No one"
+  >
+    <svg
+      className="icon"
+      style={null}
+      xmlns="http://www.w3.org/1999/svg"
+      xmlnsXlink="http://www.w3.org/1999/xlink"
+    >
+      <use
+        xlinkHref="#icon-"
+      />
+    </svg>
+  </button>
+  <hr
+    key="public-transit-asphalt"
+  />
+</div>
+`;
+
+exports[`Variants does not render component 1`] = `""`;
+
+exports[`Variants flag renders with flag correctly 1`] = `
+<div
+  className="variants"
+>
+  <button
+    disabled={false}
+    key="building-z.waterfront"
+    onClick={[Function]}
+    title="Waterfront"
+  >
+    <svg
+      className="icon"
+      style={null}
+      xmlns="http://www.w3.org/1999/svg"
+      xmlnsXlink="http://www.w3.org/1999/xlink"
+    >
+      <use
+        xlinkHref="#icon-waterfront"
+      />
+    </svg>
+  </button>
+  <hr
+    key="waterfront"
+  />
+</div>
+`;

assets/scripts/segments/__mocks__/variant_icons.json

@@ -0,0 +1,30 @@
+{
+  "building": {
+    "waterfront": {
+      "id": "waterfront",
+      "title": "Waterfront",
+      "color": "#ff0"
+    }
+  },
+  "direction": {
+    "inbound": {
+      "id": "direction-inbound",
+      "title": "Inbound"
+    },
+    "outbound": {
+      "id": "direction-outbound",
+      "title": "Outbound"
+    },
+    "empty": {
+      "id": "",
+      "title": "No one"
+    }
+  },
+  "building-z": {
+    "waterfront": {
+      "id": "waterfront",
+      "title": "Waterfront",
+      "enableWithFlag": "flag"
+    }
+  }
+}