VACMS 15823 - Provider Core Training icon and wording (#30734)

* with class/color and training wording * add testing for new componnent rendering inside other component * non-semantic markup * span
department-of-veterans-affairs · Jul 11, 2024 · 03ee7cc · 03ee7cc
1 parent 4c13593
commit 03ee7cc
Show file tree

Hide file tree

Showing 7 changed files with 212 additions and 2 deletions.
diff --git a/src/applications/facility-locator/components/search-results-items/CCProviderResult.jsx b/src/applications/facility-locator/components/search-results-items/CCProviderResult.jsx
@@ -5,6 +5,7 @@ import LocationDirectionsLink from './common/LocationDirectionsLink';
 import LocationPhoneLink from './common/LocationPhoneLink';
 import ProviderServiceDescription from '../ProviderServiceDescription';
 import LocationDistance from './common/LocationDistance';
+import ProviderTraining from './common/ProviderTraining';
 
 const CCProviderResult = ({ provider, query }) => {
   const { name } = provider.attributes;
@@ -23,11 +24,12 @@ const CCProviderResult = ({ provider, query }) => {
             <h6>{provider.attributes.orgName}</h6>
           )}
         </span>
+        <ProviderTraining provider={provider} />
         <LocationAddress location={provider} />
-        <LocationDirectionsLink location={provider} from={'SearchResult'} />
+        <LocationDirectionsLink location={provider} from="SearchResult" />
         <LocationPhoneLink
           location={provider}
-          from={'SearchResult'}
+          from="SearchResult"
           query={query}
         />
       </div>

diff --git a/src/applications/facility-locator/components/search-results-items/EmergencyCareResult.jsx b/src/applications/facility-locator/components/search-results-items/EmergencyCareResult.jsx
@@ -7,6 +7,7 @@ import LocationDirectionsLink from './common/LocationDirectionsLink';
 import LocationPhoneLink from './common/LocationPhoneLink';
 
 import LocationDistance from './common/LocationDistance';
+import ProviderTraining from './common/ProviderTraining';
 
 const EmergencyCareResult = ({ provider, query }) => {
   const { name } = provider.attributes;
@@ -24,6 +25,7 @@ const EmergencyCareResult = ({ provider, query }) => {
             <h6>{provider.attributes.orgName}</h6>
           )}
         </span>
+        <ProviderTraining provider={provider} />
         <LocationAddress location={provider} />
         <LocationDirectionsLink
           location={provider}

diff --git a/src/applications/facility-locator/components/search-results-items/UrgentCareResult.jsx b/src/applications/facility-locator/components/search-results-items/UrgentCareResult.jsx
@@ -7,6 +7,7 @@ import LocationDirectionsLink from './common/LocationDirectionsLink';
 import LocationPhoneLink from './common/LocationPhoneLink';
 
 import LocationDistance from './common/LocationDistance';
+import ProviderTraining from './common/ProviderTraining';
 
 const UrgentCareResult = ({ provider, query }) => {
   const { name } = provider.attributes;
@@ -24,6 +25,7 @@ const UrgentCareResult = ({ provider, query }) => {
             <h6>{provider.attributes.orgName}</h6>
           )}
         </span>
+        <ProviderTraining provider={provider} />
         <LocationAddress location={provider} />
         <LocationDirectionsLink
           location={provider}

diff --git a/...applications/facility-locator/components/search-results-items/common/ProviderTraining.jsx b/...applications/facility-locator/components/search-results-items/common/ProviderTraining.jsx
@@ -0,0 +1,30 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { VaIcon } from '@department-of-veterans-affairs/component-library/dist/react-bindings';
+
+function ProviderTraining({ provider }) {
+  if (!provider.attributes.trainings?.length) {
+    return null;
+  }
+  return (
+    <p className="vads-u-margin-y--2" data-testid={`training-${provider.id}`}>
+      <VaIcon
+        size={3}
+        icon="how_to_reg"
+        className="vads-u-margin-right--1 success-icon"
+      />
+      Provider core training
+    </p>
+  );
+}
+
+ProviderTraining.propTypes = {
+  provider: PropTypes.shape({
+    id: PropTypes.string,
+    attributes: PropTypes.shape({
+      trainings: PropTypes.arrayOf(PropTypes.shape({})),
+    }),
+  }),
+};
+
+export default ProviderTraining;
diff --git a/src/applications/facility-locator/constants/mock-facility-data-v2.json b/src/applications/facility-locator/constants/mock-facility-data-v2.json
@@ -0,0 +1,125 @@
+{
+  "data": [
+    {
+      "id": "a",
+      "type": "provider",
+      "attributes": {
+        "accNewPatients": "true",
+        "address": {
+          "street": "401 N 17TH ST STE 311",
+          "city": "ALLENTOWN",
+          "state": "PA",
+          "zip": "18104-5051"
+        },
+        "caresitePhone": "610-969-4470",
+        "email": null,
+        "fax": null,
+        "gender": "Male",
+        "lat": 40.60274,
+        "long": -75.494775,
+        "name": "BRIGIDO, STEPHEN",
+        "phone": null,
+        "posCodes": null,
+        "prefContact": null,
+        "trainings": [],
+        "uniqueId": "1407853336"
+      }
+    },
+    {
+      "id": "b",
+      "type": "provider",
+      "attributes": {
+        "accNewPatients": "true",
+        "address": {
+          "street": "401 N 17TH ST STE 105",
+          "city": "ALLENTOWN",
+          "state": "PA",
+          "zip": "18104-5049"
+        },
+        "caresitePhone": "610-969-4470",
+        "email": null,
+        "fax": null,
+        "gender": "Male",
+        "lat": 40.60274,
+        "long": -75.494775,
+        "name": "OFRICHTER, WILLIAM",
+        "phone": null,
+        "posCodes": null,
+        "prefContact": null,
+        "trainings": [
+          {
+            "courseName": "Opioid Safety Initiative (OSI)",
+            "courseCode": "1086479",
+            "courseCompletionDate": "2/11/2020 12:00:00 AM",
+            "courseExpirationDate": null,
+            "courseStatus": "Active"
+          }
+        ],
+        "uniqueId": "1689649824"
+      }
+    },
+    {
+      "id": "c",
+      "type": "provider",
+      "attributes": {
+        "accNewPatients": "true",
+        "address": {
+          "street": "401 N 17TH ST STE 311",
+          "city": "ALLENTOWN",
+          "state": "PA",
+          "zip": "18104-5051"
+        },
+        "caresitePhone": "610-969-4470",
+        "email": null,
+        "fax": null,
+        "gender": "Female",
+        "lat": 40.60274,
+        "long": -75.494775,
+        "name": "BAKER, LORA",
+        "phone": null,
+        "posCodes": null,
+        "prefContact": null,
+        "trainings": [
+          {
+            "courseName": "A Perspective for Veteran Care",
+            "courseCode": "1085488",
+            "courseCompletionDate": "2/5/2020 12:00:00 AM",
+            "courseExpirationDate": null,
+            "courseStatus": "Active"
+          },
+          {
+            "courseName": "Opioid Safety Initiative (OSI)",
+            "courseCode": "1073710",
+            "courseCompletionDate": "2/4/2020 12:00:00 AM",
+            "courseExpirationDate": null,
+            "courseStatus": "Active"
+          },
+          {
+            "courseName": "Opioid Safety Initiative (OSI)",
+            "courseCode": "1086479",
+            "courseCompletionDate": "2/4/2020 12:00:00 AM",
+            "courseExpirationDate": null,
+            "courseStatus": "Active"
+          }
+        ],
+        "uniqueId": "1235114331"
+      }
+    }
+  ],
+  "meta": {
+    "pagination": {
+      "currentPage": 1,
+      "prevPage": null,
+      "nextPage": null,
+      "totalPages": 1,
+      "totalEntries": 10
+    }
+  },
+  "links": {
+    "self": "https://dev-api.va.gov/facilities_api/v2/ccp?lat=40.599919&long=-75.497373&page=1&per_page=10&radius=10&specialties%5B%5D=213E00000X",
+    "first": "https://dev-api.va.gov/facilities_api/v2/ccp?lat=40.599919&long=-75.497373&page=1&per_page=10&radius=10&specialties%5B%5D=213E00000X",
+    "prev": null,
+    "next": null,
+    "last": "https://dev-api.va.gov/facilities_api/v2/ccp?lat=40.599919&long=-75.497373&page=1&per_page=10&radius=10&specialties%5B%5D=213E00000X"
+  }
+}
diff --git a/src/applications/facility-locator/sass/facility-locator.scss b/src/applications/facility-locator/sass/facility-locator.scss
@@ -608,4 +608,8 @@ canvas.mapboxgl-canvas:focus {
   outline: 2px solid rgb(249, 198, 66) !important;
   outline-offset: 2px !important;
   transition: none !important;
+}
+
+.success-icon {
+  color: var(--vads-color-success) !important;
 }
diff --git a/src/applications/facility-locator/tests/components/ProviderTraining.unit.spec.jsx b/src/applications/facility-locator/tests/components/ProviderTraining.unit.spec.jsx
@@ -0,0 +1,45 @@
+import React from 'react';
+import { expect } from 'chai';
+import { render } from '@testing-library/react';
+import CCProviderResult from '../../components/search-results-items/CCProviderResult';
+import testData from '../../constants/mock-facility-data-v2.json';
+
+describe('CCProviderResult With Training', () => {
+  it('Should render CCProviderResult, serviceType Podiatrist without training', async () => {
+    const query = {
+      facilityType: 'provider',
+      serviceType: '213E00000X', // Podiatrist
+    };
+    const wrapper = render(
+      <CCProviderResult provider={testData.data[0]} query={query} />,
+    );
+    // should not exist because no trainings
+    expect(wrapper.queryAllByTestId('training-a')).to.have.length(0);
+    wrapper.unmount();
+  });
+
+  it('Should render CCProviderResult, serviceType Podiatrist with 1 training', async () => {
+    const query = {
+      facilityType: 'provider',
+      serviceType: '213E00000X', // Podiatrist
+    };
+    const wrapper = render(
+      <CCProviderResult provider={testData.data[1]} query={query} />,
+    );
+    expect(wrapper.queryAllByTestId('training-b')).to.have.length(1);
+    wrapper.unmount();
+  });
+
+  it('Should render CCProviderResult, serviceType Podiatrist with 3 training', async () => {
+    const query = {
+      facilityType: 'provider',
+      serviceType: '213E00000X', // Podiatrist
+    };
+    const wrapper = render(
+      <CCProviderResult provider={testData.data[2]} query={query} />,
+    );
+    // stll one <p> about core training despite having 3 trainings that fall into that category
+    expect(wrapper.queryAllByTestId('training-c')).to.have.length(1);
+    wrapper.unmount();
+  });
+});