1 files changed, 89 insertions, 0 deletions
diff --git a/spec/frontend_integration/ide/user_opens_file_spec.js b/spec/frontend_integration/ide/user_opens_file_spec.js
new file mode 100644
index 00000000000..98a73c7a029
--- /dev/null
+++ b/spec/frontend_integration/ide/user_opens_file_spec.js
@@ -0,0 +1,89 @@
+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';
+
+// https://gitlab.com/gitlab-org/gitlab/-/issues/293654#note_466432769
+// eslint-disable-next-line jest/no-disabled-tests
+describe.skip('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/');
+    });
+  });
+});