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
|
|
|
});
|
|
|
|
});
|
|
|
|
});
|