Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

switch to @brightspace-ui/testing fixture #3764

Merged
merged 3 commits into from
Jun 21, 2023
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension


Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 1 addition & 1 deletion .github/workflows/ci.yml
Original file line number Diff line number Diff line change
Expand Up @@ -21,7 +21,7 @@ jobs:
run: npm run lint:style
playwright:
name: Accessibility and Unit Tests
timeout-minutes: 10
timeout-minutes: 15
Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I've re-run this many times locally and in CI.

  • Locally, these changes are 1.1x (aXe) to 1.5x (unit) slower, which is barely noticeable
  • In CI however, these changes are 1.3x (aXe) to 1.8x (unit) slower, which is adding ~3.5 minutes to this job. It's still quicker than the visual-diff tests though! 😅

It's admittedly not great, but also not shocking since we're now await-ing all nested Lit components for ~1650 tests, and doing a lot more resetting of the browser state between tests. If the slowness becomes a problem, there's a lot of tests using timeouts that we could look into fixing up.

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Yeah I think it's worth doing some cleanup to get a better sense of the real timing

runs-on: ubuntu-latest
steps:
- uses: Brightspace/third-party-actions@actions/checkout
Expand Down
2 changes: 1 addition & 1 deletion components/alert/test/alert-toast.axe.js
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
import '../alert-toast.js';
import { expect, fixture, html } from '@open-wc/testing';
import { expect, fixture, html } from '@brightspace-ui/testing';

