blob: 01140c6c208450fa35d1c75a12d588d59642ed20 [file] [log] [blame]
/**
* @license
* Copyright 2017 Google LLC
* SPDX-License-Identifier: Apache-2.0
*/
import '../../../test/common-test-setup';
import './gr-repo-commands';
import {GrRepoCommands} from './gr-repo-commands';
import {
addListenerForTest,
mockPromise,
queryAndAssert,
stubRestApi,
} from '../../../test/test-utils';
import {GrDialog} from '../../shared/gr-dialog/gr-dialog';
import {EventType, PageErrorEvent} from '../../../types/events';
import {RepoName} from '../../../types/common';
import {GrButton} from '../../shared/gr-button/gr-button';
import {fixture, html, assert} from '@open-wc/testing';
suite('gr-repo-commands tests', () => {
let element: GrRepoCommands;
let repoStub: sinon.SinonStub;
setup(async () => {
element = await fixture(html`<gr-repo-commands></gr-repo-commands>`);
// Note that this probably does not achieve what it is supposed to, because
// getProjectConfig() is called as soon as the element is attached, so
// stubbing it here has not effect anymore.
repoStub = stubRestApi('getProjectConfig').returns(
Promise.resolve(undefined)
);
});
test('render', () => {
assert.shadowDom.equal(
element,
/* HTML */ `
<div class="gr-form-styles main read-only">
<h1 class="heading-1" id="Title">Repository Commands</h1>
<div class="loading" id="loading">Loading...</div>
<div class="loading" id="loadedContent">
<div id="form">
<h2 class="heading-2">Create change</h2>
<div>
<p>
Creates an empty work-in-progress change that can be used to
edit files online and send the modifications for review.
</p>
</div>
<div>
<gr-button aria-disabled="false" role="button" tabindex="0">
Create change
</gr-button>
</div>
<h2 class="heading-2">Edit repo config</h2>
<div>
<p>
Creates a work-in-progress change that allows to edit the
<code> project.config </code>
file in the
<code> refs/meta/config </code>
branch and send the modifications for review.
</p>
</div>
<div>
<gr-button
aria-disabled="false"
id="editRepoConfig"
role="button"
tabindex="0"
>
Edit repo config
</gr-button>
</div>
<gr-endpoint-decorator name="repo-command">
<gr-endpoint-param name="config"> </gr-endpoint-param>
<gr-endpoint-param name="repoName"> </gr-endpoint-param>
</gr-endpoint-decorator>
</div>
</div>
</div>
<dialog id="createChangeModal" tabindex="-1">
<gr-dialog
confirm-label="Create"
disabled=""
id="createChangeDialog"
role="dialog"
>
<div class="header" slot="header">Create Change</div>
<div class="main" slot="main">
<gr-create-change-dialog id="createNewChangeModal">
</gr-create-change-dialog>
</div>
</gr-dialog>
</dialog>
`,
{ignoreTags: ['p']}
);
});
suite('create new change dialog', () => {
test('createNewChange opens modal', () => {
const openStub = sinon.stub(
queryAndAssert<HTMLDialogElement>(element, '#createChangeModal'),
'showModal'
);
element.createNewChange();
assert.isTrue(openStub.called);
});
test('handleCreateChange called when confirm fired', () => {
const handleCreateChangeStub = sinon.stub(element, 'handleCreateChange');
queryAndAssert<GrDialog>(element, '#createChangeDialog').dispatchEvent(
new CustomEvent('confirm', {
composed: true,
bubbles: true,
})
);
assert.isTrue(handleCreateChangeStub.called);
});
test('handleCloseCreateChange called when cancel fired', () => {
const handleCloseCreateChangeStub = sinon.stub(
element,
'handleCloseCreateChange'
);
queryAndAssert<GrDialog>(element, '#createChangeDialog').dispatchEvent(
new CustomEvent('cancel', {
composed: true,
bubbles: true,
})
);
assert.isTrue(handleCloseCreateChangeStub.called);
});
});
suite('edit repo config', () => {
let createChangeStub: sinon.SinonStub;
let handleSpy: sinon.SinonSpy;
let alertStub: sinon.SinonStub;
setup(() => {
createChangeStub = stubRestApi('createChange');
handleSpy = sinon.spy(element, 'handleEditRepoConfig');
alertStub = sinon.stub();
element.repo = 'test' as RepoName;
element.addEventListener(EventType.SHOW_ALERT, alertStub);
});
test('successful creation of change', async () => {
const change = {_number: '1'};
createChangeStub.returns(Promise.resolve(change));
queryAndAssert<GrButton>(element, '#editRepoConfig').click();
await element.updateComplete;
assert.isTrue(
queryAndAssert<GrButton>(element, '#editRepoConfig').loading
);
await handleSpy.lastCall.returnValue;
await element.updateComplete;
assert.isTrue(alertStub.called);
assert.equal(
alertStub.lastCall.args[0].detail.message,
'Navigating to change'
);
assert.isFalse(
queryAndAssert<GrButton>(element, '#editRepoConfig').loading
);
});
test('unsuccessful creation of change', async () => {
createChangeStub.returns(Promise.resolve(null));
queryAndAssert<GrButton>(element, '#editRepoConfig').click();
await element.updateComplete;
assert.isTrue(
queryAndAssert<GrButton>(element, '#editRepoConfig').loading
);
await handleSpy.lastCall.returnValue;
await element.updateComplete;
assert.isTrue(alertStub.called);
assert.equal(
alertStub.lastCall.args[0].detail.message,
'Failed to create change.'
);
assert.isFalse(
queryAndAssert<GrButton>(element, '#editRepoConfig').loading
);
});
});
suite('404', () => {
test('fires page-error', async () => {
repoStub.restore();
element.repo = 'test' as RepoName;
const response = {status: 404} as Response;
stubRestApi('getProjectConfig').callsFake((_repo, errFn) => {
if (errFn !== undefined) {
errFn(response);
}
return Promise.resolve(undefined);
});
await element.updateComplete;
const promise = mockPromise();
addListenerForTest(document, 'page-error', e => {
assert.deepEqual((e as PageErrorEvent).detail.response, response);
promise.resolve();
});
element.loadRepo();
await promise;
});
});
});