1 files changed, 67 insertions, 37 deletions

diff --git a/spec/frontend/projects/compare/components/app_spec.js b/spec/frontend/projects/compare/components/app_spec.js
index ee96f46ea0c..6cc76d4a573 100644
--- a/spec/frontend/projects/compare/components/app_spec.js
+++ b/spec/frontend/projects/compare/components/app_spec.js
@@ -1,23 +1,37 @@
-import { GlButton } from '@gitlab/ui';
-import { shallowMount } from '@vue/test-utils';
+import { GlIcon, GlLink, GlSprintf, GlFormGroup, GlFormRadioGroup, GlFormRadio } from '@gitlab/ui';
 import { nextTick } from 'vue';
+import { shallowMountExtended } from 'helpers/vue_test_utils_helper';
 import CompareApp from '~/projects/compare/components/app.vue';
+import {
+  COMPARE_REVISIONS_DOCS_URL,
+  I18N,
+  COMPARE_OPTIONS,
+  COMPARE_OPTIONS_INPUT_NAME,
+} from '~/projects/compare/constants';
 import RevisionCard from '~/projects/compare/components/revision_card.vue';
+import { createMockDirective, getBinding } from 'helpers/vue_mock_directive';
 import { appDefaultProps as defaultProps } from './mock_data';
 
 jest.mock('~/lib/utils/csrf', () => ({ token: 'mock-csrf-token' }));
 
 describe('CompareApp component', () => {
   let wrapper;
-  const findSourceRevisionCard = () => wrapper.find('[data-testid="sourceRevisionCard"]');
-  const findTargetRevisionCard = () => wrapper.find('[data-testid="targetRevisionCard"]');
+  const findSourceRevisionCard = () => wrapper.findByTestId('sourceRevisionCard');
+  const findTargetRevisionCard = () => wrapper.findByTestId('targetRevisionCard');
 
   const createComponent = (props = {}) => {
-    wrapper = shallowMount(CompareApp, {
+    wrapper = shallowMountExtended(CompareApp, {
       propsData: {
         ...defaultProps,
         ...props,
       },
+      directives: {
+        GlTooltip: createMockDirective('gl-tooltip'),
+      },
+      stubs: {
+        GlSprintf,
+        GlFormRadioGroup,
+      },
     });
   };
 
@@ -37,6 +51,21 @@ describe('CompareApp component', () => {
     );
   });
 
+  it('renders title', () => {
+    const title = wrapper.find('h1');
+    expect(title.text()).toBe(I18N.title);
+  });
+
+  it('renders subtitle', () => {
+    const subtitle = wrapper.find('p');
+    expect(subtitle.text()).toMatchInterpolatedText(I18N.subtitle);
+  });
+
+  it('renders link to docs', () => {
+    const docsLink = wrapper.findComponent(GlLink);
+    expect(docsLink.attributes('href')).toBe(COMPARE_REVISIONS_DOCS_URL);
+  });
+
   it('contains the correct form attributes', () => {
     expect(wrapper.attributes('action')).toBe(defaultProps.projectCompareIndexPath);
     expect(wrapper.attributes('method')).toBe('POST');
@@ -48,20 +77,16 @@ describe('CompareApp component', () => {
     );
   });
 
-  it('has ellipsis', () => {
-    expect(wrapper.find('[data-testid="ellipsis"]').exists()).toBe(true);
-  });
-
   it('render Source and Target BranchDropdown components', () => {
     const revisionCards = wrapper.findAllComponents(RevisionCard);
 
     expect(revisionCards.length).toBe(2);
-    expect(revisionCards.at(0).props('revisionText')).toBe('Source');
-    expect(revisionCards.at(1).props('revisionText')).toBe('Target');
+    expect(revisionCards.at(0).props('revisionText')).toBe(I18N.source);
+    expect(revisionCards.at(1).props('revisionText')).toBe(I18N.target);
   });
 
   describe('compare button', () => {
-    const findCompareButton = () => wrapper.findComponent(GlButton);
+    const findCompareButton = () => wrapper.findByTestId('compare-button');
 
     it('renders button', () => {
       expect(findCompareButton().exists()).toBe(true);
@@ -109,14 +134,19 @@ describe('CompareApp component', () => {
   });
 
   describe('swap revisions button', () => {
-    const findSwapRevisionsButton = () => wrapper.find('[data-testid="swapRevisionsButton"]');
+    const findSwapRevisionsButton = () => wrapper.findByTestId('swapRevisionsButton');
 
     it('renders the swap revisions button', () => {
       expect(findSwapRevisionsButton().exists()).toBe(true);
     });
 
-    it('has the correct text', () => {
-      expect(findSwapRevisionsButton().text()).toBe('Swap revisions');
+    it('renders icon', () => {
+      expect(findSwapRevisionsButton().findComponent(GlIcon).props('name')).toBe('substitute');
+    });
+
+    it('has tooltip', () => {
+      const tooltip = getBinding(findSwapRevisionsButton().element, 'gl-tooltip');
+      expect(tooltip.value).toBe(I18N.swapRevisions);
     });
 
     it('swaps revisions when clicked', async () => {
@@ -129,43 +159,43 @@ describe('CompareApp component', () => {
     });
   });
 
-  describe('mode dropdown', () => {
-    const findModeDropdownButton = () => wrapper.find('[data-testid="modeDropdown"]');
-    const findEnableStraightModeButton = () =>
-      wrapper.find('[data-testid="enableStraightModeButton"]');
-    const findDisableStraightModeButton = () =>
-      wrapper.find('[data-testid="disableStraightModeButton"]');
+  describe('compare options', () => {
+    const findGroup = () => wrapper.findComponent(GlFormGroup);
+    const findOptionsGroup = () => wrapper.findComponent(GlFormRadioGroup);
 
-    it('renders the mode dropdown button', () => {
-      expect(findModeDropdownButton().exists()).toBe(true);
-    });
+    const findOptions = () => wrapper.findAllComponents(GlFormRadio);
 
-    it('has the correct text', () => {
-      expect(findEnableStraightModeButton().text()).toBe('...');
-      expect(findDisableStraightModeButton().text()).toBe('..');
+    it('renders label for the compare options', () => {
+      expect(findGroup().attributes('label')).toBe(I18N.optionsLabel);
     });
 
-    it('straight mode button when clicked', async () => {
-      expect(wrapper.props('straight')).toBe(false);
-      expect(wrapper.find('input[name="straight"]').attributes('value')).toBe('false');
+    it('correct input name', () => {
+      expect(findOptionsGroup().attributes('name')).toBe(COMPARE_OPTIONS_INPUT_NAME);
+    });
 
-      findEnableStraightModeButton().vm.$emit('click');
+    it('renders "only incoming changes" option', () => {
+      expect(findOptions().at(0).text()).toBe(COMPARE_OPTIONS[0].text);
+    });
 
-      await nextTick();
+    it('renders "since source was created" option', () => {
+      expect(findOptions().at(1).text()).toBe(COMPARE_OPTIONS[1].text);
+    });
 
-      expect(wrapper.find('input[name="straight"]').attributes('value')).toBe('true');
+    it('straight mode button when clicked', async () => {
+      expect(wrapper.props('straight')).toBe(false);
+      expect(wrapper.vm.isStraight).toBe(false);
 
-      findDisableStraightModeButton().vm.$emit('click');
+      findOptionsGroup().vm.$emit('input', COMPARE_OPTIONS[1].value);
 
       await nextTick();
 
-      expect(wrapper.find('input[name="straight"]').attributes('value')).toBe('false');
+      expect(wrapper.vm.isStraight).toBe(true);
     });
   });
 
   describe('merge request buttons', () => {
-    const findProjectMrButton = () => wrapper.find('[data-testid="projectMrButton"]');
-    const findCreateMrButton = () => wrapper.find('[data-testid="createMrButton"]');
+    const findProjectMrButton = () => wrapper.findByTestId('projectMrButton');
+    const findCreateMrButton = () => wrapper.findByTestId('createMrButton');
 
     it('does not have merge request buttons', () => {
       createComponent();