605bc571e8
The change table editor is used to modify what columns appear in change lists with a series of checkboxes. These checkboxes have a click area that is slightly larger than the checkbox itself in order to make them easier to click on. This is accomplished by intercepting a click on the container and relaying it to the checkbox it contains. However, because one event handler was used for three different purposes, every time a user clicked on the checkbox container this would result in two calls to the handler. If the column was being added, this would mean that it would appear in the preference list twice. Duplicating preference names is avoided by splitting the event handlers so that each handler does one thing only. Updates to the preference list are made my querying the state of the checkboxes rather than making incremental updates. The cursor style of the checkbox is updated too. Change-Id: Icb8c4b94209c62c7794112f36e89183776c73ea8
159 lines
5.0 KiB
HTML
159 lines
5.0 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-settings-view</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-change-table-editor.html">
|
|
|
|
<script>void(0);</script>
|
|
|
|
<test-fixture id="basic">
|
|
<template>
|
|
<gr-change-table-editor></gr-change-table-editor>
|
|
</template>
|
|
</test-fixture>
|
|
|
|
<script>
|
|
suite('gr-change-table-editor tests', () => {
|
|
let element;
|
|
let columns;
|
|
let sandbox;
|
|
|
|
setup(() => {
|
|
element = fixture('basic');
|
|
sandbox = sinon.sandbox.create();
|
|
|
|
columns = [
|
|
'Subject',
|
|
'Status',
|
|
'Owner',
|
|
'Assignee',
|
|
'Repo',
|
|
'Branch',
|
|
'Updated',
|
|
];
|
|
|
|
element.set('displayedColumns', columns);
|
|
element.showNumber = false;
|
|
flushAsynchronousOperations();
|
|
});
|
|
|
|
teardown(() => {
|
|
sandbox.restore();
|
|
});
|
|
|
|
test('renders', () => {
|
|
const rows = element.$$('tbody').querySelectorAll('tr');
|
|
let tds;
|
|
|
|
// The `+ 1` is for the number column, which isn't included in the change
|
|
// table behavior's list.
|
|
assert.equal(rows.length, element.columnNames.length + 1);
|
|
for (let i = 0; i < columns.length; i++) {
|
|
tds = rows[i + 1].querySelectorAll('td');
|
|
assert.equal(tds[0].textContent, columns[i]);
|
|
}
|
|
});
|
|
|
|
test('hide item', () => {
|
|
const checkbox = element.$$('table tr:nth-child(2) input');
|
|
const isChecked = checkbox.checked;
|
|
const displayedLength = element.displayedColumns.length;
|
|
assert.isTrue(isChecked);
|
|
|
|
MockInteractions.tap(checkbox);
|
|
flushAsynchronousOperations();
|
|
|
|
assert.equal(element.displayedColumns.length, displayedLength - 1);
|
|
});
|
|
|
|
test('show item', () => {
|
|
element.set('displayedColumns', [
|
|
'Status',
|
|
'Owner',
|
|
'Assignee',
|
|
'Repo',
|
|
'Branch',
|
|
'Updated',
|
|
]);
|
|
flushAsynchronousOperations();
|
|
const checkbox = element.$$('table tr:nth-child(2) input');
|
|
const isChecked = checkbox.checked;
|
|
const displayedLength = element.displayedColumns.length;
|
|
assert.isFalse(isChecked);
|
|
assert.equal(element.$$('table').style.display, '');
|
|
|
|
MockInteractions.tap(checkbox);
|
|
flushAsynchronousOperations();
|
|
|
|
assert.equal(element.displayedColumns.length,
|
|
displayedLength + 1);
|
|
});
|
|
|
|
test('_getDisplayedColumns', () => {
|
|
assert.deepEqual(element._getDisplayedColumns(), columns);
|
|
MockInteractions.tap(
|
|
element.$$('.checkboxContainer input[name=Assignee]'));
|
|
assert.deepEqual(element._getDisplayedColumns(),
|
|
columns.filter(c => c !== 'Assignee'));
|
|
});
|
|
|
|
test('_handleCheckboxContainerTap relayes taps to checkboxes', () => {
|
|
sandbox.stub(element, '_handleNumberCheckboxTap');
|
|
sandbox.stub(element, '_handleTargetTap');
|
|
|
|
MockInteractions.tap(
|
|
element.$$('table tr:first-of-type .checkboxContainer'));
|
|
assert.isTrue(element._handleNumberCheckboxTap.calledOnce);
|
|
assert.isFalse(element._handleTargetTap.called);
|
|
|
|
MockInteractions.tap(
|
|
element.$$('table tr:last-of-type .checkboxContainer'));
|
|
assert.isTrue(element._handleNumberCheckboxTap.calledOnce);
|
|
assert.isTrue(element._handleTargetTap.calledOnce);
|
|
});
|
|
|
|
test('_handleNumberCheckboxTap', () => {
|
|
sandbox.spy(element, '_handleNumberCheckboxTap');
|
|
|
|
MockInteractions
|
|
.tap(element.$$('.checkboxContainer input[name=number]'));
|
|
assert.isTrue(element._handleNumberCheckboxTap.calledOnce);
|
|
assert.isTrue(element.showNumber);
|
|
|
|
MockInteractions
|
|
.tap(element.$$('.checkboxContainer input[name=number]'));
|
|
assert.isTrue(element._handleNumberCheckboxTap.calledTwice);
|
|
assert.isFalse(element.showNumber);
|
|
});
|
|
|
|
test('_handleTargetTap', () => {
|
|
sandbox.spy(element, '_handleTargetTap');
|
|
assert.include(element.displayedColumns, 'Assignee');
|
|
MockInteractions
|
|
.tap(element.$$('.checkboxContainer input[name=Assignee]'));
|
|
assert.isTrue(element._handleTargetTap.calledOnce);
|
|
assert.notInclude(element.displayedColumns, 'Assignee');
|
|
});
|
|
});
|
|
</script>
|