blob: 7a26c3d92215d376e6c579b98116a3f21c9d8f51 [file] [log] [blame]
// Copyright 2019 The Chromium Authors
// Use of this source code is governed by a BSD-style license that can be
// found in the LICENSE file.
import {assert} from 'chai';
import sinon from 'sinon';
import {MrApp} from './mr-app.js';
import {store, resetState} from 'reducers/base.js';
import {select} from 'reducers/projectV0.js';
let element;
let next;
window.CS_env = {
token: 'foo-token',
};
describe('mr-app', () => {
beforeEach(() => {
global.ga = sinon.spy();
store.dispatch(resetState());
element = document.createElement('mr-app');
document.body.appendChild(element);
element.formsToCheck = [];
next = sinon.stub();
});
afterEach(() => {
global.ga.resetHistory();
document.body.removeChild(element);
next.reset();
});
it('initializes', () => {
assert.instanceOf(element, MrApp);
});
describe('snackbar handling', () => {
beforeEach(() => {
sinon.spy(store, 'dispatch');
});
afterEach(() => {
store.dispatch.restore();
});
it('renders no snackbars', async () => {
element._snackbars = [];
await element.updateComplete;
const snackbars = element.querySelectorAll('chops-snackbar');
assert.equal(snackbars.length, 0);
});
it('renders multiple snackbars', async () => {
element._snackbars = [
{text: 'Snackbar one', id: 'one'},
{text: 'Snackbar two', id: 'two'},
{text: 'Snackbar three', id: 'thre'},
];
await element.updateComplete;
const snackbars = element.querySelectorAll('chops-snackbar');
assert.equal(snackbars.length, 3);
assert.include(snackbars[0].textContent, 'Snackbar one');
assert.include(snackbars[1].textContent, 'Snackbar two');
assert.include(snackbars[2].textContent, 'Snackbar three');
});
it('closing snackbar hides snackbar', async () => {
element._snackbars = [
{text: 'Snackbar', id: 'one'},
];
await element.updateComplete;
const snackbar = element.querySelector('chops-snackbar');
snackbar.close();
sinon.assert.calledWith(store.dispatch,
{type: 'HIDE_SNACKBAR', id: 'one'});
});
});
it('_preRouteHandler calls next()', () => {
const ctx = {params: {}};
element._preRouteHandler(ctx, next);
sinon.assert.calledOnce(next);
});
it('_preRouteHandler does not call next() on same page nav', () => {
element._lastContext = {path: '123'};
const ctx = {params: {}, path: '123'};
element._preRouteHandler(ctx, next);
assert.isFalse(ctx.handled);
sinon.assert.notCalled(next);
});
it('_preRouteHandler parses queryParams', () => {
const ctx = {params: {}, querystring: 'q=owner:me&colspec=Summary'};
element._preRouteHandler(ctx, next);
assert.deepEqual(ctx.queryParams, {q: 'owner:me', colspec: 'Summary'});
});
it('_preRouteHandler ignores case for queryParams keys', () => {
const ctx = {params: {},
querystring: 'Q=owner:me&ColSpeC=Summary&x=owner'};
element._preRouteHandler(ctx, next);
assert.deepEqual(ctx.queryParams, {q: 'owner:me', colspec: 'Summary',
x: 'owner'});
});
it('_preRouteHandler ignores case for queryParams keys', () => {
const ctx = {params: {},
querystring: 'Q=owner:me&ColSpeC=Summary&x=owner'};
element._preRouteHandler(ctx, next);
assert.deepEqual(ctx.queryParams, {q: 'owner:me', colspec: 'Summary',
x: 'owner'});
});
it('_postRouteHandler saves ctx.queryParams to Redux', () => {
const ctx = {queryParams: {q: '1234'}};
element._postRouteHandler(ctx, next);
assert.deepEqual(element.queryParams, {q: '1234'});
});
it('_postRouteHandler saves ctx to this._lastContext', () => {
const ctx = {path: '1234'};
element._postRouteHandler(ctx, next);
assert.deepEqual(element._lastContext, {path: '1234'});
});
describe('scroll to the top on page changes', () => {
beforeEach(() => {
sinon.stub(window, 'scrollTo');
});
afterEach(() => {
window.scrollTo.restore();
});
it('scrolls page to top on initial load', () => {
element._lastContext = null;
const ctx = {params: {}, path: '1234'};
element._postRouteHandler(ctx, next);
sinon.assert.calledWith(window.scrollTo, 0, 0);
});
it('scrolls page to top on parh change', () => {
element._lastContext = {params: {}, pathname: '/list',
path: '/list?q=123', querystring: '?q=123', queryParams: {q: '123'}};
const ctx = {params: {}, pathname: '/other',
path: '/other?q=123', querystring: '?q=123', queryParams: {q: '123'}};
element._postRouteHandler(ctx, next);
sinon.assert.calledWith(window.scrollTo, 0, 0);
});
it('does not scroll to top when on the same path', () => {
element._lastContext = {pathname: '/list', path: '/list?q=123',
querystring: '?a=123', queryParams: {a: '123'}};
const ctx = {pathname: '/list', path: '/list?q=456',
querystring: '?a=456', queryParams: {a: '456'}};
element._postRouteHandler(ctx, next);
sinon.assert.notCalled(window.scrollTo);
});
it('scrolls to the top on same path when q param changes', () => {
element._lastContext = {pathname: '/list', path: '/list?q=123',
querystring: '?q=123', queryParams: {q: '123'}};
const ctx = {pathname: '/list', path: '/list?q=456',
querystring: '?q=456', queryParams: {q: '456'}};
element._postRouteHandler(ctx, next);
sinon.assert.calledWith(window.scrollTo, 0, 0);
});
});
it('_postRouteHandler does not call next', () => {
const ctx = {path: '1234'};
element._postRouteHandler(ctx, next);
sinon.assert.notCalled(next);
});
it('_loadIssuePage loads issue page', async () => {
await element._loadIssuePage({
queryParams: {id: '234'},
params: {project: 'chromium'},
}, next);
await element.updateComplete;
// Check that only one page element is rendering at a time.
const main = element.querySelector('main');
assert.equal(main.children.length, 1);
const issuePage = element.querySelector('mr-issue-page');
assert.isDefined(issuePage, 'issue page is defined');
assert.equal(issuePage.issueRef.projectName, 'chromium');
assert.equal(issuePage.issueRef.localId, 234);
});
it('_loadListPage loads list page', async () => {
await element._loadListPage({
params: {project: 'chromium'},
}, next);
await element.updateComplete;
// Check that only one page element is rendering at a time.
const main = element.querySelector('main');
assert.equal(main.children.length, 1);
const listPage = element.querySelector('mr-list-page');
assert.isDefined(listPage, 'list page is defined');
});
it('_loadListPage loads grid page', async () => {
element.queryParams = {mode: 'grid'};
await element._loadListPage({
params: {project: 'chromium'},
}, next);
await element.updateComplete;
// Check that only one page element is rendering at a time.
const main = element.querySelector('main');
assert.equal(main.children.length, 1);
const gridPage = element.querySelector('mr-grid-page');
assert.isDefined(gridPage, 'grid page is defined');
});
describe('_selectProject', () => {
beforeEach(() => {
sinon.spy(store, 'dispatch');
});
afterEach(() => {
store.dispatch.restore();
});
it('selects and fetches project', () => {
const projectName = 'chromium';
assert.notEqual(store.getState().projectV0.name, projectName);
element._selectProject(projectName);
sinon.assert.calledTwice(store.dispatch);
});
it('skips selecting and fetching when project isn\'t changing', () => {
const projectName = 'chromium';
store.dispatch.restore();
store.dispatch(select(projectName));
sinon.spy(store, 'dispatch');
assert.equal(store.getState().projectV0.name, projectName);
element._selectProject(projectName);
sinon.assert.notCalled(store.dispatch);
});
it('selects without fetching when transitioning to null', () => {
const projectName = 'chromium';
store.dispatch.restore();
store.dispatch(select(projectName));
sinon.spy(store, 'dispatch');
assert.equal(store.getState().projectV0.name, projectName);
element._selectProject(null);
sinon.assert.calledOnce(store.dispatch);
});
});
});