Form 10215 Updates (#33771)

* Spelling mistake * 10215 calcs page * Review page submit btn custom text * added more unit test to bring coverage up (above 80%) --------- Co-authored-by: wafimohamed <[email protected]>
department-of-veterans-affairs · Dec 30, 2024 · 0f7f93e · 0f7f93e
1 parent 41a3635
commit 0f7f93e
Show file tree

Hide file tree

Showing 6 changed files with 227 additions and 66 deletions.
diff --git a/src/applications/edu-benefits/10215/config/form.js b/src/applications/edu-benefits/10215/config/form.js
@@ -46,6 +46,9 @@ const formConfig = {
   saveInProgress: {},
   version: 0,
   prefillEnabled: true,
+  customText: {
+    submitButtonText: 'Continue',
+  },
   savedFormMessages: {
     notFound: 'Please start over to apply for new form benefits.',
     noAuth:

diff --git a/src/applications/edu-benefits/10215/containers/ConfirmationPage.jsx b/src/applications/edu-benefits/10215/containers/ConfirmationPage.jsx
@@ -1,6 +1,6 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import { connect, useSelector } from 'react-redux';
+import { useSelector } from 'react-redux';
 import { ConfirmationView } from 'platform/forms-system/src/js/components/ConfirmationView';
 
 const childContent = (
@@ -54,6 +54,7 @@ const childContent = (
       <va-button
         secondary
         text="Print this page"
+        data-testid="print-page"
         onClick={() => window.print()}
       />
     </p>
@@ -75,7 +76,7 @@ const childContent = (
 );
 
 export const ConfirmationPage = props => {
-  const form = useSelector(state => state.form || {});
+  const form = useSelector(state => state?.form);
   const { submission } = form;
 
   const submitDate = submission.timestamp;
@@ -113,10 +114,4 @@ ConfirmationPage.propTypes = {
   route: PropTypes.object,
 };
 
-function mapStateToProps(state) {
-  return {
-    form: state.form,
-  };
-}
-
-export default connect(mapStateToProps)(ConfirmationPage);
+export default ConfirmationPage;
diff --git a/src/applications/edu-benefits/10215/pages/calcs.js b/src/applications/edu-benefits/10215/pages/calcs.js
@@ -1,21 +1,84 @@
-import React from 'react';
+import React, { useEffect, useState } from 'react';
 import PropTypes from 'prop-types';
 import { connect } from 'react-redux';
+import { querySelectorWithShadowRoot } from 'platform/utilities/ui/webComponents';
 import { getFTECalcs } from '../helpers';
 
 const Calcs = ({ data }) => {
-  const programIdx = window.location.href.split('?')[0].slice(-1);
-  const program = data.programs?.[programIdx];
-  const { supported, nonSupported, total, supportedFTEPercent } = getFTECalcs(
-    program,
-  );
+  const [programData, setProgramData] = useState(null);
+  //
+  // Form data in redux not updated promptly when inputting data in edit mode hence the following code is necessary at present rather than relying on state.form.data
+  //
+  async function updateData() {
+    const supportedInput = await querySelectorWithShadowRoot(
+      'va-text-input[name="root_fte_supported"]',
+      document,
+    );
+    const supportedInputValue = supportedInput?.shadowRoot.querySelector(
+      'input',
+    ).value;
+    const nonSupportedInput = await querySelectorWithShadowRoot(
+      'va-text-input[name="root_fte_nonSupported"]',
+      document,
+    );
+    const nonSupportedInputValue = nonSupportedInput?.shadowRoot.querySelector(
+      'input',
+    ).value;
+    const fteData = {
+      fte: {
+        supported: supportedInputValue,
+        nonSupported: nonSupportedInputValue,
+      },
+    };
+    if (fteData !== programData) setProgramData(getFTECalcs(fteData));
+  }
+
+  useEffect(() => {
+    let supportedInput;
+    let nonSupportedInput;
+
+    async function getInputs() {
+      supportedInput = await querySelectorWithShadowRoot(
+        'va-text-input[name="root_fte_supported"]',
+        document,
+      );
+      supportedInput = supportedInput?.shadowRoot?.querySelector('input');
+      nonSupportedInput = await querySelectorWithShadowRoot(
+        'va-text-input[name="root_fte_nonSupported"]',
+        document,
+      );
+      nonSupportedInput = nonSupportedInput?.shadowRoot?.querySelector('input');
+      supportedInput?.addEventListener('change', updateData);
+      nonSupportedInput?.addEventListener('change', updateData);
+    }
+
+    if (!programData && data) {
+      const programIdx = window.location.href.split('?')[0].slice(-1);
+      const program = data.programs?.[programIdx];
+      setProgramData(getFTECalcs(program));
+    }
+
+    getInputs();
+
+    return function cleanup() {
+      supportedInput.removeEventListener('change', updateData);
+      nonSupportedInput.removeEventListener('change', updateData);
+    };
+  }, []);
 
   return (
     <>
       <div className="vads-u-margin-bottom--1">
-        <label className="vads-u-margin-bottom--1">Total Enrolled FTE</label>
-        <span className="vads-u-font-size--h3 vads-u-font-weight--bold">
-          {supported || nonSupported ? total : '--'}
+        <label className="vads-u-margin-bottom--1" data-testid="num-fte">
+          Total Enrolled FTE
+        </label>
+        <span
+          className="vads-u-font-size--h3 vads-u-font-weight--bold"
+          data-testid="nonSupported"
+        >
+          {programData?.supported || programData?.nonSupported
+            ? programData?.total
+            : '--'}
         </span>
       </div>
       <va-additional-info trigger="How is Total enrolled FTE calculated?">
@@ -30,11 +93,14 @@ const Calcs = ({ data }) => {
         </p>
       </va-additional-info>
       <div className="vads-u-margin-bottom--1">
-        <label className="vads-u-margin-bottom--1">
+        <label className="vads-u-margin-bottom--1" data-testid="percentage-FTE">
           Supported student percentage FTE
         </label>
-        <span className="vads-u-font-size--h3 vads-u-font-weight--bold">
-          {supportedFTEPercent || '--%'}
+        <span
+          className="vads-u-font-size--h3 vads-u-font-weight--bold"
+          data-testid="supportedFTEPercent"
+        >
+          {programData?.supportedFTEPercent || '--%'}
         </span>
       </div>
       <va-additional-info trigger="How is Supported student percentage FTE calculated?">

diff --git a/src/applications/edu-benefits/10215/pages/program-intro.js b/src/applications/edu-benefits/10215/pages/program-intro.js
@@ -13,7 +13,7 @@ const ProgramIntro = {
           On the next several pages, you will provide all 85/15 calculations for
           your institution. Submit calculations for all approved programs listed
           on your most recent WEAMS-22-1998 Report. List every program and
-          iclude calculations, even if a program has a Supported Student or
+          include calculations, even if a program has a Supported Student or
           Total Enrollment of "0".
         </p>
         <p>

diff --git a/src/applications/edu-benefits/10215/tests/containers/ConfirmationPage.unit.spec.jsx b/src/applications/edu-benefits/10215/tests/containers/ConfirmationPage.unit.spec.jsx
@@ -1,10 +1,11 @@
 import React from 'react';
 import { expect } from 'chai';
+import sinon from 'sinon';
 import { Provider } from 'react-redux';
-import { render } from '@testing-library/react';
+import { fireEvent, render } from '@testing-library/react';
 import configureStore from 'redux-mock-store';
 import thunk from 'redux-thunk';
-import { ConfirmationPage } from '../../containers/ConfirmationPage';
+import ConfirmationPage from '../../containers/ConfirmationPage';
 
 const storeBase = {
   form: {
@@ -35,4 +36,16 @@ describe('<ConfirmationPage>', () => {
     );
     expect(container).to.exist;
   });
+  it('should print the page', () => {
+    const printSpy = sinon.spy(window, 'print');
+    const { getByTestId } = render(
+      <Provider store={mockStore(storeBase)}>
+        <ConfirmationPage />
+      </Provider>,
+    );
+    expect(getByTestId('print-page')).to.exist;
+    fireEvent.click(getByTestId('print-page'));
+    expect(printSpy.calledOnce).to.be.true;
+    printSpy.restore();
+  });
 });