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

162 lines
4.9 KiB
JavaScript
Raw Normal View History

2020-03-13 15:44:24 +05:30
import { GlLoadingIcon } from '@gitlab/ui';
2021-03-11 19:13:27 +05:30
import { shallowMount } from '@vue/test-utils';
2020-03-13 15:44:24 +05:30
import { listen } from 'codesandbox-api';
2022-04-04 11:22:00 +05:30
import { nextTick } from 'vue';
2021-03-11 19:13:27 +05:30
import { TEST_HOST } from 'helpers/test_constants';
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
});
2022-04-04 11:22:00 +05:30
it('renders readonly URL bar', async () => {
2020-03-13 15:44:24 +05:30
listenHandler({ type: 'urlchange', url: manager.bundlerURL });
2022-04-04 11:22:00 +05:30
await 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
});
2022-04-04 11:22:00 +05:30
it('removes loading icon when done event is fired', async () => {
2020-03-13 15:44:24 +05:30
listenHandler({ type: 'done' });
2022-04-04 11:22:00 +05:30
await nextTick();
expect(wrapper.find(GlLoadingIcon).exists()).toBe(false);
2018-11-18 11:00:15 +05:30
});
2022-04-04 11:22:00 +05:30
it('does not count visiting same url multiple times', async () => {
2020-03-13 15:44:24 +05:30
listenHandler({ type: 'done' });
listenHandler({ type: 'done', url: `${TEST_HOST}/url1` });
listenHandler({ type: 'done', url: `${TEST_HOST}/url1` });
2022-04-04 11:22:00 +05:30
await nextTick();
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', () => {
2022-04-04 11:22:00 +05:30
beforeEach(async () => {
2020-03-13 15:44:24 +05:30
listenHandler({ type: 'done' });
listenHandler({ type: 'urlchange', url: TEST_HOST });
2022-04-04 11:22:00 +05:30
await 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
});
2022-04-04 11:22:00 +05:30
it('is enabled when there is previous entry', async () => {
2020-03-13 15:44:24 +05:30
listenHandler({ type: 'urlchange', url: `${TEST_HOST}/url1` });
2022-04-04 11:22:00 +05:30
await nextTick();
findBackButton().trigger('click');
expect(findBackButton().attributes('disabled')).toBeFalsy();
2018-11-18 11:00:15 +05:30
});
2022-04-04 11:22:00 +05:30
it('is disabled when there is no previous entry', async () => {
2020-03-13 15:44:24 +05:30
listenHandler({ type: 'urlchange', url: `${TEST_HOST}/url1` });
2022-04-04 11:22:00 +05:30
await nextTick();
findBackButton().trigger('click');
await nextTick();
expect(findBackButton().attributes('disabled')).toBe('disabled');
2018-11-18 11:00:15 +05:30
});
2022-04-04 11:22:00 +05:30
it('updates manager iframe src', async () => {
2020-03-13 15:44:24 +05:30
listenHandler({ type: 'urlchange', url: `${TEST_HOST}/url1` });
listenHandler({ type: 'urlchange', url: `${TEST_HOST}/url2` });
2022-04-04 11:22:00 +05:30
await nextTick();
findBackButton().trigger('click');
2018-11-18 11:00:15 +05:30
2022-04-04 11:22:00 +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', () => {
2022-04-04 11:22:00 +05:30
beforeEach(async () => {
2020-03-13 15:44:24 +05:30
listenHandler({ type: 'done' });
listenHandler({ type: 'urlchange', url: TEST_HOST });
2022-04-04 11:22:00 +05:30
await 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
});
2022-04-04 11:22:00 +05:30
it('is enabled when there is next entry', async () => {
2020-03-13 15:44:24 +05:30
listenHandler({ type: 'urlchange', url: `${TEST_HOST}/url1` });
2022-04-04 11:22:00 +05:30
await nextTick();
findBackButton().trigger('click');
await nextTick();
expect(findForwardButton().attributes('disabled')).toBeFalsy();
2018-11-18 11:00:15 +05:30
});
2022-04-04 11:22:00 +05:30
it('is disabled when there is no next entry', async () => {
2020-03-13 15:44:24 +05:30
listenHandler({ type: 'urlchange', url: `${TEST_HOST}/url1` });
2022-04-04 11:22:00 +05:30
await nextTick();
findBackButton().trigger('click');
await nextTick();
findForwardButton().trigger('click');
await nextTick();
expect(findForwardButton().attributes('disabled')).toBe('disabled');
2018-11-18 11:00:15 +05:30
});
2022-04-04 11:22:00 +05:30
it('updates manager iframe src', async () => {
2020-03-13 15:44:24 +05:30
listenHandler({ type: 'urlchange', url: `${TEST_HOST}/url1` });
listenHandler({ type: 'urlchange', url: `${TEST_HOST}/url2` });
2022-04-04 11:22:00 +05:30
await nextTick();
findBackButton().trigger('click');
2018-11-18 11:00:15 +05:30
2022-04-04 11:22:00 +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`;
2022-04-04 11:22:00 +05:30
beforeEach(async () => {
2020-03-13 15:44:24 +05:30
listenHandler({ type: 'done' });
listenHandler({ type: 'urlchange', url });
2022-04-04 11:22:00 +05:30
await 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
});
});
});