Add latest changes from gitlab-org/gitlab@master

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