From f7bfc979ba34eae0c147c7f9fdaf52afc83118b7 Mon Sep 17 00:00:00 2001
From: TomNUSDS <74203452+TomNUSDS@users.noreply.github.com>
Date: Thu, 19 Aug 2021 17:34:12 -0700
Subject: [PATCH] Fix putting elements under <p> (#521)

* Fix putting elements under <p>
* Added Jest test to catch this mistake in the future. It does it by watching console.error().
To add in fixing the bug the test's emulated `console.error()` are echoed to the jest console.error() so they are not lost.
* I tested this by putting a `<h1>` back into the `<p>` and it caught it.
* Update scoreStepsList.test.tsx
* added comment to move console.error ticket to global location

Co-authored-by: Vim <86254807+vim-usds@users.noreply.github.com>
---
 .../scoreStepsList.test.tsx.snap              |  24 ++--
 client/src/components/scoreStepsList.test.tsx |  12 ++
 client/src/components/scoreStepsList.tsx      | 133 ++++++++++--------
 client/src/styles/global.scss                 |   7 +
 4 files changed, 104 insertions(+), 72 deletions(-)

diff --git a/client/src/components/__snapshots__/scoreStepsList.test.tsx.snap b/client/src/components/__snapshots__/scoreStepsList.test.tsx.snap
index 7c8c915f..d60630ab 100644
--- a/client/src/components/__snapshots__/scoreStepsList.test.tsx.snap
+++ b/client/src/components/__snapshots__/scoreStepsList.test.tsx.snap
@@ -13,14 +13,17 @@ exports[`rendering of the component should match the snapshot of the MapIntroduc
           >
             Gather datasets
           </h3>
-          <p />
           <h4
             class="j40-item-list-subtitle"
           >
             Data inputs
           </h4>
-          The cumulative index score includes the following equally weighted inputs.
-          <ul>
+          <p>
+            The cumulative index score includes the following equally weighted inputs.
+          </p>
+          <ul
+            class="j40-process-nested-list"
+          >
             <li>
               Poverty
             </li>
@@ -37,23 +40,22 @@ exports[`rendering of the component should match the snapshot of the MapIntroduc
               Housing burden
             </li>
           </ul>
-          <p />
-          <p />
           <h4
             class="j40-item-list-subtitle"
           >
             Combining data from different geographic units
           </h4>
-          Some data is not available at the census block group level and is instead only available for larger units such as census tracts or counties. In these cases, all census block groups will get an even contribution from the larger unit. For example, if a census tract scores 90th percentile on an indicator, then all census block groups within that tract will receive a value of 90th percentile.
-          <p />
-          <p />
+          <p>
+            Some data is not available at the census block group level and is instead only available for larger units such as census tracts or counties. In these cases, all census block groups will get an even contribution from the larger unit. For example, if a census tract scores 90th percentile on an indicator, then all census block groups within that tract will receive a value of 90th percentile.
+          </p>
           <h4
             class="j40-item-list-subtitle"
           >
             Normalizing data
           </h4>
-          The range of the data that makes up the score varies, so the data must be normalized so that each data indicator can be more equally weighted. Min-max normalization is utilized, where the minimum value in the range of values for each dataset is set at 0, the maximum value is set at 1, and every other value is transformed into a decimal between 0 and 1. For example, if the minimum value for unemployment was 10 and the maximum value was 30, a value of 20 would be transformed to 0.5 since it is halfway between 10 and 30.
-          <p />
+          <p>
+            The range of the data that makes up the score varies, so the data must be normalized so that each data indicator can be more equally weighted. Min-max normalization is utilized, where the minimum value in the range of values for each dataset is set at 0, the maximum value is set at 1, and every other value is transformed into a decimal between 0 and 1. For example, if the minimum value for unemployment was 10 and the maximum value was 30, a value of 20 would be transformed to 0.5 since it is halfway between 10 and 30.
+          </p>
         </section>
       </li>
       <li>
@@ -64,7 +66,6 @@ exports[`rendering of the component should match the snapshot of the MapIntroduc
           <p>
             To combine all variables into a single cumulative index score, we average the normalized values across indicators.
           </p>
-          <p />
           <div
             class="grid-container"
             data-testid="gridContainer"
@@ -102,7 +103,6 @@ exports[`rendering of the component should match the snapshot of the MapIntroduc
               </div>
             </div>
           </div>
-          <p />
         </section>
       </li>
       <li>
diff --git a/client/src/components/scoreStepsList.test.tsx b/client/src/components/scoreStepsList.test.tsx
index 07db0b70..0d48c454 100644
--- a/client/src/components/scoreStepsList.test.tsx
+++ b/client/src/components/scoreStepsList.test.tsx
@@ -3,6 +3,14 @@ import {render} from '@testing-library/react';
 import ScoreStepsList from './scoreStepsList';
 import {LocalizedComponent} from '../test/testHelpers';
 
+// TODO: Move this to a location that will detect on all tests
+// See ticket: #550
+beforeAll(() => {
+  jest.spyOn(global.console, 'error').mockImplementation((...params) => {
+    console.error(params);
+  });
+});
+
 describe('rendering of the component', () => {
   const {asFragment} = render(
       <LocalizedComponent>
@@ -13,4 +21,8 @@ describe('rendering of the component', () => {
   it('should match the snapshot of the MapIntroduction component', () => {
     expect(asFragment()).toMatchSnapshot();
   });
+
+  it('No console errors', () => {
+    expect(console.error).toBeCalledTimes(0);
+  });
 });
diff --git a/client/src/components/scoreStepsList.tsx b/client/src/components/scoreStepsList.tsx
index ed442978..def3be76 100644
--- a/client/src/components/scoreStepsList.tsx
+++ b/client/src/components/scoreStepsList.tsx
@@ -2,86 +2,99 @@ import React from 'react';
 import {GridContainer, Grid} from '@trussworks/react-uswds';
 
 const ScoreStepsList = () => {
-  return (<>
-    <div className={'j40-process-list-wrapper'}>
-      <ul>
-        <li>
-          <section>
-            <h3 className={'j40-item-list-title'}>Gather datasets</h3>
-            <p><h4 className={'j40-item-list-subtitle'}>Data inputs</h4>
-              The cumulative index score includes the following equally
-              weighted inputs.
-              <ul>
+  return (
+    <>
+      <div className={'j40-process-list-wrapper'}>
+        <ul>
+          <li>
+            <section>
+              <h3 className={'j40-item-list-title'}>Gather datasets</h3>
+              <h4 className={'j40-item-list-subtitle'}>Data inputs</h4>
+              <p>
+                The cumulative index score includes the following equally
+                weighted inputs.
+              </p>
+
+              <ul className={'j40-process-nested-list'}>
                 <li>Poverty</li>
                 <li>Less than high school education</li>
                 <li>Linguistic isolation</li>
                 <li>Unemployment rate</li>
                 <li>Housing burden</li>
               </ul>
-            </p>
-            <p>
-              <h4 className={'j40-item-list-subtitle'}>
-                Combining data from different geographic units</h4>
-                Some data is not available at the census block group level and is
-                instead only available for larger units such as census tracts or
-                counties. In these cases, all census block groups will get an even
-                contribution from the larger unit. For example, if a census tract
-                scores 90th percentile on an indicator, then all census block
-                groups within that tract will receive a value of 90th percentile.
-            </p>
-            <p><h4 className={'j40-item-list-subtitle'}>Normalizing data</h4>
-                The range of the data that makes up the score varies, so the data
-                must be normalized so that each data indicator can be more equally
-                weighted. Min-max normalization is utilized, where the minimum
-                value in the range of values for each dataset is set at 0, the
-                maximum value is set at 1, and every other value is transformed
-                into a decimal between 0 and 1. For example, if the minimum value
-                for unemployment was 10 and the maximum value was 30, a value of
-                20 would be transformed to 0.5 since it is halfway between 10 and
-                30.
-            </p>
-          </section>
-        </li>
 
-        <li>
-          <section>
-            <h3>Calculate cumulative index score</h3>
-            <p>To combine all variables into a single cumulative index score,
+
+              <h4 className={'j40-item-list-subtitle'}>
+                Combining data from different geographic units
+              </h4>
+              <p>
+                Some data is not available at the census block group level and
+                is instead only available for larger units such as census tracts
+                or counties. In these cases, all census block groups will get an
+                even contribution from the larger unit. For example, if a census
+                tract scores 90th percentile on an indicator, then all census
+                block groups within that tract will receive a value of 90th
+                percentile.
+              </p>
+              <h4 className={'j40-item-list-subtitle'}>Normalizing data</h4>
+              <p>
+                The range of the data that makes up the score varies, so the
+                data must be normalized so that each data indicator can be more
+                equally weighted. Min-max normalization is utilized, where the
+                minimum value in the range of values for each dataset is set at
+                0, the maximum value is set at 1, and every other value is
+                transformed into a decimal between 0 and 1. For example, if the
+                minimum value for unemployment was 10 and the maximum value was
+                30, a value of 20 would be transformed to 0.5 since it is
+                halfway between 10 and 30.
+              </p>
+            </section>
+          </li>
+
+          <li>
+            <section>
+              <h3>Calculate cumulative index score</h3>
+              <p>
+                To combine all variables into a single cumulative index score,
                 we average the normalized values across indicators.
-            </p>
-            <p>
+              </p>
+
               <GridContainer className={''}>
                 <Grid row className={'j40-math-division-container'}>
                   <Grid col className={'j40-math-eq-left-side grid-col-fill'}>
                     <div className={'j40-math-eq-numerator'}>
-                Dataset 1 + Dataset 2 + ... + Dataset N
+                      Dataset 1 + Dataset 2 + ... + Dataset N
                     </div>
                     <div className={'j40-math-eq-denominator'}>
-                # of datasets
+                      # of datasets
                     </div>
                   </Grid>
-                  <Grid col className={'j40-math-eq-middle grid-col-auto'}>=</Grid>
-                  <Grid col className={'j40-math-eq-right-side grid-col-fill'}>Cumulative index score</Grid>
+                  <Grid col className={'j40-math-eq-middle grid-col-auto'}>
+                    =
+                  </Grid>
+                  <Grid col className={'j40-math-eq-right-side grid-col-fill'}>
+                    Cumulative index score
+                  </Grid>
                 </Grid>
               </GridContainer>
-            </p>
-          </section>
-        </li>
+            </section>
+          </li>
 
-        <li>
-          <section>
-            <h3 className={'j40-item-list-title'}>Assign priority</h3>
-            <p>
+          <li>
+            <section>
+              <h3 className={'j40-item-list-title'}>Assign priority</h3>
+              <p>
                 Census block groups are sorted by their cumulative index score
-                from highest to lowest. Census block groups that are in the top 25
-                percentile (i.e. have a cumulative index score in the 75 - 100th
-                percentile) will be considered the prioritized communities.
-            </p>
-          </section>
-        </li>
-      </ul>
-    </div>
-  </>
+                from highest to lowest. Census block groups that are in the top
+                25 percentile (i.e. have a cumulative index score in the 75 -
+                100th percentile) will be considered the prioritized
+                communities.
+              </p>
+            </section>
+          </li>
+        </ul>
+      </div>
+    </>
   );
 };
 
diff --git a/client/src/styles/global.scss b/client/src/styles/global.scss
index b16209ef..06cecaf8 100644
--- a/client/src/styles/global.scss
+++ b/client/src/styles/global.scss
@@ -407,6 +407,13 @@ $primary-color: #112f4e;
   }
 }
 
+ul.j40-process-nested-list {
+  margin-bottom: 2rem;
+  > li {
+    list-style-type: disc; /* without this, we get hollow circles */
+  }
+}
+
 /* these are currently used in the list, but it seems like they should be globally consistent with the rest of the site */
 .j40-item-list-title {
   margin-block-end: auto;