Migrate subscription component toggle to GitLab UI component

Migrate use of the vue_shared toggle to GlToggle

app/assets/javascripts/sidebar/components/subscriptions/subscriptions.vue

 <script>
-import { GlIcon, GlTooltipDirective } from '@gitlab/ui';
+import { GlIcon, GlToggle, GlTooltipDirective } from '@gitlab/ui';
 import { __ } from '~/locale';
 import Tracking from '~/tracking';
-import toggleButton from '~/vue_shared/components/toggle_button.vue';
 import eventHub from '../../event_hub';
 
 const ICON_ON = 'notifications';
@@ -16,7 +15,7 @@ export default {
   },
   components: {
     GlIcon,
-    toggleButton,
+    GlToggle,
   },
   mixins: [Tracking.mixin({ label: 'right_sidebar' })],
   props: {
@@ -106,7 +105,7 @@ export default {
 </script>
 
 <template>
-  <div>
+  <div class="gl-display-flex gl-justify-content-space-between">
     <span
       ref="tooltip"
       v-gl-tooltip.viewport.left
@@ -116,13 +115,13 @@ export default {
     >
       <gl-icon :name="notificationIcon" :size="16" class="sidebar-item-icon is-active" />
     </span>
-    <span class="issuable-header-text hide-collapsed float-left"> {{ notificationText }} </span>
-    <toggle-button
+    <span class="hide-collapsed" data-testid="subscription-title"> {{ notificationText }} </span>
+    <gl-toggle
       v-if="!projectEmailsDisabled"
-      ref="toggleButton"
       :is-loading="showLoadingState"
       :value="subscribed"
-      class="float-right hide-collapsed js-issuable-subscribe-button"
+      class="hide-collapsed"
+      data-testid="subscription-toggle"
       @change="toggleSubscription"
     />
   </div>

changelogs/unreleased/cngo-migrate-subscription-toggle-to-gitlab-ui.yml

+---
+title: Migrate toggle button in subscription to GitLab UI component
+merge_request: 52717
+author:
+type: changed

ee/spec/frontend/epic/components/sidebar_items/sidebar_subscription_spec.js

-import Vue from 'vue';
-
+import { GlToggle } from '@gitlab/ui';
+import { mount } from '@vue/test-utils';
 import SidebarSubscription from 'ee/epic/components/sidebar_items/sidebar_subscription.vue';
 import createStore from 'ee/epic/store';
-
-import { mountComponentWithStore } from 'helpers/vue_mount_component_helper';
-import { mockEpicMeta, mockEpicData } from '../../mock_data';
+import { extendedWrapper } from 'helpers/vue_test_utils_helper';
 
 describe('SidebarSubscriptionComponent', () => {
-  let vm;
-  let store;
+  let wrapper;
 
   beforeEach(() => {
-    const Component = Vue.extend(SidebarSubscription);
-    store = createStore();
-    store.dispatch('setEpicMeta', mockEpicMeta);
-    store.dispatch('setEpicData', mockEpicData);
-
-    vm = mountComponentWithStore(Component, {
-      store,
-      props: { sidebarCollapsed: false },
-    });
+    wrapper = extendedWrapper(
+      mount(SidebarSubscription, {
+        store: createStore(),
+        propsData: { sidebarCollapsed: false },
+      }),
+    );
   });
 
   afterEach(() => {
-    vm.$destroy();
+    wrapper.destroy();
+    wrapper = null;
   });
 
   describe('template', () => {
     it('renders subscription toggle element container', () => {
-      expect(vm.$el.classList.contains('block')).toBe(true);
-      expect(vm.$el.classList.contains('subscription')).toBe(true);
+      expect(wrapper.classes('block')).toBe(true);
+      expect(wrapper.classes('subscription')).toBe(true);
     });
 
     it('renders toggle title text', () => {
-      expect(vm.$el.querySelector('.issuable-header-text').innerText.trim()).toBe('Notifications');
+      expect(wrapper.findByTestId('subscription-title').text()).toBe('Notifications');
     });
 
     it('renders toggle button element', () => {
-      expect(vm.$el.querySelector('.js-issuable-subscribe-button button')).not.toBeNull();
+      expect(wrapper.findComponent(GlToggle).exists()).toBe(true);
     });
   });
 });

spec/features/boards/sidebar_spec.rb

@@ -411,10 +411,10 @@ RSpec.describe 'Issue Boards', :js do
       wait_for_requests
 
       page.within('.subscriptions') do
-        find('.js-issuable-subscribe-button button:not(.is-checked)').click
+        find('[data-testid="subscription-toggle"] button:not(.is-checked)').click
         wait_for_requests
 
-        expect(page).to have_css('.js-issuable-subscribe-button button.is-checked')
+        expect(page).to have_css('[data-testid="subscription-toggle"] button.is-checked')
       end
     end
 
@@ -427,10 +427,10 @@ RSpec.describe 'Issue Boards', :js do
       wait_for_requests
 
       page.within('.subscriptions') do
-        find('.js-issuable-subscribe-button button.is-checked').click
+        find('[data-testid="subscription-toggle"] button.is-checked').click
         wait_for_requests
 
-        expect(page).to have_css('.js-issuable-subscribe-button button:not(.is-checked)')
+        expect(page).to have_css('[data-testid="subscription-toggle"] button:not(.is-checked)')
       end
     end
   end

spec/features/issues/user_toggles_subscription_spec.rb

@@ -15,13 +15,13 @@ RSpec.describe "User toggles subscription", :js do
   end
 
   it "unsubscribes from issue" do
-    subscription_button = find(".js-issuable-subscribe-button")
+    subscription_button = find('[data-testid="subscription-toggle"]')
 
     # Check we're subscribed.
     expect(subscription_button).to have_css("button.is-checked")
 
     # Toggle subscription.
-    find(".js-issuable-subscribe-button button").click
+    find('[data-testid="subscription-toggle"]').click
     wait_for_requests
 
     # Check we're unsubscribed.
@@ -33,7 +33,7 @@ RSpec.describe "User toggles subscription", :js do
 
     it 'is disabled' do
       expect(page).to have_content('Notifications have been disabled by the project or group owner')
-      expect(page).not_to have_selector('.js-issuable-subscribe-button')
+      expect(page).not_to have_selector('[data-testid="subscription-toggle"]')
     end
   end
 end

spec/features/merge_request/user_manages_subscription_spec.rb

@@ -15,7 +15,7 @@ RSpec.describe 'User manages subscription', :js do
   end
 
   it 'toggles subscription' do
-    page.within('.js-issuable-subscribe-button') do
+    page.within('[data-testid="subscription-toggle"]') do
       wait_for_requests
 
       expect(page).to have_css 'button:not(.is-checked)'

spec/frontend/sidebar/subscriptions_spec.js

+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);
     });
   });
 });