IntenseWebs/grafana
3
0
Fork 0
mirror of https://github.com/grafana/grafana.git synced 2025-02-25 18:55:37 -06:00
Code Issues Packages Projects Releases Wiki Activity

update e2e docs to remove aria-label mentions (#52999)

Browse Source
This commit is contained in:
Josh Hunt
2022-07-29 16:42:53 +01:00
committed by GitHub
parent a51d3dad4f
commit 583490678b
1 changed files with 11 additions and 9 deletions
Download Patch File Download Diff File Expand all files Collapse all files

20
contribute/style-guides/e2e.md
View File

@@ -26,10 +26,10 @@ Let's start with a simple [JSX](https://reactjs.org/docs/introducing-jsx.html) e
<input className="gf-form-input login-form-input" type="text" />
```
We _could_ target the field with a CSS selector like `.gf-form-input.login-form-input` but that would be brittle as style changes occur frequently. Furthermore there is nothing that signals to future developers that this input is part of an E2E test. At Grafana, we use `aria-label` attributes as our preferred way of defining selectors instead of [`data-*`](https://mdn.io/docs/Web/HTML/Global_attributes/data-*) as they also aid in [accessibility](https://mdn.io/docs/Learn/Accessibility/What_is_accessibility):
We _could_ target the field with a CSS selector like `.gf-form-input.login-form-input` but that would be brittle as style changes occur frequently. Furthermore there is nothing that signals to future developers that this input is part of an E2E test. At Grafana, we use `data-testid` attributes as our preferred way of defining selectors. See [Aria-Labels vs data-testid](#aria-labels-vs-data-testid) for more details.
```jsx
<input aria-label="Username input field" className="gf-form-input login-form-input" type="text" />
<input data-testid="Username input field" className="gf-form-input login-form-input" type="text" />
```
The next step is to create a `Page` representation in our E2E framework to glue the test with the real implementation using the `pageFactory` function. For that function we can supply a `url` and `selectors` like in the example below:
@@ -39,10 +39,12 @@ export const Login = {
// Called via `Login.visit()`
url: '/login',
// Called via `Login.username()`
username: 'Username input field',
username: 'data-testid Username input field',
};
```
Note that the selector is prefixed with `data-testid` - this is a signal to the framework to look for the selector in the `data-testid` attribute.
The next step is to add the `Login` page to the `Pages` export within [_\<repo-root>/packages/grafana-e2e-selectors/src/selectors/pages.ts_](../../packages/grafana-e2e-selectors/src/selectors/pages.ts) so that it appears when we type `e2e.pages` in our IDE.
```typescript
@@ -59,7 +61,7 @@ Now that we have a `Page` called `Login` in our `Pages` const we can use that to
```jsx
import { selectors } from '@grafana/e2e-selectors';
<input aria-label={selectors.pages.Login.username} className="gf-form-input login-form-input" type="text" />;
<input data-testid={selectors.pages.Login.username} className="gf-form-input login-form-input" type="text" />;
```
The last step in our example is to use our `Login` page as part of a test.
@@ -100,7 +102,7 @@ Just as before in the basic example we'll start by creating a page abstraction u
```typescript
export const DataSources = {
url: '/datasources',
dataSources: (dataSourceName: string) => `Data source list item ${dataSourceName}`,
dataSources: (dataSourceName: string) => `data-testid Data source list item ${dataSourceName}`,
};
```
@@ -115,7 +117,7 @@ The next step is to use the `dataSources` selector function as in our example be
{dataSources.map(({ id, name }) => (
<li className="card-item-wrapper" key={id}>
<a className="card-item" href={`datasources/edit/${id}`}>
<div className="card-item-name" aria-label={selectors.pages.DataSources.dataSources(name)}>
<div className="card-item-name" data-testid={selectors.pages.DataSources.dataSources(name)}>
{name}
</div>
</a>
@@ -127,9 +129,9 @@ The next step is to use the `dataSources` selector function as in our example be
When this list is rendered with the data sources with names `A`, `B` and `C` ,the resulting HTML would look like:
```html
<div class="card-item-name" aria-label="Data source list item A">A</div>
<div class="card-item-name" aria-label="Data source list item B">B</div>
<div class="card-item-name" aria-label="Data source list item C">C</div>
<div class="card-item-name" data-testid="data-testid Data source list item A">A</div>
<div class="card-item-name" data-testid="data-testid Data source list item B">B</div>
<div class="card-item-name" data-testid="data-testid Data source list item C">C</div>
```
Now we can write our test. The one thing that differs from the [basic example](#basic-example) above is that we pass in which data source we want to click on as an argument to the selector function: