mirror of
https://github.com/material-components/material-web.git
synced 2024-10-27 06:04:44 +03:00
5ba348dfd0
BREAKING: `MdMenu.prototype.anchor` now only accepts a string which will querySelector the rootNode of the menu. The method now to anchor to an element reference is to set `MdMenu.prototype.anchorElement`. This matches the `popover` anchoring proposal more closely, but that proposal may not pass in favor of a CSS approach. PiperOrigin-RevId: 560955779
73 lines
1.6 KiB
TypeScript
73 lines
1.6 KiB
TypeScript
/**
|
|
* @license
|
|
* Copyright 2022 Google LLC
|
|
* SPDX-License-Identifier: Apache-2.0
|
|
*/
|
|
|
|
// import 'jasmine'; (google3-only)
|
|
import './menu.js';
|
|
|
|
import {html, render} from 'lit';
|
|
|
|
import {createTokenTests} from '../testing/tokens.js';
|
|
|
|
import {MdMenu} from './menu.js';
|
|
import {MdMenuItem} from './menu-item.js';
|
|
|
|
describe('<md-menu>', () => {
|
|
describe('.styles', () => {
|
|
createTokenTests(MdMenu.styles);
|
|
});
|
|
|
|
let root: HTMLDivElement;
|
|
|
|
beforeEach(() => {
|
|
root = document.createElement('div');
|
|
document.body.appendChild(root);
|
|
});
|
|
|
|
afterEach(() => {
|
|
root?.remove();
|
|
});
|
|
|
|
it('escape on list root closes menu', async () => {
|
|
render(
|
|
html`
|
|
<button>OpenMenu</button>
|
|
<md-menu quick></md-menu>
|
|
`,
|
|
root);
|
|
|
|
const button = root.querySelector('button')!;
|
|
const menu = root.querySelector('md-menu')!;
|
|
menu.anchorElement = button;
|
|
menu.show();
|
|
await menu.updateComplete;
|
|
const listEl = menu.renderRoot.querySelector('md-list')!;
|
|
await listEl.updateComplete;
|
|
const listRoot = listEl.renderRoot.querySelector('ul')!;
|
|
|
|
expect(menu.open).toBeTrue();
|
|
|
|
const escapeKeydownEvent = new KeyboardEvent('keydown', {
|
|
key: 'Escape',
|
|
code: 'Escape',
|
|
bubbles: true,
|
|
composed: true,
|
|
cancelable: true
|
|
});
|
|
listRoot.dispatchEvent(escapeKeydownEvent);
|
|
|
|
await menu.updateComplete;
|
|
|
|
expect(menu.open).toBeFalse();
|
|
expect(escapeKeydownEvent.defaultPrevented).toBeTrue();
|
|
});
|
|
});
|
|
|
|
describe('<md-menu-item>', () => {
|
|
describe('.styles', () => {
|
|
createTokenTests(MdMenuItem.styles);
|
|
});
|
|
});
|