Merge pull request #7938 from cfpb/disclosures

[WIP][Paying for College] Remove jQuery from Disclosures app

.github/workflows/functional-tests.yml

@@ -62,11 +62,13 @@ jobs:
       run: ./refresh-data.sh test.sql.gz
 
     - name: Run Cypress
-      uses: cypress-io/github-action@v5
+      uses: cypress-io/github-action@v6.6.0
       with:
         build: yarn build
         start: python cfgov/manage.py runserver 0.0.0.0:8000
         wait-on: 'http://localhost:8000'
+        spec: test/cypress/integration/paying-for-college/disclosures/disclosures-basics.cy.js
+
       env:
           MAPBOX_ACCESS_TOKEN:  ${{ secrets.MAPBOX_ACCESS_TOKEN }}
           CYPRESS_ENVIRONMENT: github

cfgov/paying_for_college/jinja2/paying-for-college/disclosure.html

@@ -10,6 +10,7 @@
 {% endblock %}
 
 {% block content %}
+{% set school_primary_alias = school.primary_alias if school else '' %}
 <main id="main" data-context="{{url_root}}">
     <div id="financial-offer" class="understanding-financial-aid-offer">
         <section class="m-hero">
@@ -83,7 +84,7 @@ <h2 class="verify_prompt">
                         </h2>
                         <form class="verify_form">
                             <div class="verify_school">
-                                {{school.primary_alias}}
+                              {{school_primary_alias}}
                             </div>
                             <div class="verify_location">
                                 {% if school %}{{school.city}}, {{school.state}}{% endif %}
@@ -258,7 +259,7 @@ <h2 class="step_heading">
                             <p class="step_intro">
                                 Here is your financial aid offer from
                                 <span
-                                id="intro__school-name">{{school.primary_alias}}</span>. Please review the amounts provided by
+                                    id="intro__school-name">{{school_primary_alias}}</span>. Please review the amounts provided by
                                 your school below and make any necessary changes
                                 or add any missing information.  Please note any
                                 changes you make here will not change your
@@ -886,7 +887,7 @@ <h4 class="aid-form_summary-heading">
                                 <p>
                                     This is an estimate of the remaining costs
                                     of studying your program at
-                                    {{school.primary_alias}} for one year.
+                                    {{school_primary_alias}} for one year.
                                 </p>
                             </div>
                         </div>
@@ -1742,7 +1743,7 @@ <h4 class="aid-form_summary-heading">
                                 <p>
                                     This is an estimate of the remaining costs
                                     of studying your program at
-                                    {{school.primary_alias}} for one year based
+                                    {{school_primary_alias}} for one year based
                                     on your inputs above.
                                 </p>
                             </div>
@@ -1873,7 +1874,7 @@ <h4 class="aid-form_summary-heading">
                                     After all the grants, scholarships, loans,
                                     and personal contributions, this is how
                                     much you still need to pay to attend
-                                    {{school.primary_alias}} for one year.
+                                    {{school_primary_alias}} for one year.
                                 </p>
                             </div>
                             <div class="aid-form_summary debt-summary
@@ -2003,7 +2004,7 @@ <h3 class="criteria_heading">
                                 <p class="content_grad-cohort">
                                     For first-time students enrolled full-time
                                     in {{program.program_name}} at
-                                    {{school.primary_alias}},
+                                    {{school_primary_alias}},
                                     {{program.completers}} out of
                                     {{program.completion_cohort}}
                                     graduated.
@@ -2942,7 +2943,7 @@ <h2 class="step_heading step_settlement">
                                     It's estimated you'll owe <span
                                     data-financial="loanLifetime">[XX]</span>
                                     to complete this program in {{program.program_name}} at
-                                    {{school.primary_alias}}. Do you better
+                                    {{school_primary_alias}}. Do you better
                                     understand how this may impact your future
                                     finances?
                                 </h2>

cfgov/unprocessed/apps/paying-for-college/js/disclosures/dispatchers/get-api-values.js

