diff --git a/src/__tests__/__snapshots__/App.spec.jsx.snap b/src/__tests__/__snapshots__/App.spec.jsx.snap index d291c4a91..5b8de34e7 100644 --- a/src/__tests__/__snapshots__/App.spec.jsx.snap +++ b/src/__tests__/__snapshots__/App.spec.jsx.snap @@ -1155,7 +1155,7 @@ exports[`initial state renders without crashing 1`] = ` className="h4 flex-all export-results" > @@ -43,7 +49,8 @@ export class ActionBar extends React.Component { ); } - _showPrintView() { + _showPrintView( tab ) { + sendAnalyticsEvent( 'Print', 'tab:' + tab ) const printUrl = window.location.href + '&printMode=true&fromExternal=true' window.location.assign( printUrl ) } @@ -53,11 +60,12 @@ export const mapStateToProps = state => ( { hits: state.aggs.total, printMode: state.view.printMode, total: state.aggs.doc_count, - view: state.query.tab + tab: state.query.tab } ) export const mapDispatchToProps = dispatch => ( { - onExportResults: () => { + onExportResults: tab => { + sendAnalyticsEvent( 'Export', tab + ':User Opens Export Modal' ) dispatch( showExportDialog() ) } } ) diff --git a/src/components/Charts/RowChart.jsx b/src/components/Charts/RowChart.jsx index feef5ba0a..7db855090 100644 --- a/src/components/Charts/RowChart.jsx +++ b/src/components/Charts/RowChart.jsx @@ -3,7 +3,9 @@ import './RowChart.less' import * as d3 from 'd3' import { changeFocus, collapseTrend, expandTrend } from '../../actions/trends' -import { cloneDeep, coalesce, getAllFilters, hashObject } from '../../utils' +import { + cloneDeep, coalesce, getAllFilters, hashObject, sendAnalyticsEvent +} from '../../utils' import { miniTooltip, row } from 'britecharts' import { connect } from 'react-redux' import { max } from 'd3-array' @@ -210,13 +212,15 @@ export const mapDispatchToProps = dispatch => ( { values = filterGroup ? getAllFilters( element.parent, filterGroup[keyName].buckets ) : [] } - + sendAnalyticsEvent( 'Trends click', element.parent ) dispatch( changeFocus( element.parent, lens, [ ...values ] ) ) }, collapseRow: rowName => { + sendAnalyticsEvent( 'Bar chart collapsed', rowName.trim() ) dispatch( collapseTrend( rowName.trim() ) ) }, expandRow: rowName => { + sendAnalyticsEvent( 'Bar chart expanded', rowName.trim() ) dispatch( expandTrend( rowName.trim() ) ) } } ) diff --git a/src/components/Charts/TileChartMap.jsx b/src/components/Charts/TileChartMap.jsx index 16eb47e38..1bb43c252 100644 --- a/src/components/Charts/TileChartMap.jsx +++ b/src/components/Charts/TileChartMap.jsx @@ -1,9 +1,8 @@ import './TileChartMap.less' import { addStateFilter, removeStateFilter } from '../../actions/map' import { GEO_NORM_NONE, STATE_DATA } from '../../constants' -import Analytics from '../../actions/analytics' +import { hashObject, sendAnalyticsEvent } from '../../utils' import { connect } from 'react-redux' -import { hashObject } from '../../utils' import React from 'react' import TileMap from './TileMap' @@ -147,17 +146,11 @@ export const mapStateToProps = state => { export const mapDispatchToProps = dispatch => ( { addState: selectedState => { - Analytics.sendEvent( - Analytics.getDataLayerOptions( 'State Event: add', - selectedState.abbr, ) - ) + sendAnalyticsEvent( 'State Event: add', selectedState.abbr ) dispatch( addStateFilter( selectedState ) ) }, removeState: selectedState => { - Analytics.sendEvent( - Analytics.getDataLayerOptions( 'State Event: remove', - selectedState.abbr ) - ) + sendAnalyticsEvent( 'State Event: remove', selectedState.abbr ) dispatch( removeStateFilter( selectedState ) ) } } ) diff --git a/src/components/Dialogs/DataExport.jsx b/src/components/Dialogs/DataExport.jsx index f312837f8..6688fe58b 100644 --- a/src/components/Dialogs/DataExport.jsx +++ b/src/components/Dialogs/DataExport.jsx @@ -1,5 +1,5 @@ import './DataExport.less' -import { bindAll, getFullUrl } from '../../utils' +import { bindAll, getFullUrl, sendAnalyticsEvent } from '../../utils' import { buildAllResultsUri, buildSomeResultsUri, exportAllResults, exportSomeResults } from '../../actions/dataExport' @@ -146,9 +146,10 @@ export class DataExport extends React.Component { _exportClicked() { if ( this.state.dataset === 'full' ) { - this.props.exportAll( this.state.format ) + this.props.exportAll( this.state.format, this.props.tab ) } else { - this.props.exportSome( this.state.format, this.props.someComplaints ) + this.props.exportSome( this.state.format, this.props.someComplaints, + this.props.tab ) } this.setState( { mode: NOTIFYING } ) @@ -343,16 +344,23 @@ export const mapStateToProps = state => { return { allComplaints, - someComplaints, queryState: { ...state.query - } + }, + someComplaints, + tab: state.query.tab } } export const mapDispatchToProps = dispatch => ( { - exportAll: format => dispatch( exportAllResults( format ) ), - exportSome: ( format, size ) => dispatch( exportSomeResults( format, size ) ) + exportAll: ( format, tab ) => { + sendAnalyticsEvent( 'Export All Data', tab + ':' + format ) + dispatch( exportAllResults( format ) ) + }, + exportSome: ( format, size, tab ) => { + sendAnalyticsEvent( 'Export Some Data', tab + ':' + format ) + dispatch( exportSomeResults( format, size ) ) + } } ) export default connect( mapStateToProps, mapDispatchToProps )( DataExport ) diff --git a/src/components/Dialogs/RootModal.jsx b/src/components/Dialogs/RootModal.jsx index 5873de273..809509993 100644 --- a/src/components/Dialogs/RootModal.jsx +++ b/src/components/Dialogs/RootModal.jsx @@ -22,7 +22,8 @@ export const RootModal = ( { modalType, modalProps, onClose } ) => { const SpecificModal = MODAL_COMPONENTS[modalType] return ( - { ) } - return + return + } export const mapDispatchToProps = dispatch => ( { diff --git a/src/components/Dialogs/__tests__/DataExport.spec.jsx b/src/components/Dialogs/__tests__/DataExport.spec.jsx index eccfb0fa3..b248111f4 100644 --- a/src/components/Dialogs/__tests__/DataExport.spec.jsx +++ b/src/components/Dialogs/__tests__/DataExport.spec.jsx @@ -8,6 +8,7 @@ import renderer from 'react-test-renderer' import configureMockStore from 'redux-mock-store' import thunk from 'redux-thunk' import ReduxDataExport, { DataExport, mapDispatchToProps } from '../DataExport' +import * as utils from '../../../utils' const mockDataExportActions = require('../../../actions/dataExport') @@ -36,6 +37,9 @@ function setupSnapshot(total=1001) { doc_count: 9999, total }, + query: { + tab: 'foo' + } }) return renderer.create( @@ -196,18 +200,26 @@ describe('component::DataExport', () => { } ); } ); - describe('mapDispatchToProps', () => { - - it('provides a way to call exportAllResults', () => { - const dispatch = jest.fn() - mapDispatchToProps(dispatch).exportAll('json') - expect(dispatch.mock.calls.length).toEqual(1) - }) - - it('provides a way to call exportSomeResults', () => { - const dispatch = jest.fn() - mapDispatchToProps(dispatch).exportSome('csv', 1300) - expect(dispatch.mock.calls.length).toEqual(1) - }) - }) + describe( 'mapDispatchToProps', () => { + let dispatch, gaSpy + beforeEach( () => { + dispatch = jest.fn() + gaSpy = jest.spyOn( utils, 'sendAnalyticsEvent' ) + } ) + + afterEach( () => { + jest.clearAllMocks() + } ) + it( 'provides a way to call exportAllResults', () => { + mapDispatchToProps( dispatch ).exportAll( 'json', 'mytab' ) + expect( dispatch.mock.calls.length ).toEqual( 1 ) + expect( gaSpy ).toHaveBeenCalledWith( 'Export All Data', 'mytab:json' ) + } ) + + it( 'provides a way to call exportSomeResults', () => { + mapDispatchToProps( dispatch ).exportSome( 'csv', 1300, 'atab' ) + expect( dispatch.mock.calls.length ).toEqual( 1 ) + expect( gaSpy ).toHaveBeenCalledWith( 'Export Some Data', 'atab:csv' ) + } ) + } ) }) diff --git a/src/components/List/ListPanel.jsx b/src/components/List/ListPanel.jsx index 951759acb..8591bbc10 100644 --- a/src/components/List/ListPanel.jsx +++ b/src/components/List/ListPanel.jsx @@ -12,6 +12,7 @@ import Loading from '../Dialogs/Loading' import Pagination from './Pagination' import React from 'react' import { Select } from '../RefineBar/Select' +import { sendAnalyticsEvent } from '../../utils' import { Separator } from '../RefineBar/Separator' import StaleDataWarnings from '../Warnings/StaleDataWarnings' @@ -116,10 +117,13 @@ const mapStateToProps = state => ( { export const mapDispatchToProps = dispatch => ( { onSize: ev => { const iSize = parseInt( ev.target.value, 10 ) + sendAnalyticsEvent( 'Dropdown', iSize + ' results' ) dispatch( changeSize( iSize ) ) }, onSort: ev => { - dispatch( changeSort( ev.target.value ) ) + const { value } = ev.target + sendAnalyticsEvent( 'Dropdown', sorts[value] ) + dispatch( changeSort( value ) ) } } ) diff --git a/src/components/RefineBar/ChartToggles.jsx b/src/components/RefineBar/ChartToggles.jsx index 3b8efb2b5..c587eebdd 100644 --- a/src/components/RefineBar/ChartToggles.jsx +++ b/src/components/RefineBar/ChartToggles.jsx @@ -3,6 +3,7 @@ import { changeChartType } from '../../actions/trends' import { connect } from 'react-redux' import iconMap from '../iconMap' import React from 'react' +import { sendAnalyticsEvent } from '../../utils' export class ChartToggles extends React.Component { _toggleChartType( chartType ) { @@ -40,6 +41,7 @@ export const mapStateToProps = state => ( { export const mapDispatchToProps = dispatch => ( { toggleChartType: chartType => { + sendAnalyticsEvent( 'Button', 'Trends:' + chartType ) dispatch( changeChartType( chartType ) ) } } ) diff --git a/src/components/RefineBar/DateRanges.jsx b/src/components/RefineBar/DateRanges.jsx index 7b4610098..f04ac2aca 100644 --- a/src/components/RefineBar/DateRanges.jsx +++ b/src/components/RefineBar/DateRanges.jsx @@ -3,13 +3,9 @@ import { connect } from 'react-redux' import { dateRanges } from '../../constants' import { dateRangeToggled } from '../../actions/filter' import React from 'react' - +import { sendAnalyticsEvent } from '../../utils' export class DateRanges extends React.Component { - _setDateRange( page ) { - this.props.toggleDateRange( page ) - } - _btnClassName( dateRange ) { const classes = [ 'a-btn', 'date-selector', 'range-' + dateRange ] if ( dateRange === this.props.dateRange ) { @@ -23,7 +19,9 @@ export class DateRanges extends React.Component {

Date range (Click to modify range)

{ dateRanges.map( dateRange => -
diff --git a/src/components/TabbedNavigation.less b/src/components/TabbedNavigation.less index 95c1f9b90..406bc19ef 100644 --- a/src/components/TabbedNavigation.less +++ b/src/components/TabbedNavigation.less @@ -1,7 +1,6 @@ @import (less) "../css/base.less"; .tabbed-navigation { - margin-top: @gutter-normal; background: @gray-5; section { padding-left: 10px; diff --git a/src/components/Trends/LensTabs.jsx b/src/components/Trends/LensTabs.jsx index 6ef245a38..15c4e84fb 100644 --- a/src/components/Trends/LensTabs.jsx +++ b/src/components/Trends/LensTabs.jsx @@ -3,6 +3,7 @@ import { changeDataSubLens } from '../../actions/trends' import { connect } from 'react-redux' import PropTypes from 'prop-types' import React from 'react' +import { sendAnalyticsEvent } from '../../utils' const lensMaps = { Company: { @@ -15,10 +16,6 @@ const lensMaps = { } export class LensTabs extends React.Component { - _setTab( tab ) { - this.props.onTab( tab ) - } - _getTabClass( tab ) { tab = tab.toLowerCase() const classes = [ 'tab', tab ] @@ -42,14 +39,18 @@ export class LensTabs extends React.Component { { showProductTab && } { lensMaps[lens].tab2 && } @@ -80,7 +81,15 @@ export const mapStateToProps = state => { } export const mapDispatchToProps = dispatch => ( { - onTab: tab => { + onTab: ( lens, tab ) => { + const labelMap = { + // eslint-disable-next-line camelcase + sub_product: 'Sub-products', + issue: 'Issues', + product: 'Products' + } + + sendAnalyticsEvent( 'Button', lens + ':' + labelMap[tab] ) dispatch( changeDataSubLens( tab.toLowerCase() ) ) } } ) diff --git a/src/components/Trends/TrendsPanel.jsx b/src/components/Trends/TrendsPanel.jsx index 039cead04..af4cc5ba9 100644 --- a/src/components/Trends/TrendsPanel.jsx +++ b/src/components/Trends/TrendsPanel.jsx @@ -2,9 +2,9 @@ import '../RefineBar/RefineBar.less' import './TrendsPanel.less' -import { changeChartType, changeDataLens } from '../../actions/trends' import { getIntervals, showCompanyOverLay } from '../../utils/trends' import ActionBar from '../ActionBar' +import { changeDataLens } from '../../actions/trends' import { changeDateInterval } from '../../actions/filter' import ChartToggles from '../RefineBar/ChartToggles' import CompanyTypeahead from '../Filters/CompanyTypeahead' @@ -22,6 +22,7 @@ import { processRows } from '../../utils/chart' import React from 'react' import RowChart from '../Charts/RowChart' import Select from '../RefineBar/Select' +import { sendAnalyticsEvent } from '../../utils' import Separator from '../RefineBar/Separator' import StackedAreaChart from '../Charts/StackedAreaChart' import TrendDepthToggle from './TrendDepthToggle' @@ -270,19 +271,19 @@ const mapStateToProps = state => { } export const mapDispatchToProps = dispatch => ( { - onChartType: ev => { - dispatch( changeChartType( ev.target.value ) ) - }, onDismissWarning: () => { dispatch( trendsDateWarningDismissed() ) }, onInterval: ev => { - dispatch( changeDateInterval( ev.target.value ) ) + const { value } = ev.target + sendAnalyticsEvent( 'Dropdown', 'Trends:' + value ) + dispatch( changeDateInterval( value ) ) }, onLens: ev => { - dispatch( changeDataLens( ev.target.value ) ) + const { value } = ev.target + sendAnalyticsEvent( 'Dropdown', 'Trends:' + value ) + dispatch( changeDataLens( value ) ) } - } ) export default connect( mapStateToProps, mapDispatchToProps )( TrendsPanel ) diff --git a/src/components/__tests__/ActionBar.spec.jsx b/src/components/__tests__/ActionBar.spec.jsx index 38a4d6106..ff092a2de 100644 --- a/src/components/__tests__/ActionBar.spec.jsx +++ b/src/components/__tests__/ActionBar.spec.jsx @@ -3,6 +3,7 @@ import { IntlProvider } from 'react-intl'; import { ActionBar, mapDispatchToProps } from '../ActionBar'; import renderer from 'react-test-renderer'; import { shallow } from 'enzyme' +import * as utils from '../../utils' describe('initial state', () => { it('renders without crashing', () => { @@ -16,9 +17,26 @@ describe('initial state', () => { expect(tree).toMatchSnapshot(); }); + describe( 'export button', () => { + it( 'clicks the button', () => { + const props = { + hits: 100, + onExportResults: jest.fn(), + tab: 'Pepsi-free', + total: 100 + } + const target = shallow( ) + const button = target.find( '.export-btn' ) + button.simulate( 'click' ) + expect( props.onExportResults ).toHaveBeenCalledWith( 'Pepsi-free' ) + } ) + } ) + describe('print-friendly view', ()=>{ const { location } = window + let gaSpy beforeEach(()=>{ + gaSpy = spyOn( utils, 'sendAnalyticsEvent' ) delete window.location // provide an empty implementation for window.assign window.location = { @@ -34,6 +52,7 @@ describe('initial state', () => { const props = { hits: 100, onExportResults: jest.fn(), + tab: 'Pepsi', total: 100 } const target = shallow() @@ -42,15 +61,19 @@ describe('initial state', () => { expect( window.location.assign ) .toHaveBeenCalledWith( 'http://ccdb-website.gov&printMode=true&' + 'fromExternal=true' ) + expect( gaSpy ).toHaveBeenCalledWith( 'Print', 'tab:Pepsi' ) } ) }) - describe('mapDispatchToProps', () => { - it('hooks into onExportResults', () => { - const dispatch = jest.fn(); - mapDispatchToProps(dispatch).onExportResults(); - expect(dispatch.mock.calls.length).toEqual(1); - }) - }) + describe( 'mapDispatchToProps', () => { + it( 'hooks into onExportResults', () => { + const dispatch = jest.fn() + const gaSpy = spyOn( utils, 'sendAnalyticsEvent' ) + mapDispatchToProps( dispatch ).onExportResults( 'foo-bar' ) + expect( dispatch.mock.calls.length ).toEqual( 1 ) + expect( gaSpy ) + .toHaveBeenCalledWith( 'Export', 'foo-bar:User Opens Export Modal' ) + } ) + } ) }); diff --git a/src/components/__tests__/DateRanges.spec.jsx b/src/components/__tests__/DateRanges.spec.jsx index e043b65e3..6f20bdf78 100644 --- a/src/components/__tests__/DateRanges.spec.jsx +++ b/src/components/__tests__/DateRanges.spec.jsx @@ -5,6 +5,7 @@ import { import { Provider } from 'react-redux' import React from 'react' import renderer from 'react-test-renderer' +import * as utils from '../../utils' import { shallow } from 'enzyme' import thunk from 'redux-thunk' @@ -38,23 +39,28 @@ describe( 'component: DateRanges', () => { beforeEach( () => { cb = jest.fn() - target = shallow( ) + target = shallow( ) } ) it( 'toggleDateRange is called the button is clicked', () => { const prev = target.find( '.date-ranges .range-3m' ) prev.simulate( 'click' ) - expect( cb ).toHaveBeenCalledWith('3m') + expect( cb ).toHaveBeenCalledWith( '3m', 'foo' ) } ) }) describe('mapDispatchToProps', () => { - it('provides a way to call toggleDateRange', () => { + let gaSpy + beforeEach( () => { + gaSpy = jest.spyOn( utils, 'sendAnalyticsEvent' ) + } ) + it( 'provides a way to call toggleDateRange', () => { const dispatch = jest.fn() - mapDispatchToProps(dispatch).toggleDateRange() - expect(dispatch.mock.calls.length).toEqual(1) - }) + mapDispatchToProps( dispatch ).toggleDateRange( 'Foo', 'Bar' ) + expect( dispatch.mock.calls.length ).toEqual( 1 ) + expect( gaSpy ).toHaveBeenCalledWith( 'Button', 'Bar:Foo' ) + } ) }) describe( 'mapStateToProps', () => { diff --git a/src/components/__tests__/LensTabs.spec.jsx b/src/components/__tests__/LensTabs.spec.jsx index 565510407..d16cb46fa 100644 --- a/src/components/__tests__/LensTabs.spec.jsx +++ b/src/components/__tests__/LensTabs.spec.jsx @@ -11,6 +11,7 @@ import renderer from 'react-test-renderer' import { REQUERY_ALWAYS } from '../../constants' import thunk from 'redux-thunk' import { shallow } from 'enzyme' +import * as utils from '../../utils' function setupSnapshot( { focus, lens, results } ) { const middlewares = [ thunk ] @@ -100,27 +101,29 @@ describe( 'component:LensTabs', () => { it( 'tabChanged is called with Product when the button is clicked', () => { const prev = target.find( '.tabbed-navigation button.sub_product' ) prev.simulate( 'click' ) - expect( cb ).toHaveBeenCalledWith( 'sub_product' ) + expect( cb ).toHaveBeenCalledWith( 'Product', 'sub_product' ) } ) it( 'tabChanged is called with Issue when the button is clicked', () => { const prev = target.find( '.tabbed-navigation button.issue' ) prev.simulate( 'click' ) - expect( cb ).toHaveBeenCalledWith( 'issue' ) + expect( cb ).toHaveBeenCalledWith( 'Product', 'issue' ) } ) } ) describe( 'mapDispatchToProps', () => { it( 'hooks into changeDataSubLens', () => { const dispatch = jest.fn() - mapDispatchToProps( dispatch ).onTab( 'What' ) + const gaSpy = spyOn( utils, 'sendAnalyticsEvent' ) + mapDispatchToProps( dispatch ).onTab( 'Some Lens', 'product' ) expect( dispatch.mock.calls ).toEqual( [ [ { requery: REQUERY_ALWAYS, - subLens: 'what', + subLens: 'product', type: 'DATA_SUBLENS_CHANGED' } ] ] ) + expect( gaSpy ).toHaveBeenCalledWith( 'Button', 'Some Lens:Products' ) } ) } ) diff --git a/src/components/__tests__/ListPanel.spec.jsx b/src/components/__tests__/ListPanel.spec.jsx index 53cbca135..23105c1ba 100644 --- a/src/components/__tests__/ListPanel.spec.jsx +++ b/src/components/__tests__/ListPanel.spec.jsx @@ -5,6 +5,7 @@ import { Provider } from 'react-redux' import React from 'react'; import thunk from 'redux-thunk' import renderer from 'react-test-renderer'; +import * as utils from '../../utils' const fixture = [ { @@ -140,17 +141,27 @@ describe('component:ListPanel', () => { expect(tree).toMatchSnapshot(); }) - describe('mapDispatchToProps', () => { - it('hooks into onSize', () => { - const dispatch = jest.fn(); - mapDispatchToProps(dispatch).onSize({target: { value: '50' }}); - expect(dispatch.mock.calls.length).toEqual(1); - }) + describe( 'mapDispatchToProps', () => { + let dispatch, gaSpy + beforeEach( () => { + dispatch = jest.fn() + gaSpy = jest.spyOn( utils, 'sendAnalyticsEvent' ) + } ) - it('hooks into onSort', () => { - const dispatch = jest.fn(); - mapDispatchToProps(dispatch).onSort({target: { value: 'foo' }}); - expect(dispatch.mock.calls.length).toEqual(1); - }) - }) -}) + afterEach( () => { + jest.clearAllMocks() + } ) + + it( 'hooks into onSize', () => { + mapDispatchToProps( dispatch ).onSize( { target: { value: '50' } } ) + expect( dispatch.mock.calls.length ).toEqual( 1 ) + expect( gaSpy ).toHaveBeenCalledWith( 'Dropdown', '50 results' ) + } ) + + it( 'hooks into onSort', () => { + mapDispatchToProps( dispatch ).onSort( { target: { value: 'created_date_desc' } } ) + expect( dispatch.mock.calls.length ).toEqual( 1 ) + expect( gaSpy ).toHaveBeenCalledWith( 'Dropdown', 'Newest to oldest' ) + } ) + } ) +} ) diff --git a/src/components/__tests__/RowChart.spec.jsx b/src/components/__tests__/RowChart.spec.jsx index ab679efde..9d6ab958c 100644 --- a/src/components/__tests__/RowChart.spec.jsx +++ b/src/components/__tests__/RowChart.spec.jsx @@ -10,7 +10,7 @@ import { Provider } from 'react-redux' import React from 'react' import renderer from 'react-test-renderer' import thunk from 'redux-thunk' -import { SLUG_SEPARATOR } from '../../constants' +import * as utils from '../../utils' // this is how you override and mock an imported constructor jest.mock( 'britecharts', () => { @@ -269,9 +269,10 @@ describe( 'component: RowChart', () => { } ) describe( 'mapDispatchToProps', () => { - let dispatch + let dispatch, gaSpy beforeEach( () => { dispatch = jest.fn() + gaSpy = spyOn( utils, 'sendAnalyticsEvent' ) } ) afterEach( () => { @@ -319,6 +320,7 @@ describe( 'component: RowChart', () => { type: 'FOCUS_CHANGED' } ] ] ) expect( trendsUtils.scrollToFocus ).toHaveBeenCalled() + expect( gaSpy ).toHaveBeenCalledWith( 'Trends click', 'A' ) } ) it( 'hooks into changeFocus - no filter found', () => { @@ -352,6 +354,7 @@ describe( 'component: RowChart', () => { type: 'FOCUS_CHANGED' } ] ] ) expect( trendsUtils.scrollToFocus ).toHaveBeenCalled() + expect( gaSpy ).toHaveBeenCalledWith( 'Trends click', 'A' ) } ) it( 'hooks into changeFocus - Company', () => { @@ -375,6 +378,7 @@ describe( 'component: RowChart', () => { type: 'FOCUS_CHANGED' } ] ] ) expect( trendsUtils.scrollToFocus ).toHaveBeenCalled() + expect( gaSpy ).toHaveBeenCalledWith( 'Trends click', 'Acme' ) } ) it( 'hooks into collapseTrend', () => { @@ -386,6 +390,8 @@ describe( 'component: RowChart', () => { value: 'Some Expanded row' } ] ] ) expect( trendsUtils.scrollToFocus ).not.toHaveBeenCalled() + expect( gaSpy ).toHaveBeenCalledWith( 'Bar chart collapsed', + 'Some Expanded row' ) } ) it( 'hooks into expandTrend', () => { @@ -397,6 +403,8 @@ describe( 'component: RowChart', () => { value: 'collapse row name' } ] ] ) expect( trendsUtils.scrollToFocus ).not.toHaveBeenCalled() + expect( gaSpy ).toHaveBeenCalledWith( 'Bar chart expanded', + 'collapse row name' ) } ) } ) diff --git a/src/components/__tests__/TileChartMap.spec.jsx b/src/components/__tests__/TileChartMap.spec.jsx index 7e8200c10..912291ed5 100644 --- a/src/components/__tests__/TileChartMap.spec.jsx +++ b/src/components/__tests__/TileChartMap.spec.jsx @@ -2,15 +2,14 @@ import configureMockStore from 'redux-mock-store' import { mapDispatchToProps, mapStateToProps, TileChartMap } from '../Charts/TileChartMap' -import Analytics from '../../actions/analytics' import { Provider } from 'react-redux' import React from 'react' import renderer from 'react-test-renderer' import { shallow } from 'enzyme' import thunk from 'redux-thunk' import TileMap from '../Charts/TileMap' +import * as utils from '../../utils' -jest.mock( '../../actions/analytics' ) jest.mock( '../Charts/TileMap' ) function setupSnapshot() { @@ -29,7 +28,6 @@ function setupSnapshot() { describe( 'component: TileChartMap', () => { let mapDiv, redrawSpy, target - let actionMock = jest.fn() describe( 'initial state', () => { beforeEach( () => { jest.clearAllMocks() @@ -134,30 +132,24 @@ describe( 'component: TileChartMap', () => { } ) describe( 'mapDispatchToProps', () => { - let dispatch + let dispatch, gaSpy beforeEach( () => { jest.clearAllMocks() dispatch = jest.fn() - Analytics.getDataLayerOptions = jest.fn() - Analytics.sendEvent = jest.fn() - + gaSpy = jest.spyOn( utils, 'sendAnalyticsEvent' ) } ) it( 'provides a way to call addState', () => { mapDispatchToProps( dispatch ) .addState( { abbr: 'foo', name: 'bar' } ) expect( dispatch.mock.calls.length ).toEqual( 1 ) - expect( Analytics.getDataLayerOptions ) - .toHaveBeenCalledWith( 'State Event: add', 'foo' ) - expect( Analytics.sendEvent ).toHaveBeenCalled() + expect( gaSpy ).toHaveBeenCalledWith( 'State Event: add', 'foo' ) } ) it( 'provides a way to call removeState', () => { mapDispatchToProps( dispatch ) .removeState( { abbr: 'foo', name: 'bar' } ) expect( dispatch.mock.calls.length ).toEqual( 1 ) - expect( Analytics.getDataLayerOptions ) - .toHaveBeenCalledWith( 'State Event: remove', 'foo' ) - expect( Analytics.sendEvent ).toHaveBeenCalled() + expect( gaSpy ).toHaveBeenCalledWith( 'State Event: remove', 'foo' ) } ) } ) diff --git a/src/components/__tests__/TrendsPanel.spec.jsx b/src/components/__tests__/TrendsPanel.spec.jsx index 8bd549827..0988760ac 100644 --- a/src/components/__tests__/TrendsPanel.spec.jsx +++ b/src/components/__tests__/TrendsPanel.spec.jsx @@ -10,6 +10,7 @@ import React from 'react' import renderer from 'react-test-renderer' import { shallow } from 'enzyme' import thunk from 'redux-thunk' +import * as utils from '../../utils' jest.mock( 'britecharts', () => { const props = [ @@ -264,39 +265,38 @@ describe( 'component:TrendsPanel', () => { } ) describe( 'mapDispatchToProps', () => { - it( 'hooks into changeChartType', () => { - const dispatch = jest.fn() - mapDispatchToProps( dispatch ) - .onChartType( { - target: { - value: 'foo' - } - } ) - expect( dispatch.mock.calls.length ).toEqual( 1 ) + let dispatch, gaSpy + beforeEach(()=>{ + dispatch = jest.fn() + gaSpy = spyOn( utils, 'sendAnalyticsEvent' ) + }) + + afterEach( () => { + jest.clearAllMocks() } ) + it( 'hooks into changeDateInterval', () => { - const dispatch = jest.fn() mapDispatchToProps( dispatch ) .onInterval( { target: { - value: 'foo' + value: 'foo date' } } ) expect( dispatch.mock.calls.length ).toEqual( 1 ) + expect( gaSpy ).toHaveBeenCalledWith( 'Dropdown', 'Trends:foo date' ) } ) it( 'hooks into changeDataLens', () => { - const dispatch = jest.fn() mapDispatchToProps( dispatch ) .onLens( { target: { - value: 'foo' + value: 'foo lens' } } ) expect( dispatch.mock.calls.length ).toEqual( 1 ) + expect( gaSpy ).toHaveBeenCalledWith( 'Dropdown', 'Trends:foo lens' ) } ) it( 'hooks into dismissWarning', () => { - const dispatch = jest.fn() mapDispatchToProps( dispatch ).onDismissWarning() expect( dispatch.mock.calls ).toEqual( [ [ { diff --git a/src/components/__tests__/__snapshots__/ActionBar.spec.jsx.snap b/src/components/__tests__/__snapshots__/ActionBar.spec.jsx.snap index df9d68c65..26ebf69a5 100644 --- a/src/components/__tests__/__snapshots__/ActionBar.spec.jsx.snap +++ b/src/components/__tests__/__snapshots__/ActionBar.spec.jsx.snap @@ -24,8 +24,9 @@ exports[`initial state renders without crashing 1`] = ` className="h4 flex-all export-results" > diff --git a/src/components/__tests__/__snapshots__/ListPanel.spec.jsx.snap b/src/components/__tests__/__snapshots__/ListPanel.spec.jsx.snap index 1f9e63c60..5c571e2a9 100644 --- a/src/components/__tests__/__snapshots__/ListPanel.spec.jsx.snap +++ b/src/components/__tests__/__snapshots__/ListPanel.spec.jsx.snap @@ -27,7 +27,7 @@ exports[`component:ListPanel displays a message when an error has occurred 1`] = className="h4 flex-all export-results" >