test: add missing imports to tests (#192)

madsrasmussen · iOvergaard · commit 1da28ee2c015 · 2022-04-13T10:18:56.000+02:00
* import required elements in tests

* use label attribute in uui-pagination

* add aria label to password input toggle button

* add label to input-lock button

* add more missing imports

* fix pagination tests
diff --git a/packages/uui-card-content-node/lib/uui-card-content-node.test.ts b/packages/uui-card-content-node/lib/uui-card-content-node.test.ts
@@ -1,16 +1,15 @@
-import '.';
-
 import {
   elementUpdated,
   expect,
   fixture,
   html,
   oneEvent,
 } from '@open-wc/testing';
+import '@umbraco-ui/uui-icon/lib';
 import { UUISelectableEvent } from '@umbraco-ui/uui-base/lib/events';
 import { UUICardEvent } from '@umbraco-ui/uui-card/lib';
-
 import { UUICardContentNodeElement } from './uui-card-content-node.element';
+import '.';
 
 describe('UUICardContentNodeElement', () => {
   let element: UUICardContentNodeElement;
diff --git a/packages/uui-card-media/lib/uui-card-media.test.ts b/packages/uui-card-media/lib/uui-card-media.test.ts
@@ -5,6 +5,8 @@ import {
   oneEvent,
   elementUpdated,
 } from '@open-wc/testing';
+import '@umbraco-ui/uui-symbol-folder/lib';
+import '@umbraco-ui/uui-symbol-file/lib';
 import { UUICardMediaElement } from './uui-card-media.element';
 import '.';
 import { UUICardEvent } from '@umbraco-ui/uui-card/lib';
diff --git a/packages/uui-card-user/lib/uui-card-user.test.ts b/packages/uui-card-user/lib/uui-card-user.test.ts
@@ -7,6 +7,7 @@ import {
   html,
   oneEvent,
 } from '@open-wc/testing';
+import '@umbraco-ui/uui-avatar/lib';
 import { UUISelectableEvent } from '@umbraco-ui/uui-base/lib/events';
 import { UUICardEvent } from '@umbraco-ui/uui-card/lib';
 
diff --git a/packages/uui-form-layout-item/lib/uui-form-layout-item.test.ts b/packages/uui-form-layout-item/lib/uui-form-layout-item.test.ts
@@ -1,4 +1,5 @@
 import { expect, fixture, html } from '@open-wc/testing';
+import '@umbraco-ui/uui-form-validation-message/lib';
 
 import { UUIFormLayoutItemElement } from './uui-form-layout-item.element';
 
diff --git a/packages/uui-input-lock/lib/uui-input-lock.element.ts b/packages/uui-input-lock/lib/uui-input-lock.element.ts
@@ -72,7 +72,8 @@ export class UUIInputLockElement extends UUIInputElement {
       .disabled=${this.disabled}
       @click=${this._onLockToggle}
       compact
-      id="lock">
+      id="lock"
+      label="${this.locked ? 'Unlock input' : 'Lock input'}">
       ${this.renderIcon()}
     </uui-button>`;
   }
diff --git a/packages/uui-input-lock/lib/uui-input-lock.test.ts b/packages/uui-input-lock/lib/uui-input-lock.test.ts
@@ -1,5 +1,7 @@
 import { expect, fixture, html } from '@open-wc/testing';
 import { UUIInputElement } from '@umbraco-ui/uui-input/lib';
+import '@umbraco-ui/uui-icon/lib';
+import '@umbraco-ui/uui-button/lib';
 
 import { UUIInputLockElement } from './uui-input-lock.element';
 
diff --git a/packages/uui-input-password/lib/uui-input-password.element.ts b/packages/uui-input-password/lib/uui-input-password.element.ts
@@ -68,6 +68,9 @@ export class UUIInputPasswordElement extends UUIInputElement {
       @click=${this._onPasswordToggle}
       style="--uui-button-padding-top-factor: 0; --uui-button-padding-bottom-factor: 0"
       compact
+      label="${this.passwordType === 'password'
+        ? 'Show password'
+        : 'Hide password'}"
       id="eye">
       ${this.renderIcon()}
     </uui-button>`;
diff --git a/packages/uui-input-password/lib/uui-input-password.test.ts b/packages/uui-input-password/lib/uui-input-password.test.ts
@@ -1,4 +1,6 @@
 import { expect, fixture, html } from '@open-wc/testing';
+import '@umbraco-ui/uui-icon/lib';
+import '@umbraco-ui/uui-button/lib';
 import { UUIInputElement } from '@umbraco-ui/uui-input/lib/';
 
 import { UUIInputPasswordElement } from './uui-input-password.element';
diff --git a/packages/uui-menu-item/lib/uui-menu-item.test.ts b/packages/uui-menu-item/lib/uui-menu-item.test.ts
@@ -5,7 +5,8 @@ import {
   html,
   oneEvent,
 } from '@open-wc/testing';
-
+import '@umbraco-ui/uui-symbol-expand/lib';
+import '@umbraco-ui/uui-loader-bar/lib';
 import { UUIMenuItemElement } from './uui-menu-item.element';
 
 describe('UUIMenuItemElement', () => {
diff --git a/packages/uui-pagination/lib/uui-pagination.element.ts b/packages/uui-pagination/lib/uui-pagination.element.ts
@@ -238,7 +238,7 @@ export class UUIPaginationElement extends LitElement {
       look="outline"
       class="nav"
       role="listitem"
-      aria-label="Go to first page"
+      label="Go to first page"
       ?disabled=${this._current === 1}
       @click=${() => this.goToPage(1)}>
       First
@@ -251,7 +251,7 @@ export class UUIPaginationElement extends LitElement {
       look="outline"
       class="nav"
       role="listitem"
-      aria-label="Go to previous page"
+      label="Go to previous page"
       ?disabled=${this._current === 1}
       @click=${this.goToPreviousPage}>
       Previous
@@ -264,7 +264,7 @@ export class UUIPaginationElement extends LitElement {
       look="outline"
       role="listitem"
       class="nav"
-      aria-label="Go to next page"
+      label="Go to next page"
       ?disabled=${this._current === this.total}
       @click=${this.goToNextPage}>
       Next
@@ -278,7 +278,7 @@ export class UUIPaginationElement extends LitElement {
         look="outline"
         role="listitem"
         class="nav"
-        aria-label="Go to last page"
+        label="Go to last page"
         ?disabled=${this.total === this._current}
         @click=${() => this.goToPage(this.total)}>
         Last
@@ -287,7 +287,12 @@ export class UUIPaginationElement extends LitElement {
   }
 
   protected renderDots() {
-    return html`<uui-button compact look="outline" tabindex="-1" class="dots"
+    return html`<uui-button
+      compact
+      look="outline"
+      tabindex="-1"
+      class="dots"
+      label="More pages"
       >...</uui-button
     > `;
   }
@@ -297,7 +302,7 @@ export class UUIPaginationElement extends LitElement {
       compact
       look="outline"
       role="listitem"
-      aria-label="Go to page ${page}"
+      label="Go to page ${page}"
       class=${'page' + (page === this._current ? ' active' : '')}
       tabindex=${page === this._current ? '-1' : ''}
       @click=${() => {
diff --git a/packages/uui-pagination/lib/uui-pagination.test.ts b/packages/uui-pagination/lib/uui-pagination.test.ts
@@ -5,6 +5,8 @@ import {
   elementUpdated,
   oneEvent,
 } from '@open-wc/testing';
+import '@umbraco-ui/uui-button/lib';
+import '@umbraco-ui/uui-button-group/lib';
 import { UUIPaginationElement } from './uui-pagination.element';
 import '.';
 
@@ -112,24 +114,28 @@ describe('UUIPaginationElement', () => {
     await elementUpdated(element);
 
     const buttons = element.shadowRoot?.querySelector('#pages')?.children;
-    const nextButton = buttons![6] as HTMLElement;
-    const activeButton = buttons![3] as HTMLElement;
+    const nextButton = buttons![4] as HTMLElement;
     nextButton.click();
 
+    await elementUpdated(element);
+
     expect(element.current).to.equal(3);
+
+    const activeButton = buttons![4] as HTMLElement;
     expect(activeButton).to.have.class('active');
   });
 
   it('goes to last page on click  and disables last and next buttons', async () => {
     let buttons = element.shadowRoot?.querySelector('#pages')?.children;
-    const lastButton = buttons![7] as HTMLElement;
-    const nextButton = buttons![6] as HTMLElement;
+    const lastButtonIndex = buttons!.length - 1;
+    const lastButton = buttons![lastButtonIndex] as HTMLElement;
+    const nextButton = buttons![lastButtonIndex - 1] as HTMLElement;
     lastButton.click();
 
     await elementUpdated(element);
 
     buttons = element.shadowRoot?.querySelector('#pages')?.children;
-    const activeButton = buttons![5] as HTMLElement;
+    const activeButton = buttons![19] as HTMLElement;
 
     expect(element.current).to.equal(30);
     expect(activeButton).to.have.class('active');
diff --git a/packages/uui-ref-node-data-type/lib/uui-ref-node-data-type.test.ts b/packages/uui-ref-node-data-type/lib/uui-ref-node-data-type.test.ts
@@ -5,6 +5,7 @@ import {
   oneEvent,
   elementUpdated,
 } from '@open-wc/testing';
+import '@umbraco-ui/uui-icon/lib';
 import { UUIRefNodeDataTypeElement } from './uui-ref-node-data-type.element';
 import '.';
 
diff --git a/packages/uui-ref-node-document-type/lib/uui-ref-node-document-type.test.ts b/packages/uui-ref-node-document-type/lib/uui-ref-node-document-type.test.ts
@@ -5,6 +5,7 @@ import {
   oneEvent,
   elementUpdated,
 } from '@open-wc/testing';
+import '@umbraco-ui/uui-icon/lib';
 import { UUIRefNodeDocumentTypeElement } from './uui-ref-node-document-type.element';
 import '.';
 
diff --git a/packages/uui-ref-node-form/lib/uui-ref-node-form.test.ts b/packages/uui-ref-node-form/lib/uui-ref-node-form.test.ts
@@ -5,6 +5,7 @@ import {
   oneEvent,
   elementUpdated,
 } from '@open-wc/testing';
+import '@umbraco-ui/uui-icon/lib';
 import { UUIRefNodeFormElement } from './uui-ref-node-form.element';
 import '.';
 
diff --git a/packages/uui-ref-node-member/lib/uui-ref-node-member.test.ts b/packages/uui-ref-node-member/lib/uui-ref-node-member.test.ts
@@ -5,6 +5,7 @@ import {
   oneEvent,
   elementUpdated,
 } from '@open-wc/testing';
+import '@umbraco-ui/uui-icon/lib';
 import { UUIRefNodeMemberElement } from './uui-ref-node-member.element';
 import '.';
 
diff --git a/packages/uui-ref-node-package/lib/uui-ref-node-package.test.ts b/packages/uui-ref-node-package/lib/uui-ref-node-package.test.ts
@@ -5,6 +5,7 @@ import {
   oneEvent,
   elementUpdated,
 } from '@open-wc/testing';
+import '@umbraco-ui/uui-icon/lib';
 import { UUIRefNodePackageElement } from './uui-ref-node-package.element';
 import '.';
 
diff --git a/packages/uui-ref-node-user/lib/uui-ref-node-user.test.ts b/packages/uui-ref-node-user/lib/uui-ref-node-user.test.ts
@@ -5,6 +5,7 @@ import {
   oneEvent,
   elementUpdated,
 } from '@open-wc/testing';
+import '@umbraco-ui/uui-icon/lib';
 import { UUIRefNodeUserElement } from './uui-ref-node-user.element';
 import '.';
 
diff --git a/packages/uui-ref-node/lib/uui-ref-node.test.ts b/packages/uui-ref-node/lib/uui-ref-node.test.ts
@@ -5,6 +5,7 @@ import {
   oneEvent,
   elementUpdated,
 } from '@open-wc/testing';
+import '@umbraco-ui/uui-icon/lib';
 import { UUIRefNodeElement } from './uui-ref-node.element';
 import '.';
 

Original file line number	Diff line number	Diff line change
`@@ -1,4 +1,5 @@`
`1`	`1`	`import { expect, fixture, html } from '@open-wc/testing';`
	`2`	`+import '@umbraco-ui/uui-form-validation-message/lib';`
`2`	`3`
`3`	`4`	`import { UUIFormLayoutItemElement } from './uui-form-layout-item.element';`
`4`	`5`