Commit 0b6406a0 authored by Ezekiel Kigbo's avatar Ezekiel Kigbo

Merge branch 'cngo-migrate-subscription-toggle-to-gitlab-ui' into 'master'

Migrate subscription toggle button to GlToggle

See merge request gitlab-org/gitlab!52717
parents 2a36cf45 a5b97897
<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>
......
---
title: Migrate toggle button in subscription to GitLab UI component
merge_request: 52717
author:
type: changed
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);
});
});
});
......@@ -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
......
......@@ -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
......@@ -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)'
......
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);
});
});
});
Markdown is supported
0%
or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment