2022-07-11 17:48:53 +03:00
|
|
|
/**
|
|
|
|
* @license
|
|
|
|
* Copyright 2022 Google LLC
|
|
|
|
* SPDX-License-Identifier: Apache-2.0
|
|
|
|
*/
|
|
|
|
|
2022-08-24 21:00:50 +03:00
|
|
|
import './standard-icon-button-toggle.js';
|
|
|
|
import './standard-link-icon-button.js';
|
|
|
|
import './standard-icon-button.js';
|
2022-07-11 17:48:53 +03:00
|
|
|
|
2022-08-24 21:00:50 +03:00
|
|
|
import {Environment} from '@material/web/testing/environment.js';
|
2022-07-11 17:48:53 +03:00
|
|
|
import {html} from 'lit';
|
|
|
|
|
2022-08-24 21:00:50 +03:00
|
|
|
import {IconButtonHarness} from './harness.js';
|
|
|
|
import {MdStandardIconButtonToggle} from './standard-icon-button-toggle.js';
|
2022-07-11 17:48:53 +03:00
|
|
|
|
|
|
|
const ICON_BUTTON_TEMPLATE = html`
|
|
|
|
<md-standard-icon-button .icon="${'star'}" aria-label="Star">
|
|
|
|
</md-standard-icon-button>
|
|
|
|
`;
|
|
|
|
const LINK_ICON_BUTTON_TEMPLATE = html`
|
|
|
|
<md-standard-link-icon-button .icon="${'star'}" aria-label="Star">
|
|
|
|
</md-standard-link-icon-button>
|
|
|
|
`;
|
|
|
|
const ICON_BUTTON_TOGGLE_TEMPLATE = html`
|
|
|
|
<md-standard-icon-button-toggle .onIcon="${'star'}"
|
|
|
|
.offIcon="${'star_border'}" aria-label="Star">
|
|
|
|
</md-standard-icon-button-toggle>
|
|
|
|
`;
|
|
|
|
|
2022-09-01 00:12:24 +03:00
|
|
|
interface IconButtonInternals {
|
|
|
|
flipIcon: boolean;
|
|
|
|
}
|
|
|
|
|
2022-07-11 17:48:53 +03:00
|
|
|
describe('icon button tests', () => {
|
|
|
|
const env = new Environment();
|
|
|
|
|
|
|
|
describe('md-standard-icon-button', () => {
|
|
|
|
it('setting `disabled` updates the disabled attribute on the native ' +
|
|
|
|
'button element',
|
|
|
|
async () => {
|
|
|
|
const {element} = await setUpTest('md-standard-icon-button');
|
|
|
|
const button = element.shadowRoot!.querySelector('button')!;
|
|
|
|
|
|
|
|
element.disabled = true;
|
|
|
|
await element.updateComplete;
|
|
|
|
expect(button.hasAttribute('disabled')).toBeTrue();
|
|
|
|
|
|
|
|
element.disabled = false;
|
|
|
|
await element.updateComplete;
|
|
|
|
expect(button.hasAttribute('disabled')).toBeFalse();
|
|
|
|
});
|
|
|
|
|
|
|
|
it('setting `ariaLabel` updates the aria-label attribute on the native ' +
|
|
|
|
'button element',
|
|
|
|
async () => {
|
|
|
|
const {element} = await setUpTest('md-standard-icon-button');
|
|
|
|
const button = element.shadowRoot!.querySelector('button')!;
|
|
|
|
|
|
|
|
element.ariaLabel = 'test';
|
|
|
|
await element.updateComplete;
|
|
|
|
expect(button.getAttribute('aria-label')).toBe('test');
|
|
|
|
});
|
|
|
|
});
|
|
|
|
|
|
|
|
describe('md-standard-link-icon-button', () => {
|
|
|
|
it('setting `ariaLabel` updates the aria-label attribute on the anchor' +
|
|
|
|
'tag',
|
|
|
|
async () => {
|
|
|
|
const {element} = await setUpTest('md-standard-link-icon-button');
|
|
|
|
const anchor = element.shadowRoot!.querySelector('a')!;
|
|
|
|
|
|
|
|
element.ariaLabel = 'test';
|
|
|
|
await element.updateComplete;
|
|
|
|
expect(anchor.getAttribute('aria-label')).toBe('test');
|
|
|
|
});
|
|
|
|
});
|
|
|
|
|
|
|
|
describe('md-standard-icon-button-toggle', () => {
|
|
|
|
it('setting `disabled` updates the disabled attribute on the native ' +
|
|
|
|
'button element',
|
|
|
|
async () => {
|
|
|
|
const {element} = await setUpTest('md-standard-icon-button-toggle');
|
|
|
|
const button = element.shadowRoot!.querySelector('button')!;
|
|
|
|
|
|
|
|
element.disabled = true;
|
|
|
|
await element.updateComplete;
|
|
|
|
expect(button.hasAttribute('disabled')).toBeTrue();
|
|
|
|
|
|
|
|
element.disabled = false;
|
|
|
|
await element.updateComplete;
|
|
|
|
expect(button.hasAttribute('disabled')).toBeFalse();
|
|
|
|
});
|
|
|
|
|
|
|
|
it('setting `ariaLabel` updates the aria-label attribute on the native ' +
|
|
|
|
'button element',
|
|
|
|
async () => {
|
|
|
|
const {element} = await setUpTest('md-standard-icon-button-toggle');
|
|
|
|
const button = element.shadowRoot!.querySelector('button')!;
|
|
|
|
|
|
|
|
element.ariaLabel = 'test';
|
|
|
|
await element.updateComplete;
|
|
|
|
expect(button.getAttribute('aria-label')).toBe('test');
|
|
|
|
});
|
|
|
|
|
|
|
|
it('toggles the `on` state when button is clicked', async () => {
|
|
|
|
const {element, harness} =
|
|
|
|
await setUpTest('md-standard-icon-button-toggle');
|
|
|
|
if (!(element instanceof MdStandardIconButtonToggle)) {
|
|
|
|
throw new Error(
|
|
|
|
'Icon button is not instance of MdStandardIconButtonToggle.');
|
|
|
|
}
|
|
|
|
|
|
|
|
expect(element.isOn).toBeFalse();
|
|
|
|
await harness.clickWithMouse();
|
|
|
|
expect(element.isOn).toBeTrue();
|
|
|
|
await harness.clickWithMouse();
|
|
|
|
expect(element.isOn).toBeFalse();
|
|
|
|
});
|
|
|
|
|
|
|
|
it('setting `on` updates the aria-pressed attribute on the native button element',
|
|
|
|
async () => {
|
|
|
|
const {element} = await setUpTest('md-standard-icon-button-toggle');
|
|
|
|
if (!(element instanceof MdStandardIconButtonToggle)) {
|
|
|
|
throw new Error(
|
|
|
|
'Icon button is not instance of MdStandardIconButtonToggle.');
|
|
|
|
}
|
|
|
|
|
|
|
|
element.isOn = true;
|
|
|
|
await element.updateComplete;
|
|
|
|
const button = element.shadowRoot!.querySelector('button')!;
|
|
|
|
expect(button.getAttribute('aria-pressed')).toEqual('true');
|
|
|
|
|
|
|
|
element.isOn = false;
|
|
|
|
await element.updateComplete;
|
|
|
|
expect(button.getAttribute('aria-pressed')).toEqual('false');
|
|
|
|
});
|
|
|
|
|
|
|
|
it('button with toggled aria label toggles aria label', async () => {
|
|
|
|
const {element} = await setUpTest('md-standard-icon-button-toggle');
|
|
|
|
if (!(element instanceof MdStandardIconButtonToggle)) {
|
|
|
|
throw new Error(
|
|
|
|
'Icon button is not instance of MdStandardIconButtonToggle.');
|
|
|
|
}
|
|
|
|
element.ariaLabelOn = 'aria label on';
|
|
|
|
element.ariaLabelOff = 'aria label off';
|
|
|
|
await element.updateComplete;
|
|
|
|
|
|
|
|
const button = element.shadowRoot!.querySelector('button')!;
|
|
|
|
expect(element.isOn).toBeFalse();
|
|
|
|
expect(button.getAttribute('aria-label')).toEqual('aria label off');
|
|
|
|
expect(button.getAttribute('aria-pressed')).toBeNull();
|
|
|
|
|
|
|
|
// Toggle
|
|
|
|
button.click();
|
|
|
|
await element.updateComplete;
|
|
|
|
expect(element.isOn).toBeTrue();
|
|
|
|
expect(button.getAttribute('aria-label')).toEqual('aria label on');
|
|
|
|
expect(button.getAttribute('aria-pressed')).toBeNull();
|
|
|
|
});
|
|
|
|
|
|
|
|
it('if `flipsIconInRtl=true`, flips icon in an RTL context', async () => {
|
|
|
|
const template = html`
|
|
|
|
<div dir="rtl">
|
|
|
|
<md-standard-icon-button .icon="${'star'}" aria-label="Star"
|
|
|
|
.flipIconInRtl="${true}">
|
|
|
|
</md-standard-icon-button>
|
|
|
|
</div>`;
|
|
|
|
const element =
|
|
|
|
env.render(template).querySelector('md-standard-icon-button')!;
|
|
|
|
await env.waitForStability();
|
|
|
|
|
2022-09-01 00:12:24 +03:00
|
|
|
expect((element as unknown as IconButtonInternals).flipIcon).toBeTrue();
|
2022-07-11 17:48:53 +03:00
|
|
|
});
|
|
|
|
|
|
|
|
it('if `flipsIconInRtl=true`, does not flip icon in an LTR context',
|
|
|
|
async () => {
|
|
|
|
const template = html`
|
|
|
|
<div dir="ltr">
|
|
|
|
<md-standard-icon-button .icon="${'star'}" aria-label="Star"
|
|
|
|
.flipIconInRtl="${true}">
|
|
|
|
</md-standard-icon-button>
|
|
|
|
</div>`;
|
|
|
|
const element =
|
|
|
|
env.render(template).querySelector('md-standard-icon-button')!;
|
|
|
|
await env.waitForStability();
|
|
|
|
|
2022-09-01 00:12:24 +03:00
|
|
|
expect((element as unknown as IconButtonInternals).flipIcon)
|
|
|
|
.toBeFalse();
|
2022-07-11 17:48:53 +03:00
|
|
|
});
|
|
|
|
});
|
|
|
|
|
|
|
|
async function setUpTest(tagName: string) {
|
|
|
|
let template;
|
|
|
|
switch (tagName) {
|
|
|
|
case 'md-standard-icon-button':
|
|
|
|
template = ICON_BUTTON_TEMPLATE;
|
|
|
|
break;
|
|
|
|
case 'md-standard-link-icon-button':
|
|
|
|
template = LINK_ICON_BUTTON_TEMPLATE;
|
|
|
|
break;
|
|
|
|
case 'md-standard-icon-button-toggle':
|
|
|
|
template = ICON_BUTTON_TOGGLE_TEMPLATE;
|
|
|
|
break;
|
|
|
|
default:
|
|
|
|
throw new Error('Invalid tag name: ' + tagName);
|
|
|
|
}
|
|
|
|
|
|
|
|
const element = env.render(template).querySelector(tagName)!;
|
|
|
|
await env.waitForStability();
|
|
|
|
return {
|
|
|
|
element,
|
|
|
|
harness: new IconButtonHarness(element),
|
|
|
|
};
|
|
|
|
}
|
|
|
|
});
|