opendev/gerrit
Code Issues Proposed changes

Convert gr-diff_test.html to Karma tests

Browse Source 
As a part of the change:
* a11y test method is added to replace the method from WCT
* timeout for tests is increased to match WCT settings

Change-Id: I65f1eaddcec613dd15c98413c82ce978d104e061
This commit is contained in:
Dmitrii Filippov
2020-05-08 14:17:43 +02:00
parent 7d35e042bd
commit 861628fdab
6 changed files with 101 additions and 59 deletions
Download Patch File Download Diff File Expand all files Collapse all files

9
polygerrit-ui/app/.eslintrc.js
View File

@@ -180,7 +180,13 @@ module.exports = {
},
},
{
"files": ["*.html", "common-test-setup.js", "common-test-setup-karma.js", "*_test.js"],
"files": [
"*.html",
"common-test-setup.js",
"common-test-setup-karma.js",
"*_test.js",
"a11y-test-utils.js",
],
// Additional global variables allowed in tests
"globals": {
// Global variables from 3rd party test libraries/frameworks.
@@ -188,6 +194,7 @@ module.exports = {
// variables from these libraries and import is not possible
"MockInteractions": "readonly",
"_": "readonly",
"axs": "readonly",
"a11ySuite": "readonly",
"assert": "readonly",
"expect": "readonly",

93
polygerrit-ui/app/elements/diff/gr-diff/gr-diff_test.html → polygerrit-ui/app/elements/diff/gr-diff/gr-diff_test.js
View File

@@ -1,39 +1,21 @@
<!DOCTYPE html>
<!--
@license
Copyright (C) 2015 The Android Open Source Project
/**
* @license
* Copyright (C) 2015 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.
*/
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">
<meta charset="utf-8">
<title>gr-diff</title>
<script src="/node_modules/@webcomponents/webcomponentsjs/custom-elements-es5-adapter.js"></script>
<script src="/node_modules/@webcomponents/webcomponentsjs/webcomponents-lite.js"></script>
<script src="/components/wct-browser-legacy/browser.js"></script>
<script src="/components/web-component-tester/data/a11ySuite.js"></script>
<test-fixture id="basic">
<template>
<gr-diff></gr-diff>
</template>
</test-fixture>
<script type="module">
import '../../../test/common-test-setup.js';
import '../../../test/common-test-setup-karma.js';
import '../../shared/gr-rest-api-interface/gr-rest-api-interface.js';
import {getMockDiffResponse} from '../../../test/mocks/diff-response.js';
import './gr-diff.js';
@@ -41,6 +23,16 @@ import {dom, flush} from '@polymer/polymer/lib/legacy/polymer.dom.js';
import {GrDiffBuilderImage} from '../gr-diff-builder/gr-diff-builder-image.js';
import {util} from '../../../scripts/util.js';
import {_setHiddenScroll} from '../../../scripts/hiddenscroll.js';
import {runA11yAudit} from '../../../test/a11y-test-utils.js';
import '@polymer/paper-button/paper-button.js';
const basicFixture = fixtureFromElement('gr-diff');
suite('gr-diff a11y test', () => {
test('audit', async () => {
await runA11yAudit(basicFixture);
});
});
suite('gr-diff tests', () => {
let element;
@@ -62,7 +54,7 @@ suite('gr-diff tests', () => {
};
setup(() => {
element = fixture('basic');
element = basicFixture.instantiate();
sandbox.stub(element.$.highlights, 'handleSelectionChange');
});
@@ -80,21 +72,21 @@ suite('gr-diff tests', () => {
});
test('cancel', () => {
element = fixture('basic');
element = basicFixture.instantiate();
const cancelStub = sandbox.stub(element.$.diffBuilder, 'cancel');
element.cancel();
assert.isTrue(cancelStub.calledOnce);
});
test('line limit with line_wrapping', () => {
element = fixture('basic');
element = basicFixture.instantiate();
element.prefs = Object.assign({}, MINIMAL_PREFS, {line_wrapping: true});
flushAsynchronousOperations();
assert.equal(util.getComputedStyleValue('--line-limit', element), '80ch');
});
test('line limit without line_wrapping', () => {
element = fixture('basic');
element = basicFixture.instantiate();
element.prefs = Object.assign({}, MINIMAL_PREFS, {line_wrapping: false});
flushAsynchronousOperations();
assert.isNotOk(util.getComputedStyleValue('--line-limit', element));
@@ -105,7 +97,7 @@ suite('gr-diff tests', () => {
let contentEl;
setup(() => {
element = fixture('basic');
element = basicFixture.instantiate();
lineEl = document.createElement('td');
contentEl = document.createElement('span');
});
@@ -191,7 +183,7 @@ suite('gr-diff tests', () => {
stub('gr-rest-api-interface', {
getLoggedIn() { return getLoggedInPromise; },
});
element = fixture('basic');
element = basicFixture.instantiate();
return getLoggedInPromise;
});
@@ -645,7 +637,7 @@ suite('gr-diff tests', () => {
suite('logged in', () => {
let fakeLineEl;
setup(() => {
element = fixture('basic');
element = basicFixture.instantiate();
element.loggedIn = true;
element.patchRange = {};
@@ -724,7 +716,7 @@ suite('gr-diff tests', () => {
suite('diff header', () => {
setup(() => {
element = fixture('basic');
element = basicFixture.instantiate();
element.diff = {
meta_a: {name: 'carrot.jpg', content_type: 'image/jpeg', lines: 66},
meta_b: {name: 'carrot.jpg', content_type: 'image/jpeg',
@@ -769,7 +761,7 @@ suite('gr-diff tests', () => {
let renderStub;
setup(() => {
element = fixture('basic');
element = basicFixture.instantiate();
renderStub = sandbox.stub(element.$.diffBuilder, 'render',
() => {
element.$.diffBuilder.dispatchEvent(
@@ -821,7 +813,7 @@ suite('gr-diff tests', () => {
suite('blame', () => {
setup(() => {
element = fixture('basic');
element = basicFixture.instantiate();
});
test('unsetting', () => {
@@ -847,7 +839,7 @@ suite('gr-diff tests', () => {
element.shadowRoot.querySelector('.newlineWarning').textContent;
setup(() => {
element = fixture('basic');
element = basicFixture.instantiate();
element.showNewlineWarningLeft = false;
element.showNewlineWarningRight = false;
});
@@ -907,7 +899,7 @@ suite('gr-diff tests', () => {
let renderStub;
setup(() => {
element = fixture('basic');
element = basicFixture.instantiate();
element.prefs = {};
renderStub = sandbox.stub(element.$.diffBuilder, 'render')
.returns(new Promise(() => {}));
@@ -956,7 +948,7 @@ suite('gr-diff tests', () => {
});
const setupSampleDiff = function(params) {
const {ignore_whitespace, content} = params;
element = fixture('basic');
element = basicFixture.instantiate();
element.prefs = {
ignore_whitespace: ignore_whitespace || 'IGNORE_ALL',
auto_hide_diff_table_header: true,
@@ -1115,7 +1107,7 @@ suite('gr-diff tests', () => {
});
test('`render` event has contentRendered field in detail', done => {
element = fixture('basic');
element = basicFixture.instantiate();
element.prefs = {};
sandbox.stub(element.$.diffBuilder, 'render')
.returns(Promise.resolve());
@@ -1126,6 +1118,3 @@ suite('gr-diff tests', () => {
element._renderDiffTable();
});
});
a11ySuite('basic');
</script>

44
polygerrit-ui/app/test/a11y-test-utils.js Normal file
View File

@@ -0,0 +1,44 @@
/**
* @license
* Copyright (C) 2020 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.
*/
import './common-test-setup-karma.js';
// Run a11y audit on test fixture
// The code is inspired by the
// https://github.com/Polymer/web-component-tester/blob/master/data/a11ySuite.js
export async function runA11yAudit(fixture, ignoredRules) {
fixture.instantiate();
await flush();
const axsConfig = new axs.AuditConfiguration();
axsConfig.scope = document.body;
axsConfig.showUnsupportedRulesWarning = false;
axsConfig.auditRulesToIgnore = ignoredRules;
const auditResults = axs.Audit.run(axsConfig);
const errors = [];
auditResults.forEach((result, index) => {
// only show applicable tests
if (result.result === 'FAIL') {
const title = result.rule.heading;
// fail test if audit result is FAIL
const error = axs.Audit.accessibilityErrorMessage(result);
errors.push(`${title}: ${error}`);
}
});
if (errors.length > 0) {
assert.fail(errors.join('\n') + '\n');
}
}

1
polygerrit-ui/app/test/tests.js
View File

@@ -108,7 +108,6 @@ const elements = [
'diff/gr-diff-selection/gr-diff-selection_test.html',
'diff/gr-diff-view/gr-diff-view_test.html',
'diff/gr-diff/gr-diff-group_test.html',
'diff/gr-diff/gr-diff_test.html',
'diff/gr-apply-fix-dialog/gr-apply-fix-dialog_test.html',
'diff/gr-patch-range-select/gr-patch-range-select_test.html',
'diff/gr-ranged-comment-layer/gr-ranged-comment-layer_test.html',

12
polygerrit-ui/karma.conf.js
View File

@@ -34,12 +34,12 @@ function getModulesDir() {
];
}
function getSinonPath() {
function getUiDevNpmFilePath(importPath) {
if(runUnderBazel) {
return "external/ui_dev_npm/node_modules/sinon/pkg/sinon.js";
return `external/ui_dev_npm/node_modules/${importPath}`;
}
else {
return "polygerrit-ui/node_modules/sinon/pkg/sinon.js"
return `polygerrit-ui/node_modules/${importPath}`
}
}
@@ -73,7 +73,8 @@ module.exports = function(config) {
// list of files / patterns to load in the browser
files: [
getSinonPath(),
getUiDevNpmFilePath('accessibility-developer-tools/dist/js/axs_testing.js'),
getUiDevNpmFilePath('sinon/pkg/sinon.js'),
{ pattern: testFilesPattern, type: 'module' },
],
esm: {
@@ -127,7 +128,8 @@ module.exports = function(config) {
client: {
mocha: {
ui: 'tdd'
ui: 'tdd',
timeout: 5000,
}
},

1
polygerrit-ui/package.json
View File

@@ -7,6 +7,7 @@
"@open-wc/karma-esm": "^2.13.21",
"@polymer/iron-test-helpers": "^3.0.1",
"@polymer/test-fixture": "^4.0.2",
"accessibility-developer-tools": "^2.12.0",
"chai": "^4.2.0",
"karma": "^4.4.1",
"karma-chrome-launcher": "^3.1.0",