Add ShadowDOM tests for elements/core components
Release-Notes: skip
Google-Bug-Id: b/238288621
Change-Id: Iccee91b4920451c2384c5b42e4026dc7147d3ac7
diff --git a/polygerrit-ui/app/elements/core/gr-account-dropdown/gr-account-dropdown_test.ts b/polygerrit-ui/app/elements/core/gr-account-dropdown/gr-account-dropdown_test.ts
index 921518d27..b9d621d 100644
--- a/polygerrit-ui/app/elements/core/gr-account-dropdown/gr-account-dropdown_test.ts
+++ b/polygerrit-ui/app/elements/core/gr-account-dropdown/gr-account-dropdown_test.ts
@@ -5,17 +5,28 @@
*/
import '../../../test/common-test-setup-karma';
import './gr-account-dropdown';
+import {fixture, html} from '@open-wc/testing-helpers';
import {GrAccountDropdown} from './gr-account-dropdown';
import {AccountInfo} from '../../../types/common';
import {createServerInfo} from '../../../test/test-data-generators';
-const basicFixture = fixtureFromElement('gr-account-dropdown');
-
suite('gr-account-dropdown tests', () => {
let element: GrAccountDropdown;
- setup(() => {
- element = basicFixture.instantiate();
+ setup(async () => {
+ element = await fixture(html`<gr-account-dropdown></gr-account-dropdown>`);
+ });
+
+ test('renders', async () => {
+ element.account = {name: 'John Doe', email: 'john@doe.com'} as AccountInfo;
+ await element.updateComplete;
+
+ expect(element).shadowDom.to.equal(/* HTML */ `
+ <gr-dropdown link="">
+ <span>John Doe</span>
+ <gr-avatar aria-label="Account avatar" hidden=""> </gr-avatar>
+ </gr-dropdown>
+ `);
});
test('account information', () => {
@@ -29,7 +40,7 @@
test('test for account without a name', () => {
element.account = {id: '0001'} as AccountInfo;
assert.deepEqual(element.topContent, [
- {text: 'Anonymous', bold: true},
+ {text: 'Name of user not set', bold: true},
{text: ''},
]);
});
diff --git a/polygerrit-ui/app/elements/core/gr-error-dialog/gr-error-dialog_test.ts b/polygerrit-ui/app/elements/core/gr-error-dialog/gr-error-dialog_test.ts
index fd474e5..19db752 100644
--- a/polygerrit-ui/app/elements/core/gr-error-dialog/gr-error-dialog_test.ts
+++ b/polygerrit-ui/app/elements/core/gr-error-dialog/gr-error-dialog_test.ts
@@ -3,20 +3,34 @@
* Copyright 2018 Google LLC
* SPDX-License-Identifier: Apache-2.0
*/
+import {fixture, html} from '@open-wc/testing-helpers';
import * as MockInteractions from '@polymer/iron-test-helpers/mock-interactions';
import '../../../test/common-test-setup-karma';
import {mockPromise, queryAndAssert} from '../../../test/test-utils';
import {GrDialog} from '../../shared/gr-dialog/gr-dialog';
import {GrErrorDialog} from './gr-error-dialog';
-
-const basicFixture = fixtureFromElement('gr-error-dialog');
+import './gr-error-dialog';
suite('gr-error-dialog tests', () => {
let element: GrErrorDialog;
setup(async () => {
- element = basicFixture.instantiate();
- await element.updateComplete;
+ element = await fixture(html`<gr-error-dialog></gr-error-dialog>`);
+ });
+
+ test('renders', () => {
+ expect(element).shadowDom.to.equal(/* HTML */ `
+ <gr-dialog
+ cancel-label=""
+ confirm-label="Dismiss"
+ confirm-on-enter=""
+ id="dialog"
+ role="dialog"
+ >
+ <div class="header" slot="header">An error occurred</div>
+ <div class="main" slot="main"></div>
+ </gr-dialog>
+ `);
});
test('dismiss tap fires event', async () => {
diff --git a/polygerrit-ui/app/elements/core/gr-error-manager/gr-error-manager.ts b/polygerrit-ui/app/elements/core/gr-error-manager/gr-error-manager.ts
index d7b1130..6487bb8 100644
--- a/polygerrit-ui/app/elements/core/gr-error-manager/gr-error-manager.ts
+++ b/polygerrit-ui/app/elements/core/gr-error-manager/gr-error-manager.ts
@@ -319,7 +319,7 @@
this.reporting.error(new Error(`network error: ${e.detail.error.message}`));
};
- // TODO(dhruvsr): allow less priority alerts to override high priority alerts
+ // TODO(dhruvsri): allow less priority alerts to override high priority alerts
// In some use cases we may want generic alerts to show along/over errors
// private but used in tests
canOverride(incoming = ErrorType.GENERIC, existing = ErrorType.GENERIC) {
diff --git a/polygerrit-ui/app/elements/core/gr-error-manager/gr-error-manager_test.ts b/polygerrit-ui/app/elements/core/gr-error-manager/gr-error-manager_test.ts
index de23365..a4f1893 100644
--- a/polygerrit-ui/app/elements/core/gr-error-manager/gr-error-manager_test.ts
+++ b/polygerrit-ui/app/elements/core/gr-error-manager/gr-error-manager_test.ts
@@ -56,6 +56,31 @@
});
});
+ test('renders', () => {
+ expect(element).shadowDom.to.equal(/* HTML */ `
+ <gr-overlay
+ aria-hidden="true"
+ id="errorOverlay"
+ style="outline: none; display: none;"
+ tabindex="-1"
+ with-backdrop=""
+ >
+ <gr-error-dialog id="errorDialog"> </gr-error-dialog>
+ </gr-overlay>
+ <gr-overlay
+ always-on-top=""
+ aria-hidden="true"
+ id="noInteractionOverlay"
+ no-cancel-on-esc-key=""
+ no-cancel-on-outside-click=""
+ style="outline: none; display: none;"
+ tabindex="-1"
+ with-backdrop=""
+ >
+ </gr-overlay>
+ `);
+ });
+
test('does not show auth error on 403 by default', async () => {
const showAuthErrorStub = sinon.stub(element, 'showAuthErrorAlert');
const responseText = Promise.resolve('server says no.');
@@ -305,7 +330,7 @@
assert.equal(fetchStub.callCount, 1);
await flush();
- // here needs two flush as there are two chanined
+ // here needs two flush as there are two chained
// promises on server-error handler and flush only flushes one
assert.equal(fetchStub.callCount, 2);
await flush();
diff --git a/polygerrit-ui/app/elements/core/gr-key-binding-display/gr-key-binding-display_test.ts b/polygerrit-ui/app/elements/core/gr-key-binding-display/gr-key-binding-display_test.ts
index 480391a..5d12c72 100644
--- a/polygerrit-ui/app/elements/core/gr-key-binding-display/gr-key-binding-display_test.ts
+++ b/polygerrit-ui/app/elements/core/gr-key-binding-display/gr-key-binding-display_test.ts
@@ -3,38 +3,58 @@
* Copyright 2018 Google LLC
* SPDX-License-Identifier: Apache-2.0
*/
+import {fixture, html} from '@open-wc/testing-helpers';
import '../../../test/common-test-setup-karma';
import './gr-key-binding-display';
import {GrKeyBindingDisplay} from './gr-key-binding-display';
-const basicFixture = fixtureFromElement('gr-key-binding-display');
+const x = ['x'];
+const ctrlX = ['Ctrl', 'x'];
+const shiftMetaX = ['Shift', 'Meta', 'x'];
suite('gr-key-binding-display tests', () => {
let element: GrKeyBindingDisplay;
- setup(() => {
- element = basicFixture.instantiate();
+ setup(async () => {
+ element = await fixture(
+ html`<gr-key-binding-display
+ .binding=${[x, ctrlX, shiftMetaX]}
+ ></gr-key-binding-display>`
+ );
+ });
+
+ test('renders', () => {
+ expect(element).shadowDom.to.equal(/* HTML */ `
+ <span class="key"> x </span>
+ or
+ <span class="key modifier"> Ctrl </span>
+ <span class="key"> x </span>
+ or
+ <span class="key modifier"> Shift </span>
+ <span class="key modifier"> Meta </span>
+ <span class="key"> x </span>
+ `);
});
suite('_computeKey', () => {
test('unmodified key', () => {
- assert.strictEqual(element._computeKey(['x']), 'x');
+ assert.strictEqual(element._computeKey(x), 'x');
});
test('key with modifiers', () => {
- assert.strictEqual(element._computeKey(['Ctrl', 'x']), 'x');
- assert.strictEqual(element._computeKey(['Shift', 'Meta', 'x']), 'x');
+ assert.strictEqual(element._computeKey(ctrlX), 'x');
+ assert.strictEqual(element._computeKey(shiftMetaX), 'x');
});
});
suite('_computeModifiers', () => {
test('single unmodified key', () => {
- assert.deepEqual(element._computeModifiers(['x']), []);
+ assert.deepEqual(element._computeModifiers(x), []);
});
test('key with modifiers', () => {
- assert.deepEqual(element._computeModifiers(['Ctrl', 'x']), ['Ctrl']);
- assert.deepEqual(element._computeModifiers(['Shift', 'Meta', 'x']), [
+ assert.deepEqual(element._computeModifiers(ctrlX), ['Ctrl']);
+ assert.deepEqual(element._computeModifiers(shiftMetaX), [
'Shift',
'Meta',
]);
diff --git a/polygerrit-ui/app/elements/core/gr-keyboard-shortcuts-dialog/gr-keyboard-shortcuts-dialog_test.ts b/polygerrit-ui/app/elements/core/gr-keyboard-shortcuts-dialog/gr-keyboard-shortcuts-dialog_test.ts
index e04c48c..bed46ef 100644
--- a/polygerrit-ui/app/elements/core/gr-keyboard-shortcuts-dialog/gr-keyboard-shortcuts-dialog_test.ts
+++ b/polygerrit-ui/app/elements/core/gr-keyboard-shortcuts-dialog/gr-keyboard-shortcuts-dialog_test.ts
@@ -13,6 +13,10 @@
const basicFixture = fixtureFromElement('gr-keyboard-shortcuts-dialog');
+const x = ['x'];
+const ctrlX = ['Ctrl', 'x'];
+const shiftMetaX = ['Shift', 'Meta', 'x'];
+
suite('gr-keyboard-shortcuts-dialog tests', () => {
let element: GrKeyboardShortcutsDialog;
@@ -26,6 +30,83 @@
flush();
}
+ test('renders left and right contents', async () => {
+ const directory = new Map([
+ [
+ ShortcutSection.NAVIGATION,
+ [{binding: [x, ctrlX], text: 'navigation shortcuts'}],
+ ],
+ [
+ ShortcutSection.ACTIONS,
+ [{binding: [shiftMetaX], text: 'navigation shortcuts'}],
+ ],
+ ]);
+ update(directory);
+ await element.updateComplete;
+
+ expect(element).shadowDom.to.equal(/* HTML */ `
+ <header>
+ <h3 class="heading-2">Keyboard shortcuts</h3>
+ <gr-button aria-disabled="false" link="" role="button" tabindex="0">
+ Close
+ </gr-button>
+ </header>
+ <main>
+ <div class="column">
+ <table>
+ <caption class="heading-3">
+ Navigation
+ </caption>
+ <thead>
+ <tr>
+ <th>
+ <strong> Action </strong>
+ </th>
+ <th>
+ <strong> Key </strong>
+ </th>
+ </tr>
+ </thead>
+ <tbody>
+ <tr>
+ <td>navigation shortcuts</td>
+ <td>
+ <gr-key-binding-display> </gr-key-binding-display>
+ </td>
+ </tr>
+ </tbody>
+ </table>
+ </div>
+ <div class="column">
+ <table>
+ <caption class="heading-3">
+ Actions
+ </caption>
+ <thead>
+ <tr>
+ <th>
+ <strong> Action </strong>
+ </th>
+ <th>
+ <strong> Key </strong>
+ </th>
+ </tr>
+ </thead>
+ <tbody>
+ <tr>
+ <td>navigation shortcuts</td>
+ <td>
+ <gr-key-binding-display> </gr-key-binding-display>
+ </td>
+ </tr>
+ </tbody>
+ </table>
+ </div>
+ </main>
+ <footer></footer>
+ `);
+ });
+
suite('left and right contents', () => {
test('empty dialog', () => {
assert.isEmpty(element.left);
diff --git a/polygerrit-ui/app/elements/core/gr-main-header/gr-main-header_test.ts b/polygerrit-ui/app/elements/core/gr-main-header/gr-main-header_test.ts
index 70034aa..c8a737f 100644
--- a/polygerrit-ui/app/elements/core/gr-main-header/gr-main-header_test.ts
+++ b/polygerrit-ui/app/elements/core/gr-main-header/gr-main-header_test.ts
@@ -28,6 +28,65 @@
await element.updateComplete;
});
+ test('renders', () => {
+ expect(element).shadowDom.to.equal(/* HTML */ `
+ <nav>
+ <a class="bigTitle" href="//localhost:9876/">
+ <gr-endpoint-decorator name="header-title">
+ <span class="titleText"> </span>
+ </gr-endpoint-decorator>
+ </a>
+ <ul class="links">
+ <li>
+ <gr-dropdown down-arrow="" horizontal-align="left" link="">
+ <span class="linksTitle" id="Changes"> Changes </span>
+ </gr-dropdown>
+ </li>
+ <li>
+ <gr-dropdown down-arrow="" horizontal-align="left" link="">
+ <span class="linksTitle" id="Browse"> Browse </span>
+ </gr-dropdown>
+ </li>
+ </ul>
+ <div class="rightItems">
+ <gr-endpoint-decorator
+ class="hideOnMobile"
+ name="header-small-banner"
+ >
+ </gr-endpoint-decorator>
+ <gr-smart-search id="search" label="Search for changes">
+ </gr-smart-search>
+ <gr-endpoint-decorator
+ class="hideOnMobile"
+ name="header-browse-source"
+ >
+ </gr-endpoint-decorator>
+ <gr-endpoint-decorator class="feedbackButton" name="header-feedback">
+ </gr-endpoint-decorator>
+ </div>
+ <div class="accountContainer" id="accountContainer">
+ <iron-icon
+ aria-label="Hide Searchbar"
+ icon="gr-icons:search"
+ id="mobileSearch"
+ role="button"
+ >
+ </iron-icon>
+ <a class="loginButton" href="/login"> Sign in </a>
+ <a
+ aria-label="Settings"
+ class="settingsButton"
+ href="/settings/"
+ role="button"
+ title="Settings"
+ >
+ <span class="filled material-icon"> settings </span>
+ </a>
+ </div>
+ </nav>
+ `);
+ });
+
test('link visibility', async () => {
element.loading = true;
await element.updateComplete;
diff --git a/polygerrit-ui/app/elements/core/gr-search-bar/gr-search-bar_test.ts b/polygerrit-ui/app/elements/core/gr-search-bar/gr-search-bar_test.ts
index db46c22..bde1ec7 100644
--- a/polygerrit-ui/app/elements/core/gr-search-bar/gr-search-bar_test.ts
+++ b/polygerrit-ui/app/elements/core/gr-search-bar/gr-search-bar_test.ts
@@ -28,6 +28,30 @@
await element.updateComplete;
});
+ test('renders', () => {
+ expect(element).shadowDom.to.equal(/* HTML */ `
+ <form>
+ <gr-autocomplete
+ allow-non-suggested-values=""
+ id="searchInput"
+ multi=""
+ show-search-icon=""
+ tab-complete=""
+ >
+ <a
+ class="help"
+ href="https://gerrit-review.googlesource.com/documentation/user-search.html"
+ slot="suffix"
+ tabindex="-1"
+ target="_blank"
+ >
+ <span class="material-icon" title="read documentation"> help </span>
+ </a>
+ </gr-autocomplete>
+ </form>
+ `);
+ });
+
test('value is propagated to inputVal', async () => {
element.value = 'foo';
await element.updateComplete;
diff --git a/polygerrit-ui/app/elements/core/gr-smart-search/gr-smart-search_test.ts b/polygerrit-ui/app/elements/core/gr-smart-search/gr-smart-search_test.ts
index 4eca296..f269200 100644
--- a/polygerrit-ui/app/elements/core/gr-smart-search/gr-smart-search_test.ts
+++ b/polygerrit-ui/app/elements/core/gr-smart-search/gr-smart-search_test.ts
@@ -19,6 +19,12 @@
await element.updateComplete;
});
+ test('renders', () => {
+ expect(element).shadowDom.to.equal(/* HTML */ `
+ <gr-search-bar id="search"> </gr-search-bar>
+ `);
+ });
+
test('Autocompletes accounts', () => {
stubRestApi('getSuggestedAccounts').callsFake(() =>
Promise.resolve([
