Investigate filtering via CSS

[adamgruber]

When the number of tests is large, re-rendering can be very slow. It may be quicker to filter tests via CSS.

Current Filtering Behavior

• When a filter is toggled the store recomputes the suites object
• The ReportBody component observes this object and re-renders as needed

Proposed Solution

• Add a new observable array to the store filteredTests.
• When a filter is toggled, populate this array with a list of test/suite IDs that should be hidden. Note that filtering is depth-first and works its way up the tree
  • Suites that would be empty after filtering should also be hidden
  • Suites with nested suites that would be hidden after filtering should be hidden
• Create a component that observes this property and renders CSS to the page to hide the tests/suites:

#filtered-test-id1,
#filtered-test-id2,
#filtered-test-id3,
#filtered-suite-id1,
... { display: none; }

Questions

• Is hiding via CSS quicker than re-rendering?
• Is there a limit to the number of inline style declarations?
• Is there a performance hit from adding a large number of style declarations to the DOM?

[JeffML]

Might I also suggest preserving the state of the upper left toggles in local storage? It would be even better selection of success/failure/warning on the left side navigator would filter, also.

[adamgruber]

I'm not sure I follow. The toggles already perform filtering. Are you referring to something else? Screenshot might help.

[JeffML]

I'm referring to the state of the toggles: each page load resets the toggles. It would be nice to set and forget. Let me see if I can do a pull request this weekend.

On Thu, Jul 12, 2018, 1:46 PM Adam Gruber [email protected] wrote:

I'm not sure I follow. The toggles already perform filtering. Are you referring to something else? Screenshot might help.

— You are receiving this because you commented. Reply to this email directly, view it on GitHub https://github.com/adamgruber/mochawesome-report-generator/issues/58#issuecomment-404645286, or mute the thread https://github.com/notifications/unsubscribe-auth/ADVcbRc56e2N2KjH5jI_3GhHvJBw68oKks5uF7WugaJpZM4PxjSv .

[KasimAhmic]

Apologies for bumping such an old issue, but I'm running into performance issues with Mochawesome and stumbled on this.

Currently, I'm at around a total of 6,700 tests and filtering is starting to be slow. It's not a huge problem at this very moment but my test suite is about to grow to well over 10,000 test cases and it will likely get worse from here.

One suggestion I have is to maintain the passed, failed, pending, and skipped tests in separate arrays and selectively render them based on the filters. I know that's not really what you're trying to do with the proposed CSS solution but it might be a way to avoid that.

In addition to the above, perhaps you might be able to "virtualize" the page. I've had massive success using Virtuoso when rendering large lists so maybe it also has a place here? There's obviously added complexity because you'd need to handle nested suites/tests and it probably would do nothing for people that had thousands of tests in a single suite unless you make the suite lists a fixed height, scrollable, and then virtualize them as well.

If I get the time, I'll see if I can put together a proof of concept.