@@ -1,45 +1,20 @@
-// TODO: Remove jquery.
-import $ from 'jquery';
-
 import financialView from '../views/financial-view.js';
 
 const getApiValues = {
   values: {},
-
   constants: function () {
     const urlBase = document.querySelector('main').getAttribute('data-context');
     const url =
       '/' + urlBase + '/understanding-your-financial-aid-offer/api/constants/';
-    const constantsRequest = $.ajax({
-      url: url,
-      dataType: 'json',
-      success: function (resp) {
-        return resp;
-      },
-      // TODO: the user should be notified of errors
-      error: function (req, status, err) {
-        console.log('API: constants', status, err);
-      },
-    });
-    return constantsRequest;
+    return fetch(url);
   },
 
   expenses: function () {
     const urlBase = document.querySelector('main').getAttribute('data-context');
     const url =
       '/' + urlBase + '/understanding-your-financial-aid-offer/api/expenses/';
-    const expensesRequest = $.ajax({
-      url: url,
-      dataType: 'json',
-      success: function (resp) {
-        return resp;
-      },
-      // TODO: the user should be notified of errors
-      error: function (req, status, err) {
-        console.log('API: expenses', status, err);
-      },
-    });
-    return expensesRequest;
+
+    return fetch(url);
   },
 
   fetchSchoolData: function (iped) {
@@ -50,18 +25,11 @@ const getApiValues = {
       '/understanding-your-financial-aid-offer/api/school/' +
       iped +
       '/';
-    const schoolDataRequest = $.ajax({
-      url: url,
-      dataType: 'json',
-      success: function (resp) {
-        return resp;
-      },
-      error: function (/* req, status, err */) {
-        financialView.missingData('school');
-      },
-    });
 
-    return schoolDataRequest;
+    return fetch(url).catch(function (error) {
+      financialView.missingData('noSchool');
+      return new Error(error);
+    });
   },
 
   fetchProgramData: function (iped, pid) {
@@ -84,18 +52,11 @@ const getApiValues = {
       '_' +
       pid +
       '/';
-    const programDataRequest = $.ajax({
-      url: url,
-      dataType: 'json',
-      success: function (resp) {
-        return resp;
-      },
-      error: function (/* req, status, err */) {
-        financialView.missingData('program');
-      },
-    });
 
-    return programDataRequest;
+    return fetch(url).catch(function (error) {
+      financialView.missingData('noProgram');
+      return new Error(error);
+    });
   },
 
   fetchNationalData: function (iped, pid) {
@@ -112,39 +73,30 @@ const getApiValues = {
       url += '_' + pid + '/';
     }
 
-    const nationalDataRequest = $.ajax({
-      url: url,
-      dataType: 'json',
-      success: function (resp) {
-        return resp;
-      },
-      // TODO: the user should be notified of errors
-      error: function (req, status, err) {
-        console.log('API: fetchNationalData', status, err);
-      },
-    });
-
-    return nationalDataRequest;
+    return fetch(url);
   },
 
   schoolData: function (iped, pid) {
-    return $.when(
-      this.fetchSchoolData(iped),
-      this.fetchProgramData(iped, pid),
-      this.fetchNationalData(iped, pid),
-    );
+    return Promise.all([
+      this.fetchSchoolData(iped).then((v) => v.json()),
+      this.fetchProgramData(iped, pid).then((v) => v.json()),
+      this.fetchNationalData(iped, pid).then((v) => v.json()),
+    ]);
   },
 
   initialData: function () {
     // If there's a [data-warning], display error
     const warning = document
       .querySelector('[data-warning]')
       .getAttribute('data-warning');
-    if (warning !== '' && typeof warning !== 'undefined') {
+    if (warning && !window.Cypress) {
       financialView.missingData(warning);
-      return $.Deferred;
+      return Promise.resolve();
     }
-    return $.when(this.constants(), this.expenses());
+    return Promise.all([
+      this.constants().then((v) => v.json()),
+      this.expenses().then((v) => v.json()),
+    ]);
   },
 };
 

cfgov/unprocessed/apps/paying-for-college/js/disclosures/dispatchers/post-verify.js

@@ -1,6 +1,3 @@
-// TODO: Remove jquery.
-import $ from 'jquery';
-
 const postVerify = {
   csrfToken: null,
 
@@ -16,7 +13,10 @@ const postVerify = {
        }
        }
        } */
-    this.csrfToken = $('[name="csrfmiddlewaretoken"]').val();
+    const csrfElem = document.querySelector('[name="csrfmiddlewaretoken"]');
+    if (csrfElem !== null) {
+      this.csrfToken = csrfElem.value;
+    }
   },
 
   verify: function (offerID, collegeID, error) {
@@ -34,7 +34,13 @@ const postVerify = {
       postdata.errors =
         'INVALID: student indicated the offer information is wrong';
     }
-    $.post(urlPath, postdata);
+
+    const xhr = new XMLHttpRequest();
+    xhr.open('POST', urlPath, true);
+    xhr.setRequestHeader('Content-Type', 'application/json');
+    xhr.send(JSON.stringify(postdata));
+
+    // $.post(urlPath, postdata);
   },
 };
 

