GitLab UI integration branch for 344423-give-toggle-labels-unique-id

app/assets/javascripts/packages_and_registries/settings/group/components/dependency_proxy_settings.vue

@@ -103,6 +103,7 @@ export default {
           :disabled="isLoading"
           :label="$options.i18n.label"
           data-qa-selector="dependency_proxy_setting_toggle"
+          data-testid="dependency-proxy-setting-toggle"
         />
       </div>
     </template>

ee/spec/features/epic_boards/epic_boards_sidebar_spec.rb

@@ -204,7 +204,7 @@ RSpec.describe 'Epic boards sidebar', :js do
       click_card(card)
 
       page.within('.subscriptions') do
-        expect(page).to have_button('Notifications')
+        expect(page).to have_selector('[data-testid="subscription-toggle"]')
         expect(page).not_to have_content('Disabled by group owner')
       end
     end
@@ -214,17 +214,19 @@ RSpec.describe 'Epic boards sidebar', :js do
 
       wait_for_requests
 
-      click_button 'Notifications'
+      subscription_button = find('[data-testid="subscription-toggle"]')
+
+      subscription_button.click
 
       wait_for_requests
 
-      expect(page).to have_button('Notifications', class: 'is-checked')
+      expect(subscription_button).to have_css("button.is-checked")
 
-      click_button 'Notifications'
+      subscription_button.click
 
       wait_for_requests
 
-      expect(page).not_to have_button('Notifications', class: 'is-checked')
+      expect(subscription_button).to have_css("button:not(.is-checked)")
     end
 
     context 'when notifications have been disabled' do
@@ -236,7 +238,7 @@ RSpec.describe 'Epic boards sidebar', :js do
 
       it 'displays a message that notifications have been disabled' do
         page.within('.subscriptions') do
-          expect(page).to have_button('Notifications', class: 'is-disabled')
+          expect(page).to have_selector('[data-testid="subscription-toggle"]', class: 'is-disabled')
           expect(page).to have_content('Disabled by group owner')
         end
       end

package.json

@@ -57,7 +57,7 @@
     "@gitlab/favicon-overlay": "2.0.0",
     "@gitlab/svgs": "1.219.0",
     "@gitlab/tributejs": "1.0.0",
-    "@gitlab/ui": "32.28.0",
+    "@gitlab/ui": "32.31.0",
     "@gitlab/visual-review-tools": "1.6.1",
     "@rails/actioncable": "6.1.4-1",
     "@rails/ujs": "6.1.4-1",

spec/features/groups/dependency_proxy_spec.rb

@@ -56,9 +56,14 @@ RSpec.describe 'Group Dependency Proxy' do
           visit settings_path
           wait_for_requests
 
-          click_button 'Enable Proxy'
+          proxy_toggle = find('[data-testid="dependency-proxy-setting-toggle"]')
+          proxy_toggle_button = proxy_toggle.find('button')
 
-          expect(page).to have_button 'Enable Proxy', class: '!is-checked'
+          expect(proxy_toggle).to have_css("button.is-checked")
+
+          proxy_toggle_button.click
+
+          expect(proxy_toggle).not_to have_css("button.is-checked")
 
           visit path
 

spec/features/issues/user_toggles_subscription_spec.rb

@@ -45,7 +45,7 @@ RSpec.describe "User toggles subscription", :js do
 
       it 'is disabled' do
         expect(page).to have_content('Disabled by project owner')
-        expect(page).to have_button('Notifications', class: 'is-disabled')
+        expect(page).to have_selector('[data-testid="subscription-toggle"]', class: 'is-disabled')
       end
     end
   end

spec/features/projects/settings/packages_settings_spec.rb

@@ -19,7 +19,7 @@ RSpec.describe 'Projects > Settings > Packages', :js do
     let(:packages_enabled) { true }
 
     it 'displays the packages toggle button' do
-      expect(page).to have_button('Packages', class: 'gl-toggle')
+      expect(page).to have_selector('[data-testid="toggle-label"]', text: 'Packages')
       expect(page).to have_selector('input[name="project[packages_enabled]"] + button', visible: true)
     end
   end
@@ -28,7 +28,7 @@ RSpec.describe 'Projects > Settings > Packages', :js do
     let(:packages_enabled) { false }
 
     it 'does not show up in UI' do
-      expect(page).not_to have_button('Packages', class: 'gl-toggle')
+      expect(page).not_to have_selector('[data-testid="toggle-label"]', text: 'Packages')
     end
   end
 end

spec/frontend/alerts_settings/components/alerts_settings_form_spec.js

@@ -58,7 +58,6 @@ describe('AlertsSettingsForm', () => {
   afterEach(() => {
     if (wrapper) {
       wrapper.destroy();
-      wrapper = null;
     }
   });
 
@@ -69,7 +68,7 @@ describe('AlertsSettingsForm', () => {
 
   const enableIntegration = (index, value) => {
     findFormFields().at(index).setValue(value);
-    findFormToggle().trigger('click');
+    findFormToggle().vm.$emit('change', true);
   };
 
   describe('with default values', () => {

spec/frontend/boards/components/sidebar/board_sidebar_subscription_spec.js

@@ -14,8 +14,8 @@ describe('~/boards/components/sidebar/board_sidebar_subscription_spec.vue', () =
   let store;
 
   const findNotificationHeader = () => wrapper.find("[data-testid='notification-header-text']");
-  const findToggle = () => wrapper.find(GlToggle);
-  const findGlLoadingIcon = () => wrapper.find(GlLoadingIcon);
+  const findToggle = () => wrapper.findComponent(GlToggle);
+  const findGlLoadingIcon = () => wrapper.findComponent(GlLoadingIcon);
 
   const createComponent = (activeBoardItem = { ...mockActiveIssue }) => {
     store = createStore();
@@ -32,7 +32,6 @@ describe('~/boards/components/sidebar/board_sidebar_subscription_spec.vue', () =
 
   afterEach(() => {
     wrapper.destroy();
-    wrapper = null;
     store = null;
     jest.clearAllMocks();
   });
@@ -104,7 +103,7 @@ describe('~/boards/components/sidebar/board_sidebar_subscription_spec.vue', () =
 
       expect(findGlLoadingIcon().exists()).toBe(false);
 
-      findToggle().trigger('click');
+      findToggle().vm.$emit('change');
 
       await wrapper.vm.$nextTick();
 
@@ -129,7 +128,7 @@ describe('~/boards/components/sidebar/board_sidebar_subscription_spec.vue', () =
 
       expect(findGlLoadingIcon().exists()).toBe(false);
 
-      findToggle().trigger('click');
+      findToggle().vm.$emit('change');
 
       await wrapper.vm.$nextTick();
 
@@ -152,7 +151,7 @@ describe('~/boards/components/sidebar/board_sidebar_subscription_spec.vue', () =
       });
       jest.spyOn(wrapper.vm, 'setError').mockImplementation(() => {});
 
-      findToggle().trigger('click');
+      findToggle().vm.$emit('change');
 
       await wrapper.vm.$nextTick();
       expect(wrapper.vm.setError).toHaveBeenCalled();

spec/frontend/pipelines/graph/graph_component_wrapper_spec.js

@@ -327,7 +327,7 @@ describe('Pipeline graph wrapper', () => {
         expect(getLinksLayer().exists()).toBe(true);
         expect(getLinksLayer().props('showLinks')).toBe(false);
         expect(getViewSelector().props('type')).toBe(LAYER_VIEW);
-        await getDependenciesToggle().trigger('click');
+        await getDependenciesToggle().vm.$emit('change', true);
         jest.runOnlyPendingTimers();
         await wrapper.vm.$nextTick();
         expect(wrapper.findComponent(LinksLayer).props('showLinks')).toBe(true);

spec/frontend/pipelines/graph/graph_view_selector_spec.js

@@ -111,7 +111,7 @@ describe('the graph view selector component', () => {
       expect(wrapper.emitted().updateShowLinksState).toBeUndefined();
       expect(findToggleLoader().exists()).toBe(false);
 
-      await findDependenciesToggle().trigger('click');
+      await findDependenciesToggle().vm.$emit('change', true);
       /*
         Loading happens before the event is emitted or timers are run.
         Then we run the timer because the event is emitted in setInterval

spec/support/shared_examples/features/sidebar_shared_examples.rb

@@ -52,16 +52,17 @@ RSpec.shared_examples 'issue boards sidebar' do
 
     it 'shows toggle as on then as off as user toggles to subscribe and unsubscribe', :aggregate_failures do
       wait_for_requests
+      subscription_button = find('[data-testid="subscription-toggle"]')
 
-      click_button 'Notifications'
+      subscription_button.click
 
-      expect(page).to have_button('Notifications', class: 'is-checked')
+      expect(subscription_button).to have_css("button.is-checked")
 
-      click_button 'Notifications'
+      subscription_button.click
 
       wait_for_requests
 
-      expect(page).not_to have_button('Notifications', class: 'is-checked')
+      expect(subscription_button).to have_css("button:not(.is-checked)")
     end
 
     context 'when notifications have been disabled' do
@@ -73,7 +74,7 @@ RSpec.shared_examples 'issue boards sidebar' do
 
       it 'displays a message that notifications have been disabled' do
         page.within('[data-testid="sidebar-notifications"]') do
-          expect(page).to have_button('Notifications', class: 'is-disabled')
+          expect(page).to have_selector('[data-testid="subscription-toggle"]', class: 'is-disabled')
           expect(page).to have_content('Disabled by project owner')
         end
       end

yarn.lock

@@ -914,10 +914,10 @@
   resolved "https://registry.yarnpkg.com/@gitlab/tributejs/-/tributejs-1.0.0.tgz#672befa222aeffc83e7d799b0500a7a4418e59b8"
   integrity sha512-nmKw1+hB6MHvlmPz63yPwVs1qQkycHwsKgxpEbzmky16Y6mL4EJMk3w1b8QlOAF/AIAzjCERPhe/R4MJiohbZw==
 
-"@gitlab/ui@32.28.0":
-  version "32.28.0"
-  resolved "https://registry.yarnpkg.com/@gitlab/ui/-/ui-32.28.0.tgz#afa0e1dee66ec438126b2706e0860e2c622fc867"
-  integrity sha512-DudY+jPIxjGymyB2KgdexmxV+sbjCy3or7LzviiI0jb5jCIiqNoZ4F4G+P0T+Z1FbLBgEXjgUaEZw09edka/lg==
+"@gitlab/ui@32.31.0":
+  version "32.31.0"
+  resolved "https://registry.yarnpkg.com/@gitlab/ui/-/ui-32.31.0.tgz#e379f79f0797c98d67e121739add8dec8281a5d4"
+  integrity sha512-a/03Jgh3TJx0W1lJjsYZiAKbRQHGvomrGhzDvBpxKve2FXrYdo4G6gbwlIKJGiooB5YmZ5OIWhgnhQ8FSy15Aw==
   dependencies:
     "@babel/standalone" "^7.0.0"
     bootstrap-vue "2.20.1"