component spec

app/assets/javascripts/ide/components/panes/right.vue

@@ -62,6 +62,7 @@ export default {
           <button
             v-tooltip
             :title="__('Merge Request')"
+            :aria-label="__('Merge Request')"
             :class="{
               active: rightPane === $options.rightSidebarViews.mergeRequestInfo
             }"
@@ -81,6 +82,7 @@ export default {
           <button
             v-tooltip
             :title="__('Pipelines')"
+            :aria-label="__('Pipelines')"
             :class="{
               active: pipelinesActive
             }"

spec/javascripts/ide/components/merge_requests/info_spec.js

+import Vue from 'vue';
+import '~/behaviors/markdown/render_gfm';
+import { createStore } from '~/ide/stores';
+import Info from '~/ide/components/merge_requests/info.vue';
+import { createComponentWithStore } from '../../../helpers/vue_mount_component_helper';
+
+describe('IDE merge request details', () => {
+  let Component;
+  let vm;
+
+  beforeAll(() => {
+    Component = Vue.extend(Info);
+  });
+
+  beforeEach(() => {
+    const store = createStore();
+    store.state.currentProjectId = 'gitlab-ce';
+    store.state.currentMergeRequestId = 1;
+    store.state.projects['gitlab-ce'] = {
+      mergeRequests: {
+        1: {
+          iid: 1,
+          title: 'Testing',
+          title_html: '<span class="title-html">Testing</span>',
+          description: 'Description',
+          description_html: '<p class="description-html">Description HTML</p>',
+        },
+      },
+    };
+
+    vm = createComponentWithStore(Component, store).$mount();
+  });
+
+  afterEach(() => {
+    vm.$destroy();
+  });
+
+  it('renders merge request IID', () => {
+    expect(vm.$el.querySelector('.detail-page-header').textContent).toContain('!1');
+  });
+
+  it('renders title as HTML', () => {
+    expect(vm.$el.querySelector('.title-html')).not.toBe(null);
+    expect(vm.$el.querySelector('.title').textContent).toContain('Testing');
+  });
+
+  it('renders description as HTML', () => {
+    expect(vm.$el.querySelector('.description-html')).not.toBe(null);
+    expect(vm.$el.querySelector('.description').textContent).toContain('Description HTML');
+  });
+});

spec/javascripts/ide/components/panes/right_spec.js

+import Vue from 'vue';
+import '~/behaviors/markdown/render_gfm';
+import { createStore } from '~/ide/stores';
+import RightPane from '~/ide/components/panes/right.vue';
+import { rightSidebarViews } from '~/ide/constants';
+import { createComponentWithStore } from '../../../helpers/vue_mount_component_helper';
+
+describe('IDE right pane', () => {
+  let Component;
+  let vm;
+
+  beforeAll(() => {
+    Component = Vue.extend(RightPane);
+  });
+
+  beforeEach(() => {
+    const store = createStore();
+
+    vm = createComponentWithStore(Component, store).$mount();
+  });
+
+  afterEach(() => {
+    vm.$destroy();
+  });
+
+  describe('active', () => {
+    it('renders merge request button as active', done => {
+      vm.$store.state.rightPane = rightSidebarViews.mergeRequestInfo;
+      vm.$store.state.currentMergeRequestId = '123';
+      vm.$store.state.currentProjectId = 'gitlab-ce';
+      vm.$store.state.currentMergeRequestId = 1;
+      vm.$store.state.projects['gitlab-ce'] = {
+        mergeRequests: {
+          1: {
+            iid: 1,
+            title: 'Testing',
+            title_html: '<span class="title-html">Testing</span>',
+            description: 'Description',
+            description_html: '<p class="description-html">Description HTML</p>',
+          },
+        },
+      };
+
+      vm.$nextTick(() => {
+        expect(vm.$el.querySelector('.ide-sidebar-link.active')).not.toBe(null);
+        expect(
+          vm.$el.querySelector('.ide-sidebar-link.active').getAttribute('data-original-title'),
+        ).toBe('Merge Request');
+
+        done();
+      });
+    });
+  });
+
+  describe('click', () => {
+    beforeEach(() => {
+      spyOn(vm, 'setRightPane');
+    });
+
+    it('sets view to merge request', done => {
+      vm.$store.state.currentMergeRequestId = '123';
+
+      vm.$nextTick(() => {
+        vm.$el.querySelector('.ide-sidebar-link').click();
+
+        expect(vm.setRightPane).toHaveBeenCalledWith(rightSidebarViews.mergeRequestInfo);
+
+        done();
+      });
+    });
+  });
+});