diff options
Diffstat (limited to 'spec/javascripts/projects/gke_cluster_dropdowns/components/gke_project_id_dropdown_spec.js')
-rw-r--r-- | spec/javascripts/projects/gke_cluster_dropdowns/components/gke_project_id_dropdown_spec.js | 92 |
1 files changed, 92 insertions, 0 deletions
diff --git a/spec/javascripts/projects/gke_cluster_dropdowns/components/gke_project_id_dropdown_spec.js b/spec/javascripts/projects/gke_cluster_dropdowns/components/gke_project_id_dropdown_spec.js new file mode 100644 index 00000000000..d4fcb2dc8ff --- /dev/null +++ b/spec/javascripts/projects/gke_cluster_dropdowns/components/gke_project_id_dropdown_spec.js @@ -0,0 +1,92 @@ +import Vue from 'vue'; +import GkeProjectIdDropdown from '~/projects/gke_cluster_dropdowns/components/gke_project_id_dropdown.vue'; +import { createStore } from '~/projects/gke_cluster_dropdowns/store'; +import { SET_PROJECTS } from '~/projects/gke_cluster_dropdowns/store/mutation_types'; +import { mountComponentWithStore } from 'spec/helpers/vue_mount_component_helper'; +import { emptyProjectMock, selectedProjectMock } from '../mock_data'; + +const componentConfig = { + docsUrl: 'https://console.cloud.google.com/home/dashboard', + fieldId: 'cluster_provider_gcp_attributes_gcp_project_id', + fieldName: 'cluster[provider_gcp_attributes][gcp_project_id]', +}; + +const LABELS = { + LOADING: 'Fetching projects', + VALIDATING_PROJECT_BILLING: 'Validating project billing status', + DEFAULT: 'Select project', + EMPTY: 'No projects found', +}; + +const createComponent = (store, props = componentConfig) => { + const Component = Vue.extend(GkeProjectIdDropdown); + + return mountComponentWithStore(Component, { + el: null, + props, + store, + }); +}; + +describe('GkeProjectIdDropdown', () => { + let vm; + let store; + + beforeEach(() => { + store = createStore(); + vm = createComponent(store); + }); + + afterEach(() => { + vm.$destroy(); + }); + + describe('toggleText', () => { + it('returns loading toggle text', () => { + expect(vm.toggleText).toBe(LABELS.LOADING); + }); + + it('returns project billing validation text', () => { + vm.setIsValidatingProjectBilling(true); + expect(vm.toggleText).toBe(LABELS.VALIDATING_PROJECT_BILLING); + }); + + it('returns default toggle text', done => + vm.$nextTick().then(() => { + vm.setItem(emptyProjectMock); + + expect(vm.toggleText).toBe(LABELS.DEFAULT); + done(); + })); + + it('returns project name if project selected', done => + vm.$nextTick().then(() => { + expect(vm.toggleText).toBe(selectedProjectMock.name); + done(); + })); + + it('returns empty toggle text', done => + vm.$nextTick().then(() => { + vm.$store.commit(SET_PROJECTS, null); + vm.setItem(emptyProjectMock); + + expect(vm.toggleText).toBe(LABELS.EMPTY); + done(); + })); + }); + + describe('selectItem', () => { + it('reflects new value when dropdown item is clicked', done => { + expect(vm.$el.querySelector('input').value).toBe(''); + + return vm.$nextTick().then(() => { + vm.$el.querySelector('.dropdown-content button').click(); + + return vm.$nextTick().then(() => { + expect(vm.$el.querySelector('input').value).toBe(selectedProjectMock.projectId); + done(); + }); + }); + }); + }); +}); |