The multi-category filter needs to be an actual set of labeled checkboxes

Created on 5 November 2024, about 2 months ago

Problem/Motivation

The multi-checkbox category dropdown filter's markup is atrocious. It is a pile of DIVs and checkboxes that are not semantically arranged like form elements, and that means the tests are extremely flaky when interacting it because they have to do bullshit like this:

    $second_category_filter_selector = '.pb-filter__multi-dropdown .pb-filter__checkbox-label:nth-child(2) input[type="checkbox"]';

Come on. This is not sustainable.

Let's change the markup so it's more like this:

<div><label for="category-ID"><input type="checkbox" id="category-ID" value="ID" />Category name (ID)</label></div>

Then we should be able to do this in tests, which is both more readable and probably (hopefully) more stable:

$assert_session->fieldExists('Category name (ID)')->check();

🐛 Bug report
Status

Active

Version

2.0

Component

Code

Created by

🇺🇸United States phenaproxima Massachusetts

Live updates comments and jobs are added and updated live.
Sign in to follow issues

Merge Requests

Comments & Activities

  • Issue created by @phenaproxima
  • First commit to issue fork.
  • Merge request !614Resolve #3485747 "The multi category filter" → (Merged) created by pfrilling
  • Pipeline finished with Failed
    about 1 month ago
    Total: 338s
    #340198
  • 🇺🇸United States pfrilling Minster, OH

    Looking into this at NEDCamp. Adding the issue tag.

  • Pipeline finished with Failed
    about 1 month ago
    Total: 327s
    #340212
  • Pipeline finished with Failed
    about 1 month ago
    Total: 345s
    #340252
  • Pipeline finished with Failed
    about 1 month ago
    Total: 328s
    #340254
  • Pipeline finished with Failed
    about 1 month ago
    Total: 332s
    #340259
  • Pipeline finished with Failed
    about 1 month ago
    Total: 324s
    #340269
  • Pipeline finished with Failed
    about 1 month ago
    Total: 335s
    #340272
  • Pipeline finished with Failed
    about 1 month ago
    Total: 577s
    #340280
  • 🇺🇸United States chrisfromredfin Portland, Maine
  • Pipeline finished with Failed
    about 1 month ago
    Total: 327s
    #340297
  • 🇺🇸United States pfrilling Minster, OH

    The markup changes have been completed and the testing is all passing. This is ready for review.

  • Pipeline finished with Failed
    about 1 month ago
    Total: 405s
    #340320
  • 🇺🇸United States chrisfromredfin Portland, Maine

    fail - can't find by that selector. close, though!

        There was 1 failure:
        
        1)
        Drupal\Tests\project_browser\FunctionalJavascript\ProjectBrowserUiTestJsonApi::testMultiplePlugins
        Behat\Mink\Exception\ElementNotFoundException: Element matching css
        ".pb-filter__checkbox-label-txt" not found.    
    
  • Pipeline finished with Failed
    about 1 month ago
    Total: 289s
    #340381
  • Pipeline finished with Failed
    about 1 month ago
    Total: 334s
    #340383
  • Pipeline finished with Failed
    about 1 month ago
    Total: 7008s
    #344028
  • Pipeline finished with Failed
    about 1 month ago
    Total: 475s
    #344086
  • Pipeline finished with Failed
    about 1 month ago
    Total: 418s
    #344103
  • Pipeline finished with Success
    30 days ago
    Total: 384s
    #347009
  • 🇺🇸United States pfrilling Minster, OH

    I was able to get the tests all passing. Marking this as needs review.

  • 🇮🇳India narendraR Jaipur, India

    install-state.gz should not be part of MR.

  • 🇺🇸United States pfrilling Minster, OH

    Working on the rebase now.

  • Pipeline finished with Failed
    25 days ago
    Total: 435s
    #352141
  • Pipeline finished with Success
    25 days ago
    Total: 478s
    #352161
  • 🇺🇸United States pfrilling Minster, OH

    I rebased the code and confirmed all tests are now passing. Marking as needs review.

  • 🇮🇳India narendraR Jaipur, India

    This MR needs re-roll.

  • First commit to issue fork.
  • Pipeline finished with Failed
    12 days ago
    Total: 453s
    #364222
  • 🇮🇳India shalini_jha

    Rebased and resolved conflicts. Test changes in tests/src/FunctionalJavascript/ProjectBrowserUiTestJsonApi.php are still pending and need to be moved to ProjectBrowserUiTest::testMultiplePlugins.

  • Pipeline finished with Failed
    12 days ago
    Total: 449s
    #364233
  • 🇮🇳India shalini_jha

    I have moved the changes from ProjectBrowserUiTestJsonApi::testMultiplePlugins to ProjectBrowserUiTest::testMultiplePlugins. I verified the output from the old testMultiplePlugins function and added the same flow to the ProjectBrowserUiTest::testMultiplePlugins.

    Marking this as "Needs Review." Please review and let me know if this approach makes sense.

  • Pipeline finished with Failed
    12 days ago
    Total: 436s
    #364274
  • Pipeline finished with Failed
    11 days ago
    Total: 483s
    #364787
  • 🇮🇪Ireland lostcarpark

    This is partly my fault. I fixed up the tests to work for the drop-downs. Rather than just plow in and work out selectors for the new markup, I should have asked can we make the checkboxes easier for the tests to select. I'll know better next time.

    I have reviewed the changes and everything looks good to me. The revised selecters look much cleaner. I've also carried out a manual test, and everything seems to work correctly.

    I note that the eslint check is failing due to the recipe.yml file. This file has not been touched by this change, so I think it's an unrelated issue, so I think it should be fixed in a separate issue.

  • Pipeline finished with Success
    10 days ago
    Total: 395s
    #365852
  • Pipeline finished with Skipped
    10 days ago
    #365870
  • 🇺🇸United States chrisfromredfin Portland, Maine

    This is much more semantic, and also will help with tests!

Production build 0.71.5 2024