From 4f001a3abfb903e8e2045907c0f6e1f08ca5ab98 Mon Sep 17 00:00:00 2001 From: Dennis Tang Date: Wed, 9 May 2018 14:32:53 +0200 Subject: gcp dropdown component tests --- .../components/gke_machine_type_dropdown_spec.js | 99 ++++++++++++++++++++++ .../components/gke_project_id_dropdown_spec.js | 93 ++++++++++++++++++++ .../components/gke_zone_dropdown_spec.js | 82 ++++++++++++++++++ .../projects/gke_cluster_dropdowns/mock_data.js | 5 ++ 4 files changed, 279 insertions(+) create mode 100644 spec/javascripts/projects/gke_cluster_dropdowns/components/gke_machine_type_dropdown_spec.js create mode 100644 spec/javascripts/projects/gke_cluster_dropdowns/components/gke_project_id_dropdown_spec.js create mode 100644 spec/javascripts/projects/gke_cluster_dropdowns/components/gke_zone_dropdown_spec.js (limited to 'spec/javascripts/projects/gke_cluster_dropdowns') diff --git a/spec/javascripts/projects/gke_cluster_dropdowns/components/gke_machine_type_dropdown_spec.js b/spec/javascripts/projects/gke_cluster_dropdowns/components/gke_machine_type_dropdown_spec.js new file mode 100644 index 00000000000..471465528ec --- /dev/null +++ b/spec/javascripts/projects/gke_cluster_dropdowns/components/gke_machine_type_dropdown_spec.js @@ -0,0 +1,99 @@ +import Vue from 'vue'; +import GkeMachineTypeDropdown from '~/projects/gke_cluster_dropdowns/components/gke_machine_type_dropdown.vue'; +import { + SET_PROJECT, + SET_ZONE, + SET_FETCHED_ZONES, + SET_FETCHED_MACHINE_TYPES, +} from '~/projects/gke_cluster_dropdowns/stores/mutation_types'; +import mountComponent from 'spec/helpers/vue_mount_component_helper'; + +import { resetStore } from '../helpers'; +import { + selectedZoneMock, + selectedProjectMock, + selectedMachineTypeMock, + gapiZonesResponseMock, + gapiMachineTypesResponseMock, +} from '../mock_data'; + +const componentConfig = { + fieldId: 'cluster_provider_gcp_attributes_gcp_machine_type', + fieldName: 'cluster[provider_gcp_attributes][gcp_machine_type]', +}; + +const LABELS = { + LOADING: 'Fetching machine types', + DISABLED_NO_PROJECT: 'Select project and zone to choose machine type', + DISABLED_NO_ZONE: 'Select zone to choose machine type', + DEFAULT: 'Select machine type', +}; + +const createComponent = (config = componentConfig) => { + const Component = Vue.extend(GkeMachineTypeDropdown); + + return mountComponent(Component, config); +}; + +describe('GkeMachineTypeDropdown', () => { + let vm; + + beforeEach(() => { + vm = createComponent(); + }); + + afterEach(() => { + vm.$destroy(); + + resetStore(vm.$store); + }); + + describe('shows various toggle text depending on state', () => { + it('returns disabled state toggle text when no project and zone are selected', () => { + expect(vm.toggleText).toBe(LABELS.DISABLED_NO_PROJECT); + }); + + it('returns disabled state toggle text when no zone is selected', () => { + vm.$store.commit(SET_PROJECT, selectedProjectMock); + + expect(vm.toggleText).toBe(LABELS.DISABLED_NO_ZONE); + }); + + it('returns loading toggle text', () => { + vm.isLoading = true; + + expect(vm.toggleText).toBe(LABELS.LOADING); + }); + + it('returns default toggle text', () => { + expect(vm.toggleText).toBe(LABELS.DISABLED_NO_PROJECT); + + vm.$store.commit(SET_PROJECT, selectedProjectMock); + vm.$store.commit(SET_ZONE, selectedZoneMock); + + expect(vm.toggleText).toBe(LABELS.DEFAULT); + }); + + it('returns machine type name if machine type selected', () => { + vm.setMachineType(selectedMachineTypeMock); + + expect(vm.toggleText).toBe(selectedMachineTypeMock); + }); + }); + + describe('form input', () => { + it('reflects new value when dropdown item is clicked', done => { + expect(vm.$el.querySelector('input').value).toBe(''); + vm.$store.commit(SET_FETCHED_MACHINE_TYPES, gapiMachineTypesResponseMock.items); + + vm.$nextTick(() => { + vm.$el.querySelector('.dropdown-content button').click(); + + vm.$nextTick(() => { + expect(vm.$el.querySelector('input').value).toBe(selectedMachineTypeMock); + done(); + }); + }); + }); + }); +}); 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..ae2fbb39375 --- /dev/null +++ b/spec/javascripts/projects/gke_cluster_dropdowns/components/gke_project_id_dropdown_spec.js @@ -0,0 +1,93 @@ +import Vue from 'vue'; +import GkeProjectIdDropdown from '~/projects/gke_cluster_dropdowns/components/gke_project_id_dropdown.vue'; +import { SET_FETCHED_PROJECTS } from '~/projects/gke_cluster_dropdowns/stores/mutation_types'; +import mountComponent from 'spec/helpers/vue_mount_component_helper'; + +import { resetStore } from '../helpers'; +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', + DEFAULT: 'Select project', + EMPTY: 'No projects found', +}; + +const createComponent = (config = componentConfig) => { + const Component = Vue.extend(GkeProjectIdDropdown); + + return mountComponent(Component, config); +}; + +describe('GkeProjectIdDropdown', () => { + let vm; + + beforeEach(() => { + vm = createComponent(); + }); + + afterEach(() => { + vm.$destroy(); + + resetStore(vm.$store); + }); + + describe('toggleText', () => { + it('returns loading toggle text', () => { + expect(vm.toggleText).toBe(LABELS.LOADING); + }); + + it('returns default toggle text', done => { + vm.$nextTick(() => { + vm.$nextTick(() => { + vm.setProject(emptyProjectMock); + + expect(vm.toggleText).toBe(LABELS.DEFAULT); + done(); + }); + }); + }); + + it('returns project name if project selected', done => { + vm.$nextTick(() => { + vm.$nextTick(() => { + expect(vm.toggleText).toBe(selectedProjectMock.name); + done(); + }); + }); + }); + + it('returns empty toggle text', done => { + vm.$nextTick(() => { + vm.$store.commit(SET_FETCHED_PROJECTS, []); + vm.setProject(emptyProjectMock); + + vm.$nextTick(() => { + 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(''); + + vm.$nextTick(() => { + vm.$nextTick(() => { + vm.$el.querySelector('.dropdown-content button').click(); + vm.$nextTick(() => { + expect(vm.$el.querySelector('input').value).toBe(selectedProjectMock.projectId); + done(); + }); + }); + }); + }); + }); +}); diff --git a/spec/javascripts/projects/gke_cluster_dropdowns/components/gke_zone_dropdown_spec.js b/spec/javascripts/projects/gke_cluster_dropdowns/components/gke_zone_dropdown_spec.js new file mode 100644 index 00000000000..0b9b7318519 --- /dev/null +++ b/spec/javascripts/projects/gke_cluster_dropdowns/components/gke_zone_dropdown_spec.js @@ -0,0 +1,82 @@ +import Vue from 'vue'; +import GkeZoneDropdown from '~/projects/gke_cluster_dropdowns/components/gke_zone_dropdown.vue'; +import { + SET_PROJECT, + SET_FETCHED_ZONES, +} from '~/projects/gke_cluster_dropdowns/stores/mutation_types'; +import mountComponent from 'spec/helpers/vue_mount_component_helper'; + +import { resetStore } from '../helpers'; +import { selectedZoneMock, selectedProjectMock, gapiZonesResponseMock } from '../mock_data'; + +const componentConfig = { + fieldId: 'cluster_provider_gcp_attributes_gcp_zone', + fieldName: 'cluster[provider_gcp_attributes][gcp_zone]', +}; + +const LABELS = { + LOADING: 'Fetching zones', + DISABLED: 'Select project to choose zone', + DEFAULT: 'Select zone', +}; + +const createComponent = (config = componentConfig) => { + const Component = Vue.extend(GkeZoneDropdown); + + return mountComponent(Component, config); +}; + +describe('GkeZoneDropdown', () => { + let vm; + + beforeEach(() => { + vm = createComponent(); + }); + + afterEach(() => { + vm.$destroy(); + + resetStore(vm.$store); + }); + + describe('toggleText', () => { + it('returns disabled state toggle text', () => { + expect(vm.toggleText).toBe(LABELS.DISABLED); + }); + + it('returns loading toggle text', () => { + vm.isLoading = true; + + expect(vm.toggleText).toBe(LABELS.LOADING); + }); + + it('returns default toggle text', () => { + expect(vm.toggleText).toBe(LABELS.DISABLED); + + vm.$store.commit(SET_PROJECT, selectedProjectMock); + expect(vm.toggleText).toBe(LABELS.DEFAULT); + }); + + it('returns project name if project selected', () => { + vm.setZone(selectedZoneMock); + + expect(vm.toggleText).toBe(selectedZoneMock); + }); + }); + + describe('selectItem', () => { + it('reflects new value when dropdown item is clicked', done => { + expect(vm.$el.querySelector('input').value).toBe(''); + vm.$store.commit(SET_FETCHED_ZONES, gapiZonesResponseMock.items); + + vm.$nextTick(() => { + vm.$el.querySelector('.dropdown-content button').click(); + + vm.$nextTick(() => { + expect(vm.$el.querySelector('input').value).toBe(selectedZoneMock); + done(); + }); + }); + }); + }); +}); diff --git a/spec/javascripts/projects/gke_cluster_dropdowns/mock_data.js b/spec/javascripts/projects/gke_cluster_dropdowns/mock_data.js index 86ca5d81f15..d9f5dbc636f 100644 --- a/spec/javascripts/projects/gke_cluster_dropdowns/mock_data.js +++ b/spec/javascripts/projects/gke_cluster_dropdowns/mock_data.js @@ -1,3 +1,8 @@ +export const emptyProjectMock = { + projectId: '', + name: '', +}; + export const selectedProjectMock = { projectId: 'gcp-project-123', name: 'gcp-project', -- cgit v1.2.1