Skip to content

Commit

Permalink
Test coverage
Browse files Browse the repository at this point in the history
  • Loading branch information
@Westbrook
Westbrook committed Aug 22, 2019
1 parent 01a8222 commit 7f064f9
Show file tree
Hide file tree
Showing 5 changed files with 230 additions and 6 deletions.
50 changes: 50 additions & 0 deletions __snapshots__/Action menu.md
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,50 @@
# `Action menu`

#### `loads`

```html
Select a Country with a very long label, too long in fact
<sp-menu role="listbox" slot="options">
<sp-menu-item role="menuitem" tabindex="-1">
Deselect
</sp-menu-item>
<sp-menu-item role="menuitem" tabindex="-1">
Select Inverse
</sp-menu-item>
<sp-menu-item role="menuitem" tabindex="-1">
Feather...
</sp-menu-item>
<sp-menu-item role="menuitem" tabindex="-1">
Select and Mask...
</sp-menu-item>
<sp-menu-divider role="separator"></sp-menu-divider>
<sp-menu-item role="menuitem" tabindex="-1">
Save Selection
</sp-menu-item>
<sp-menu-item
aria-disabled="true"
disabled=""
role="menuitem"
tabindex="-1"
>
Make Work Path
</sp-menu-item>
</sp-menu>
```

