Add latest changes from gitlab-org/gitlab@master

2 files changed, 127 insertions, 5 deletions

diff --git a/spec/frontend_integration/ide/helpers/ide_helper.js b/spec/frontend_integration/ide/helpers/ide_helper.js
index 67355025727..d421c21df84 100644
--- a/spec/frontend_integration/ide/helpers/ide_helper.js
+++ b/spec/frontend_integration/ide/helpers/ide_helper.js
@@ -1,4 +1,11 @@
-import { findAllByText, fireEvent, getByLabelText, screen } from '@testing-library/dom';
+import {
+  findAllByText,
+  fireEvent,
+  getByLabelText,
+  findByTestId,
+  getByText,
+  screen,
+} from '@testing-library/dom';
 
 const isFolderRowOpen = row => row.matches('.folder.is-open');
 
@@ -12,6 +19,11 @@ const clickOnLeftSidebarTab = name => {
   button.click();
 };
 
+export const getStatusBar = () => document.querySelector('.ide-status-bar');
+
+export const waitForMonacoEditor = () =>
+  new Promise(resolve => window.monaco.editor.onDidCreateEditor(resolve));
+
 export const findMonacoEditor = () =>
   screen.findByLabelText(/Editor content;/).then(x => x.closest('.monaco-editor'));
 
@@ -75,11 +87,13 @@ const clickFileRowAction = (row, name) => {
   dropdownAction.click();
 };
 
-const findAndSetFileName = async value => {
-  const nameField = await screen.findByTestId('file-name-field');
+const fillFileNameModal = async (value, submitText = 'Create file') => {
+  const modal = await screen.findByTestId('ide-new-entry');
+
+  const nameField = await findByTestId(modal, 'file-name-field');
   fireEvent.input(nameField, { target: { value } });
 
-  const createButton = screen.getByText('Create file');
+  const createButton = getByText(modal, submitText, { selector: 'button' });
   createButton.click();
 };
 
@@ -90,6 +104,10 @@ const findAndClickRootAction = async name => {
   button.click();
 };
 
+export const clickPreviewMarkdown = () => {
+  screen.getByText('Preview Markdown').click();
+};
+
 export const openFile = async path => {
   const row = await findAndTraverseToPath(path);
 
@@ -110,7 +128,7 @@ export const createFile = async (path, content) => {
     await findAndClickRootAction('New file');
   }
 
-  await findAndSetFileName(path);
+  await fillFileNameModal(path);
   await findAndSetEditorValue(content);
 };
 
@@ -123,6 +141,21 @@ export const deleteFile = async path => {
   clickFileRowAction(row, 'Delete');
 };
 
+export const renameFile = async (path, newPath) => {
+  const row = await findAndTraverseToPath(path);
+  clickFileRowAction(row, 'Rename/Move');
+
+  await fillFileNameModal(newPath, 'Rename file');
+};
+
+export const closeFile = async path => {
+  const button = await screen.getByLabelText(`Close ${path}`, {
+    selector: '.multi-file-tabs button',
+  });
+
+  button.click();
+};
+
 export const commit = async () => {
   clickOnLeftSidebarTab('Commit');
   screen.getByTestId('begin-commit-button').click();
diff --git a/spec/frontend_integration/ide/ide_integration_spec.js b/spec/frontend_integration/ide/ide_integration_spec.js
index a17f57e2216..dacc538d5ba 100644
--- a/spec/frontend_integration/ide/ide_integration_spec.js
+++ b/spec/frontend_integration/ide/ide_integration_spec.js
@@ -68,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');
+      });
+    });
+  });
 });