Change round to floor for indicator values (#1700)

- update tests to test flooring
This commit is contained in:
Vim 2022-06-27 14:44:53 -04:00 committed by GitHub
commit e418ebacf4
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
3 changed files with 77 additions and 15 deletions

View file

@ -6,25 +6,45 @@ import {indicatorInfo} from '../AreaDetail/AreaDetail';
import * as EXPLORE_COPY from '../../data/copy/explore'; import * as EXPLORE_COPY from '../../data/copy/explore';
const highSchool:indicatorInfo = {
describe('rendering of the Indicator', () => {
it('checks if component renders', () => {
const highSchool:indicatorInfo = {
label: 'some label', label: 'some label',
description: 'some description', description: 'some description',
value: .97, value: .97,
isDisadvagtaged: true, isDisadvagtaged: true,
isPercent: true, isPercent: true,
threshold: 20, threshold: 20,
}; };
describe('rendering of the Indicator', () => {
const {asFragment} = render( const {asFragment} = render(
<LocalizedComponent> <LocalizedComponent>
<Indicator indicator={highSchool}/> <Indicator indicator={highSchool}/>
</LocalizedComponent>, </LocalizedComponent>,
); );
it('checks if component renders', () => {
expect(asFragment()).toMatchSnapshot(); 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(
<LocalizedComponent>
<Indicator indicator={highSchool}/>
</LocalizedComponent>,
);
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', () => { describe('test rendering of Indicator value icons', () => {

View file

@ -188,7 +188,7 @@ export const IndicatorValue = ({isPercent, displayStat}:IIndicatorValue) => {
*/ */
const Indicator = ({indicator}:IIndicator) => { const Indicator = ({indicator}:IIndicator) => {
// Convert the decimal value to a stat to display // 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 // If the threshold exists, set it, otherwise set it to the default value
const threshold = indicator.threshold ? indicator.threshold : constants.DEFAULT_THRESHOLD_PERCENTILE; const threshold = indicator.threshold ? indicator.threshold : constants.DEFAULT_THRESHOLD_PERCENTILE;

View file

@ -42,6 +42,48 @@ exports[`rendering of the Indicator checks if component renders 1`] = `
</DocumentFragment> </DocumentFragment>
`; `;
exports[`rendering of the Indicator checks if the flooring function works 1`] = `
<DocumentFragment>
<li
data-cy="indicatorBox"
data-testid="indicator-box"
>
<div>
<div>
some label
<div>
some description
</div>
</div>
<div>
<div>
<div>
<span>
42%
</span>
</div>
<div>
<img
alt="an icon for the up arrow"
src="test-file-stub"
/>
</div>
</div>
<div>
<div>
above
<span>
20%
</span>
percent
</div>
</div>
</div>
</div>
</li>
</DocumentFragment>
`;
exports[`test rendering of Indicator value icons renders the down arrow when the value is above the threshold 1`] = ` exports[`test rendering of Indicator value icons renders the down arrow when the value is above the threshold 1`] = `
<DocumentFragment> <DocumentFragment>
<img <img