mirror of
https://github.com/material-components/material-web.git
synced 2024-08-17 09:30:27 +03:00
88 lines
2.3 KiB
TypeScript
88 lines
2.3 KiB
TypeScript
|
/**
|
||
|
* @license
|
||
|
* Copyright 2024 Google LLC
|
||
|
* SPDX-License-Identifier: Apache-2.0
|
||
|
*/
|
||
|
|
||
|
import '@material/web/checkbox/checkbox.js';
|
||
|
import {html} from 'lit';
|
||
|
|
||
|
import {Environment} from '../../testing/environment.js';
|
||
|
import {ariaSelector} from './query-selector-aria.js';
|
||
|
|
||
|
describe('query-selector-aria', () => {
|
||
|
const env = new Environment();
|
||
|
|
||
|
it('is needed when querying by aria attribute selectors fails', () => {
|
||
|
// Arrange
|
||
|
const root = env.render(
|
||
|
html`<md-checkbox aria-label="Agree"></md-checkbox>`,
|
||
|
);
|
||
|
|
||
|
// Act
|
||
|
const checkbox = root.querySelector('[aria-label="Agree"]');
|
||
|
|
||
|
// Assert
|
||
|
expect(checkbox)
|
||
|
.withContext('aria attribute query expected to fail without patches')
|
||
|
.toBeNull();
|
||
|
});
|
||
|
|
||
|
describe('ariaSelector()', () => {
|
||
|
it('returns the element with an aria attribute query', () => {
|
||
|
// Arrange
|
||
|
const root = env.render(
|
||
|
html`<md-checkbox aria-label="Agree"></md-checkbox>`,
|
||
|
);
|
||
|
|
||
|
// Act
|
||
|
const element = root.querySelector(ariaSelector('[aria-label="Agree"]'));
|
||
|
|
||
|
// Assert
|
||
|
expect(element).withContext('queried element').not.toBeNull();
|
||
|
});
|
||
|
|
||
|
it('returns the element with a role attribute query', () => {
|
||
|
// Arrange
|
||
|
const root = env.render(html`<md-checkbox role="radio"></md-checkbox>`);
|
||
|
|
||
|
// Act
|
||
|
const element = root.querySelector(ariaSelector('[role="radio"]'));
|
||
|
|
||
|
// Assert
|
||
|
expect(element).withContext('queried element').not.toBeNull();
|
||
|
});
|
||
|
|
||
|
it('returns the element when combined with other selectors', () => {
|
||
|
// Arrange
|
||
|
const root = env.render(html`
|
||
|
<md-checkbox
|
||
|
class="checkbox"
|
||
|
aria-label="Agree"
|
||
|
aria-haspopup="true"></md-checkbox>
|
||
|
`);
|
||
|
|
||
|
// Act
|
||
|
const element = root.querySelector(
|
||
|
ariaSelector('.checkbox[aria-label="Agree"][aria-haspopup="true"]'),
|
||
|
);
|
||
|
|
||
|
// Assert
|
||
|
expect(element).withContext('queried element').not.toBeNull();
|
||
|
});
|
||
|
|
||
|
it('returns expected elements when not using aria attribute selectors', () => {
|
||
|
// Arrange
|
||
|
const root = env.render(html`
|
||
|
<md-checkbox class="checkbox"></md-checkbox>
|
||
|
`);
|
||
|
|
||
|
// Act
|
||
|
const element = root.querySelector(ariaSelector('.checkbox'));
|
||
|
|
||
|
// Assert
|
||
|
expect(element).withContext('queried element').not.toBeNull();
|
||
|
});
|
||
|
});
|
||
|
});
|