diff options
author | GitLab Bot <gitlab-bot@gitlab.com> | 2022-07-08 12:09:44 +0300 |
---|---|---|
committer | GitLab Bot <gitlab-bot@gitlab.com> | 2022-07-08 12:09:44 +0300 |
commit | 058e1a233fc1d96917c72cfab552c72db93f4f8b (patch) | |
tree | f96445a056696c79e520e67ae01d7e055485d137 /spec/frontend | |
parent | 24fa0480c03a086451f592ddcacc644e560972cc (diff) |
Add latest changes from gitlab-org/gitlab@master
Diffstat (limited to 'spec/frontend')
-rw-r--r-- | spec/frontend/boards/components/config_toggle_spec.js | 59 | ||||
-rw-r--r-- | spec/frontend/boards/components/toggle_focus_spec.js | 47 |
2 files changed, 106 insertions, 0 deletions
diff --git a/spec/frontend/boards/components/config_toggle_spec.js b/spec/frontend/boards/components/config_toggle_spec.js new file mode 100644 index 00000000000..47d4692453d --- /dev/null +++ b/spec/frontend/boards/components/config_toggle_spec.js @@ -0,0 +1,59 @@ +import Vuex from 'vuex'; +import Vue from 'vue'; +import { shallowMount } from '@vue/test-utils'; +import { GlButton } from '@gitlab/ui'; +import ConfigToggle from '~/boards/components/config_toggle.vue'; +import eventHub from '~/boards/eventhub'; +import store from '~/boards/stores'; +import { mockTracking } from 'helpers/tracking_helper'; + +describe('ConfigToggle', () => { + let wrapper; + + Vue.use(Vuex); + + const createComponent = (provide = {}) => + shallowMount(ConfigToggle, { + store, + provide: { + canAdminList: true, + ...provide, + }, + }); + + const findButton = () => wrapper.findComponent(GlButton); + + afterEach(() => { + wrapper.destroy(); + }); + + it('renders a button with label `View scope` when `canAdminList` is `false`', () => { + wrapper = createComponent({ canAdminList: false }); + expect(findButton().text()).toBe('View scope'); + }); + + it('renders a button with label `Edit board` when `canAdminList` is `true`', () => { + wrapper = createComponent(); + expect(findButton().text()).toBe('Edit board'); + }); + + it('emits `showBoardModal` when button is clicked', () => { + const eventHubSpy = jest.spyOn(eventHub, '$emit'); + wrapper = createComponent(); + + findButton().vm.$emit('click', { preventDefault: () => {} }); + + expect(eventHubSpy).toHaveBeenCalledWith('showBoardModal', 'edit'); + }); + + it('tracks clicking the button', () => { + const trackingSpy = mockTracking(undefined, wrapper.element, jest.spyOn); + wrapper = createComponent(); + + findButton().vm.$emit('click', { preventDefault: () => {} }); + + expect(trackingSpy).toHaveBeenCalledWith(undefined, 'click_button', { + label: 'edit_board', + }); + }); +}); diff --git a/spec/frontend/boards/components/toggle_focus_spec.js b/spec/frontend/boards/components/toggle_focus_spec.js new file mode 100644 index 00000000000..3cbaac91f8d --- /dev/null +++ b/spec/frontend/boards/components/toggle_focus_spec.js @@ -0,0 +1,47 @@ +import { GlButton } from '@gitlab/ui'; +import { nextTick } from 'vue'; +import ToggleFocus from '~/boards/components/toggle_focus.vue'; +import { createMockDirective, getBinding } from 'helpers/vue_mock_directive'; +import { shallowMountExtended } from 'helpers/vue_test_utils_helper'; + +describe('ToggleFocus', () => { + let wrapper; + + const createComponent = () => { + wrapper = shallowMountExtended(ToggleFocus, { + directives: { + GlTooltip: createMockDirective(), + }, + attachTo: document.body, + }); + }; + + const findButton = () => wrapper.findComponent(GlButton); + + afterEach(() => { + wrapper.destroy(); + }); + + it('renders a button with `maximize` icon', () => { + createComponent(); + + expect(findButton().props('icon')).toBe('maximize'); + expect(findButton().attributes('aria-label')).toBe(ToggleFocus.i18n.toggleFocusMode); + }); + + it('contains a tooltip with title', () => { + createComponent(); + const tooltip = getBinding(findButton().element, 'gl-tooltip'); + + expect(tooltip).toBeDefined(); + expect(findButton().attributes('title')).toBe(ToggleFocus.i18n.toggleFocusMode); + }); + + it('toggles the icon when the button is clicked', async () => { + createComponent(); + findButton().vm.$emit('click'); + await nextTick(); + + expect(findButton().props('icon')).toBe('minimize'); + }); +}); |