diff options
Diffstat (limited to 'spec/javascripts/vue_shared')
-rw-r--r-- | spec/javascripts/vue_shared/components/projects_list/project_visibility_level_spec.js | 134 |
1 files changed, 134 insertions, 0 deletions
diff --git a/spec/javascripts/vue_shared/components/projects_list/project_visibility_level_spec.js b/spec/javascripts/vue_shared/components/projects_list/project_visibility_level_spec.js new file mode 100644 index 00000000000..b05197eb9b7 --- /dev/null +++ b/spec/javascripts/vue_shared/components/projects_list/project_visibility_level_spec.js @@ -0,0 +1,134 @@ +import Vue from 'vue'; +import mountComponent from 'spec/helpers/vue_mount_component_helper'; +import { visibilityOptions } from '~/pages/projects/shared/permissions/constants'; +import ProjectVisibilityLevel, { + visibilityIconClass, +} from '~/vue_shared/components/projects_list/project_visibility_level.vue'; + +const createComponent = (props, defaultComponent = ProjectVisibilityLevel) => { + const Component = Vue.extend(defaultComponent); + + return mountComponent(Component, props); +}; + +function expectIconAndDescription(dom, { icon, description }) { + expect(dom.$el.querySelector('i').getAttribute('class')).toContain(icon); + expect(dom.$el.getAttribute('title')).toBe(description); +} + +let vm = ''; + +describe('ProjectVisibilityLevel', () => { + describe('visibilityIconClass', () => { + it(`returns 'fa-lock' for level '${visibilityOptions.PRIVATE}'`, () => { + expect(visibilityIconClass(visibilityOptions.PRIVATE)).toBe('fa-lock'); + }); + + it(`returns 'fa-shield' for level '${visibilityOptions.INTERNAL}'`, () => { + expect(visibilityIconClass(visibilityOptions.INTERNAL)).toBe('fa-shield'); + }); + + it(`returns 'fa-globe' for level '${visibilityOptions.PUBLIC}'`, () => { + expect(visibilityIconClass(visibilityOptions.PUBLIC)).toBe('fa-globe'); + }); + }); + + describe('computed', () => {}); + + describe('template', () => { + describe('renders a lock', () => { + const privateIcon = 'fa-lock'; + const privateDescription = 'This is private'; + + beforeEach(() => { + vm = null; + }); + + afterEach(() => { + vm.$destroy(); + }); + + it(`with level -1`, () => { + vm = createComponent({ + level: -1, + description: privateDescription, + }); + expectIconAndDescription(vm, { icon: privateIcon, description: privateDescription }); + }); + + it(`with level 0`, () => { + vm = createComponent({ + level: 0, + description: privateDescription, + }); + expectIconAndDescription(vm, { icon: privateIcon, description: privateDescription }); + }); + + it(`with level 5`, () => { + vm = createComponent({ + level: 5, + description: privateDescription, + }); + expectIconAndDescription(vm, { icon: privateIcon, description: privateDescription }); + }); + }); + + describe('renders a shield', () => { + const internalIcon = 'fa-shield'; + const internalDescription = 'This is internal'; + + beforeEach(() => { + vm = null; + }); + + afterEach(() => { + vm.$destroy(); + }); + + it(`with level 10`, () => { + vm = createComponent({ + level: 10, + description: internalDescription, + }); + expectIconAndDescription(vm, { icon: internalIcon, description: internalDescription }); + }); + + it(`with level 15`, () => { + vm = createComponent({ + level: 15, + description: internalDescription, + }); + expectIconAndDescription(vm, { icon: internalIcon, description: internalDescription }); + }); + }); + + describe('renders a globe', () => { + const publicIcon = 'fa-globe'; + const publicDescription = 'This is public 🚀⚡️'; + + beforeEach(() => { + vm = null; + }); + + afterEach(() => { + vm.$destroy(); + }); + + it(`with level 20`, () => { + vm = createComponent({ + level: 20, + description: publicDescription, + }); + expectIconAndDescription(vm, { icon: publicIcon, description: publicDescription }); + }); + + it(`with level 25`, () => { + vm = createComponent({ + level: 25, + description: publicDescription, + }); + expectIconAndDescription(vm, { icon: publicIcon, description: publicDescription }); + }); + }); + }); +}); |