Add FE integration spec for IDE open in MR

- Also fixes 404 route to actually return 404

spec/frontend/fixtures/api_merge_requests.rb

@@ -6,9 +6,10 @@ RSpec.describe API::MergeRequests, '(JavaScript fixtures)', type: :request do
   include ApiHelpers
   include JavaScriptFixturesHelpers
 
-  let(:admin) { create(:admin, name: 'root') }
-  let(:namespace) { create(:namespace, name: 'gitlab-test' )}
-  let(:project) { create(:project, :repository, namespace: namespace, path: 'lorem-ipsum') }
+  let_it_be(:admin) { create(:admin, name: 'root') }
+  let_it_be(:namespace) { create(:namespace, name: 'gitlab-test' )}
+  let_it_be(:project) { create(:project, :repository, namespace: namespace, path: 'lorem-ipsum') }
+  let_it_be(:mr) { create(:merge_request, source_project: project) }
 
   before(:all) do
     clean_frontend_fixtures('api/merge_requests')
@@ -21,4 +22,16 @@ RSpec.describe API::MergeRequests, '(JavaScript fixtures)', type: :request do
 
     expect(response).to be_successful
   end
+
+  it 'api/merge_requests/versions.json' do
+    get api("/projects/#{project.id}/merge_requests/#{mr.iid}/versions", admin)
+
+    expect(response).to be_successful
+  end
+
+  it 'api/merge_requests/changes.json' do
+    get api("/projects/#{project.id}/merge_requests/#{mr.iid}/changes", admin)
+
+    expect(response).to be_successful
+  end
 end

spec/frontend_integration/ide/helpers/ide_helper.js

@@ -69,7 +69,7 @@ const openFileRow = (row) => {
   row.click();
 };
 
