gcp dropdown component tests

spec/javascripts/projects/gke_cluster_dropdowns/components/gke_machine_type_dropdown_spec.js

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

spec/javascripts/projects/gke_cluster_dropdowns/components/gke_project_id_dropdown_spec.js

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

spec/javascripts/projects/gke_cluster_dropdowns/components/gke_zone_dropdown_spec.js

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

spec/javascripts/projects/gke_cluster_dropdowns/mock_data.js

+export const emptyProjectMock = {
+  projectId: '',
+  name: '',
+};
+
 export const selectedProjectMock = {
   projectId: 'gcp-project-123',
   name: 'gcp-project',