debian-mirror-gitlab/spec/frontend/ide/components/preview/navigator_spec.js

168 lines
4.4 KiB
JavaScript
Raw Normal View History

2018-11-18 11:00:15 +05:30
import Vue from 'vue';
2020-01-01 13:55:28 +05:30
import mountComponent from 'helpers/vue_mount_component_helper';
import { TEST_HOST } from 'helpers/test_constants';
2018-11-18 11:00:15 +05:30
import ClientsideNavigator from '~/ide/components/preview/navigator.vue';
describe('IDE clientside preview navigator', () => {
let vm;
let Component;
let manager;
beforeAll(() => {
Component = Vue.extend(ClientsideNavigator);
});
beforeEach(() => {
2020-01-01 13:55:28 +05:30
manager = { bundlerURL: TEST_HOST, iframe: { src: '' } };
2018-11-18 11:00:15 +05:30
2020-01-01 13:55:28 +05:30
vm = mountComponent(Component, { manager });
2018-11-18 11:00:15 +05:30
});
afterEach(() => {
vm.$destroy();
});
it('renders readonly URL bar', () => {
expect(vm.$el.querySelector('input[readonly]').value).toBe('/');
});
it('disables back button when navigationStack is empty', () => {
expect(vm.$el.querySelector('.ide-navigator-btn')).toHaveAttr('disabled');
expect(vm.$el.querySelector('.ide-navigator-btn').classList).toContain('disabled-content');
});
it('disables forward button when forwardNavigationStack is empty', () => {
vm.forwardNavigationStack = [];
expect(vm.$el.querySelectorAll('.ide-navigator-btn')[1]).toHaveAttr('disabled');
expect(vm.$el.querySelectorAll('.ide-navigator-btn')[1].classList).toContain(
'disabled-content',
);
});
it('calls back method when clicking back button', done => {
vm.navigationStack.push('/test');
vm.navigationStack.push('/test2');
2020-01-01 13:55:28 +05:30
jest.spyOn(vm, 'back').mockReturnValue();
2018-11-18 11:00:15 +05:30
vm.$nextTick(() => {
vm.$el.querySelector('.ide-navigator-btn').click();
expect(vm.back).toHaveBeenCalled();
done();
});
});
it('calls forward method when clicking forward button', done => {
vm.forwardNavigationStack.push('/test');
2020-01-01 13:55:28 +05:30
jest.spyOn(vm, 'forward').mockReturnValue();
2018-11-18 11:00:15 +05:30
vm.$nextTick(() => {
vm.$el.querySelectorAll('.ide-navigator-btn')[1].click();
expect(vm.forward).toHaveBeenCalled();
done();
});
});
describe('onUrlChange', () => {
it('updates the path', () => {
2020-01-01 13:55:28 +05:30
vm.onUrlChange({ url: `${TEST_HOST}/url` });
2018-11-18 11:00:15 +05:30
expect(vm.path).toBe('/url');
});
it('sets currentBrowsingIndex 0 if not already set', () => {
2020-01-01 13:55:28 +05:30
vm.onUrlChange({ url: `${TEST_HOST}/url` });
2018-11-18 11:00:15 +05:30
expect(vm.currentBrowsingIndex).toBe(0);
});
it('increases currentBrowsingIndex if path doesnt match', () => {
2020-01-01 13:55:28 +05:30
vm.onUrlChange({ url: `${TEST_HOST}/url` });
2018-11-18 11:00:15 +05:30
2020-01-01 13:55:28 +05:30
vm.onUrlChange({ url: `${TEST_HOST}/url2` });
2018-11-18 11:00:15 +05:30
expect(vm.currentBrowsingIndex).toBe(1);
});
it('does not increase currentBrowsingIndex if path matches', () => {
2020-01-01 13:55:28 +05:30
vm.onUrlChange({ url: `${TEST_HOST}/url` });
2018-11-18 11:00:15 +05:30
2020-01-01 13:55:28 +05:30
vm.onUrlChange({ url: `${TEST_HOST}/url` });
2018-11-18 11:00:15 +05:30
expect(vm.currentBrowsingIndex).toBe(0);
});
it('pushes path into navigation stack', () => {
2020-01-01 13:55:28 +05:30
vm.onUrlChange({ url: `${TEST_HOST}/url` });
2018-11-18 11:00:15 +05:30
expect(vm.navigationStack).toEqual(['/url']);
});
});
describe('back', () => {
beforeEach(() => {
vm.path = '/test2';
vm.currentBrowsingIndex = 1;
vm.navigationStack.push('/test');
vm.navigationStack.push('/test2');
2020-01-01 13:55:28 +05:30
jest.spyOn(vm, 'visitPath').mockReturnValue();
2018-11-18 11:00:15 +05:30
vm.back();
});
it('visits the last entry in navigationStack', () => {
expect(vm.visitPath).toHaveBeenCalledWith('/test');
});
it('adds last entry to forwardNavigationStack', () => {
expect(vm.forwardNavigationStack).toEqual(['/test2']);
});
it('clears navigation stack if currentBrowsingIndex is 1', () => {
expect(vm.navigationStack).toEqual([]);
});
it('sets currentBrowsingIndex to null is currentBrowsingIndex is 1', () => {
expect(vm.currentBrowsingIndex).toBe(null);
});
});
describe('forward', () => {
it('calls visitPath with first entry in forwardNavigationStack', () => {
2020-01-01 13:55:28 +05:30
jest.spyOn(vm, 'visitPath').mockReturnValue();
2018-11-18 11:00:15 +05:30
vm.forwardNavigationStack.push('/test');
vm.forwardNavigationStack.push('/test2');
vm.forward();
expect(vm.visitPath).toHaveBeenCalledWith('/test');
});
});
describe('refresh', () => {
it('calls refresh with current path', () => {
2020-01-01 13:55:28 +05:30
jest.spyOn(vm, 'visitPath').mockReturnValue();
2018-11-18 11:00:15 +05:30
vm.path = '/test';
vm.refresh();
expect(vm.visitPath).toHaveBeenCalledWith('/test');
});
});
describe('visitPath', () => {
it('updates iframe src with passed in path', () => {
vm.visitPath('/testpath');
2020-01-01 13:55:28 +05:30
expect(manager.iframe.src).toBe(`${TEST_HOST}/testpath`);
2018-11-18 11:00:15 +05:30
});
});
});