Add latest changes from gitlab-org/gitlab@13-9-stable-eev13.9.0-rc41

7 files changed, 25 insertions, 21 deletions

diff --git a/spec/frontend/sidebar/__snapshots__/todo_spec.js.snap b/spec/frontend/sidebar/__snapshots__/todo_spec.js.snap
index e295c587d70..846f45345e7 100644
--- a/spec/frontend/sidebar/__snapshots__/todo_spec.js.snap
+++ b/spec/frontend/sidebar/__snapshots__/todo_spec.js.snap
@@ -3,7 +3,7 @@
 exports[`SidebarTodo template renders component container element with proper data attributes 1`] = `
 <button
   aria-label="Mark as done"
-  class="btn btn-default btn-todo issuable-header-btn float-right"
+  class="gl-button btn btn-default btn-todo issuable-header-btn float-right"
   data-issuable-id="1"
   data-issuable-type="epic"
   type="button"
diff --git a/spec/frontend/sidebar/assignees_realtime_spec.js b/spec/frontend/sidebar/assignees_realtime_spec.js
index 1c62c52dc67..a7e280b5ae1 100644
--- a/spec/frontend/sidebar/assignees_realtime_spec.js
+++ b/spec/frontend/sidebar/assignees_realtime_spec.js
@@ -2,8 +2,8 @@ import { shallowMount } from '@vue/test-utils';
 import ActionCable from '@rails/actioncable';
 import AssigneesRealtime from '~/sidebar/components/assignees/assignees_realtime.vue';
 import SidebarMediator from '~/sidebar/sidebar_mediator';
-import Mock from './mock_data';
 import query from '~/issuable_sidebar/queries/issue_sidebar.query.graphql';
+import Mock from './mock_data';
 
 jest.mock('@rails/actioncable', () => {
   const mockConsumer = {
diff --git a/spec/frontend/sidebar/assignees_spec.js b/spec/frontend/sidebar/assignees_spec.js
index 23e82171fe9..fbf5fca2234 100644
--- a/spec/frontend/sidebar/assignees_spec.js
+++ b/spec/frontend/sidebar/assignees_spec.js
@@ -1,6 +1,6 @@
 import { mount } from '@vue/test-utils';
-import { trimText } from 'helpers/text_helper';
 import { GlIcon } from '@gitlab/ui';
+import { trimText } from 'helpers/text_helper';
 import UsersMockHelper from 'helpers/user_mock_data_helper';
 import Assignee from '~/sidebar/components/assignees/assignees.vue';
 import UsersMock from './mock_data';
diff --git a/spec/frontend/sidebar/components/time_tracking/time_tracker_spec.js b/spec/frontend/sidebar/components/time_tracking/time_tracker_spec.js
index 0b6a2e6ceb9..d52a59bb67b 100644
--- a/spec/frontend/sidebar/components/time_tracking/time_tracker_spec.js
+++ b/spec/frontend/sidebar/components/time_tracking/time_tracker_spec.js
@@ -1,5 +1,5 @@
-import { createMockDirective } from 'helpers/vue_mock_directive';
 import { mount } from '@vue/test-utils';
+import { createMockDirective } from 'helpers/vue_mock_directive';
 import { stubTransition } from 'helpers/stub_transition';
 import TimeTracker from '~/sidebar/components/time_tracking/time_tracker.vue';
 
diff --git a/spec/frontend/sidebar/reviewers_spec.js b/spec/frontend/sidebar/reviewers_spec.js
index 91f28e85f3b..9208fb7288b 100644
--- a/spec/frontend/sidebar/reviewers_spec.js
+++ b/spec/frontend/sidebar/reviewers_spec.js
@@ -1,6 +1,6 @@
 import { mount } from '@vue/test-utils';
-import { trimText } from 'helpers/text_helper';
 import { GlIcon } from '@gitlab/ui';
+import { trimText } from 'helpers/text_helper';
 import UsersMockHelper from 'helpers/user_mock_data_helper';
 import Reviewer from '~/sidebar/components/reviewers/reviewers.vue';
 import UsersMock from './mock_data';
@@ -114,8 +114,7 @@ describe('Reviewer component', () => {
         editable: true,
       });
 
-      expect(wrapper.findAll('.user-item').length).toBe(users.length);
-      expect(wrapper.find('.user-list-more').exists()).toBe(false);
+      expect(wrapper.findAll('[data-testid="reviewer"]').length).toBe(users.length);
     });
 
     it('shows sorted reviewer where "can merge" users are sorted first', () => {
@@ -144,10 +143,10 @@ describe('Reviewer component', () => {
         users,
       });
 
-      const userItems = wrapper.findAll('.user-list .user-item a');
+      const userItems = wrapper.findAll('[data-testid="reviewer"]');
 
       expect(userItems.length).toBe(3);
-      expect(userItems.at(0).attributes('title')).toBe(users[2].name);
+      expect(userItems.at(0).find('a').attributes('title')).toBe(users[2].name);
     });
 
     it('passes the sorted reviewers to the collapsed-reviewer-list', () => {
diff --git a/spec/frontend/sidebar/subscriptions_spec.js b/spec/frontend/sidebar/subscriptions_spec.js
index 043ffd972da..e7ae59e26cf 100644
--- a/spec/frontend/sidebar/subscriptions_spec.js
+++ b/spec/frontend/sidebar/subscriptions_spec.js
@@ -1,17 +1,20 @@
+import { GlToggle } from '@gitlab/ui';
 import { shallowMount } from '@vue/test-utils';
+import { extendedWrapper } from 'helpers/vue_test_utils_helper';
 import Subscriptions from '~/sidebar/components/subscriptions/subscriptions.vue';
 import eventHub from '~/sidebar/event_hub';
-import ToggleButton from '~/vue_shared/components/toggle_button.vue';
 
 describe('Subscriptions', () => {
   let wrapper;
 
-  const findToggleButton = () => wrapper.find(ToggleButton);
+  const findToggleButton = () => wrapper.findComponent(GlToggle);
 
   const mountComponent = (propsData) =>
-    shallowMount(Subscriptions, {
-      propsData,
-    });
+    extendedWrapper(
+      shallowMount(Subscriptions, {
+        propsData,
+      }),
+    );
 
   afterEach(() => {
     wrapper.destroy();
@@ -24,7 +27,7 @@ describe('Subscriptions', () => {
       subscribed: undefined,
     });
 
-    expect(findToggleButton().attributes('isloading')).toBe('true');
+    expect(findToggleButton().props('isLoading')).toBe(true);
   });
 
   it('is toggled "off" when currently not subscribed', () => {
@@ -32,7 +35,7 @@ describe('Subscriptions', () => {
       subscribed: false,
     });
 
-    expect(findToggleButton().attributes('value')).toBeFalsy();
+    expect(findToggleButton().props('value')).toBe(false);
   });
 
   it('is toggled "on" when currently subscribed', () => {
@@ -40,7 +43,7 @@ describe('Subscriptions', () => {
       subscribed: true,
     });
 
-    expect(findToggleButton().attributes('value')).toBe('true');
+    expect(findToggleButton().props('value')).toBe(true);
   });
 
   it('toggleSubscription method emits `toggleSubscription` event on eventHub and Component', () => {
@@ -93,14 +96,16 @@ describe('Subscriptions', () => {
     });
 
     it('sets the correct display text', () => {
-      expect(wrapper.find('.issuable-header-text').text()).toContain(subscribeDisabledDescription);
+      expect(wrapper.findByTestId('subscription-title').text()).toContain(
+        subscribeDisabledDescription,
+      );
       expect(wrapper.find({ ref: 'tooltip' }).attributes('title')).toBe(
         subscribeDisabledDescription,
       );
     });
 
     it('does not render the toggle button', () => {
-      expect(wrapper.find('.js-issuable-subscribe-button').exists()).toBe(false);
+      expect(findToggleButton().exists()).toBe(false);
     });
   });
 });
diff --git a/spec/frontend/sidebar/todo_spec.js b/spec/frontend/sidebar/todo_spec.js
index 4adfaf7ad7b..7b7e24f2a8f 100644
--- a/spec/frontend/sidebar/todo_spec.js
+++ b/spec/frontend/sidebar/todo_spec.js
@@ -26,7 +26,7 @@ describe('SidebarTodo', () => {
 
   it.each`
     state    | classes
-    ${false} | ${['btn', 'btn-default', 'btn-todo', 'issuable-header-btn', 'float-right']}
+    ${false} | ${['gl-button', 'btn', 'btn-default', 'btn-todo', 'issuable-header-btn', 'float-right']}
     ${true}  | ${['btn-blank', 'btn-todo', 'sidebar-collapsed-icon', 'dont-change-state']}
   `('returns todo button classes for when `collapsed` prop is `$state`', ({ state, classes }) => {
     createComponent({ collapsed: state });
@@ -35,7 +35,7 @@ describe('SidebarTodo', () => {
 
   it.each`
     isTodo   | iconClass        | label             | icon
-    ${false} | ${''}            | ${'Add a To-Do'}  | ${'todo-add'}
+    ${false} | ${''}            | ${'Add a to do'}  | ${'todo-add'}
     ${true}  | ${'todo-undone'} | ${'Mark as done'} | ${'todo-done'}
   `(
     'renders proper button when `isTodo` prop is `$isTodo`',