Move from jQuery.change

[rfultz]

Summary

• Resolves # (if we set this to 6410, will this one PR close that whole ticket? It'll have other PRs, too.)

Resolving the jQuery deprecations has been a burden so let's break #6411 into much smaller pieces

Required reviewers

• front-end for code
• anyone for functionality

Impacted areas of the application

General components of the application that this PR will affect:

change() and .change(𝑓) on/in:

• Audit category sub category
• Audit tags
• Dropdowns
• Election search
• All filters, especially
  • Date
  • Election
  • Select
  • Text
  • Typeahead
• Tables
• Top entities

Screenshots

No changes

Related PRs

Related PRs against other branches:

PR	Branch	Deprecated features
#6750	feature/jquery-deprecation-click	.click
#6751‡	feature/jquery-deprecation-change	.change
#6753	feature/jquery-migrations-focus-blur	.focus, .blur
#6752	feature/jquery-deprecations	.bind, :first, .hover, .keyCode, :last, .submit, .trim

‡you are here

How to test

• Pull the branch
• npm i
• npm run test-single should be clear
• npm run build
• ./manage.py runserver
• For this PR we're checking the change actions and handlers:
  • Audit search
    • Selecting a Primary filter should add that filter (those under 'Findings and issue categories')
    • Changing the Primary filter should update the tag
    • Selecting a Secondary filter should work (those under 'Sub categories')
    • Changing the Secondary filter should update the tag
  • Dropdowns (Calendar is an easy place))
    • Tab to any of the dropdowns (Subscribe, Download, any of the events' dropdowns)
    • The Enter key should open the dropdown
    • Tab through an option or two
    • The Enter key should do the action that's highlighted
  • Election search
    • Choose a state
    • Enter a ZIP Code (Enter, Tab, or click the 🔍)
    • The State drop-down should have reverted to blank
  • Date filters (Receipts with two dates)
    • On page load, the date filters should apply correctly
  • Election filter (Candidates for president)
    • The election year and time period filters should work correctly (initially setting and then changing values)
  • Filter base
    • Go to a datatables page with multiple types of filters (Receipts works)
    • Apply several filters of different types
    • Text filter should have added a checkbox for your value(s)
    • Reload the page
    • Your filters should have been applied correctly (This tests filter-base.js and tables.js)
    • Especially:
    • Date filters
    • Select filters
    • Toggle filters
  • Top entities ([Homepage](Who is raising and spending the most))
    • Scroll down to "Who is raising and spending the most"
    • Make sure it's not showing president or a presidential election year
    • Change the office to president
    • The "Running in" <select> should have updated to a presidential election year
• Celebrate!

[codecov]

Codecov Report

All modified and coverable lines are covered by tests ✅

Project coverage is 79.83%. Comparing base (cfb73e9) to head (d92c959).
Report is 17 commits behind head on develop.

Additional details and impacted files

@@           Coverage Diff            @@
##           develop    #6751   +/-   ##
========================================
  Coverage    79.83%   79.83%           
========================================
  Files          237      237           
  Lines         5218     5218           
========================================
  Hits          4166     4166           
  Misses        1052     1052           

☔ View full report in Codecov by Sentry.
📢 Have feedback on the report? Share it here.

🚀 New features to boost your workflow:

• ❄️ Test Analytics: Detect flaky tests, report on failures, and find test suite problems.
• 📦 JS Bundle Analysis: Save yourself from yourself by tracking and limiting bundle sizes in JS merges.

[johnnyporkchops]

@rfultz We have a line in the MURs template where we still call trigger('click'). This was borrowed from the checkFromQuery function in tables.js. This PR changes that one to prop('checked', true).trigger('change').

Can we fix the line in MURs too?

fec-cms/fec/legal/templates/legal-search-results-murs.jinja

Line 381 in cfb73e9

$(box).trigger('click');

[johnnyporkchops]

One change requested:
#6751 (comment)

[rfultz]

@rfultz We have a line in the MURs template where we still call trigger('click'). This was borrowed from the checkFromQuery function in tables.js. This PR changes that one to prop('checked', true).trigger('change').

Can we fix the line in MURs too?

fec-cms/fec/legal/templates/legal-search-results-murs.jinja

Line 381 in cfb73e9

$(box).trigger('click');

You're much more familiar with the current functionality than I am so I'd follow your lead there. If we're setting it to checked then triggering the change, that seems different than simply triggering the click which, for a checkbox, would be a toggle, right—sometimes checked, sometimes not?

[johnnyporkchops]

@rfultz The original logic only clicks it if it is unchecked, so it would never toggle it off...

 if (!($(box).is(':checked'))) {
            $(box).trigger('click');   
      }

But anyway, the prop checked, change worked as expected in tables.js, so we can go ahead and do he same for this one.

[johnnyporkchops]

Everything seems to work as expected. Thanks @rfultz !