diff options
Diffstat (limited to 'spec/frontend/super_sidebar/components')
3 files changed, 135 insertions, 0 deletions
diff --git a/spec/frontend/super_sidebar/components/counter_spec.js b/spec/frontend/super_sidebar/components/counter_spec.js new file mode 100644 index 00000000000..1150b0a3aa8 --- /dev/null +++ b/spec/frontend/super_sidebar/components/counter_spec.js @@ -0,0 +1,56 @@ +import { GlIcon } from '@gitlab/ui'; +import { shallowMountExtended } from 'helpers/vue_test_utils_helper'; +import { __ } from '~/locale'; +import Counter from '~/super_sidebar/components/counter.vue'; + +describe('Counter component', () => { + let wrapper; + + const defaultPropsData = { + count: 3, + href: '', + icon: 'issues', + label: __('Issues'), + }; + + afterEach(() => { + wrapper.destroy(); + }); + + const findButton = () => wrapper.find('button'); + const findIcon = () => wrapper.getComponent(GlIcon); + const findLink = () => wrapper.find('a'); + + const createWrapper = (props = {}) => { + wrapper = shallowMountExtended(Counter, { + propsData: { + ...defaultPropsData, + ...props, + }, + }); + }; + + beforeEach(() => { + createWrapper(); + }); + + describe('default', () => { + it('renders icon', () => { + expect(findIcon().props('name')).toBe('issues'); + }); + + it('renders button', () => { + expect(findButton().attributes('aria-label')).toBe('Issues 3'); + expect(findLink().exists()).toBe(false); + }); + }); + + describe('link', () => { + it('renders link', () => { + createWrapper({ href: '/dashboard/todos' }); + expect(findLink().attributes('aria-label')).toBe('Issues 3'); + expect(findLink().attributes('href')).toBe('/dashboard/todos'); + expect(findButton().exists()).toBe(false); + }); + }); +}); diff --git a/spec/frontend/super_sidebar/components/super_sidebar_spec.js b/spec/frontend/super_sidebar/components/super_sidebar_spec.js new file mode 100644 index 00000000000..d7d2f67dc8a --- /dev/null +++ b/spec/frontend/super_sidebar/components/super_sidebar_spec.js @@ -0,0 +1,33 @@ +import { shallowMountExtended } from 'helpers/vue_test_utils_helper'; +import SuperSidebar from '~/super_sidebar/components/super_sidebar.vue'; +import UserBar from '~/super_sidebar/components/user_bar.vue'; +import { sidebarData } from '../mock_data'; + +describe('SuperSidebar component', () => { + let wrapper; + + const findUserBar = () => wrapper.findComponent(UserBar); + + afterEach(() => { + wrapper.destroy(); + }); + + const createWrapper = (props = {}) => { + wrapper = shallowMountExtended(SuperSidebar, { + propsData: { + sidebarData, + ...props, + }, + }); + }; + + describe('default', () => { + beforeEach(() => { + createWrapper(); + }); + + it('renders UserBar with sidebarData', () => { + expect(findUserBar().props('sidebarData')).toBe(sidebarData); + }); + }); +}); diff --git a/spec/frontend/super_sidebar/components/user_bar_spec.js b/spec/frontend/super_sidebar/components/user_bar_spec.js new file mode 100644 index 00000000000..6d0186a2749 --- /dev/null +++ b/spec/frontend/super_sidebar/components/user_bar_spec.js @@ -0,0 +1,46 @@ +import { shallowMountExtended } from 'helpers/vue_test_utils_helper'; +import { __ } from '~/locale'; +import Counter from '~/super_sidebar/components/counter.vue'; +import UserBar from '~/super_sidebar/components/user_bar.vue'; +import { sidebarData } from '../mock_data'; + +describe('UserBar component', () => { + let wrapper; + + const findCounter = (at) => wrapper.findAllComponents(Counter).at(at); + + afterEach(() => { + wrapper.destroy(); + }); + + const createWrapper = (props = {}) => { + wrapper = shallowMountExtended(UserBar, { + propsData: { + sidebarData, + ...props, + }, + provide: { + rootPath: '/', + toggleNewNavEndpoint: '/-/profile/preferences', + }, + }); + }; + + describe('default', () => { + beforeEach(() => { + createWrapper(); + }); + + it('renders issues counter', () => { + expect(findCounter(0).props('count')).toBe(sidebarData.assigned_open_issues_count); + expect(findCounter(0).props('href')).toBe(sidebarData.issues_dashboard_path); + expect(findCounter(0).props('label')).toBe(__('Issues')); + }); + + it('renders todos counter', () => { + expect(findCounter(2).props('count')).toBe(sidebarData.todos_pending_count); + expect(findCounter(2).props('href')).toBe('/dashboard/todos'); + expect(findCounter(2).props('label')).toBe(__('To-Do list')); + }); + }); +}); |