summaryrefslogtreecommitdiff
path: root/spec/javascripts/ide/components/preview/clientside_spec.js
diff options
context:
space:
mode:
Diffstat (limited to 'spec/javascripts/ide/components/preview/clientside_spec.js')
-rw-r--r--spec/javascripts/ide/components/preview/clientside_spec.js363
1 files changed, 0 insertions, 363 deletions
diff --git a/spec/javascripts/ide/components/preview/clientside_spec.js b/spec/javascripts/ide/components/preview/clientside_spec.js
deleted file mode 100644
index b9bf5c51ffe..00000000000
--- a/spec/javascripts/ide/components/preview/clientside_spec.js
+++ /dev/null
@@ -1,363 +0,0 @@
-import Vue from 'vue';
-import { createComponentWithStore } from 'spec/helpers/vue_mount_component_helper';
-import { createStore } from '~/ide/stores';
-import Clientside from '~/ide/components/preview/clientside.vue';
-import timeoutPromise from 'spec/helpers/set_timeout_promise_helper';
-import { resetStore, file } from '../../helpers';
-
-describe('IDE clientside preview', () => {
- let vm;
- let Component;
-
- beforeAll(() => {
- Component = Vue.extend(Clientside);
- });
-
- beforeEach(done => {
- const store = createStore();
-
- Vue.set(store.state.entries, 'package.json', {
- ...file('package.json'),
- });
- Vue.set(store.state, 'currentProjectId', 'gitlab-ce');
- Vue.set(store.state.projects, 'gitlab-ce', {
- visibility: 'public',
- });
-
- vm = createComponentWithStore(Component, store);
-
- spyOn(vm, 'getFileData').and.returnValue(Promise.resolve());
- spyOn(vm, 'getRawFileData').and.returnValue(Promise.resolve(''));
- spyOn(vm, 'initManager');
-
- vm.$mount();
-
- timeoutPromise()
- .then(() => vm.$nextTick())
- .then(done)
- .catch(done.fail);
- });
-
- afterEach(() => {
- vm.$destroy();
- resetStore(vm.$store);
- });
-
- describe('without main entry', () => {
- it('creates sandpack manager', () => {
- expect(vm.initManager).not.toHaveBeenCalled();
- });
- });
-
- describe('with main entry', () => {
- beforeEach(done => {
- Vue.set(
- vm.$store.state.entries['package.json'],
- 'raw',
- JSON.stringify({
- main: 'index.js',
- }),
- );
-
- vm.$nextTick()
- .then(() => vm.initPreview())
- .then(vm.$nextTick)
- .then(done)
- .catch(done.fail);
- });
-
- it('creates sandpack manager', () => {
- expect(vm.initManager).toHaveBeenCalledWith(
- '#ide-preview',
- {
- files: jasmine.any(Object),
- entry: '/index.js',
- showOpenInCodeSandbox: true,
- },
- {
- fileResolver: {
- isFile: jasmine.any(Function),
- readFile: jasmine.any(Function),
- },
- },
- );
- });
- });
-
- describe('computed', () => {
- describe('normalizedEntries', () => {
- beforeEach(done => {
- vm.$store.state.entries['index.js'] = {
- ...file('index.js'),
- type: 'blob',
- raw: 'test',
- };
- vm.$store.state.entries['index2.js'] = {
- ...file('index2.js'),
- type: 'blob',
- content: 'content',
- };
- vm.$store.state.entries.tree = {
- ...file('tree'),
- type: 'tree',
- };
- vm.$store.state.entries.empty = {
- ...file('empty'),
- type: 'blob',
- };
-
- vm.$nextTick(done);
- });
-
- it('returns flattened list of blobs with content', () => {
- expect(vm.normalizedEntries).toEqual({
- '/index.js': {
- code: 'test',
- },
- '/index2.js': {
- code: 'content',
- },
- });
- });
- });
-
- describe('mainEntry', () => {
- it('returns false when package.json is empty', () => {
- expect(vm.mainEntry).toBe(false);
- });
-
- it('returns main key from package.json', done => {
- Vue.set(
- vm.$store.state.entries['package.json'],
- 'raw',
- JSON.stringify({
- main: 'index.js',
- }),
- );
-
- vm.$nextTick(() => {
- expect(vm.mainEntry).toBe('index.js');
-
- done();
- });
- });
- });
-
- describe('showPreview', () => {
- it('returns false if no mainEntry', () => {
- expect(vm.showPreview).toBe(false);
- });
-
- it('returns false if loading', done => {
- Vue.set(
- vm.$store.state.entries['package.json'],
- 'raw',
- JSON.stringify({
- main: 'index.js',
- }),
- );
- vm.loading = true;
-
- vm.$nextTick(() => {
- expect(vm.showPreview).toBe(false);
-
- done();
- });
- });
-
- it('returns true if not loading and mainEntry exists', done => {
- Vue.set(
- vm.$store.state.entries['package.json'],
- 'raw',
- JSON.stringify({
- main: 'index.js',
- }),
- );
- vm.loading = false;
-
- vm.$nextTick(() => {
- expect(vm.showPreview).toBe(true);
-
- done();
- });
- });
- });
-
- describe('showEmptyState', () => {
- it('returns true if no mainEnry exists', () => {
- expect(vm.showEmptyState).toBe(true);
- });
-
- it('returns false if loading', done => {
- Vue.set(
- vm.$store.state.entries['package.json'],
- 'raw',
- JSON.stringify({
- main: 'index.js',
- }),
- );
- vm.loading = true;
-
- vm.$nextTick(() => {
- expect(vm.showEmptyState).toBe(false);
-
- done();
- });
- });
-
- it('returns false if not loading and mainEntry exists', done => {
- Vue.set(
- vm.$store.state.entries['package.json'],
- 'raw',
- JSON.stringify({
- main: 'index.js',
- }),
- );
- vm.loading = false;
-
- vm.$nextTick(() => {
- expect(vm.showEmptyState).toBe(false);
-
- done();
- });
- });
- });
-
- describe('showOpenInCodeSandbox', () => {
- it('returns true when visiblity is public', () => {
- expect(vm.showOpenInCodeSandbox).toBe(true);
- });
-
- it('returns false when visiblity is private', done => {
- vm.$store.state.projects['gitlab-ce'].visibility = 'private';
-
- vm.$nextTick(() => {
- expect(vm.showOpenInCodeSandbox).toBe(false);
-
- done();
- });
- });
- });
-
- describe('sandboxOpts', () => {
- beforeEach(done => {
- vm.$store.state.entries['index.js'] = {
- ...file('index.js'),
- type: 'blob',
- raw: 'test',
- };
- Vue.set(
- vm.$store.state.entries['package.json'],
- 'raw',
- JSON.stringify({
- main: 'index.js',
- }),
- );
-
- vm.$nextTick(done);
- });
-
- it('returns sandbox options', () => {
- expect(vm.sandboxOpts).toEqual({
- files: {
- '/index.js': {
- code: 'test',
- },
- '/package.json': {
- code: '{"main":"index.js"}',
- },
- },
- entry: '/index.js',
- showOpenInCodeSandbox: true,
- });
- });
- });
- });
-
- describe('methods', () => {
- describe('loadFileContent', () => {
- it('calls getFileData', () => {
- expect(vm.getFileData).toHaveBeenCalledWith({
- path: 'package.json',
- makeFileActive: false,
- });
- });
-
- it('calls getRawFileData', () => {
- expect(vm.getRawFileData).toHaveBeenCalledWith({ path: 'package.json' });
- });
- });
-
- describe('update', () => {
- beforeEach(() => {
- jasmine.clock().install();
-
- vm.sandpackReady = true;
- vm.manager.updatePreview = jasmine.createSpy('updatePreview');
- vm.manager.listener = jasmine.createSpy('updatePreview');
- });
-
- afterEach(() => {
- jasmine.clock().uninstall();
- });
-
- it('calls initPreview if manager is empty', () => {
- spyOn(vm, 'initPreview');
- vm.manager = {};
-
- vm.update();
-
- jasmine.clock().tick(250);
-
- expect(vm.initPreview).toHaveBeenCalled();
- });
-
- it('calls updatePreview', () => {
- vm.update();
-
- jasmine.clock().tick(250);
-
- expect(vm.manager.updatePreview).toHaveBeenCalledWith(vm.sandboxOpts);
- });
- });
- });
-
- describe('template', () => {
- it('renders ide-preview element when showPreview is true', done => {
- Vue.set(
- vm.$store.state.entries['package.json'],
- 'raw',
- JSON.stringify({
- main: 'index.js',
- }),
- );
- vm.loading = false;
-
- vm.$nextTick(() => {
- expect(vm.$el.querySelector('#ide-preview')).not.toBe(null);
- done();
- });
- });
-
- it('renders empty state', done => {
- vm.loading = false;
-
- vm.$nextTick(() => {
- expect(vm.$el.textContent).toContain(
- 'Preview your web application using Web IDE client-side evaluation.',
- );
-
- done();
- });
- });
-
- it('renders loading icon', done => {
- vm.loading = true;
-
- vm.$nextTick(() => {
- expect(vm.$el.querySelector('.loading-container')).not.toBe(null);
- done();
- });
- });
- });
-});