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

178 lines
5.4 KiB
JavaScript
Raw Normal View History

2020-03-13 15:44:24 +05:30
import { shallowMount } from '@vue/test-utils';
2020-01-01 13:55:28 +05:30
import { TEST_HOST } from 'helpers/test_constants';
2020-03-13 15:44:24 +05:30
import { GlLoadingIcon } from '@gitlab/ui';
import { listen } from 'codesandbox-api';
2020-10-24 23:57:45 +05:30
import ClientsideNavigator from '~/ide/components/preview/navigator.vue';
2020-03-13 15:44:24 +05:30
jest.mock('codesandbox-api', () => ({
listen: jest.fn().mockReturnValue(jest.fn()),
}));
2018-11-18 11:00:15 +05:30
describe('IDE clientside preview navigator', () => {
2020-03-13 15:44:24 +05:30
let wrapper;
2018-11-18 11:00:15 +05:30
let manager;
2020-03-13 15:44:24 +05:30
let listenHandler;
2018-11-18 11:00:15 +05:30
2020-03-13 15:44:24 +05:30
const findBackButton = () => wrapper.findAll('button').at(0);
const findForwardButton = () => wrapper.findAll('button').at(1);
const findRefreshButton = () => wrapper.findAll('button').at(2);
2018-11-18 11:00:15 +05:30
beforeEach(() => {
2020-03-13 15:44:24 +05:30
listen.mockClear();
2020-01-01 13:55:28 +05:30
manager = { bundlerURL: TEST_HOST, iframe: { src: '' } };
2018-11-18 11:00:15 +05:30
2020-03-13 15:44:24 +05:30
wrapper = shallowMount(ClientsideNavigator, { propsData: { manager } });
[[listenHandler]] = listen.mock.calls;
2018-11-18 11:00:15 +05:30
});
afterEach(() => {
2020-03-13 15:44:24 +05:30
wrapper.destroy();
2018-11-18 11:00:15 +05:30
});
it('renders readonly URL bar', () => {
2020-03-13 15:44:24 +05:30
listenHandler({ type: 'urlchange', url: manager.bundlerURL });
return wrapper.vm.$nextTick(() => {
expect(wrapper.find('input[readonly]').element.value).toBe('/');
});
2018-11-18 11:00:15 +05:30
});
2020-03-13 15:44:24 +05:30
it('renders loading icon by default', () => {
expect(wrapper.find(GlLoadingIcon).exists()).toBe(true);
2018-11-18 11:00:15 +05:30
});
2020-03-13 15:44:24 +05:30
it('removes loading icon when done event is fired', () => {
listenHandler({ type: 'done' });
return wrapper.vm.$nextTick(() => {
expect(wrapper.find(GlLoadingIcon).exists()).toBe(false);
});
2018-11-18 11:00:15 +05:30
});
2020-03-13 15:44:24 +05:30
it('does not count visiting same url multiple times', () => {
listenHandler({ type: 'done' });
listenHandler({ type: 'done', url: `${TEST_HOST}/url1` });
listenHandler({ type: 'done', url: `${TEST_HOST}/url1` });
return wrapper.vm.$nextTick().then(() => {
expect(findBackButton().attributes('disabled')).toBe('disabled');
2018-11-18 11:00:15 +05:30
});
});
2020-03-13 15:44:24 +05:30
it('unsubscribes from listen on destroy', () => {
const unsubscribeFn = listen();
2018-11-18 11:00:15 +05:30
2020-03-13 15:44:24 +05:30
wrapper.destroy();
expect(unsubscribeFn).toHaveBeenCalled();
2018-11-18 11:00:15 +05:30
});
2020-03-13 15:44:24 +05:30
describe('back button', () => {
beforeEach(() => {
listenHandler({ type: 'done' });
listenHandler({ type: 'urlchange', url: TEST_HOST });
return wrapper.vm.$nextTick();
2018-11-18 11:00:15 +05:30
});
2020-03-13 15:44:24 +05:30
it('is disabled by default', () => {
expect(findBackButton().attributes('disabled')).toBe('disabled');
2018-11-18 11:00:15 +05:30
});
2020-03-13 15:44:24 +05:30
it('is enabled when there is previous entry', () => {
listenHandler({ type: 'urlchange', url: `${TEST_HOST}/url1` });
return wrapper.vm.$nextTick().then(() => {
findBackButton().trigger('click');
expect(findBackButton().attributes('disabled')).toBeFalsy();
});
2018-11-18 11:00:15 +05:30
});
2020-03-13 15:44:24 +05:30
it('is disabled when there is no previous entry', () => {
listenHandler({ type: 'urlchange', url: `${TEST_HOST}/url1` });
return wrapper.vm
.$nextTick()
.then(() => {
findBackButton().trigger('click');
return wrapper.vm.$nextTick();
})
.then(() => {
expect(findBackButton().attributes('disabled')).toBe('disabled');
});
2018-11-18 11:00:15 +05:30
});
2020-03-13 15:44:24 +05:30
it('updates manager iframe src', () => {
listenHandler({ type: 'urlchange', url: `${TEST_HOST}/url1` });
listenHandler({ type: 'urlchange', url: `${TEST_HOST}/url2` });
return wrapper.vm.$nextTick().then(() => {
findBackButton().trigger('click');
2018-11-18 11:00:15 +05:30
2020-03-13 15:44:24 +05:30
expect(manager.iframe.src).toBe(`${TEST_HOST}/url1`);
});
2018-11-18 11:00:15 +05:30
});
});
2020-03-13 15:44:24 +05:30
describe('forward button', () => {
2018-11-18 11:00:15 +05:30
beforeEach(() => {
2020-03-13 15:44:24 +05:30
listenHandler({ type: 'done' });
listenHandler({ type: 'urlchange', url: TEST_HOST });
return wrapper.vm.$nextTick();
2018-11-18 11:00:15 +05:30
});
2020-03-13 15:44:24 +05:30
it('is disabled by default', () => {
expect(findForwardButton().attributes('disabled')).toBe('disabled');
2018-11-18 11:00:15 +05:30
});
2020-03-13 15:44:24 +05:30
it('is enabled when there is next entry', () => {
listenHandler({ type: 'urlchange', url: `${TEST_HOST}/url1` });
return wrapper.vm
.$nextTick()
.then(() => {
findBackButton().trigger('click');
return wrapper.vm.$nextTick();
})
.then(() => {
expect(findForwardButton().attributes('disabled')).toBeFalsy();
});
2018-11-18 11:00:15 +05:30
});
2020-03-13 15:44:24 +05:30
it('is disabled when there is no next entry', () => {
listenHandler({ type: 'urlchange', url: `${TEST_HOST}/url1` });
return wrapper.vm
.$nextTick()
.then(() => {
findBackButton().trigger('click');
return wrapper.vm.$nextTick();
})
.then(() => {
findForwardButton().trigger('click');
return wrapper.vm.$nextTick();
})
.then(() => {
expect(findForwardButton().attributes('disabled')).toBe('disabled');
});
2018-11-18 11:00:15 +05:30
});
2020-03-13 15:44:24 +05:30
it('updates manager iframe src', () => {
listenHandler({ type: 'urlchange', url: `${TEST_HOST}/url1` });
listenHandler({ type: 'urlchange', url: `${TEST_HOST}/url2` });
return wrapper.vm.$nextTick().then(() => {
findBackButton().trigger('click');
2018-11-18 11:00:15 +05:30
2020-03-13 15:44:24 +05:30
expect(manager.iframe.src).toBe(`${TEST_HOST}/url1`);
});
2018-11-18 11:00:15 +05:30
});
});
2020-03-13 15:44:24 +05:30
describe('refresh button', () => {
const url = `${TEST_HOST}/some_url`;
beforeEach(() => {
listenHandler({ type: 'done' });
listenHandler({ type: 'urlchange', url });
return wrapper.vm.$nextTick();
2018-11-18 11:00:15 +05:30
});
2020-03-13 15:44:24 +05:30
it('calls refresh with current path', () => {
manager.iframe.src = 'something-other';
findRefreshButton().trigger('click');
2018-11-18 11:00:15 +05:30
2020-03-13 15:44:24 +05:30
expect(manager.iframe.src).toBe(url);
2018-11-18 11:00:15 +05:30
});
});
});