blob: 4bd3446039cc0be0430484c44997f6c42208bb24 [file] [log] [blame]
/**
* @license
* Copyright 2020 Google LLC
* SPDX-License-Identifier: Apache-2.0
*/
import '../../test/common-test-setup';
import './gr-checks-runs';
import {GrChecksRun, GrChecksRuns} from './gr-checks-runs';
import {html} from 'lit';
import {fixture, assert} from '@open-wc/testing';
import {checksModelToken} from '../../models/checks/checks-model';
import {fakeRun0, setAllFakeRuns} from '../../models/checks/checks-fakes';
import {resolve} from '../../models/dependency';
import {queryAll} from '../../utils/common-util';
suite('gr-checks-runs test', () => {
let element: GrChecksRuns;
setup(async () => {
element = await fixture<GrChecksRuns>(
html`<gr-checks-runs></gr-checks-runs>`
);
const getChecksModel = resolve(element, checksModelToken);
setAllFakeRuns(getChecksModel());
await element.updateComplete;
});
test('filterRegExp', async () => {
// Without a filter all 6 fake runs (0-5) will be rendered.
assert.equal(queryAll(element, 'gr-checks-run').length, 6);
// This filter will only match fakeRun2 (checkName: 'FAKE Mega Analysis').
element.filterRegExp = 'Mega';
await element.updateComplete;
assert.equal(queryAll(element, 'gr-checks-run').length, 1);
});
test('renders', async () => {
assert.equal(element.runs.length, 44);
assert.shadowDom.equal(
element,
/* HTML */ `
<h2 class="title">
<div class="heading-2">Runs</div>
<div class="flex-space"></div>
<gr-tooltip-content has-tooltip="" title="Collapse runs panel">
<gr-button
aria-checked="false"
aria-label="Collapse runs panel"
class="expandButton font-normal"
link=""
role="switch"
>
<div>
<gr-icon icon="chevron_left" class="expandIcon"></gr-icon>
</div>
</gr-button>
</gr-tooltip-content>
</h2>
<input
id="filterInput"
placeholder="Filter runs by regular expression"
type="text"
/>
<div class="expanded running">
<div class="sectionHeader">
<gr-icon icon="expand_less" class="expandIcon"></gr-icon>
<h3 class="heading-3">Running / Scheduled (2)</h3>
</div>
<div class="sectionRuns">
<gr-checks-run></gr-checks-run>
<gr-checks-run></gr-checks-run>
</div>
</div>
<div class="completed expanded">
<div class="sectionHeader">
<gr-icon icon="expand_less" class="expandIcon"></gr-icon>
<h3 class="heading-3">Completed (3)</h3>
</div>
<div class="sectionRuns">
<gr-checks-run></gr-checks-run>
<gr-checks-run></gr-checks-run>
<gr-checks-run></gr-checks-run>
</div>
</div>
<div class="expanded runnable">
<div class="sectionHeader">
<gr-icon icon="expand_less" class="expandIcon"></gr-icon>
<h3 class="heading-3">Not run (1)</h3>
</div>
<div class="sectionRuns">
<gr-checks-run></gr-checks-run>
</div>
</div>
`,
{ignoreAttributes: ['tabindex', 'aria-disabled']}
);
});
test('renders collapsed', async () => {
element.collapsed = true;
await element.updateComplete;
assert.equal(element.runs.length, 44);
assert.shadowDom.equal(
element,
/* HTML */ `
<h2 class="title">
<div class="heading-2">Runs</div>
<div class="flex-space"></div>
<gr-tooltip-content has-tooltip="" title="Expand runs panel">
<gr-button
aria-checked="true"
aria-label="Expand runs panel"
class="expandButton font-normal"
link=""
role="switch"
>
<div>
<gr-icon icon="chevron_right" class="expandIcon"></gr-icon>
</div>
</gr-button>
</gr-tooltip-content>
</h2>
<input
hidden
id="filterInput"
placeholder="Filter runs by regular expression"
type="text"
/>
<div class="expanded running">
<div class="sectionHeader">
<h3 class="heading-3">Running / Scheduled</h3>
</div>
<div class="sectionRuns">
<gr-checks-run condensed></gr-checks-run>
<gr-checks-run condensed></gr-checks-run>
</div>
</div>
<div class="completed expanded">
<div class="sectionHeader">
<h3 class="heading-3">Completed</h3>
</div>
<div class="sectionRuns">
<gr-checks-run condensed></gr-checks-run>
<gr-checks-run condensed></gr-checks-run>
<gr-checks-run condensed></gr-checks-run>
</div>
</div>
<div class="expanded runnable">
<div class="sectionHeader">
<h3 class="heading-3">Not run</h3>
</div>
<div class="sectionRuns">
<gr-checks-run condensed></gr-checks-run>
</div>
</div>
`,
{ignoreAttributes: ['tabindex', 'aria-disabled']}
);
});
});
suite('gr-checks-run test', () => {
let element: GrChecksRun;
setup(async () => {
element = await fixture<GrChecksRun>(html`<gr-checks-run></gr-checks-run>`);
const getChecksModel = resolve(element, checksModelToken);
setAllFakeRuns(getChecksModel());
await element.updateComplete;
});
test('renders loading', async () => {
assert.shadowDom.equal(
element,
/* HTML */ ' <div class="chip">Loading ...</div> '
);
});
test('renders fakeRun0', async () => {
element.shouldRender = true;
element.run = fakeRun0;
await element.updateComplete;
assert.shadowDom.equal(
element,
/* HTML */ `
<div class="chip error" tabindex="0">
<div class="left" tabindex="0">
<gr-hovercard-run> </gr-hovercard-run>
<gr-icon class="error" filled="" icon="error"> </gr-icon>
<span class="name">
FAKE Error Finder Finder Finder Finder Finder Finder Finder
</span>
</div>
<div class="middle">
<gr-checks-attempt> </gr-checks-attempt>
</div>
<div class="right"></div>
</div>
<div class="attemptDetails" hidden="">
<div class="attemptDetail">
<input
id="attempt-latest"
name="fakeerrorfinderfinderfinderfinderfinderfinderfinder-attempt-choice"
type="radio"
/>
<gr-icon icon=""> </gr-icon>
<label for="attempt-latest"> Latest Attempt </label>
</div>
<div class="attemptDetail">
<input
id="attempt-all"
name="fakeerrorfinderfinderfinderfinderfinderfinderfinder-attempt-choice"
type="radio"
/>
<gr-icon icon=""> </gr-icon>
<label for="attempt-all"> All Attempts </label>
</div>
</div>
</div>
`
);
});
});