Change round to floor for indicator values (#1700)

- update tests to test flooring

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(
-      <LocalizedComponent>
-        <Indicator indicator={highSchool}/>
-      </LocalizedComponent>,
-  );
-
   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(
+        <LocalizedComponent>
+          <Indicator indicator={highSchool}/>
+        </LocalizedComponent>,
+    );
     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', () => {

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;

client/src/components/Indicator/__snapshots__/Indicator.test.tsx.snap

@@ -42,6 +42,48 @@ exports[`rendering of the Indicator checks if component renders 1`] = `
 </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`] = `
 <DocumentFragment>
   <img