Merge branch '16988-use-toggle-for-subscribed-unsubscribed-to-notifications' into 'master'

Resolve "Use toggle for subscribed/unsubscribed to notifications"

Closes #16988

See merge request gitlab-org/gitlab-ce!16408

3 files changed, 20 insertions, 22 deletions

diff --git a/spec/features/boards/sidebar_spec.rb b/spec/features/boards/sidebar_spec.rb
index 205900615c4..b2dbfcd0031 100644
--- a/spec/features/boards/sidebar_spec.rb
+++ b/spec/features/boards/sidebar_spec.rb
@@ -334,14 +334,14 @@ describe 'Issue Boards', :js do
       wait_for_requests
 
       page.within('.subscriptions') do
-        click_button 'Subscribe'
+        find('.js-issuable-subscribe-button button:not(.is-checked)').click
         wait_for_requests
 
-        expect(page).to have_content('Unsubscribe')
+        expect(page).to have_css('.js-issuable-subscribe-button button.is-checked')
       end
     end
 
-    it 'has "Unsubscribe" button when already subscribed' do
+    it 'has checked subscription toggle when already subscribed' do
       create(:subscription, user: user, project: project, subscribable: issue2, subscribed: true)
       visit project_board_path(project, board)
       wait_for_requests
@@ -350,10 +350,10 @@ describe 'Issue Boards', :js do
       wait_for_requests
 
       page.within('.subscriptions') do
-        click_button 'Unsubscribe'
+        find('.js-issuable-subscribe-button button.is-checked').click
         wait_for_requests
 
-        expect(page).to have_content('Subscribe')
+        expect(page).to have_css('.js-issuable-subscribe-button button:not(.is-checked)')
       end
     end
   end
diff --git a/spec/features/projects/merge_requests/user_manages_subscription_spec.rb b/spec/features/projects/merge_requests/user_manages_subscription_spec.rb
index 4ca435491cb..f55eb5c6664 100644
--- a/spec/features/projects/merge_requests/user_manages_subscription_spec.rb
+++ b/spec/features/projects/merge_requests/user_manages_subscription_spec.rb
@@ -13,20 +13,18 @@ describe 'User manages subscription', :js do
   end
 
   it 'toggles subscription' do
-    subscribe_button = find('.js-issuable-subscribe-button')
+    page.within('.js-issuable-subscribe-button') do
+      expect(page).to have_css 'button:not(.is-checked)'
+      find('button:not(.is-checked)').click
 
-    expect(subscribe_button).to have_content('Subscribe')
+      wait_for_requests
 
-    click_on('Subscribe')
+      expect(page).to have_css 'button.is-checked'
+      find('button.is-checked').click
 
-    wait_for_requests
+      wait_for_requests
 
-    expect(subscribe_button).to have_content('Unsubscribe')
-
-    click_on('Unsubscribe')
-
-    wait_for_requests
-
-    expect(subscribe_button).to have_content('Subscribe')
+      expect(page).to have_css 'button:not(.is-checked)'
+    end
   end
 end
diff --git a/spec/javascripts/sidebar/subscriptions_spec.js b/spec/javascripts/sidebar/subscriptions_spec.js
index 9b33dd02fb9..79db05f04ed 100644
--- a/spec/javascripts/sidebar/subscriptions_spec.js
+++ b/spec/javascripts/sidebar/subscriptions_spec.js
@@ -20,23 +20,23 @@ describe('Subscriptions', function () {
       subscribed: undefined,
     });
 
-    expect(vm.$refs.loadingButton.loading).toBe(true);
-    expect(vm.$refs.loadingButton.label).toBeUndefined();
+    expect(vm.$refs.toggleButton.isLoading).toBe(true);
+    expect(vm.$refs.toggleButton.$el.querySelector('.project-feature-toggle')).toHaveClass('is-loading');
   });
 
-  it('has "Subscribe" text when currently not subscribed', () => {
+  it('is toggled "off" when currently not subscribed', () => {
     vm = mountComponent(Subscriptions, {
       subscribed: false,
     });
 
-    expect(vm.$refs.loadingButton.label).toBe('Subscribe');
+    expect(vm.$refs.toggleButton.$el.querySelector('.project-feature-toggle')).not.toHaveClass('is-checked');
   });
 
-  it('has "Unsubscribe" text when currently not subscribed', () => {
+  it('is toggled "on" when currently subscribed', () => {
     vm = mountComponent(Subscriptions, {
       subscribed: true,
     });
 
-    expect(vm.$refs.loadingButton.label).toBe('Unsubscribe');
+    expect(vm.$refs.toggleButton.$el.querySelector('.project-feature-toggle')).toHaveClass('is-checked');
   });
 });