cfgov/unprocessed/apps/paying-for-college/js/disclosures/index.js

@@ -1,7 +1,5 @@
-// TODO: Remove jquery.
-import $ from 'jquery';
-
-import fetch from './dispatchers/get-api-values.js';
+import $ from './utils/dollar-sign.js';
+import getApiValues from './dispatchers/get-api-values.js';
 import verifyOffer from './dispatchers/post-verify.js';
 import financialModel from './models/financial-model.js';
 import schoolModel from './models/school-model.js';
@@ -18,44 +16,65 @@ import metricView from './views/metric-view.js';
 import questionView from './views/question-view.js';
 import publish from './dispatchers/publish-update.js';
 
-import('./utils/print-page.js');
+// import('./utils/print-page.js');
+
+const ready = function (callback) {
+  if (document.readyState !== 'loading') {
+    // Document is already ready, call the callback directly
+    callback();
+  } else if (document.addEventListener) {
+    // All modern browsers to register DOMContentLoaded
+    document.addEventListener('DOMContentLoaded', callback);
+  } else {
+    // Old IE browsers
+    document.attachEvent('onreadystatechange', function () {
+      if (document.readyState === 'complete') {
+        callback();
+      }
+    });
+  }
+};
 
 const app = {
+  urlValues: {},
   init: function () {
-    // jquery promise to delay full model creation until ajax resolves
-    $.when(fetch.initialData()).done(function (constants, expenses) {
+    getApiValues.initialData().then((resp) => {
+      if (!resp) return;
+      const [constants, expenses] = resp;
       financialModel.init(constants[0]);
       financialView.init();
       if (location.href.indexOf('about-this-tool') === -1) {
-        expensesModel.init(expenses[0]);
+        expensesModel.init(expenses);
         expensesView.init();
       }
       if (getUrlOfferExists()) {
         // Check for URL offer data
-        const urlValues = getUrlValues();
-        $.when(fetch.schoolData(urlValues.collegeID, urlValues.programID)).done(
-          function (schoolData, programData, nationalData) {
+        this.urlValues = getUrlValues();
+        getApiValues
+          .schoolData(this.urlValues.collegeID, this.urlValues.programID)
+          .then((respArr) => {
+            const [schoolData, programData, nationalData] = respArr;
             const data = {};
-            Object.assign(data, schoolData[0], programData[0], nationalData[0]);
+            Object.assign(data, schoolData, programData, nationalData);
             const schoolValues = schoolModel.init(
-              nationalData[0],
-              schoolData[0],
-              programData[0],
+              nationalData,
+              schoolData,
+              programData,
             );
 
             /* If PID exists, update the financial model and view based
-             on program data */
+           on program data */
             if (!{}.hasOwnProperty.call(data, 'pidNotFound')) {
               financialModel.updateModelWithProgram(schoolValues);
-              financialView.updateViewWithProgram(schoolValues, urlValues);
+              financialView.updateViewWithProgram(schoolValues, this.urlValues);
             }
 
             // Add url values to the financial model
-            publish.extendFinancialData(urlValues);
-            if (typeof urlValues.totalCost === 'undefined') {
+            publish.extendFinancialData(this.urlValues);
+            if (typeof this.urlValues.totalCost === 'undefined') {
               publish.financialData('totalCost', null);
             }
-            financialView.updateViewWithURL(schoolValues, urlValues);
+            financialView.updateViewWithURL(schoolValues, this.urlValues);
             // initialize metric view
             metricView.init();
             financialView.updateView(getFinancial.values());
@@ -64,8 +83,7 @@ const app = {
             // Update expenses model bases on region and salary
             const region = schoolValues.BLSAverage.substr(0, 2);
             $('#bls-region-select').val(region).change();
-          },
-        );
+          });
       }
       // set financial caps based on data
       financialView.setCaps(getFinancial.values());
@@ -75,7 +93,7 @@ const app = {
   },
 };
 
-$(document).ready(function () {
+ready(function () {
   app.init();
 
   /* The following line allows for functional testing by exposing