Skip to content

Commit

Permalink
Merge pull request #300 from flacoman91/more-less-toggle
Browse files Browse the repository at this point in the history 
Fixing show more less under row charts
  • Loading branch information
@sephcoster
sephcoster authored Jul 8, 2020
2 parents 7bb8c72 + 22219f1 commit 1c6b63e
Show file tree
Hide file tree
Showing 3 changed files with 70 additions and 21 deletions.
38 changes: 31 additions & 7 deletions src/components/Trends/TrendDepthToggle.jsx
View file
Original file line number Diff line number Diff line change
@@ -1,19 +1,35 @@
/* eslint complexity: ["error", 5] */
import './TrendDepthToggle.less'
import { changeDepth, resetDepth } from '../../actions/trends'
import { clamp, coalesce } from '../../utils'
import { connect } from 'react-redux'
import React from 'react'
import { SLUG_SEPARATOR } from '../../constants'

const maxRows = 5

export class TrendDepthToggle extends React.Component {

_showMore() {
const { queryCount, resultCount } = this.props
// scenarios where we want to show more:
// you have less visible rows that the max (5)
if ( resultCount <= maxRows ) {
return true
}
// or more filters count > max Rows and they aren't the same (visible)
return queryCount > maxRows && queryCount !== resultCount
}

render() {
const { diff, showToggle } = this.props
const { diff, increaseDepth, depthReset, showToggle } = this.props
if ( showToggle ) {
if ( diff > 0 ) {
if ( this._showMore() ) {
return <div className={ 'trend-depth-toggle' }>
<button className={ 'a-btn a-btn__link' }
id={ 'trend-depth-button' }
onClick={ () => {
this.props.increaseDepth( diff )
increaseDepth( diff )
} }>
<span className={ 'plus' }></span>
Show more
Expand All @@ -24,7 +40,7 @@ export class TrendDepthToggle extends React.Component {
<button className={ 'a-btn a-btn__link' }
id={ 'trend-depth-button' }
onClick={ () => {
this.props.resetDepth()
depthReset()
} }>
<span className={ 'minus' }></span>
Show less
Expand All @@ -40,7 +56,7 @@ export const mapDispatchToProps = dispatch => ( {
increaseDepth: diff => {
dispatch( changeDepth( diff + 5 ) )
},
resetDepth: () => {
depthReset: () => {
dispatch( resetDepth() )
}
} )
Expand All @@ -49,7 +65,8 @@ export const mapStateToProps = state => {
const { aggs, query, trends } = state
const { focus, lens } = query
const lensKey = lens.toLowerCase()

const resultCount = coalesce( trends.results, lensKey, [] )
.filter( o => o.isParent ).length
const lensResultLength = coalesce( trends.results, lensKey, [] )
.filter( o => o.visible ).length

Expand All @@ -61,9 +78,16 @@ export const mapStateToProps = state => {
totalResultsLength = clamp( coalesce( query, lensKey, [] ).length, 0, 10 )
}

// handle cases where some specified filters are selected
const queryCount = query[lensKey] ? query[lensKey]
.filter( o => o.indexOf( SLUG_SEPARATOR ) === -1 ).length :
totalResultsLength

return {
diff: totalResultsLength - lensResultLength,
showToggle: lensResultLength > 0 && !focus
resultCount,
queryCount,
showToggle: !focus && ( lensResultLength > 5 || queryCount > 5 )
}
}

Expand Down
51 changes: 38 additions & 13 deletions src/components/__tests__/TrendDepthToggle.spec.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -12,15 +12,17 @@ import { REQUERY_ALWAYS } from '../../constants'
import { shallow } from 'enzyme'
import thunk from 'redux-thunk'

function setupEnzyme( { cbIncrease, cbReset, diff } ) {
function setupEnzyme( { cbIncrease, cbReset, diff, queryCount, resultCount } ) {
return shallow( <TrendDepthToggle diff={ diff }
increaseDepth={ cbIncrease }
lens={ 'Product' }
resetDepth={ cbReset }
depthReset={ cbReset }
queryCount={ queryCount }
resultCount={ resultCount }
showToggle={ true }/> )
}

function setupSnapshot( { focus, lens, productAggs } ) {
function setupSnapshot( { focus, lens, productAggs, productResults } ) {
const middlewares = [ thunk ]
const mockStore = configureMockStore( middlewares )
const store = mockStore( {
Expand All @@ -33,11 +35,7 @@ function setupSnapshot( { focus, lens, productAggs } ) {
},
trends: {
results: {
product: [ { name: 'a', visible: true }, { name: 'b', visible: true },
{ name: 'c', visible: true }, { name: 'd', visible: true },
{ name: 'e', visible: true }, { name: 'f', visible: true },
{ name: 'g', visible: true }, { name: 'h', visible: true }
]
product: productResults
}
}
} )
Expand All @@ -58,7 +56,12 @@ describe( 'component:TrendDepthToggle', () => {
params = {
focus: '',
lens: '',
productAggs: [ 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11 ]
productAggs: [ 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11 ],
productResults: [ { name: 'a', visible: true }, { name: 'b', visible: true },
{ name: 'c', visible: true }, { name: 'd', visible: true },
{ name: 'e', visible: true }, { name: 'f', visible: true },
{ name: 'g', visible: true }, { name: 'h', visible: true }
]
}
} )

Expand All @@ -84,9 +87,19 @@ describe( 'component:TrendDepthToggle', () => {
expect( tree ).toMatchSnapshot()
} )

it( 'renders Product view fewer without crashing', () => {
it( 'renders Product view less without crashing', () => {
params.lens = 'Product'
params.productAggs = [ 1, 2, 3, 4, 5 ]
params.productResults = [
{ name: 'a', visible: true, isParent: true },
{ name: 'b', visible: true, isParent: true },
{ name: 'c', visible: true, isParent: true },
{ name: 'd', visible: true, isParent: true },
{ name: 'e', visible: true, isParent: true },
{ name: 'f', visible: true, isParent: true },
{ name: 'g', visible: true, isParent: true },
{ name: 'h', visible: true, isParent: true }
]
const target = setupSnapshot( params )
const tree = target.toJSON()
expect( tree ).toMatchSnapshot()
Expand All @@ -104,14 +117,20 @@ describe( 'component:TrendDepthToggle', () => {
} )

it( 'increaseDepth is called when the increase button is clicked', () => {
target = setupEnzyme( { cbIncrease, cbReset, diff: 1000 } )
target = setupEnzyme( { cbIncrease, cbReset, diff: 1000, resultCount: 5 } )
const prev = target.find( '#trend-depth-button' )
prev.simulate( 'click' )
expect( cbIncrease ).toHaveBeenCalledWith( 1000 )
} )

it( 'reset depth is called when the reset button is clicked', () => {
target = setupEnzyme( { cbIncrease, cbReset, diff: 0 } )
target = setupEnzyme( {
cbIncrease,
cbReset,
diff: 0,
queryCount: 10,
resultCount: 10
} )
const prev = target.find( '#trend-depth-button' )
prev.simulate( 'click' )
expect( cbReset ).toHaveBeenCalled()
Expand All @@ -133,7 +152,7 @@ describe( 'component:TrendDepthToggle', () => {

it( 'hooks into resetDepth', () => {
const dispatch = jest.fn()
mapDispatchToProps( dispatch ).resetDepth()
mapDispatchToProps( dispatch ).depthReset()
expect( dispatch.mock.calls ).toEqual( [
[ {
requery: REQUERY_ALWAYS,
Expand Down Expand Up @@ -170,6 +189,8 @@ describe( 'component:TrendDepthToggle', () => {
let actual = mapStateToProps( state )
expect( actual ).toEqual( {
diff: 3,
queryCount: 11,
resultCount: 0,
showToggle: true
} )
} )
Expand Down Expand Up @@ -204,6 +225,8 @@ describe( 'component:TrendDepthToggle', () => {
const actual = mapStateToProps( state )
expect( actual ).toEqual( {
diff: 0,
queryCount: 11,
resultCount: 0,
showToggle: true
} )
} )
Expand All @@ -214,6 +237,8 @@ describe( 'component:TrendDepthToggle', () => {
const actual = mapStateToProps( state )
expect( actual ).toEqual( {
diff: 5,
queryCount: 11,
resultCount: 0,
showToggle: true
} )
} )
Expand Down
2 changes: 1 addition & 1 deletion src/components/__tests__/__snapshots__/TrendDepthToggle.spec.jsx.snap
View file
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
// Jest Snapshot v1, https://goo.gl/fbAQLP

exports[`component:TrendDepthToggle renders Product view fewer without crashing 1`] = `
exports[`component:TrendDepthToggle renders Product view less without crashing 1`] = `
<div
className="trend-depth-toggle"
>
Expand Down

0 comments on commit 1c6b63e

Please sign in to comment.