| <!DOCTYPE html> |
| <!-- |
| Copyright (C) 2017 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-label-scores</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="../../../bower_components/iron-test-helpers/iron-test-helpers.html"> |
| <link rel="import" href="gr-label-scores.html"> |
| |
| <script>void(0);</script> |
| |
| <test-fixture id="basic"> |
| <template> |
| <gr-label-scores></gr-label-scores> |
| </template> |
| </test-fixture> |
| |
| <script> |
| suite('gr-label-scores tests', () => { |
| let element; |
| let sandbox; |
| |
| setup(done => { |
| sandbox = sinon.sandbox.create(); |
| stub('gr-rest-api-interface', { |
| getLoggedIn() { return Promise.resolve(false); }, |
| }); |
| element = fixture('basic'); |
| element.change = { |
| _number: '123', |
| labels: { |
| 'Code-Review': { |
| values: { |
| '0': 'No score', |
| '+1': 'good', |
| '+2': 'excellent', |
| '-1': 'bad', |
| '-2': 'terrible', |
| }, |
| default_value: 0, |
| value: 1, |
| all: [{ |
| _account_id: 123, |
| value: '+1', |
| }], |
| }, |
| 'Verified': { |
| values: { |
| '0': 'No score', |
| '+1': 'good', |
| '+2': 'excellent', |
| '-1': 'bad', |
| '-2': 'terrible', |
| }, |
| default_value: 0, |
| value: 1, |
| all: [{ |
| _account_id: 123, |
| value: '+1', |
| }], |
| }, |
| }, |
| }; |
| |
| element.account = { |
| _account_id: 123, |
| }; |
| |
| element.permittedLabels = { |
| 'Code-Review': [ |
| '-2', |
| '-1', |
| ' 0', |
| '+1', |
| '+2', |
| ], |
| 'Verified': [ |
| '-1', |
| ' 0', |
| '+1', |
| ], |
| }; |
| flush(done); |
| }); |
| |
| teardown(() => { |
| sandbox.restore(); |
| }); |
| |
| test('label picker', () => { |
| for (const label in element.permittedLabels) { |
| if (element.permittedLabels.hasOwnProperty(label)) { |
| assert.ok(element.$$('iron-selector[data-label="' + label + '"]'), |
| label); |
| } |
| } |
| element.draft = 'I wholeheartedly disapprove'; |
| MockInteractions.tap(element.$$( |
| 'iron-selector[data-label="Code-Review"] > ' + |
| 'gr-button[data-value="-1"]')); |
| MockInteractions.tap(element.$$( |
| 'iron-selector[data-label="Verified"] > ' + |
| 'gr-button[data-value="-1"]')); |
| flushAsynchronousOperations(); |
| assert.deepEqual(element.getLabelValues(), { |
| 'Code-Review': -1, |
| 'Verified': -1, |
| }); |
| assert.equal(element.$$('iron-selector[data-label="Code-Review"]') |
| .selected, 1); |
| assert.equal(element.$$( |
| 'iron-selector[data-label="Verified"] .iron-selected') |
| .textContent.trim(), '-1'); |
| }); |
| |
| test('correct item is selected', () => { |
| assert.equal(element.$$('iron-selector[data-label="Code-Review"]') |
| .selected, 3); |
| assert.equal( |
| element.$$('iron-selector[data-label="Code-Review"] .iron-selected') |
| .textContent.trim(), '+1'); |
| |
| // +1 is in the third position (-1, 0, +1). |
| assert.equal(element.$$('iron-selector[data-label="Verified"]') |
| .selected, 2); |
| assert.equal(element.$$( |
| 'iron-selector[data-label="Verified"] .iron-selected') |
| .textContent.trim(), '+1'); |
| }); |
| |
| test('do not display tooltips on touch devices', () => { |
| const verifiedBtn = element.$$( |
| 'iron-selector[data-label="Verified"] > gr-button[data-value="-1"]'); |
| |
| // On touch devices, tooltips should not be shown. |
| verifiedBtn._isTouchDevice = true; |
| verifiedBtn._handleShowTooltip(); |
| assert.isNotOk(verifiedBtn._tooltip); |
| verifiedBtn._handleHideTooltip(); |
| assert.isNotOk(verifiedBtn._tooltip); |
| |
| // On other devices, tooltips should be shown. |
| verifiedBtn._isTouchDevice = false; |
| verifiedBtn._handleShowTooltip(); |
| assert.isOk(verifiedBtn._tooltip); |
| verifiedBtn._handleHideTooltip(); |
| assert.isNotOk(verifiedBtn._tooltip); |
| }); |
| |
| test('_getVoteForAccount', () => { |
| const labelName = 'Code-Review'; |
| assert.equal(element._getVoteForAccount(element.change.labels, labelName, |
| element.account), '+1'); |
| }); |
| |
| test('_computeColumns', () => { |
| element._computeColumns(element.permittedLabels); |
| assert.deepEqual(element._labelValues, { |
| '-2': 0, |
| '-1': 1, |
| '0': 2, |
| '1': 3, |
| '2': 4, |
| }); |
| }); |
| |
| test('_computeIndexOfLabelValue', () => { |
| assert.equal(element._computeIndexOfLabelValue(element.change.labels, |
| element.permittedLabels, |
| element._labels[0]), 3); |
| }); |
| |
| test('_computeBlankItems', () => { |
| element._labelValues = { |
| '-2': 0, |
| '-1': 1, |
| '0': 2, |
| '1': 3, |
| '2': 4, |
| }; |
| |
| assert.equal(element._computeBlankItems(element.permittedLabels, |
| 'Code-Review').length, 0); |
| |
| assert.deepEqual( |
| element._computeBlankItems(element.permittedLabels, |
| 'Verified').length, 1); |
| }); |
| |
| test('changes in label score are reflected in the DOM', () => { |
| element.change = { |
| _number: '123', |
| labels: { |
| 'Code-Review': { |
| values: { |
| '0': 'No score', |
| '+1': 'good', |
| '+2': 'excellent', |
| '-1': 'bad', |
| '-2': 'terrible', |
| }, |
| default_value: 0, |
| }, |
| 'Verified': { |
| values: { |
| '0': 'No score', |
| '+1': 'good', |
| '+2': 'excellent', |
| '-1': 'bad', |
| '-2': 'terrible', |
| }, |
| default_value: 0, |
| }, |
| }, |
| }; |
| flushAsynchronousOperations(); |
| const selector = element.$$('iron-selector[data-label="Verified"]'); |
| element.set(['change', 'labels', 'Verified', 'all'], |
| [{_account_id: 123, value: 1}]); |
| flushAsynchronousOperations(); |
| assert.equal(selector.selected, 2); // Index 2, value 1 |
| }); |
| |
| test('without permitted labels', () => { |
| element.permittedLabels = { |
| Verified: [ |
| '-1', |
| ' 0', |
| '+1', |
| ], |
| }; |
| flushAsynchronousOperations(); |
| assert.isOk(element.$$('iron-selector[data-label="Verified"]')); |
| assert.isFalse(element.$$('iron-selector[data-label="Verified"]').hidden); |
| assert.isOk(element.$$('iron-selector[data-label="Code-Review"]')); |
| assert.isTrue( |
| element.$$('iron-selector[data-label="Code-Review"]').hidden); |
| }); |
| |
| test('asymetrical labels', () => { |
| element.permittedLabels = { |
| 'Code-Review': [ |
| '-2', |
| '-1', |
| ' 0', |
| '+1', |
| '+2', |
| ], |
| 'Verified': [ |
| ' 0', |
| '+1', |
| ], |
| }; |
| flushAsynchronousOperations(); |
| assert.equal(element.$$('iron-selector[data-label="Verified"]') |
| .items.length, 2); |
| assert.equal(Polymer.dom(element.root). |
| querySelectorAll('.placeholder[data-label="Verified"]').length, 3); |
| assert.equal(element.$$('iron-selector[data-label="Code-Review"]') |
| .items.length, 5); |
| assert.equal(Polymer.dom(element.root). |
| querySelectorAll('.placeholder[data-label="Code-Review"]').length, 0); |
| }); |
| }); |
| </script> |
