diff --git a/client/src/components/Indicator/Indicator.test.tsx b/client/src/components/Indicator/Indicator.test.tsx index 1561e039..3f06bf77 100644 --- a/client/src/components/Indicator/Indicator.test.tsx +++ b/client/src/components/Indicator/Indicator.test.tsx @@ -6,25 +6,45 @@ import {indicatorInfo} from '../AreaDetail/AreaDetail'; import * as EXPLORE_COPY from '../../data/copy/explore'; -const highSchool:indicatorInfo = { - label: 'some label', - description: 'some description', - value: .97, - isDisadvagtaged: true, - isPercent: true, - threshold: 20, -}; describe('rendering of the Indicator', () => { - const {asFragment} = render( - - - , - ); - it('checks if component renders', () => { + const highSchool:indicatorInfo = { + label: 'some label', + description: 'some description', + value: .97, + isDisadvagtaged: true, + isPercent: true, + threshold: 20, + }; + const {asFragment} = render( + + + , + ); expect(asFragment()).toMatchSnapshot(); }); + + it('checks if the flooring function works', () => { + const expectedFloorPercent = '42%'; + + const highSchool:indicatorInfo = { + label: 'some label', + description: 'some description', + value: .426, + isDisadvagtaged: true, + isPercent: true, + threshold: 20, + }; + const {asFragment} = render( + + + , + ); + expect(asFragment()).toMatchSnapshot(); + const container = document.querySelectorAll('li[data-cy="indicatorBox"] span'); + expect(container[0].textContent).toBe(expectedFloorPercent); + }); }); describe('test rendering of Indicator value icons', () => { diff --git a/client/src/components/Indicator/Indicator.tsx b/client/src/components/Indicator/Indicator.tsx index 5094d82d..cdf02d1e 100644 --- a/client/src/components/Indicator/Indicator.tsx +++ b/client/src/components/Indicator/Indicator.tsx @@ -188,7 +188,7 @@ export const IndicatorValue = ({isPercent, displayStat}:IIndicatorValue) => { */ const Indicator = ({indicator}:IIndicator) => { // Convert the decimal value to a stat to display - const displayStat = indicator.value !== null ? Math.round(indicator.value * 100) : null; + const displayStat = indicator.value !== null ? Math.floor(indicator.value * 100) : null; // If the threshold exists, set it, otherwise set it to the default value const threshold = indicator.threshold ? indicator.threshold : constants.DEFAULT_THRESHOLD_PERCENTILE; diff --git a/client/src/components/Indicator/__snapshots__/Indicator.test.tsx.snap b/client/src/components/Indicator/__snapshots__/Indicator.test.tsx.snap index 98271566..b1e1697a 100644 --- a/client/src/components/Indicator/__snapshots__/Indicator.test.tsx.snap +++ b/client/src/components/Indicator/__snapshots__/Indicator.test.tsx.snap @@ -42,6 +42,48 @@ exports[`rendering of the Indicator checks if component renders 1`] = ` `; +exports[`rendering of the Indicator checks if the flooring function works 1`] = ` + + + + + some label + + some description + + + + + + + 42% + + + + + + + + + above + + 20% + + percent + + + + + + +`; + exports[`test rendering of Indicator value icons renders the down arrow when the value is above the threshold 1`] = `