Refactor of the Time since separation page to use web components (#32142

)

* Refactor separation form page to use web components

* Add unit test

* Update hint label

* Repair unit tests

src/applications/benefit-eligibility-questionnaire/constants/benefits.js

@@ -40,13 +40,21 @@ const goalTypes = {
 //   OVER_3_YEARS: 'over3yr',
 // };
 
-const separationTypes = {
-  UP_TO_6MO: 'upTo6mo',
-  UP_TO_1YR: 'upTo1yr',
-  UP_TO_2YRS: 'upTo2yr',
-  UP_TO_3YRS: 'upTo3yr',
-  OVER_3YRS: 'over3yr',
-};
+export const separationTypes = Object.freeze({
+  UP_TO_6MO: 'UP_TO_6MO',
+  UP_TO_1YR: 'UP_TO_1YR',
+  UP_TO_2YRS: 'UP_TO_2YRS',
+  UP_TO_3YRS: 'UP_TO_3YRS',
+  OVER_3YRS: 'OVER_3YRS',
+});
+
+export const separationTypeLabels = Object.freeze({
+  UP_TO_6MO: 'Within the past 6 months',
+  UP_TO_1YR: 'More than 6 months ago but less than 1 year ago',
+  UP_TO_2YRS: 'More than 1 year ago but less than 2 years ago',
+  UP_TO_3YRS: 'More than 2 years ago but less than 3 years ago',
+  OVER_3YRS: 'More than 3 years ago',
+});
 
 const expectedSparationTypes = {
   WITHIN_3MO: 'Within the next 3 months',

src/applications/benefit-eligibility-questionnaire/pages/separation.js

@@ -1,38 +1,23 @@
-import { pageTitle } from '../utils/helpers';
+import {
+  radioSchema,
+  radioUI,
+} from 'platform/forms-system/src/js/web-component-patterns';
+import { separationTypes, separationTypeLabels } from '../constants/benefits';
 
 export default {
   uiSchema: {
-    separation: {
-      'ui:title': pageTitle(
-        'How long ago did you separate or retire from service?',
+    separation: radioUI({
+      title: 'How long ago did you separate or retire from service?',
+      hint:
         'If you served during multiple periods, please choose the answer that corresponds to your most recent separation.',
-      ),
-      'ui:widget': 'radio',
-      'ui:options': {
-        labels: {
-          upTo6mo: 'Within the past 6 months',
-          upTo1yr: 'More than 6 months ago but less than 1 year ago',
-          upTo2yr: 'More than 1 year ago but less than 2 years ago',
-          upTo3yr: 'More than 2 years ago but less than 3 years ago',
-          over3yr: 'More than 3 years ago',
-        },
-        widgetProps: {
-          upTo6mo: { separation: 'upTo6mo' },
-          upTo1yr: { separation: 'upTo1yr' },
-          upTo2yr: { separation: 'upTo2yr' },
-          upTo3yr: { separation: 'upTo3yr' },
-          over3yr: { separation: 'over3yr' },
-        },
-      },
-    },
+      labels: separationTypeLabels,
+      required: () => false,
+    }),
   },
   schema: {
     type: 'object',
     properties: {
-      separation: {
-        type: 'string',
-        enum: ['upTo6mo', 'upTo1yr', 'upTo2yr', 'upTo3yr', 'over3yr'],
-      },
+      separation: radioSchema(Object.keys(separationTypes)),
     },
   },
 };

src/applications/benefit-eligibility-questionnaire/tests/e2e/fixtures/data/test-data.json

@@ -2,7 +2,7 @@
   "checkboxGroupGoals_setACareerPath": true,
   "militaryServiceTotalTimeServed": "More than 3 years",
   "militaryServiceCurrentlyServing": "No",
-  "separation": "upTo6mo",
+  "separation": "UP_TO_6MO",
   "characterOfDischarge": "honorable",
   "disabilityRating": "NOT_APPLIED",
   "giBillStatus": "NOT_APPLIED"

src/applications/benefit-eligibility-questionnaire/tests/unit/mocks/mockFormData.js

@@ -6,7 +6,7 @@ export const mockFormData = {
   'view:disabilityEligibility': {},
   characterOfDischarge: 'honorable',
   characterOfDischargeTWO: {},
-  separation: 'over3yr',
+  separation: 'OVER_3YRS',
   militaryServiceCurrentlyServing: 'No',
   militaryServiceTotalTimeServed: 'More than 3 years',
   goals: {

src/applications/benefit-eligibility-questionnaire/tests/unit/pages/characterOfDischarge.unit.spec.js

@@ -59,7 +59,7 @@ describe('Character of Discharge Form', () => {
 
   it('should render the correct link in the description for characterOfDischargeTWO', () => {
     const link = $('a', container);
-    const linkText = 'Learn more about the discharge upgrade process.';
+    const linkText = 'Learn more about the discharge upgrade process';
     const href = 'https://www.va.gov/discharge-upgrade-instructions';
 
     expect(link).to.exist;

src/applications/benefit-eligibility-questionnaire/tests/unit/pages/disabilityRating.unit.spec.js

@@ -1,27 +1,27 @@
-import { $ } from '@department-of-veterans-affairs/platform-forms-system/ui';
-import { DefinitionTester } from '@department-of-veterans-affairs/platform-testing/schemaform-utils';
-import { render } from '@testing-library/react';
-import { expect } from 'chai';
-import React from 'react';
-import { Provider } from 'react-redux';
-import { getData } from '../mocks/mockFormData';
-import disabilityRatingConfig from '../../../pages/disabilityRating';
-
-describe('disabilityRating page', () => {
-  it('should render the correct radio component', () => {
-    const { container } = render(
-      <Provider store={{ ...getData().mockStore }}>
-        <DefinitionTester
-          definitions={{}}
-          schema={disabilityRatingConfig.schema}
-          uiSchema={disabilityRatingConfig.uiSchema}
-          data={{}}
-          formData={{}}
-        />
-        ,
-      </Provider>,
-    );
-
-    expect($('va-radio', container)).to.exist;
-  });
-});
+import { $ } from '@department-of-veterans-affairs/platform-forms-system/ui';
+import { DefinitionTester } from '@department-of-veterans-affairs/platform-testing/schemaform-utils';
+import { render } from '@testing-library/react';
+import { expect } from 'chai';
+import React from 'react';
+import { Provider } from 'react-redux';
+import { getData } from '../mocks/mockFormData';
+import disabilityRatingConfig from '../../../pages/disabilityRating';
+
+describe('disabilityRating page', () => {
+  it('should render the correct radio component', () => {
+    const { container } = render(
+      <Provider store={{ ...getData().mockStore }}>
+        <DefinitionTester
+          definitions={{}}
+          schema={disabilityRatingConfig.schema}
+          uiSchema={disabilityRatingConfig.uiSchema}
+          data={{}}
+          formData={{}}
+        />
+        ,
+      </Provider>,
+    );
+
+    expect($('va-radio', container)).to.exist;
+  });
+});

src/applications/benefit-eligibility-questionnaire/tests/unit/pages/separation.unit.spec.js

@@ -0,0 +1,26 @@
+import { $ } from '@department-of-veterans-affairs/platform-forms-system/ui';
+import { DefinitionTester } from '@department-of-veterans-affairs/platform-testing/schemaform-utils';
+import { render } from '@testing-library/react';
+import { expect } from 'chai';
+import React from 'react';
+import { Provider } from 'react-redux';
+import { getData } from '../mocks/mockFormData';
+import separationConfig from '../../../pages/separation';
+
+describe('separation page', () => {
+  it('should render the correct radio component', () => {
+    const { container } = render(
+      <Provider store={{ ...getData().mockStore }}>
+        <DefinitionTester
+          definitions={{}}
+          schema={separationConfig.schema}
+          uiSchema={separationConfig.uiSchema}
+          data={{}}
+          formData={{}}
+        />
+        ,
+      </Provider>,
+    );
+    expect($('va-radio', container)).to.exist;
+  });
+});