Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

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

Merged
merged 8 commits into from
Nov 22, 2023

Conversation

mistergone
Copy link
Member

@mistergone mistergone commented Aug 25, 2023

This PR will remove jQuery from the P4C "Dynamic Disclosures" app.

Originally, the intent was to add a bunch of cypress tests to verify the app's functionality, then remove all the jQuery, but after a long time trying to figure out why GHA failed all the cypress tests that passed locally, I finally found that it was the jQuery itself that was causing the GHA cypress failures, so we couldn't really write a PR with passing tests while the jQuery was in there.

Thus, this PR adds the cypress tests while also removing the jQuery. Not ideal, but it is easy enough to first verify the cypress tests pass with the existing code, then check again that they pass with this branch. See "How to test this PR" for a quick command to copy/paste to test the cypress in our main branch locally.


Additions

  • Add cypress tests for Dynamic Disclosures
  • Add dollar-sign.js which is a vanilla replacement for some jQuery functions

Removals

  • removed jQuery!

Changes

  • Change some jQuery calls to vanilla JS calls

How to test this PR

  1. Pull down the disclosures branch
  2. From your main branch, you can checkout just the cypress tests:
    git checkout disclosures -- test/cypress/fixtures/paying-for-college/ test/cypress/integration/paying-for-college/disclosures/
  3. Run the cypress tests (under paying-for-college/disclosures in your cypress interface) against the main branch, where jQuery still reigns supreme. (Make sure your JS files are built in this branch before testing!)
  4. Then go to the disclosures branch, rebuild your JS files, and then try the cypress tests again!
  5. Check out the general functionality of the disclosures app. Here's a test URL: test url for localhost
  6. When you're done, don't forget to clean up your main branch if you did the git checkout. - switching to main and doing a git clean -i will get it done!

Checklist

  • PR has an informative and human-readable title
  • Changes are limited to a single goal (no scope creep)
  • Code follows the standards laid out in the CFPB development guidelines
  • Future todos are captured in comments and/or tickets
  • Project documentation has been updated, potentially one or more of:


return new Promise(function (resolve, reject) {
// Completed xhr
xhr.onreadystatechange = function () {
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

You could consider using fetch instead of xhr, which may simplify the request code. See https://github.com/cfpb/consumerfinance.gov/pull/7653/files for example.

Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Thanks for the tip, now that I'm closer to done with this, I'll check out fetch!

Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

PR #8008

- Add cyrpress tests to ensure there are no breaking changes
- Add dollar-sign.js to cover jQuery functions
- Remove jQuery functions where plain JS easily addresses issues
@mistergone mistergone self-assigned this Oct 31, 2023
@mistergone mistergone requested review from wpears and removed request for brandon-rusk October 31, 2023 20:03
Copy link
Member

@wpears wpears left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I think you've mentioned this before, but I'm noticing some weird overlap of the dollar-sign with the "Updating" text as seen below:

Screenshot 2023-11-06 at 4 20 00 PM

Also, I'll put up a little PR against this branch to switch it to fetch instead of xhr

wpears and others added 2 commits November 8, 2023 13:55
* Move disclosures to fetch-logic

* set school_primary_alias once
@mistergone
Copy link
Member Author

I think you've mentioned this before, but I'm noticing some weird overlap of the dollar-sign with the "Updating" text as seen below:

Yep! I figured that out last week - it was because my siblings method was bad, and the change I just pushed should fix that.

Copy link
Member

@wpears wpears left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

🆒

@mistergone mistergone enabled auto-merge November 22, 2023 14:08
@mistergone mistergone added this pull request to the merge queue Nov 22, 2023
Merged via the queue into main with commit f66af51 Nov 22, 2023
13 of 14 checks passed
@mistergone mistergone deleted the disclosures branch November 22, 2023 14:20
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

4 participants