From 824ad6bd9908b90d1d83aa2bd87efea2b7dd3928 Mon Sep 17 00:00:00 2001
From: Richard Dinh <richard.dinh@cfpb.gov>
Date: Wed, 8 Jul 2020 09:52:22 -0400
Subject: [PATCH 1/2] save work

eslint complexity nags

update test and snapshots

props es6
---
 src/components/Trends/TrendDepthToggle.jsx    | 36 +++++++++++---
 .../__tests__/TrendDepthToggle.spec.jsx       | 47 ++++++++++++++-----
 .../TrendDepthToggle.spec.jsx.snap            |  2 +-
 3 files changed, 67 insertions(+), 18 deletions(-)

diff --git a/src/components/Trends/TrendDepthToggle.jsx b/src/components/Trends/TrendDepthToggle.jsx
index 8fbd17f76..36575d0e7 100644
--- a/src/components/Trends/TrendDepthToggle.jsx
+++ b/src/components/Trends/TrendDepthToggle.jsx
@@ -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, resetDepth, 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
@@ -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()
+                  resetDepth()
                 } }>
           <span className={ 'minus' }></span>
           Show less
@@ -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
 
@@ -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 )
   }
 }
 
diff --git a/src/components/__tests__/TrendDepthToggle.spec.jsx b/src/components/__tests__/TrendDepthToggle.spec.jsx
index eeb7eee1f..ec2b35020 100644
--- a/src/components/__tests__/TrendDepthToggle.spec.jsx
+++ b/src/components/__tests__/TrendDepthToggle.spec.jsx
@@ -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 }
+                                    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( {
@@ -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
       }
     }
   } )
@@ -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 }
+      ]
     }
   } )
 
@@ -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()
@@ -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()
@@ -170,6 +189,8 @@ describe( 'component:TrendDepthToggle', () => {
       let actual = mapStateToProps( state )
       expect( actual ).toEqual( {
         diff: 3,
+        queryCount: 11,
+        resultCount: 0,
         showToggle: true
       } )
     } )
@@ -204,6 +225,8 @@ describe( 'component:TrendDepthToggle', () => {
         const actual = mapStateToProps( state )
         expect( actual ).toEqual( {
           diff: 0,
+          queryCount: 11,
+          resultCount: 0,
           showToggle: true
         } )
       } )
@@ -214,6 +237,8 @@ describe( 'component:TrendDepthToggle', () => {
         const actual = mapStateToProps( state )
         expect( actual ).toEqual( {
           diff: 5,
+          queryCount: 11,
+          resultCount: 0,
           showToggle: true
         } )
       } )
diff --git a/src/components/__tests__/__snapshots__/TrendDepthToggle.spec.jsx.snap b/src/components/__tests__/__snapshots__/TrendDepthToggle.spec.jsx.snap
index d2dc5fac5..ef9d20713 100644
--- a/src/components/__tests__/__snapshots__/TrendDepthToggle.spec.jsx.snap
+++ b/src/components/__tests__/__snapshots__/TrendDepthToggle.spec.jsx.snap
@@ -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"
 >

From 22219f149c78a3560a5153bf91b48109bea73468 Mon Sep 17 00:00:00 2001
From: Richard Dinh <richard.dinh@cfpb.gov>
Date: Wed, 8 Jul 2020 10:53:44 -0400
Subject: [PATCH 2/2] eslint scope nag

---
 src/components/Trends/TrendDepthToggle.jsx         | 6 +++---
 src/components/__tests__/TrendDepthToggle.spec.jsx | 4 ++--
 2 files changed, 5 insertions(+), 5 deletions(-)

diff --git a/src/components/Trends/TrendDepthToggle.jsx b/src/components/Trends/TrendDepthToggle.jsx
index 36575d0e7..7694574ab 100644
--- a/src/components/Trends/TrendDepthToggle.jsx
+++ b/src/components/Trends/TrendDepthToggle.jsx
@@ -22,7 +22,7 @@ export class TrendDepthToggle extends React.Component {
   }
 
   render() {
-    const { diff, increaseDepth, resetDepth, showToggle } = this.props
+    const { diff, increaseDepth, depthReset, showToggle } = this.props
     if ( showToggle ) {
       if ( this._showMore() ) {
         return <div className={ 'trend-depth-toggle' }>
@@ -40,7 +40,7 @@ export class TrendDepthToggle extends React.Component {
         <button className={ 'a-btn a-btn__link' }
                 id={ 'trend-depth-button' }
                 onClick={ () => {
-                  resetDepth()
+                  depthReset()
                 } }>
           <span className={ 'minus' }></span>
           Show less
@@ -56,7 +56,7 @@ export const mapDispatchToProps = dispatch => ( {
   increaseDepth: diff => {
     dispatch( changeDepth( diff + 5 ) )
   },
-  resetDepth: () => {
+  depthReset: () => {
     dispatch( resetDepth() )
   }
 } )
diff --git a/src/components/__tests__/TrendDepthToggle.spec.jsx b/src/components/__tests__/TrendDepthToggle.spec.jsx
index ec2b35020..fb8bdc7b2 100644
--- a/src/components/__tests__/TrendDepthToggle.spec.jsx
+++ b/src/components/__tests__/TrendDepthToggle.spec.jsx
@@ -16,7 +16,7 @@ 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 }/> )
@@ -152,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,