Add specs for when user opens files/folders in Web IDE

spec/frontend_integration/ide/helpers/ide_helper.js

@@ -5,13 +5,14 @@ import {
   findByTestId,
   getByText,
   screen,
+  findByText,
 } from '@testing-library/dom';
 
 const isFolderRowOpen = row => row.matches('.folder.is-open');
 
 const getLeftSidebar = () => screen.getByTestId('left-sidebar');
 
-const clickOnLeftSidebarTab = name => {
+export const switchLeftSidebarTab = name => {
   const sidebar = getLeftSidebar();
 
   const button = getByLabelText(sidebar, name);
@@ -25,7 +26,10 @@ export const waitForMonacoEditor = () =>
   new Promise(resolve => window.monaco.editor.onDidCreateEditor(resolve));
 
 export const findMonacoEditor = () =>
-  screen.findByLabelText(/Editor content;/).then(x => x.closest('.monaco-editor'));
+  screen.findAllByLabelText(/Editor content;/).then(([x]) => x.closest('.monaco-editor'));
+
+export const findMonacoDiffEditor = () =>
+  screen.findAllByLabelText(/Editor content;/).then(([x]) => x.closest('.monaco-diff-editor'));
 
 export const findAndSetEditorValue = async value => {
   const editor = await findMonacoEditor();
@@ -114,6 +118,9 @@ export const openFile = async path => {
   openFileRow(row);
 };
 
+export const waitForTabToOpen = fileName =>
+  findByText(document.querySelector('.multi-file-edit-pane'), fileName);
+
 export const createFile = async (path, content) => {
   const parentPath = path
     .split('/')
@@ -157,7 +164,7 @@ export const closeFile = async path => {
 };
 
 export const commit = async () => {
-  clickOnLeftSidebarTab('Commit');
+  switchLeftSidebarTab('Commit');
   screen.getByTestId('begin-commit-button').click();
 
   await screen.findByLabelText(/Commit to .+ branch/).then(x => x.click());

spec/frontend_integration/ide/user_opens_file_spec.js

+import { useOverclockTimers } from 'test_helpers/utils/overclock_timers';
+import { screen } from '@testing-library/dom';
+import * as ideHelper from './helpers/ide_helper';
+import startWebIDE from './helpers/start';
+
+describe('IDE: User opens a file in the Web IDE', () => {
+  useOverclockTimers();
+
+  let vm;
+  let container;
+
+  beforeEach(async () => {
+    setFixtures('<div class="webide-container"></div>');
+    container = document.querySelector('.webide-container');
+
+    vm = startWebIDE(container);
+
+    await screen.findByText('README'); // wait for file tree to load
+  });
+
+  afterEach(() => {
+    vm.$destroy();
+    vm = null;
+  });
+
+  describe('user opens a directory', () => {
+    beforeEach(async () => {
+      await ideHelper.openFile('files/images');
+      await screen.findByText('logo-white.png');
+    });
+
+    it('expands directory in the left sidebar', () => {
+      expect(ideHelper.getFilesList()).toEqual(
+        expect.arrayContaining(['html', 'js', 'images', 'logo-white.png']),
+      );
+    });
+  });
+
+  describe('user opens a text file', () => {
+    beforeEach(async () => {
+      await ideHelper.openFile('README.md');
+      await ideHelper.waitForTabToOpen('README.md');
+    });
+
+    it('opens the file in monaco editor', async () => {
+      expect(await ideHelper.getEditorValue()).toContain('Sample repo for testing gitlab features');
+    });
+
+    describe('user switches to review mode', () => {
+      beforeEach(() => {
+        ideHelper.switchLeftSidebarTab('Review');
+      });
+
+      it('shows diff editor', async () => {
+        expect(await ideHelper.findMonacoDiffEditor()).toBeDefined();
+      });
+    });
+  });
+
+  describe('user opens an image file', () => {
+    beforeEach(async () => {
+      await ideHelper.openFile('files/images/logo-white.png');
+      await ideHelper.waitForTabToOpen('logo-white.png');
+    });
+
+    it('opens image viewer for the file', async () => {
+      const viewer = await screen.findByTestId('image-viewer');
+      const img = viewer.querySelector('img');
+
+      expect(img.src).toContain('logo-white.png');
+    });
+  });
+
+  describe('user opens a binary file', () => {
+    beforeEach(async () => {
+      await ideHelper.openFile('Gemfile.zip');
+      await ideHelper.waitForTabToOpen('Gemfile.zip');
+    });
+
+    it('opens image viewer for the file', async () => {
+      const downloadButton = await screen.findByText('Download');
+
+      expect(downloadButton.getAttribute('download')).toEqual('Gemfile.zip');
+      expect(downloadButton.getAttribute('href')).toContain('/raw/');
+    });
+  });
+});

spec/frontend_integration/ide/user_opens_ide_spec.js

 import { useOverclockTimers } from 'test_helpers/utils/overclock_timers';
-import { findByText, screen } from '@testing-library/dom';
+import { screen } from '@testing-library/dom';
 import * as ideHelper from './helpers/ide_helper';
 import startWebIDE from './helpers/start';
 
@@ -79,8 +79,7 @@ describe('IDE: User opens IDE', () => {
     beforeEach(async () => {
       vm = startWebIDE(container, { path: 'README.md' });
 
-      // a new tab is open for README.md
-      await findByText(document.querySelector('.multi-file-edit-pane'), 'README.md');
+      await ideHelper.waitForTabToOpen('README.md');
     });
 
     it('opens the file and its contents are shown in Monaco', async () => {
@@ -92,8 +91,7 @@ describe('IDE: User opens IDE', () => {
     beforeEach(async () => {
       vm = startWebIDE(container, { path: 'Gemfile.zip' });
 
-      // a new tab is open for Gemfile.zip
-      await findByText(document.querySelector('.multi-file-edit-pane'), 'Gemfile.zip');
+      await ideHelper.waitForTabToOpen('Gemfile.zip');
     });
 
     it('shows download viewer', async () => {
@@ -108,8 +106,7 @@ describe('IDE: User opens IDE', () => {
     beforeEach(async () => {
       vm = startWebIDE(container, { path: 'files/images/logo-white.png' });
 
-      // a new tab is open for logo-white.png
-      await findByText(document.querySelector('.multi-file-edit-pane'), 'logo-white.png');
+      await ideHelper.waitForTabToOpen('logo-white.png');
     });
 
     it('shows image viewer', async () => {
@@ -147,8 +144,7 @@ describe('IDE: User opens IDE', () => {
     beforeEach(async () => {
       vm = startWebIDE(container, { path: 'abracadabra/hocus-focus.txt' });
 
-      // a new tab is open for hocus-focus.txt
-      await findByText(document.querySelector('.multi-file-edit-pane'), 'hocus-focus.txt');
+      await ideHelper.waitForTabToOpen('hocus-focus.txt');
     });
 
     it('create new folders and file in the left sidebar', () => {