Documentation for Nimble Tabs UI Testing

[gokulakrishnan-ni]

😯 Problem to Solve

We tried writing UI test for nimble tabs and observed that the nimble tabs showed a different behavior during test. A documentation on writing UI tests for nimble tabs would be helpful.

💁 Proposed Solution

A documentation on writing UI tests for nimble tabs.

[jattasNI]

@gokulakrishnan-ni, what was the behavior difference that you observed? Could you post a code snippet explaining what you're trying to do (e.g. put contents on a tab, change the active tab, read the visible tab, etc)?

[gokulakrishnan-ni]

@jattasNI Our understanding is that the nimble-tabs element hides and shows the nimble-tab-panels based on the nimble-tab clicked. The nimble-tab-panels with "hidden" attribute are hidden in the UI. During development we could see the "hidden" attribute being added to the nimble-tab-panels (refer second image attached) but while running test we couldn't see "hidden" attribute in any of the nimble-tab-panels, making it hard to find which panel is selected as all the panels are displayed.

Please let us know if we are missing something in the test environment.

This is a screenshot of Elements tab from browser during test

This is a screenshot of the same during development

[gokulakrishnan-ni]

@jattasNI Similarly in nimble-select, during development the nimble-select element has an attribute "open" when the dropdown list is displayed but during test the "open" attribute is not seen after dispatching click event.

[jattasNI]

Thanks for the detailed explanation @gokulakrishnan-ni!

Nimble relies on the implementation and test patterns of the underlying FAST library for the tab component. Scanning through their tests, there are a few APIs that are supposed to work:

1. hidden attribute on inactive tabs as you describe (test)
2. aria-selected attribute on active tabs (test)
3. autogenerate an id for each tab panel (test) and set activeid on the tab when new tabs are clicked (couldn't find a test for this but observed it through manual interaction)

If none of these are working for you, we'll have to do a little more digging to see what's different between your test setup and FAST's. Some possibilities:

1. how are you setting the active tab in your test? FAST's tests use the activeid property on the tabs element which Nimble also exposes in our Angular directive
2. could there be something else different in your test configuration, like not marking it async or the component not being visible?

If you try these suggestions and still don't get anywhere, please send us a link to the test in question and we can try to debug it too.

[gokulakrishnan-ni]

@jattasNI We tried running the tests under async function and looked for ways to use the different attributes they have mentioned in the tests in the FAST library but the elements are not holding any value in those attributes during tests.

[jattasNI]

In our call today @rajsite showed the patterns used by nimble-tabs.directive.spec.ts. This calls await waitTask() in its beforeEach() to allow the component slots to initialize. The details available in #230 say that the same is necessary for nimble-select. Please let us know if this pattern works for you!

[rajsite]

Found that the tabs and select tests in nimble had to pause for a full task (setTimeout(..,0)) before running. The PR for the test gave the following description:

Any components with slotted content (e.g. select, tabs) seem to require a real asynchronous setTimeout before the slotchanged event is fired and the component is able to initialize itself. Using fakeAsync along with tick(), flush(), and flushMicrotasks() does not cause the slotchanged event to fire. My guess of why this doesn't work is that Zone.js isn't able to monkey-patch whatever timing mechanism is used to schedule the slotchanged event firing, since that is in browser code.

[brianehenry]

@gokulakrishnan-ni Something important to know is that any attribute changes in these components won't be reflected until the next animation frame. So if you write an async test, it may look something like this:

tab.click();
await new Promise(requestAnimationFrame);
expect(otherTab.getAttribute('hidden')).not.toBeNull();

Or, if you want to use Angular's fakeAsync utility:

fakeAsync(() => {
    tab.click();
    processUpdates(); // this function is exported from nimble-angular
    expect(otherTab.getAttribute('hidden')).not.toBeNull();
})

We have some good examples of testing these components with fakeAsync in our repo, see this example.

[jattasNI]

We provided guidance in this issue to unblock the request and I captured some notes to include that guidance in future page objects in #265. I think that guidance is too low-level to include in public-facing docs so I'm going to close this issue.