diff options
Diffstat (limited to 'spec/frontend/ide/components')
-rw-r--r-- | spec/frontend/ide/components/panes/right_spec.js | 25 | ||||
-rw-r--r-- | spec/frontend/ide/components/preview/clientside_spec.js | 416 | ||||
-rw-r--r-- | spec/frontend/ide/components/preview/navigator_spec.js | 161 |
3 files changed, 0 insertions, 602 deletions
diff --git a/spec/frontend/ide/components/panes/right_spec.js b/spec/frontend/ide/components/panes/right_spec.js index 294f5eee863..1d81c3ea89d 100644 --- a/spec/frontend/ide/components/panes/right_spec.js +++ b/spec/frontend/ide/components/panes/right_spec.js @@ -68,31 +68,6 @@ describe('ide/components/panes/right.vue', () => { }); }); - describe('clientside live preview tab', () => { - it('is shown if there is a packageJson and clientsidePreviewEnabled', () => { - Vue.set(store.state.entries, 'package.json', { - name: 'package.json', - }); - store.state.clientsidePreviewEnabled = true; - - createComponent(); - - expect(wrapper.findComponent(CollapsibleSidebar).props('extensionTabs')).toEqual( - expect.arrayContaining([ - expect.objectContaining({ - show: true, - title: 'Live preview', - views: expect.arrayContaining([ - expect.objectContaining({ - name: rightSidebarViews.clientSidePreview.name, - }), - ]), - }), - ]), - ); - }); - }); - describe('terminal tab', () => { beforeEach(() => { createComponent(); diff --git a/spec/frontend/ide/components/preview/clientside_spec.js b/spec/frontend/ide/components/preview/clientside_spec.js deleted file mode 100644 index 51e6a9d9034..00000000000 --- a/spec/frontend/ide/components/preview/clientside_spec.js +++ /dev/null @@ -1,416 +0,0 @@ -import { GlLoadingIcon } from '@gitlab/ui'; -import { shallowMount } from '@vue/test-utils'; -import Vue, { nextTick } from 'vue'; -import { dispatch } from 'codesandbox-api'; -import { SandpackClient } from '@codesandbox/sandpack-client'; -import Vuex from 'vuex'; -import waitForPromises from 'helpers/wait_for_promises'; -import Clientside from '~/ide/components/preview/clientside.vue'; -import { PING_USAGE_PREVIEW_KEY, PING_USAGE_PREVIEW_SUCCESS_KEY } from '~/ide/constants'; -import eventHub from '~/ide/eventhub'; - -jest.mock('@codesandbox/sandpack-client', () => ({ - SandpackClient: jest.fn(), -})); - -Vue.use(Vuex); - -const dummyPackageJson = () => ({ - raw: JSON.stringify({ - main: 'index.js', - }), -}); -const expectedSandpackOptions = () => ({ - files: {}, - entry: '/index.js', - showOpenInCodeSandbox: true, -}); -const expectedSandpackSettings = () => ({ - fileResolver: { - isFile: expect.any(Function), - readFile: expect.any(Function), - }, -}); - -describe('IDE clientside preview', () => { - let wrapper; - let store; - const storeActions = { - getFileData: jest.fn().mockReturnValue(Promise.resolve({})), - getRawFileData: jest.fn().mockReturnValue(Promise.resolve('')), - }; - const storeClientsideActions = { - pingUsage: jest.fn().mockReturnValue(Promise.resolve({})), - }; - const dispatchCodesandboxReady = () => dispatch({ type: 'done' }); - - const createComponent = ({ state, getters } = {}) => { - store = new Vuex.Store({ - state: { - entries: {}, - links: {}, - ...state, - }, - getters: { - packageJson: () => '', - currentProject: () => ({ - visibility: 'public', - }), - ...getters, - }, - actions: storeActions, - modules: { - clientside: { - namespaced: true, - actions: storeClientsideActions, - }, - }, - }); - - wrapper = shallowMount(Clientside, { - store, - }); - }; - - const createInitializedComponent = () => { - createComponent(); - // setData usage is discouraged. See https://gitlab.com/groups/gitlab-org/-/epics/7330 for details - // eslint-disable-next-line no-restricted-syntax - wrapper.setData({ - sandpackReady: true, - client: { - cleanup: jest.fn(), - updatePreview: jest.fn(), - }, - }); - }; - - afterEach(() => { - wrapper.destroy(); - }); - - describe('without main entry', () => { - it('creates sandpack client', () => { - createComponent(); - expect(SandpackClient).not.toHaveBeenCalled(); - }); - }); - describe('with main entry', () => { - beforeEach(() => { - createComponent({ getters: { packageJson: dummyPackageJson } }); - - return waitForPromises(); - }); - - it('creates sandpack client', () => { - expect(SandpackClient).toHaveBeenCalledWith( - '#ide-preview', - expectedSandpackOptions(), - expectedSandpackSettings(), - ); - }); - - it('pings usage', () => { - expect(storeClientsideActions.pingUsage).toHaveBeenCalledTimes(1); - expect(storeClientsideActions.pingUsage).toHaveBeenCalledWith( - expect.anything(), - PING_USAGE_PREVIEW_KEY, - ); - }); - - it('pings usage success', async () => { - dispatchCodesandboxReady(); - await nextTick(); - expect(storeClientsideActions.pingUsage).toHaveBeenCalledTimes(2); - expect(storeClientsideActions.pingUsage).toHaveBeenCalledWith( - expect.anything(), - PING_USAGE_PREVIEW_SUCCESS_KEY, - ); - }); - }); - - describe('with codesandboxBundlerUrl', () => { - const TEST_BUNDLER_URL = 'https://test.gitlab-static.test'; - - beforeEach(() => { - createComponent({ - getters: { packageJson: dummyPackageJson }, - state: { codesandboxBundlerUrl: TEST_BUNDLER_URL }, - }); - - return waitForPromises(); - }); - - it('creates sandpack client with bundlerURL', () => { - expect(SandpackClient).toHaveBeenCalledWith('#ide-preview', expectedSandpackOptions(), { - ...expectedSandpackSettings(), - bundlerURL: TEST_BUNDLER_URL, - }); - }); - }); - - describe('with codesandboxBundlerURL', () => { - beforeEach(() => { - createComponent({ getters: { packageJson: dummyPackageJson } }); - - return waitForPromises(); - }); - - it('creates sandpack client', () => { - expect(SandpackClient).toHaveBeenCalledWith( - '#ide-preview', - { - files: {}, - entry: '/index.js', - showOpenInCodeSandbox: true, - }, - { - fileResolver: { - isFile: expect.any(Function), - readFile: expect.any(Function), - }, - }, - ); - }); - }); - - describe('computed', () => { - describe('normalizedEntries', () => { - it('returns flattened list of blobs with content', () => { - createComponent({ - state: { - entries: { - 'index.js': { type: 'blob', raw: 'test' }, - 'index2.js': { type: 'blob', content: 'content' }, - tree: { type: 'tree' }, - empty: { type: 'blob' }, - }, - }, - }); - - expect(wrapper.vm.normalizedEntries).toEqual({ - '/index.js': { - code: 'test', - }, - '/index2.js': { - code: 'content', - }, - }); - }); - }); - - describe('mainEntry', () => { - it('returns false when package.json is empty', () => { - createComponent(); - expect(wrapper.vm.mainEntry).toBe(false); - }); - - it('returns main key from package.json', () => { - createComponent({ getters: { packageJson: dummyPackageJson } }); - expect(wrapper.vm.mainEntry).toBe('index.js'); - }); - }); - - describe('showPreview', () => { - it('returns false if no mainEntry', () => { - createComponent(); - expect(wrapper.vm.showPreview).toBe(false); - }); - - it('returns false if loading and mainEntry exists', () => { - createComponent({ getters: { packageJson: dummyPackageJson } }); - // setData usage is discouraged. See https://gitlab.com/groups/gitlab-org/-/epics/7330 for details - // eslint-disable-next-line no-restricted-syntax - wrapper.setData({ loading: true }); - - expect(wrapper.vm.showPreview).toBe(false); - }); - - it('returns true if not loading and mainEntry exists', () => { - createComponent({ getters: { packageJson: dummyPackageJson } }); - // setData usage is discouraged. See https://gitlab.com/groups/gitlab-org/-/epics/7330 for details - // eslint-disable-next-line no-restricted-syntax - wrapper.setData({ loading: false }); - - expect(wrapper.vm.showPreview).toBe(true); - }); - }); - - describe('showEmptyState', () => { - it('returns true if no mainEntry exists', () => { - createComponent(); - // setData usage is discouraged. See https://gitlab.com/groups/gitlab-org/-/epics/7330 for details - // eslint-disable-next-line no-restricted-syntax - wrapper.setData({ loading: false }); - expect(wrapper.vm.showEmptyState).toBe(true); - }); - - it('returns false if loading', () => { - createComponent(); - // setData usage is discouraged. See https://gitlab.com/groups/gitlab-org/-/epics/7330 for details - // eslint-disable-next-line no-restricted-syntax - wrapper.setData({ loading: true }); - - expect(wrapper.vm.showEmptyState).toBe(false); - }); - - it('returns false if not loading and mainEntry exists', () => { - createComponent({ getters: { packageJson: dummyPackageJson } }); - // setData usage is discouraged. See https://gitlab.com/groups/gitlab-org/-/epics/7330 for details - // eslint-disable-next-line no-restricted-syntax - wrapper.setData({ loading: false }); - - expect(wrapper.vm.showEmptyState).toBe(false); - }); - }); - - describe('showOpenInCodeSandbox', () => { - it('returns true when visibility is public', () => { - createComponent({ getters: { currentProject: () => ({ visibility: 'public' }) } }); - - expect(wrapper.vm.showOpenInCodeSandbox).toBe(true); - }); - - it('returns false when visibility is private', () => { - createComponent({ getters: { currentProject: () => ({ visibility: 'private' }) } }); - - expect(wrapper.vm.showOpenInCodeSandbox).toBe(false); - }); - }); - - describe('sandboxOpts', () => { - beforeEach(() => { - createComponent({ - state: { - entries: { - 'index.js': { type: 'blob', raw: 'test' }, - 'package.json': dummyPackageJson(), - }, - }, - getters: { - packageJson: dummyPackageJson, - }, - }); - }); - - it('returns sandbox options', () => { - expect(wrapper.vm.sandboxOpts).toEqual({ - files: { - '/index.js': { - code: 'test', - }, - '/package.json': { - code: '{"main":"index.js"}', - }, - }, - entry: '/index.js', - showOpenInCodeSandbox: true, - }); - }); - }); - }); - - describe('methods', () => { - describe('loadFileContent', () => { - beforeEach(() => { - createComponent(); - return wrapper.vm.loadFileContent('package.json'); - }); - - it('calls getFileData', () => { - expect(storeActions.getFileData).toHaveBeenCalledWith(expect.any(Object), { - path: 'package.json', - makeFileActive: false, - }); - }); - - it('calls getRawFileData', () => { - expect(storeActions.getRawFileData).toHaveBeenCalledWith(expect.any(Object), { - path: 'package.json', - }); - }); - }); - - describe('update', () => { - it('initializes client if client is empty', () => { - createComponent({ getters: { packageJson: dummyPackageJson } }); - // setData usage is discouraged. See https://gitlab.com/groups/gitlab-org/-/epics/7330 for details - // eslint-disable-next-line no-restricted-syntax - wrapper.setData({ sandpackReady: true }); - wrapper.vm.update(); - - return waitForPromises().then(() => { - expect(SandpackClient).toHaveBeenCalled(); - }); - }); - - it('calls updatePreview', () => { - createInitializedComponent(); - - wrapper.vm.update(); - - expect(wrapper.vm.client.updatePreview).toHaveBeenCalledWith(wrapper.vm.sandboxOpts); - }); - }); - - describe('on ide.files.change event', () => { - beforeEach(() => { - createInitializedComponent(); - - eventHub.$emit('ide.files.change'); - }); - - it('calls updatePreview', () => { - expect(wrapper.vm.client.updatePreview).toHaveBeenCalledWith(wrapper.vm.sandboxOpts); - }); - }); - }); - - describe('template', () => { - it('renders ide-preview element when showPreview is true', async () => { - createComponent({ getters: { packageJson: dummyPackageJson } }); - // setData usage is discouraged. See https://gitlab.com/groups/gitlab-org/-/epics/7330 for details - // eslint-disable-next-line no-restricted-syntax - wrapper.setData({ loading: false }); - - await nextTick(); - expect(wrapper.find('#ide-preview').exists()).toBe(true); - }); - - it('renders empty state', async () => { - createComponent(); - // setData usage is discouraged. See https://gitlab.com/groups/gitlab-org/-/epics/7330 for details - // eslint-disable-next-line no-restricted-syntax - wrapper.setData({ loading: false }); - - await nextTick(); - expect(wrapper.text()).toContain( - 'Preview your web application using Web IDE client-side evaluation.', - ); - }); - - it('renders loading icon', async () => { - createComponent(); - // setData usage is discouraged. See https://gitlab.com/groups/gitlab-org/-/epics/7330 for details - // eslint-disable-next-line no-restricted-syntax - wrapper.setData({ loading: true }); - - await nextTick(); - expect(wrapper.findComponent(GlLoadingIcon).exists()).toBe(true); - }); - }); - - describe('when destroyed', () => { - let spy; - - beforeEach(() => { - createInitializedComponent(); - spy = wrapper.vm.client.updatePreview; - wrapper.destroy(); - }); - - it('does not call updatePreview', () => { - expect(spy).not.toHaveBeenCalled(); - }); - }); -}); diff --git a/spec/frontend/ide/components/preview/navigator_spec.js b/spec/frontend/ide/components/preview/navigator_spec.js deleted file mode 100644 index 043dcade858..00000000000 --- a/spec/frontend/ide/components/preview/navigator_spec.js +++ /dev/null @@ -1,161 +0,0 @@ -import { GlLoadingIcon } from '@gitlab/ui'; -import { shallowMount } from '@vue/test-utils'; -import { listen } from 'codesandbox-api'; -import { nextTick } from 'vue'; -import { TEST_HOST } from 'helpers/test_constants'; -import ClientsideNavigator from '~/ide/components/preview/navigator.vue'; - -jest.mock('codesandbox-api', () => ({ - listen: jest.fn().mockReturnValue(jest.fn()), -})); - -describe('IDE clientside preview navigator', () => { - let wrapper; - let client; - let listenHandler; - - const findBackButton = () => wrapper.findAll('button').at(0); - const findForwardButton = () => wrapper.findAll('button').at(1); - const findRefreshButton = () => wrapper.findAll('button').at(2); - - beforeEach(() => { - listen.mockClear(); - client = { bundlerURL: TEST_HOST, iframe: { src: '' } }; - - wrapper = shallowMount(ClientsideNavigator, { propsData: { client } }); - [[listenHandler]] = listen.mock.calls; - }); - - afterEach(() => { - wrapper.destroy(); - }); - - it('renders readonly URL bar', async () => { - listenHandler({ type: 'urlchange', url: client.bundlerURL }); - await nextTick(); - expect(wrapper.find('input[readonly]').element.value).toBe('/'); - }); - - it('renders loading icon by default', () => { - expect(wrapper.findComponent(GlLoadingIcon).exists()).toBe(true); - }); - - it('removes loading icon when done event is fired', async () => { - listenHandler({ type: 'done' }); - await nextTick(); - expect(wrapper.findComponent(GlLoadingIcon).exists()).toBe(false); - }); - - it('does not count visiting same url multiple times', async () => { - listenHandler({ type: 'done' }); - listenHandler({ type: 'done', url: `${TEST_HOST}/url1` }); - listenHandler({ type: 'done', url: `${TEST_HOST}/url1` }); - await nextTick(); - expect(findBackButton().attributes('disabled')).toBe('disabled'); - }); - - it('unsubscribes from listen on destroy', () => { - const unsubscribeFn = listen(); - - wrapper.destroy(); - expect(unsubscribeFn).toHaveBeenCalled(); - }); - - describe('back button', () => { - beforeEach(async () => { - listenHandler({ type: 'done' }); - listenHandler({ type: 'urlchange', url: TEST_HOST }); - await nextTick(); - }); - - it('is disabled by default', () => { - expect(findBackButton().attributes('disabled')).toBe('disabled'); - }); - - it('is enabled when there is previous entry', async () => { - listenHandler({ type: 'urlchange', url: `${TEST_HOST}/url1` }); - await nextTick(); - findBackButton().trigger('click'); - expect(findBackButton().attributes()).not.toHaveProperty('disabled'); - }); - - it('is disabled when there is no previous entry', async () => { - listenHandler({ type: 'urlchange', url: `${TEST_HOST}/url1` }); - - await nextTick(); - findBackButton().trigger('click'); - - await nextTick(); - expect(findBackButton().attributes('disabled')).toBe('disabled'); - }); - - it('updates client iframe src', async () => { - listenHandler({ type: 'urlchange', url: `${TEST_HOST}/url1` }); - listenHandler({ type: 'urlchange', url: `${TEST_HOST}/url2` }); - await nextTick(); - findBackButton().trigger('click'); - - expect(client.iframe.src).toBe(`${TEST_HOST}/url1`); - }); - }); - - describe('forward button', () => { - beforeEach(async () => { - listenHandler({ type: 'done' }); - listenHandler({ type: 'urlchange', url: TEST_HOST }); - await nextTick(); - }); - - it('is disabled by default', () => { - expect(findForwardButton().attributes('disabled')).toBe('disabled'); - }); - - it('is enabled when there is next entry', async () => { - listenHandler({ type: 'urlchange', url: `${TEST_HOST}/url1` }); - - await nextTick(); - findBackButton().trigger('click'); - - await nextTick(); - expect(findForwardButton().attributes()).not.toHaveProperty('disabled'); - }); - - it('is disabled when there is no next entry', async () => { - listenHandler({ type: 'urlchange', url: `${TEST_HOST}/url1` }); - - await nextTick(); - findBackButton().trigger('click'); - - await nextTick(); - findForwardButton().trigger('click'); - - await nextTick(); - expect(findForwardButton().attributes('disabled')).toBe('disabled'); - }); - - it('updates client iframe src', async () => { - listenHandler({ type: 'urlchange', url: `${TEST_HOST}/url1` }); - listenHandler({ type: 'urlchange', url: `${TEST_HOST}/url2` }); - await nextTick(); - findBackButton().trigger('click'); - - expect(client.iframe.src).toBe(`${TEST_HOST}/url1`); - }); - }); - - describe('refresh button', () => { - const url = `${TEST_HOST}/some_url`; - beforeEach(async () => { - listenHandler({ type: 'done' }); - listenHandler({ type: 'urlchange', url }); - await nextTick(); - }); - - it('calls refresh with current path', () => { - client.iframe.src = 'something-other'; - findRefreshButton().trigger('click'); - - expect(client.iframe.src).toBe(url); - }); - }); -}); |