-const findAndTraverseToPath = async (path, index = 0, row = null) => {
+export const findAndTraverseToPath = async (path, index = 0, row = null) => {
   if (!path) {
     return row;
   }
@@ -110,6 +110,12 @@ const findAndClickRootAction = async (name) => {
   button.click();
 };
 
+/**
+ * Drop leading "/-/ide" and file path from the current URL
+ */
+export const getBaseRoute = (url = window.location.pathname) =>
+  url.replace(/^\/-\/ide/, '').replace(/\/-\/.*$/, '');
+
 export const clickPreviewMarkdown = () => {
   screen.getByText('Preview Markdown').click();
 };

spec/frontend_integration/ide/helpers/start.js

@@ -4,11 +4,12 @@ import Editor from '~/ide/lib/editor';
 import extendStore from '~/ide/stores/extend';
 import { IDE_DATASET } from './mock_data';
 
-export default (container, { isRepoEmpty = false, path = '' } = {}) => {
+export default (container, { isRepoEmpty = false, path = '', mrId = '' } = {}) => {
+  const projectName = isRepoEmpty ? 'lorem-ipsum-empty' : 'lorem-ipsum';
+  const pathSuffix = mrId ? `merge_requests/${mrId}` : `tree/master/-/${path}`;
+
   global.jsdom.reconfigure({
-    url: `${TEST_HOST}/-/ide/project/gitlab-test/lorem-ipsum${
-      isRepoEmpty ? '-empty' : ''
-    }/tree/master/-/${path}`,
+    url: `${TEST_HOST}/-/ide/project/gitlab-test/${projectName}/${pathSuffix}`,
   });
 
   const el = document.createElement('div');

spec/frontend_integration/ide/user_opens_mr_spec.js

+import { basename } from 'path';
+import { useOverclockTimers } from 'test_helpers/utils/overclock_timers';
+import { getMergeRequests, getMergeRequestWithChanges } from 'test_helpers/fixtures';
+import * as ideHelper from './helpers/ide_helper';
+import startWebIDE from './helpers/start';
+
+const getRelevantChanges = () =>
+  getMergeRequestWithChanges().changes.filter((x) => !x.deleted_file);
+
+describe('IDE: User opens Merge Request', () => {
+  useOverclockTimers();
+
+  let vm;
+  let container;
+  let changes;
+
+  beforeEach(async () => {
+    const [{ iid: mrId }] = getMergeRequests();
+
+    changes = getRelevantChanges();
+
+    setFixtures('<div class="webide-container"></div>');
+    container = document.querySelector('.webide-container');
+
+    vm = startWebIDE(container, { mrId });
+
+    await ideHelper.waitForTabToOpen(basename(changes[0].new_path));
+    await ideHelper.waitForMonacoEditor();
+  });
+
+  afterEach(async () => {
+    vm.$destroy();
+    vm = null;
+  });
+
+  const findAllTabs = () => Array.from(document.querySelectorAll('.multi-file-tab'));
+  const findAllTabsData = () =>
+    findAllTabs().map((el) => ({
+      title: el.getAttribute('title'),
+      text: el.textContent.trim(),
+    }));
+
+  it('shows first change as active in file tree', async () => {
+    const firstPath = changes[0].new_path;
+    const row = await ideHelper.findAndTraverseToPath(firstPath);
+
+    expect(row).toHaveClass('is-open');
+    expect(row).toHaveClass('is-active');
+  });
+
+  it('opens other changes', () => {
+    // We only show first 10 changes
+    const expectedTabs = changes.slice(0, 10).map((x) => ({
+      title: `${ideHelper.getBaseRoute()}/-/${x.new_path}/`,
+      text: basename(x.new_path),
+    }));
+
+    expect(findAllTabsData()).toEqual(expectedTabs);
+  });
+});

spec/frontend_integration/test_helpers/fixtures.js

@@ -31,6 +31,12 @@ export const getBranch = factory.json(() =>
 export const getMergeRequests = factory.json(() =>
   require('test_fixtures/api/merge_requests/get.json'),
 );
+export const getMergeRequestWithChanges = factory.json(() =>
+  require('test_fixtures/api/merge_requests/changes.json'),
+);
+export const getMergeRequestVersions = factory.json(() =>
+  require('test_fixtures/api/merge_requests/versions.json'),
+);
 export const getRepositoryFiles = factory.json(() =>
   require('test_fixtures/projects_json/files.json'),
 );

spec/frontend_integration/test_helpers/mock_server/index.js

@@ -4,6 +4,8 @@ import {
   getEmptyProject,
   getBranch,
   getMergeRequests,
+  getMergeRequestWithChanges,
+  getMergeRequestVersions,
   getRepositoryFiles,
   getBlobReadme,
   getBlobImage,
@@ -16,6 +18,8 @@ export const createMockServerOptions = () => ({
     project: Model,
     branch: Model,
     mergeRequest: Model,
+    mergeRequestChange: Model,
+    mergeRequestVersion: Model,
     file: Model,
     userPermission: Model,
   },
@@ -30,6 +34,8 @@ export const createMockServerOptions = () => ({
       projects: [getProject(), getEmptyProject()],
       branches: [getBranch()],
       mergeRequests: getMergeRequests(),
+      mergeRequestChanges: [getMergeRequestWithChanges()],
+      mergeRequestVersions: getMergeRequestVersions(),
       filesRaw: [
         {
           raw: getBlobReadme(),

spec/frontend_integration/test_helpers/mock_server/routes/404.js

+import { Response } from 'miragejs';
+
 export default (server) => {
   ['get', 'post', 'put', 'delete', 'patch'].forEach((method) => {
     server[method]('*', () => {

spec/frontend_integration/test_helpers/mock_server/routes/projects.js

@@ -20,4 +20,22 @@ export default (server) => {
 
     return result.models;
   });
+
+  server.get('/api/v4/projects/:id/merge_requests/:mid', (schema, request) => {
+    const mr = schema.mergeRequests.findBy({ iid: request.params.mid });
+
+    return mr.attrs;
+  });
+
+  server.get('/api/v4/projects/:id/merge_requests/:mid/versions', (schema, request) => {
+    const versions = schema.mergeRequestVersions.where({ merge_request_id: request.params.mid });
+
+    return versions.models;
+  });
+
+  server.get('/api/v4/projects/:id/merge_requests/:mid/changes', (schema, request) => {
+    const mrWithChanges = schema.mergeRequestChanges.findBy({ iid: request.params.mid });
+
+    return mrWithChanges.attrs;
+  });
 };