1 files changed, 96 insertions, 40 deletions

diff --git a/spec/frontend_integration/ide/ide_integration_spec.js b/spec/frontend_integration/ide/ide_integration_spec.js
index 1f5c1d38450..dacc538d5ba 100644
--- a/spec/frontend_integration/ide/ide_integration_spec.js
+++ b/spec/frontend_integration/ide/ide_integration_spec.js
@@ -1,61 +1,28 @@
-import { TEST_HOST } from 'helpers/test_constants';
 import { waitForText } from 'helpers/wait_for_text';
 import waitForPromises from 'helpers/wait_for_promises';
 import { useOverclockTimers } from 'test_helpers/utils/overclock_timers';
 import { createCommitId } from 'test_helpers/factories/commit_id';
-import { initIde } from '~/ide';
-import extendStore from '~/ide/stores/extend';
-import * as ideHelper from './ide_helper';
-
-const TEST_DATASET = {
-  emptyStateSvgPath: '/test/empty_state.svg',
-  noChangesStateSvgPath: '/test/no_changes_state.svg',
-  committedStateSvgPath: '/test/committed_state.svg',
-  pipelinesEmptyStateSvgPath: '/test/pipelines_empty_state.svg',
-  promotionSvgPath: '/test/promotion.svg',
-  ciHelpPagePath: '/test/ci_help_page',
-  webIDEHelpPagePath: '/test/web_ide_help_page',
-  clientsidePreviewEnabled: 'true',
-  renderWhitespaceInCode: 'false',
-  codesandboxBundlerUrl: 'test/codesandbox_bundler',
-};
+import * as ideHelper from './helpers/ide_helper';
+import startWebIDE from './helpers/start';
 
 describe('WebIDE', () => {
   useOverclockTimers();
 
   let vm;
-  let root;
+  let container;
 
   beforeEach(() => {
-    root = document.createElement('div');
-    document.body.appendChild(root);
-
-    global.jsdom.reconfigure({
-      url: `${TEST_HOST}/-/ide/project/gitlab-test/lorem-ipsum`,
-    });
+    setFixtures('<div class="webide-container"></div>');
+    container = document.querySelector('.webide-container');
   });
 
   afterEach(() => {
     vm.$destroy();
     vm = null;
-    root.remove();
-  });
-
-  const createComponent = () => {
-    const el = document.createElement('div');
-    Object.assign(el.dataset, TEST_DATASET);
-    root.appendChild(el);
-    vm = initIde(el, { extendStore });
-  };
-
-  it('runs', () => {
-    createComponent();
-
-    expect(root).toMatchSnapshot();
   });
 
   it('user commits changes', async () => {
-    createComponent();
+    vm = startWebIDE(container);
 
     await ideHelper.createFile('foo/bar/test.txt', 'Lorem ipsum dolar sit');
     await ideHelper.deleteFile('foo/bar/.gitkeep');
@@ -89,7 +56,7 @@ describe('WebIDE', () => {
   });
 
   it('user adds file that starts with +', async () => {
-    createComponent();
+    vm = startWebIDE(container);
 
     await ideHelper.createFile('+test', 'Hello world!');
     await ideHelper.openFile('+test');
@@ -101,4 +68,93 @@ describe('WebIDE', () => {
     const tabs = Array.from(document.querySelectorAll('.multi-file-tab'));
     expect(tabs.map(x => x.textContent.trim())).toEqual(['+test']);
   });
+
+  describe('editor info', () => {
+    let statusBar;
+    let editor;
+
+    const waitForEditor = async () => {
+      editor = await ideHelper.waitForMonacoEditor();
+    };
+
+    const changeEditorPosition = async (lineNumber, column) => {
+      editor.setPosition({ lineNumber, column });
+
+      await vm.$nextTick();
+    };
+
+    beforeEach(async () => {
+      vm = startWebIDE(container);
+
+      await ideHelper.openFile('README.md');
+      editor = await ideHelper.waitForMonacoEditor();
+
+      statusBar = ideHelper.getStatusBar();
+    });
+
+    it('shows line position and type', () => {
+      expect(statusBar).toHaveText('1:1');
+      expect(statusBar).toHaveText('markdown');
+    });
+
+    it('persists viewer', async () => {
+      const markdownPreview = 'test preview_markdown result';
+      mockServer.post('/:namespace/:project/preview_markdown', () => ({
+        body: markdownPreview,
+      }));
+
+      await ideHelper.openFile('README.md');
+      ideHelper.clickPreviewMarkdown();
+
+      const el = await waitForText(markdownPreview);
+      expect(el).toHaveText(markdownPreview);
+
+      // Need to wait for monaco editor to load so it doesn't through errors on dispose
+      await ideHelper.openFile('.gitignore');
+      await ideHelper.waitForMonacoEditor();
+      await ideHelper.openFile('README.md');
+      await ideHelper.waitForMonacoEditor();
+
+      expect(el).toHaveText(markdownPreview);
+    });
+
+    describe('when editor position changes', () => {
+      beforeEach(async () => {
+        await changeEditorPosition(4, 10);
+      });
+
+      it('shows new line position', () => {
+        expect(statusBar).not.toHaveText('1:1');
+        expect(statusBar).toHaveText('4:10');
+      });
+
+      it('updates after rename', async () => {
+        await ideHelper.renameFile('README.md', 'READMEZ.txt');
+        await waitForEditor();
+
+        expect(statusBar).toHaveText('1:1');
+        expect(statusBar).toHaveText('plaintext');
+      });
+
+      it('persists position after opening then rename', async () => {
+        await ideHelper.openFile('files/js/application.js');
+        await waitForEditor();
+        await ideHelper.renameFile('README.md', 'READING_RAINBOW.md');
+        await ideHelper.openFile('READING_RAINBOW.md');
+        await waitForEditor();
+
+        expect(statusBar).toHaveText('4:10');
+        expect(statusBar).toHaveText('markdown');
+      });
+
+      it('persists position after closing', async () => {
+        await ideHelper.closeFile('README.md');
+        await ideHelper.openFile('README.md');
+        await waitForEditor();
+
+        expect(statusBar).toHaveText('4:10');
+        expect(statusBar).toHaveText('markdown');
+      });
+    });
+  });
 });