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.

Sign up for GitHub

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

Jump to bottom

HTML reporter - searching for multiple modules broken #1683

Closed
jembezmamy opened this issue Apr 7, 2022 · 2 comments
Closed

HTML reporter - searching for multiple modules broken #1683

jembezmamy opened this issue Apr 7, 2022 · 2 comments
Assignees
@Krinkle
Labels
Component: HTML Reporter Type: Bug Type: Regression
Milestone
2.x release

Comments

@jembezmamy
Copy link

I have upgraded QUnit to 2.18.1 and something is not right with the module search box. I'm not able to select multiple modules by performing several searches. This worked well in previous versions (not sure which ones though, I've noticed this issue some time ago).

Tell us about your runtime:

  • QUnit version: 2.18.1
  • Which environment are you using? (e.g., browser, Node): Chrome, Firefox on Mac
  • How are you running QUnit? (e.g., QUnit CLI, Grunt, Karma, manually in browser): manually in browser

What are you trying to do?

I've created a simple test scenario to isolate this problem:

<!DOCTYPE html>
<meta charset="utf-8">
<title>Test Suite</title>
<link rel="stylesheet" href="https://code.jquery.com/qunit/qunit-2.18.1.css">
<body>
  <div id="qunit"></div>
  <div id="qunit-fixture"></div>
  <script src="https://code.jquery.com/qunit/qunit-2.18.1.js"></script>
  <script>
    QUnit.module('add function', function() {
      QUnit.test('two numbers', function(assert) {
        assert.ok(true);
      });
    });
    QUnit.module('subtract function', function() {
      QUnit.test('two numbers', function(assert) {
        assert.ok(true);
      });
    });
    QUnit.module('multiply function', function() {
      QUnit.test('two numbers', function(assert) {
        assert.ok(true);
      });
    });
    QUnit.module('divide function', function() {
      QUnit.test('two numbers', function(assert) {
        assert.ok(true);
      });
    });
  </script>
</body>

Then I tested selecting and searching modules:

ezgif-2-15bdd31355

What did you expect to happen?

  1. When I search and then select a module, I expect it to be appended to the list of selected modules,
  2. When I leave the search bar empty, I expect it to show the names of the selected modules

What actually happened?

  1. Searching always resets current selection. There is no way of selecting both add and subtract by searching for them individually (I ended up using browser search functionality),
  2. Sometimes module names listed in the search bar get out of sync with checkboxes shown below.
@Krinkle Krinkle added this to the 2.x release milestone Apr 7, 2022
@Krinkle
Copy link
Member

Krinkle commented Apr 9, 2022 •
edited

This is specific to when using the input field to limit the suggestions, and then removing the input to type something different for adding another. Ticking multiple boxes without typing, or from the same typeahead, does work still.

Confirmed broken:

  • 2.18.1
  • 2.13.0
  • 2.12.0
  • 2.11.0 (released 2020-08-16)

Confirmed fine:

  • 2.1.0
  • 2.5.0
  • 2.8.0
  • 2.9.0
  • 2.10.0
  • 2.10.1 (released 2020-07-04)

@Krinkle Krinkle self-assigned this Apr 9, 2022
@Krinkle
Copy link
Member

Krinkle commented Apr 10, 2022

In the main branch, the failure makes sense to me now. Basically it goes like this:

  • In html.js, upon typeahead, we use fuzzysearch to narrow down the list of modules, and then re-render the dropdown HTML by calling moduleListHtml(). This has the notable side-effect of destroying the live DOM for the dropdown, including the live state of checkboxes. This creates a secondary bug that I hadn't noticed before as well. Which is that when you type "foo" and tick "foobar", as soon as you remove or add any character, the "foobar" already becomes unchecked. It's not lost when you click the second one, it's lost immediately.
  • In html.js, inside moduleListHtml(), only the original config.moduleId state is considered, eg. from when the page was loaded. This means the state isn't preserved or recoverable from here either.
  • In html.js, upon pressing the apply button we enter interceptNavigation, which iterates the current checkboxes in the dropdown and serialises the moduleId parameter for the reload.

In 2.10.1 and earlier, the typeahead handler is much more primitive. We didn't have fuzzysearch yet. Instead, we simply iterated the checkboxes and toggled display: none for entries that don't match. This meant the checkbox state was preserved. The regression traces to #1440, which is the addition of fuzzysearch.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees

@Krinkle Krinkle

Labels
Component: HTML Reporter Type: Bug Type: Regression
Milestone
2.x release
Development

No branches or pull requests
2 participants
@Krinkle @jembezmamy