describe('d2l-alert-toast', () => {

Expand Down
2 changes: 1 addition & 1 deletion components/alert/test/alert-toast.test.js
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
import '../alert-toast.js';
import { expect, fixture, html, oneEvent } from '@open-wc/testing';
import { expect, fixture, html, oneEvent } from '@brightspace-ui/testing';
import { runConstructor } from '../../../tools/constructor-test-helper.js';

describe('d2l-alert-toast', () => {
Expand Down
2 changes: 1 addition & 1 deletion components/alert/test/alert.axe.js
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
import '../alert.js';
import { expect, fixture, html } from '@open-wc/testing';
import { expect, fixture, html } from '@brightspace-ui/testing';

describe('d2l-alert', () => {

Expand Down
2 changes: 1 addition & 1 deletion components/alert/test/alert.test.js
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
import '../alert.js';
import { expect, fixture, html, oneEvent } from '@open-wc/testing';
import { expect, fixture, html, oneEvent } from '@brightspace-ui/testing';
import { runConstructor } from '../../../tools/constructor-test-helper.js';

const alertFixture = html`
Expand Down
2 changes: 1 addition & 1 deletion components/backdrop/test/backdrop.test.js
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
import '../backdrop.js';
import { expect, fixture, html } from '@open-wc/testing';
import { expect, fixture, html } from '@brightspace-ui/testing';
import { runConstructor } from '../../../tools/constructor-test-helper.js';

const backdropFixture = html`
Expand Down
2 changes: 1 addition & 1 deletion components/breadcrumbs/test/breadcrumbs.axe.js
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
import '../breadcrumb.js';
import '../breadcrumb-current-page.js';
import '../breadcrumbs.js';
import { expect, fixture, html } from '@open-wc/testing';
import { expect, fixture, html } from '@brightspace-ui/testing';

describe('d2l-breadcrumbs', () => {

Expand Down
2 changes: 1 addition & 1 deletion components/button/test/button-icon.axe.js
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
import '../button-icon.js';
import { expect, fixture, html, oneEvent } from '@open-wc/testing';
import { expect, fixture, html, oneEvent } from '@brightspace-ui/testing';

describe('d2l-button-icon', () => {

Expand Down
2 changes: 1 addition & 1 deletion components/button/test/button-icon.test.js
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
import '../button-icon.js';
import { fixture, html, oneEvent } from '@open-wc/testing';
import { fixture, html, oneEvent } from '@brightspace-ui/testing';
import { runConstructor } from '../../../tools/constructor-test-helper.js';

describe('d2l-button-icon', () => {
Expand Down
2 changes: 1 addition & 1 deletion components/button/test/button-mixin.test.js
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
import { defineCE, expect, fixture } from '@open-wc/testing';
import { defineCE, expect, fixture } from '@brightspace-ui/testing';
import { html, LitElement } from 'lit';
import { ButtonMixin } from '../button-mixin.js';

Expand Down
2 changes: 1 addition & 1 deletion components/button/test/button-move.axe.js
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
import '../button-move.js';
import { expect, fixture, html, oneEvent } from '@open-wc/testing';
import { expect, fixture, html, oneEvent } from '@brightspace-ui/testing';

describe('d2l-button-move', () => {

Expand Down
2 changes: 1 addition & 1 deletion components/button/test/button-move.test.js
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
import { expect, fixture, html, oneEvent } from '@open-wc/testing';
import { expect, fixture, html, oneEvent } from '@brightspace-ui/testing';
import { keyDown } from '../../../tools/dom-test-helpers.js';
import { moveActions } from '../button-move.js';
import { runConstructor } from '../../../tools/constructor-test-helper.js';
Expand Down
2 changes: 1 addition & 1 deletion components/button/test/button-subtle.axe.js
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
import '../button-subtle.js';
import { expect, fixture, html, oneEvent } from '@open-wc/testing';
import { expect, fixture, html, oneEvent } from '@brightspace-ui/testing';

describe('d2l-button-subtle', () => {

Expand Down
2 changes: 1 addition & 1 deletion components/button/test/button-subtle.test.js
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
import '../button-subtle.js';
import { fixture, html, oneEvent } from '@open-wc/testing';
import { fixture, html, oneEvent } from '@brightspace-ui/testing';
import { runConstructor } from '../../../tools/constructor-test-helper.js';

describe('d2l-button-subtle', () => {
Expand Down
2 changes: 1 addition & 1 deletion components/button/test/button.axe.js
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
import '../button.js';
import { expect, fixture, html, oneEvent } from '@open-wc/testing';
import { expect, fixture, html, oneEvent } from '@brightspace-ui/testing';

const normalFixture = html`<d2l-button>Normal Button</d2l-button>`;
const primaryFixture = html`<d2l-button primary>Primary Button</d2l-button>`;
Expand Down
2 changes: 1 addition & 1 deletion components/button/test/button.test.js
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
import '../button.js';
import { fixture, html, oneEvent } from '@open-wc/testing';
import { fixture, html, oneEvent } from '@brightspace-ui/testing';
import { runConstructor } from '../../../tools/constructor-test-helper.js';

describe('d2l-button', () => {
Expand Down
2 changes: 1 addition & 1 deletion components/calendar/test/calendar.axe.js
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
import '../calendar.js';
import { expect, fixture, html } from '@open-wc/testing';
import { expect, fixture, html } from '@brightspace-ui/testing';

describe('d2l-calendar', () => {

Expand Down
2 changes: 1 addition & 1 deletion components/calendar/test/calendar.test.js
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
import { aTimeout, expect, fixture, html, oneEvent, waitUntil } from '@open-wc/testing';
import { aTimeout, expect, fixture, html, oneEvent, waitUntil } from '@brightspace-ui/testing';
import { checkIfDatesEqual,
getDatesInMonthArray,
getNextMonth,
Expand Down
2 changes: 1 addition & 1 deletion components/card/test/card-content-meta.axe.js
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
import '../card-content-meta.js';
import { expect, fixture, html } from '@open-wc/testing';
import { expect, fixture, html } from '@brightspace-ui/testing';

describe('d2l-card-content-meta', () => {

Expand Down
2 changes: 1 addition & 1 deletion components/card/test/card-content-title.axe.js
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
import '../card-content-title.js';
import { expect, fixture, html } from '@open-wc/testing';
import { expect, fixture, html } from '@brightspace-ui/testing';

describe('d2l-card-content-title', () => {

Expand Down
2 changes: 1 addition & 1 deletion components/card/test/card-footer-link.axe.js
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
import '../card-footer-link.js';
import { expect, fixture, html } from '@open-wc/testing';
import { expect, fixture, html } from '@brightspace-ui/testing';

describe('d2l-card-footer-link', () => {

Expand Down
2 changes: 1 addition & 1 deletion components/card/test/card-loading-shimmer.axe.js
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
import '../card-loading-shimmer.js';
import { expect, fixture, html } from '@open-wc/testing';
import { expect, fixture, html } from '@brightspace-ui/testing';

describe('d2l-card-loading-shimmer', () => {

Expand Down
2 changes: 1 addition & 1 deletion components/card/test/card.axe.js
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
import '../card.js';
import { expect, fixture, html, oneEvent } from '@open-wc/testing';
import { expect, fixture, html, oneEvent } from '@brightspace-ui/testing';

describe('d2l-card', () => {

Expand Down
2 changes: 1 addition & 1 deletion components/card/test/card.test.js
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
import '../card.js';
import { expect, fixture, html } from '@open-wc/testing';
import { expect, fixture, html } from '@brightspace-ui/testing';
import { runConstructor } from '../../../tools/constructor-test-helper.js';

describe('d2l-card', () => {
Expand Down
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
import '../collapsible-panel.js';
import '../collapsible-panel-summary-item.js';
import { expect, fixture, html } from '@open-wc/testing';
import { expect, fixture, html } from '@brightspace-ui/testing';

describe('d2l-collapsible-panel', () => {

Expand Down
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
import '../collapsible-panel.js';
import '../collapsible-panel-summary-item.js';
import '../collapsible-panel-group.js';
import { expect, fixture, html } from '@open-wc/testing';
import { expect, fixture, html } from '@brightspace-ui/testing';
import { runConstructor } from '../../../tools/constructor-test-helper.js';

describe('d2l-collapsible-panel', () => {
Expand Down
2 changes: 1 addition & 1 deletion components/count-badge/test/count-badge-icon.axe.js
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
import '../count-badge-icon.js';
import { expect, fixture, html } from '@open-wc/testing';
import { expect, fixture, html } from '@brightspace-ui/testing';

const countBadgeAnnounceChanges = html`
<d2l-count-badge-icon size="small" announce-changes text="1 new notification." type="notification" number="1"></d2l-count-badge-icon>`;
Expand Down
2 changes: 1 addition & 1 deletion components/count-badge/test/count-badge.axe.js
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
import '../count-badge.js';
import { expect, fixture, html } from '@open-wc/testing';
import { expect, fixture, html } from '@brightspace-ui/testing';

const countBadgeTooltip = html`
<d2l-count-badge size="small" has-tooltip text="1 new notification." type="notification" number="1"></d2l-count-badge>`;
Expand Down
2 changes: 1 addition & 1 deletion components/description-list/test/description-list.axe.js
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
import '../demo/description-list-test.js';
import { expect, fixture, html } from '@open-wc/testing';
import { expect, fixture, html } from '@brightspace-ui/testing';

describe('d2l-d2l-wrapper', () => {

Expand Down
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
import '../description-list-wrapper.js';

import { expect, fixture, html } from '@open-wc/testing';
import { expect, fixture, html } from '@brightspace-ui/testing';
import { runConstructor } from '../../../tools/constructor-test-helper.js';

describe('d2l-dl-wrapper', () => {
Expand Down
2 changes: 1 addition & 1 deletion components/dialog/test/dialog-confirm.test.js
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
import '../../button/button.js';
import '../dialog-confirm.js';
import { expect, fixture, oneEvent } from '@open-wc/testing';
import { expect, fixture, oneEvent } from '@brightspace-ui/testing';
import { getComposedActiveElement } from '../../../helpers/focus.js';
import { html } from 'lit';
import { runConstructor } from '../../../tools/constructor-test-helper.js';
Expand Down
15 changes: 9 additions & 6 deletions components/dialog/test/dialog.test.js
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
import '../dialog.js';
import { expect, fixture, oneEvent } from '@open-wc/testing';
import { expect, fixture, oneEvent } from '@brightspace-ui/testing';
import { getComposedActiveElement } from '../../../helpers/focus.js';
import { html } from 'lit';
import { runConstructor } from '../../../tools/constructor-test-helper.js';
Expand All @@ -17,7 +17,8 @@ describe('d2l-dialog', () => {
describe('focus management', () => {

it('should focus on close button if no focusable elements inside', async() => {
const el = await fixture(html`<d2l-dialog opened>not focusable</d2l-dialog>`);
const el = await fixture(html`<d2l-dialog>not focusable</d2l-dialog>`);
el.opened = true;
Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

As discussed previously, these types of tests where an event is fired as part of boot-up need to be adjusted to control when the event gets fired themselves.

await oneEvent(el, 'd2l-dialog-open');
expect(getComposedActiveElement().getAttribute('aria-label')).to.equal('Close this dialog');
});
Expand Down Expand Up @@ -52,16 +53,18 @@ describe('d2l-dialog', () => {
});

it('should not focus on an autofocus element that had not been made focusable', async() => {
const el = await fixture(html`<d2l-dialog opened><p autofocus>focus</p><button>focus</button></d2l-dialog>`);
const paragraph = el.querySelector('p');
const el = await fixture(html`<d2l-dialog><p autofocus>focus</p><button>focus</button></d2l-dialog>`);
el.opened = true;
await oneEvent(el, 'd2l-dialog-open');
const paragraph = el.querySelector('p');
expect(getComposedActiveElement()).to.not.equal(paragraph);
});

it('should not focus on a descendant autofocus element that had not been made focusable', async() => {
const el = await fixture(html`<d2l-dialog opened><div><p autofocus>focus</p></div><button>focus</button></d2l-dialog>`);
const paragraph = el.querySelector('p');
const el = await fixture(html`<d2l-dialog><div><p autofocus>focus</p></div><button>focus</button></d2l-dialog>`);
el.opened = true;
await oneEvent(el, 'd2l-dialog-open');
const paragraph = el.querySelector('p');
expect(getComposedActiveElement()).to.not.equal(paragraph);
});

Expand Down
4 changes: 1 addition & 3 deletions components/dropdown/test/dropdown-content.test.js
Original file line number Diff line number Diff line change
@@ -1,7 +1,6 @@
import '../dropdown.js';
import '../dropdown-content.js';
import { aTimeout, expect, fixture, html, nextFrame, oneEvent } from '@open-wc/testing';
import { focusElem } from '@brightspace-ui/testing';
import { aTimeout, expect, fixture, focusElem, html, nextFrame, oneEvent } from '@brightspace-ui/testing';
import { runConstructor } from '../../../tools/constructor-test-helper.js';

const normalFixture = html`
Expand Down Expand Up @@ -62,7 +61,6 @@ describe('d2l-dropdown', () => {
beforeEach(async() => {
dropdown = await fixture(normalFixture);
content = dropdown.querySelector('d2l-dropdown-content');
await content.updateComplete;
Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Will do more of this kind of thing in a follow-up PR.

});

describe('constructor', () => {
Expand Down
2 changes: 1 addition & 1 deletion components/dropdown/test/dropdown-menu.test.js
Original file line number Diff line number Diff line change
Expand Up @@ -4,7 +4,7 @@ import '../../menu/menu.js';
import '../../menu/menu-item.js';
import '../../menu/menu-item-link.js';
import '../../menu/menu-item-radio.js';
import { expect, fixture, html, oneEvent } from '@open-wc/testing';
import { expect, fixture, html, oneEvent } from '@brightspace-ui/testing';
import { runConstructor } from '../../../tools/constructor-test-helper.js';

const itemFixture = html`
Expand Down
2 changes: 1 addition & 1 deletion components/dropdown/test/dropdown-openers.test.js
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,7 @@ import '../dropdown-button-subtle.js';
import '../dropdown-button.js';
import '../dropdown-context-menu.js';
import '../dropdown-more.js';
import { fixture, html, oneEvent } from '@open-wc/testing';
import { fixture, html, oneEvent } from '@brightspace-ui/testing';
import { runConstructor } from '../../../tools/constructor-test-helper.js';

describe('d2l-dropdown-openers', () => {
Expand Down
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
import '../empty-state-action-button.js';
import '../empty-state-action-link.js';
import '../empty-state-illustrated.js';
import { expect, fixture, html } from '@open-wc/testing';
import { expect, fixture, html } from '@brightspace-ui/testing';

describe ('d2l-empty-state-illustrated', () => {

Expand Down
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
import '../empty-state-illustrated.js';
import '../empty-state-action-button.js';
import '../empty-state-action-link.js';
import { fixture, oneEvent, waitUntil } from '@open-wc/testing';
import { fixture, oneEvent, waitUntil } from '@brightspace-ui/testing';
import { html } from 'lit';
import { runConstructor } from '../../../tools/constructor-test-helper.js';

Expand Down
2 changes: 1 addition & 1 deletion components/empty-state/test/empty-state-simple.axe.js
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
import '../empty-state-action-button.js';
import '../empty-state-action-link.js';
import '../empty-state-simple.js';
import { expect, fixture, html } from '@open-wc/testing';
import { expect, fixture, html } from '@brightspace-ui/testing';

describe ('d2l-empty-state-simple', () => {

Expand Down
2 changes: 1 addition & 1 deletion components/empty-state/test/empty-state-simple.test.js
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
import '../empty-state-action-button.js';
import '../empty-state-action-link.js';
import '../empty-state-simple.js';
import { fixture, oneEvent } from '@open-wc/testing';
import { fixture, oneEvent } from '@brightspace-ui/testing';
import { html } from 'lit';
import { runConstructor } from '../../../tools/constructor-test-helper.js';

Expand Down
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
import '../expand-collapse-content.js';
import { fixture, html } from '@open-wc/testing';
import { fixture, html } from '@brightspace-ui/testing';
import { runConstructor } from '../../../tools/constructor-test-helper.js';

const collapsedContentFixture = html`<d2l-expand-collapse-content>A message.</d2l-expand-collapse-content>`;
Expand Down
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
import '../filter-dimension-set-value.js';
import { expect, fixture, html, oneEvent } from '@open-wc/testing';
import { expect, fixture, html, oneEvent } from '@brightspace-ui/testing';
import { runConstructor } from '../../../tools/constructor-test-helper.js';
import { spy } from 'sinon';

Expand Down
2 changes: 1 addition & 1 deletion components/filter/test/filter-dimension-set.test.js
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
import '../filter-dimension-set.js';
import '../filter-dimension-set-value.js';
import '../filter-dimension-set-empty-state.js';
import { expect, fixture, html, oneEvent } from '@open-wc/testing';
import { expect, fixture, html, oneEvent } from '@brightspace-ui/testing';
import { runConstructor } from '../../../tools/constructor-test-helper.js';
import { spy } from 'sinon';

Expand Down
2 changes: 1 addition & 1 deletion components/filter/test/filter-overflow-group.axe.js
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,7 @@ import '../filter.js';
import '../filter-dimension-set.js';
import '../filter-dimension-set-value.js';
import '../filter-overflow-group.js';
import { expect, fixture, html } from '@open-wc/testing';
import { expect, fixture, html } from '@brightspace-ui/testing';

describe('d2l-filter-overflow-group', () => {

Expand Down
2 changes: 1 addition & 1 deletion components/filter/test/filter-overflow-group.test.js
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,7 @@ import '../filter.js';
import '../filter-dimension-set.js';
import '../filter-dimension-set-value.js';
import '../filter-overflow-group.js';
import { aTimeout, expect, fixture, html, oneEvent, waitUntil } from '@open-wc/testing';
import { aTimeout, expect, fixture, html, oneEvent, waitUntil } from '@brightspace-ui/testing';
import { runConstructor } from '../../../tools/constructor-test-helper.js';

describe('d2l-filter-overflow-group', () => {
Expand Down
2 changes: 1 addition & 1 deletion components/filter/test/filter-tags.axe.js
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,7 @@ import '../filter.js';
import '../filter-dimension-set.js';
import '../filter-dimension-set-value.js';
import '../filter-tags.js';
import { expect, fixture, html, waitUntil } from '@open-wc/testing';
import { expect, fixture, html, waitUntil } from '@brightspace-ui/testing';

const basicFixture = html`
<div>
Expand Down
2 changes: 1 addition & 1 deletion components/filter/test/filter-tags.test.js
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,7 @@ import '../filter.js';
import '../filter-dimension-set.js';
import '../filter-dimension-set-value.js';
import '../filter-tags.js';
import { expect, fixture, html, oneEvent, waitUntil } from '@open-wc/testing';
import { expect, fixture, html, oneEvent, waitUntil } from '@brightspace-ui/testing';
import { runConstructor } from '../../../tools/constructor-test-helper.js';
import { spy } from 'sinon';

Expand Down
Loading