gitlab-org--gitlab-foss/spec/javascripts/ide/components/preview/navigator_spec.js

186 lines
4.4 KiB
JavaScript
Raw Normal View History

import Vue from 'vue';
import ClientsideNavigator from '~/ide/components/preview/navigator.vue';
import mountComponent from 'spec/helpers/vue_mount_component_helper';
describe('IDE clientside preview navigator', () => {
let vm;
let Component;
let manager;
beforeAll(() => {
Component = Vue.extend(ClientsideNavigator);
});
beforeEach(() => {
manager = {
bundlerURL: gl.TEST_HOST,
iframe: { src: '' },
};
vm = mountComponent(Component, {
manager,
});
});
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');
spyOn(vm, 'back');
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');
spyOn(vm, 'forward');
vm.$nextTick(() => {
vm.$el.querySelectorAll('.ide-navigator-btn')[1].click();
expect(vm.forward).toHaveBeenCalled();
done();
});
});
describe('onUrlChange', () => {
it('updates the path', () => {
vm.onUrlChange({
url: `${gl.TEST_HOST}/url`,
});
expect(vm.path).toBe('/url');
});
it('sets currentBrowsingIndex 0 if not already set', () => {
vm.onUrlChange({
url: `${gl.TEST_HOST}/url`,
});
expect(vm.currentBrowsingIndex).toBe(0);
});
it('increases currentBrowsingIndex if path doesnt match', () => {
vm.onUrlChange({
url: `${gl.TEST_HOST}/url`,
});
vm.onUrlChange({
url: `${gl.TEST_HOST}/url2`,
});
expect(vm.currentBrowsingIndex).toBe(1);
});
it('does not increase currentBrowsingIndex if path matches', () => {
vm.onUrlChange({
url: `${gl.TEST_HOST}/url`,
});
vm.onUrlChange({
url: `${gl.TEST_HOST}/url`,
});
expect(vm.currentBrowsingIndex).toBe(0);
});
it('pushes path into navigation stack', () => {
vm.onUrlChange({
url: `${gl.TEST_HOST}/url`,
});
expect(vm.navigationStack).toEqual(['/url']);
});
});
describe('back', () => {
beforeEach(() => {
vm.path = '/test2';
vm.currentBrowsingIndex = 1;
vm.navigationStack.push('/test');
vm.navigationStack.push('/test2');
spyOn(vm, 'visitPath');
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', () => {
spyOn(vm, 'visitPath');
vm.forwardNavigationStack.push('/test');
vm.forwardNavigationStack.push('/test2');
vm.forward();
expect(vm.visitPath).toHaveBeenCalledWith('/test');
});
});
describe('refresh', () => {
it('calls refresh with current path', () => {
spyOn(vm, 'visitPath');
vm.path = '/test';
vm.refresh();
expect(vm.visitPath).toHaveBeenCalledWith('/test');
});
});
describe('visitPath', () => {
it('updates iframe src with passed in path', () => {
vm.visitPath('/testpath');
expect(manager.iframe.src).toBe(`${gl.TEST_HOST}/testpath`);
});
});
});