menu

Testing Library

Simple and complete DOM testing utilities that encourage good testing practices.

Channels
Chat
view-forward
# All channels
view-forward
# General
view-forward
# General Help
view-forward
# Angular Help
view-forward
# Cypress Help
view-forward
# DOM Help
view-forward
# React Help
view-forward
# TestCafe Help
view-forward
# Vue Help
view-forward
Team

Testing filtering in virtual scroller selector

August 18, 2019 at 10:20am

Testing filtering in virtual scroller selector

August 18, 2019 at 10:20am
Hey Everyone. I'm new to testing, just started testing our env, and trying to show my bosses that it's worth my time. I'm trying to test our new selector component, and I want to test its filtering mechanism. I wanted to check how many selector-option data-ids there are, but because we use a virtual-scroller, there are elements in the list that are not visible (they are translated out of screen) but are there when I do getAllByTestId. For now i'm doing expect(selector.__vue__.filteredOptions.length).toBe(4) but I now we shouldn't test implementation details, and these are certainly implementation details. Thanks in advance!

August 19, 2019 at 3:17pm
I assume your virtual scroller is only rendering the visible DOM nodes and it replaces their content as you scroll/filter.
I'm guessing, then, that getByTestId('your-option-id') is always returning your the same amount of elements - the visible ones. After filtering, the content of those 5 elements would've changed, so you could test that.
  • reply
  • like
Hey , we meet again :D Thanks for answering.
I assumed like you too, but the virtual scroller renders also some elements before and after to make it faster when scrolling, so it doesn't work. The other elements are not visible on the screen because they are translated out of screen
Edited
  • reply
  • like
I see - what about setting a filter that leaves you with 3 elements (i.e. more than the maximum you'd be displaying), so that you can actually have all elements on the screen?
  • reply
  • like

August 20, 2019 at 6:12am
I'll try that, thanks. I think it always renders the same number of elements, just translates the unused to out of screen
  • reply
  • like