```html
<sp-icons-medium style="display: none;"></sp-icons-medium>
<button aria-haspopup="true" id="button" tabindex="0"></button>
<sp-popover direction="bottom" id="popover">
<slot name="options">
<sp-menu-item
aria-disabled="true"
disabled=""
role="menuitem"
tabindex="-1"
>
There are no options currently available.
</sp-menu-item>
</slot>
</sp-popover>
```
3 changes: 3 additions & 0 deletions src/action-menu/action-menu.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -32,6 +32,9 @@ export class ActionMenu extends Dropdown {
@property({ type: Boolean, reflect: true })
public selected: boolean = false;

protected listRole: string = 'menu';
protected itemRole: string = 'menuitem';

protected get buttonContent(): TemplateResult[] {
return [
html`
Expand Down
12 changes: 7 additions & 5 deletions src/dropdown/dropdown.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -64,6 +64,9 @@ export class Dropdown extends Focusable {
@property({ type: String })
public value = '';

protected listRole: string = 'listbox';
protected itemRole: string = 'option';

public constructor() {
super();
this.onClick = this.onClick.bind(this);
Expand All @@ -74,14 +77,14 @@ export class Dropdown extends Focusable {
'sp-menu-item-query-role',
(event: CustomEvent<MenuItemQueryRoleEventDetail>) => {
event.stopPropagation();
event.detail.role = 'option';
event.detail.role = this.itemRole;
}
);
this.addEventListener(
'sp-menu-query-role',
(event: CustomEvent<MenuQueryRoleEventDetail>) => {
event.stopPropagation();
event.detail.role = 'listbox';
event.detail.role = this.listRole;
}
);
}
Expand Down Expand Up @@ -134,6 +137,7 @@ export class Dropdown extends Focusable {
}

public onKeydown(ev: KeyboardEvent): void {
console.warn('keydown', this.optionsMenu);
if (ev.code !== 'ArrowDown') {
return;
}
Expand Down Expand Up @@ -161,9 +165,7 @@ export class Dropdown extends Focusable {
}
item.selected = true;
this.open = false;
if (this.button) {
this.button.focus();
}
this.focus();
}

public toggle(): void {
Expand Down
57 changes: 57 additions & 0 deletions test/action-menu.spec.ts
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,57 @@
/*
Copyright 2019 Adobe. All rights reserved.
This file is licensed to you under the Apache License, Version 2.0 (the "License");
you may not use this file except in compliance with the License. You may obtain a copy
of the License at http://www.apache.org/licenses/LICENSE-2.0
Unless required by applicable law or agreed to in writing, software distributed under
the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
OF ANY KIND, either express or implied. See the License for the specific language
governing permissions and limitations under the License.
*/

import { fixture, elementUpdated } from '@open-wc/testing';
import { ActionMenu } from '../lib/action-menu';
import '../lib/action-menu';
import { html } from 'lit-element';
import { expect } from '@bundled-es-modules/chai';

describe('Action menu', () => {
it('loads', async () => {
const el = await fixture<ActionMenu>(
html`
<sp-action-menu>
Select a Country with a very long label, too long in fact
<sp-menu slot="options" role="listbox">
<sp-menu-item>
Deselect
</sp-menu-item>
<sp-menu-item>
Select Inverse
</sp-menu-item>
<sp-menu-item>
Feather...
</sp-menu-item>
<sp-menu-item>
Select and Mask...
</sp-menu-item>
<sp-menu-divider></sp-menu-divider>
<sp-menu-item>
Save Selection
</sp-menu-item>
<sp-menu-item disabled>
Make Work Path
</sp-menu-item>
</sp-menu>
</sp-action-menu>
`
);

await elementUpdated(el);
expect(el).to.not.be.undefined;
// @ts-ignore
expect(el).lightDom.to.equalSnapshot();
// @ts-ignore
expect(el).shadowDom.to.equalSnapshot();
});
});
114 changes: 113 additions & 1 deletion test/dropdown.spec.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -11,10 +11,20 @@ governing permissions and limitations under the License.
*/

import { fixture, elementUpdated } from '@open-wc/testing';
import { Dropdown } from '../lib/dropdown';
import '../lib/dropdown';
import { Dropdown } from '../lib/dropdown';
import { html } from 'lit-element';
import { expect } from '@bundled-es-modules/chai';
import { MenuItem } from '../lib/menu-item';

const keyboardEvent = (code: string) =>
new KeyboardEvent('keydown', {
bubbles: true,
composed: true,
cancelable: true,
code,
});
const arrowDownEvent = keyboardEvent('ArrowDown');

describe('Dropdown', () => {
it('loads', async () => {
Expand Down Expand Up @@ -54,4 +64,106 @@ describe('Dropdown', () => {
// @ts-ignore
expect(el).shadowDom.to.equalSnapshot();
});
it('selects', async () => {
const el = await fixture<Dropdown>(
html`
<sp-dropdown>
Select a Country with a very long label, too long in fact
<sp-menu slot="options" role="listbox">
<sp-menu-item>
Deselect
</sp-menu-item>
<sp-menu-item>
Select Inverse
</sp-menu-item>
<sp-menu-item>
Feather...
</sp-menu-item>
<sp-menu-item>
Select and Mask...
</sp-menu-item>
<sp-menu-divider></sp-menu-divider>
<sp-menu-item>
Save Selection
</sp-menu-item>
<sp-menu-item disabled>
Make Work Path
</sp-menu-item>
</sp-menu>
</sp-dropdown>
`
);

await elementUpdated(el);

const secondItem = el.querySelector(
'sp-menu-item:nth-of-type(2)'
) as MenuItem;
const button = el.button as HTMLButtonElement;

button.click();
await elementUpdated(el);

expect(el.open).to.be.true;
expect(button.textContent!.trim()).to.equal('');

secondItem.click();
await elementUpdated(el);

expect(el.open).to.be.false;
expect(button.textContent!.trim()).to.equal('Select Inverse');
});

it('opens on ArrowDown', async () => {
const el = await fixture<Dropdown>(
html`
<sp-dropdown>
Select a Country with a very long label, too long in fact
<sp-menu slot="options" role="listbox">
<sp-menu-item>
Deselect
</sp-menu-item>
<sp-menu-item>
Select Inverse
</sp-menu-item>
<sp-menu-item>
Feather...
</sp-menu-item>
<sp-menu-item>
Select and Mask...
</sp-menu-item>
<sp-menu-divider></sp-menu-divider>
<sp-menu-item>
Save Selection
</sp-menu-item>
<sp-menu-item disabled>
Make Work Path
</sp-menu-item>
</sp-menu>
</sp-dropdown>
`
);

await elementUpdated(el);

const firstItem = el.querySelector(
'sp-menu-item:nth-of-type(1)'
) as MenuItem;
const button = el.button as HTMLButtonElement;

el.focus();
await elementUpdated(el);

button.dispatchEvent(arrowDownEvent);
await elementUpdated(el);

expect(el.open).to.be.true;
expect(button.textContent!.trim()).to.equal('');

firstItem.click();
await elementUpdated(el);

expect(el.open).to.be.false;
expect(button.textContent!.trim()).to.equal('Deselect');
});
});

0 comments on commit 7f064f9

Please sign in to comment.