80af0b7505
The change action API provides informative descriptions of the actions. Problematically - For action buttons, these were provided in native tooltips that are hard to discover. - For overflow actions, the context was not provided at all. Include the context information in easily discoverable gr-tooltips for all actions whether they're button or overflow. Feature: Issue 6781 Change-Id: I667fe59578b57ffc88c87e77df4be991875425a4
194 lines
6.6 KiB
HTML
194 lines
6.6 KiB
HTML
<!DOCTYPE html>
|
|
<!--
|
|
@license
|
|
Copyright (C) 2016 The Android Open Source Project
|
|
|
|
Licensed 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 CONDITIONS OF ANY KIND, either express or implied.
|
|
See the License for the specific language governing permissions and
|
|
limitations under the License.
|
|
-->
|
|
|
|
<meta name="viewport" content="width=device-width, minimum-scale=1.0, initial-scale=1.0, user-scalable=yes">
|
|
<title>gr-dropdown</title>
|
|
|
|
<script src="../../../bower_components/webcomponentsjs/webcomponents-lite.min.js"></script>
|
|
<script src="../../../bower_components/web-component-tester/browser.js"></script>
|
|
<link rel="import" href="../../../test/common-test-setup.html"/>
|
|
<link rel="import" href="gr-dropdown.html">
|
|
|
|
<script>void(0);</script>
|
|
|
|
<test-fixture id="basic">
|
|
<template>
|
|
<gr-dropdown></gr-dropdown>
|
|
</template>
|
|
</test-fixture>
|
|
|
|
<script>
|
|
suite('gr-dropdown tests', () => {
|
|
let element;
|
|
let sandbox;
|
|
|
|
setup(() => {
|
|
stub('gr-rest-api-interface', {
|
|
getConfig() { return Promise.resolve({}); },
|
|
});
|
|
element = fixture('basic');
|
|
sandbox = sinon.sandbox.create();
|
|
});
|
|
|
|
teardown(() => {
|
|
sandbox.restore();
|
|
});
|
|
|
|
test('tap on trigger opens menu, then closes', () => {
|
|
sandbox.stub(element, '_open', () => { element.$.dropdown.open(); });
|
|
sandbox.stub(element, '_close', () => { element.$.dropdown.close(); });
|
|
assert.isFalse(element.$.dropdown.opened);
|
|
MockInteractions.tap(element.$.trigger);
|
|
assert.isTrue(element.$.dropdown.opened);
|
|
MockInteractions.tap(element.$.trigger);
|
|
assert.isFalse(element.$.dropdown.opened);
|
|
});
|
|
|
|
test('_computeURLHelper', () => {
|
|
const path = '/test';
|
|
const host = 'http://www.testsite.com';
|
|
const computedPath = element._computeURLHelper(host, path);
|
|
assert.equal(computedPath, '//http://www.testsite.com/test');
|
|
});
|
|
|
|
test('link URLs', () => {
|
|
assert.equal(
|
|
element._computeLinkURL({url: '/test'}),
|
|
'//' + window.location.host + '/test');
|
|
assert.equal(
|
|
element._computeLinkURL({url: '/test', target: '_blank'}),
|
|
'/test');
|
|
});
|
|
|
|
test('link rel', () => {
|
|
let link = {url: '/test'};
|
|
assert.isNull(element._computeLinkRel(link));
|
|
|
|
link = {url: '/test', target: '_blank'};
|
|
assert.equal(element._computeLinkRel(link), 'noopener');
|
|
|
|
link = {url: '/test', external: true};
|
|
assert.equal(element._computeLinkRel(link), 'external');
|
|
|
|
link = {url: '/test', target: '_blank', external: true};
|
|
assert.equal(element._computeLinkRel(link), 'noopener');
|
|
});
|
|
|
|
test('_getClassIfBold', () => {
|
|
let bold = true;
|
|
assert.equal(element._getClassIfBold(bold), 'bold-text');
|
|
|
|
bold = false;
|
|
assert.equal(element._getClassIfBold(bold), '');
|
|
});
|
|
|
|
test('Top text exists and is bolded correctly', () => {
|
|
element.topContent = [{text: 'User', bold: true}, {text: 'email'}];
|
|
flushAsynchronousOperations();
|
|
const topItems = Polymer.dom(element.root).querySelectorAll('.top-item');
|
|
assert.equal(topItems.length, 2);
|
|
assert.isTrue(topItems[0].classList.contains('bold-text'));
|
|
assert.isFalse(topItems[1].classList.contains('bold-text'));
|
|
});
|
|
|
|
test('non link items', () => {
|
|
const item0 = {name: 'item one', id: 'foo'};
|
|
element.items = [item0, {name: 'item two', id: 'bar'}];
|
|
const fooTapped = sandbox.stub();
|
|
const tapped = sandbox.stub();
|
|
element.addEventListener('tap-item-foo', fooTapped);
|
|
element.addEventListener('tap-item', tapped);
|
|
flushAsynchronousOperations();
|
|
MockInteractions.tap(element.$$('.itemAction'));
|
|
assert.isTrue(fooTapped.called);
|
|
assert.isTrue(tapped.called);
|
|
assert.deepEqual(tapped.lastCall.args[0].detail, item0);
|
|
});
|
|
|
|
test('disabled non link item', () => {
|
|
element.items = [{name: 'item one', id: 'foo'}];
|
|
element.disabledIds = ['foo'];
|
|
|
|
const stub = sandbox.stub();
|
|
const tapped = sandbox.stub();
|
|
element.addEventListener('tap-item-foo', stub);
|
|
element.addEventListener('tap-item', tapped);
|
|
flushAsynchronousOperations();
|
|
MockInteractions.tap(element.$$('.itemAction'));
|
|
assert.isFalse(stub.called);
|
|
assert.isFalse(tapped.called);
|
|
});
|
|
|
|
test('properly sets tooltips', () => {
|
|
element.items = [
|
|
{name: 'item one', id: 'foo', tooltip: 'hello'},
|
|
{name: 'item two', id: 'bar'},
|
|
];
|
|
element.disabledIds = [];
|
|
flushAsynchronousOperations();
|
|
const tooltipContents = Polymer.dom(element.root)
|
|
.querySelectorAll('iron-dropdown li gr-tooltip-content');
|
|
assert.equal(tooltipContents.length, 2);
|
|
assert.isTrue(tooltipContents[0].hasTooltip);
|
|
assert.equal(tooltipContents[0].getAttribute('title'), 'hello');
|
|
assert.isFalse(tooltipContents[1].hasTooltip);
|
|
});
|
|
|
|
suite('keyboard navigation', () => {
|
|
setup(() => {
|
|
element.items = [
|
|
{name: 'item one', id: 'foo'},
|
|
{name: 'item two', id: 'bar'},
|
|
];
|
|
flushAsynchronousOperations();
|
|
});
|
|
|
|
test('down', () => {
|
|
const stub = sandbox.stub(element.$.cursor, 'next');
|
|
assert.isFalse(element.$.dropdown.opened);
|
|
MockInteractions.pressAndReleaseKeyOn(element, 40);
|
|
assert.isTrue(element.$.dropdown.opened);
|
|
MockInteractions.pressAndReleaseKeyOn(element, 40);
|
|
assert.isTrue(stub.called);
|
|
});
|
|
|
|
test('up', () => {
|
|
const stub = sandbox.stub(element.$.cursor, 'previous');
|
|
assert.isFalse(element.$.dropdown.opened);
|
|
MockInteractions.pressAndReleaseKeyOn(element, 38);
|
|
assert.isTrue(element.$.dropdown.opened);
|
|
MockInteractions.pressAndReleaseKeyOn(element, 38);
|
|
assert.isTrue(stub.called);
|
|
});
|
|
|
|
test('enter/space', () => {
|
|
// Because enter and space are handled by the same fn, we need only to
|
|
// test one.
|
|
assert.isFalse(element.$.dropdown.opened);
|
|
MockInteractions.pressAndReleaseKeyOn(element, 32); // Space
|
|
assert.isTrue(element.$.dropdown.opened);
|
|
|
|
const el = element.$.cursor.target.querySelector(':not([hidden])');
|
|
const stub = sandbox.stub(el, 'click');
|
|
MockInteractions.pressAndReleaseKeyOn(element, 32); // Space
|
|
assert.isTrue(stub.called);
|
|
});
|
|
});
|
|
});
|
|
</script>
|