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.

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

Improve Views documentation #6057

Merged
merged 3 commits into from
Dec 23, 2024
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
20 changes: 20 additions & 0 deletions docs/ui-coverage/core-concepts/interactivity.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -36,3 +36,23 @@ UI Coverage considers interactive elements "tested" if they are interacted with
- `trigger`
- `type`
- `uncheck`

## Untested Links

UI Coverage tracks links (`<a>` elements) that haven't been visited during testing. For each untested link, you can see:

### Referrers

The Views containing links to this untested destination. This helps you understand:

- Where these untested areas are referenced from
- The navigation paths that could lead to this untested area
- The context in which these links appear

### URLs

Shows how similar URLs are grouped together. For example, if you have links to `/users/1`, `/users/2`, and `/users/3`, they'll be grouped as `/users/*`. The URLs section shows all the actual URLs that were grouped together. This is particularly useful for:

- Understanding the scope of dynamic routes in your application
- Seeing how many variations of a URL pattern exist
- Writing configuration rules to handle URL patterns appropriately
30 changes: 23 additions & 7 deletions docs/ui-coverage/core-concepts/views.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -9,14 +9,30 @@ sidebar_position: 100

<UICovAddon />

UI Coverage is organized into views, which are the unique URLs across all snapshots from end-to-end tests and the unique mounted components from component tests.
UI Coverage organizes all unique URLs across snapshots from end-to-end tests and mounted components from component tests into "Views". A View represents a distinct page or state in your application.

### Grouping
## View Creation & Grouping

UI Coverage uses certain default rules to generate a single view from dynamic URLs that represent the same page:
By default, UI Coverage uses certain rules to generate a single View from dynamic URLs that represent the same page:

- All search parameters are removed.
- All hash parameters are removed, unless the hash parameter starts with a `/`, such as `#/admin`.
- If there are multiple URLs that are exactly the same except for a different integer or UUID value in the same path parameter, then that path parameter is replaced with a wildcard (`*`).
- All search parameters are removed
- Hash parameters are removed (unless they start with `/`, such as `#/admin`)
- If multiple URLs differ only by an integer or UUID in the same path parameter, that parameter is replaced with a wildcard (`*`)

These rules can be overridden via [views](/ui-coverage/configuration/views) configuration.
For example:

- `/users/123/profile` and `/users/456/profile` would be grouped into `/users/*/profile`
- `/dashboard?tab=overview` and `/dashboard?tab=settings` would be grouped into `/dashboard`
- `/app#settings` and `/app#profile` would be grouped into `/app`
- `/app#/admin` and `/app#/settings` would remain separate Views

## Using Views

In the UI Coverage interface, Views are listed with their coverage scores, helping you:

- See which areas of your application have been tested
- Identify untested pages and components
- Track changes in coverage across different parts of your application
- Focus testing efforts on critical paths and flows

You can customize how URLs are grouped into Views using [views](/ui-coverage/configuration/views) and [viewFilters](/ui-coverage/configuration/viewfilters) configuration options.