Update tests for new knative domain picker

spec/frontend/clusters/components/applications_spec.js

@@ -400,6 +400,10 @@ describe('Applications', () => {
   });
 
   describe('Knative application', () => {
+    const availableDomain = {
+      id: 4,
+      domain: 'newhostname.com',
+    };
     const propsData = {
       applications: {
         ...APPLICATIONS_MOCK_STATE,
@@ -409,10 +413,11 @@ describe('Applications', () => {
           status: 'installed',
           externalIp: '1.1.1.1',
           installed: true,
+          availableDomains: [availableDomain],
+          pagesDomain: null,
         },
       },
     };
-    const newHostname = 'newhostname.com';
     let wrapper;
     let knativeDomainEditor;
 
@@ -428,20 +433,44 @@ describe('Applications', () => {
     });
 
     it('emits saveKnativeDomain event when knative domain editor emits save event', () => {
-      knativeDomainEditor.vm.$emit('save', newHostname);
+      propsData.applications.knative.hostname = availableDomain.domain;
+      propsData.applications.knative.pagesDomain = availableDomain;
+      knativeDomainEditor.vm.$emit('save');
+
+      expect(eventHub.$emit).toHaveBeenCalledWith('saveKnativeDomain', {
+        id: 'knative',
+        params: {
+          hostname: availableDomain.domain,
+          pages_domain_id: availableDomain.id,
+        },
+      });
+    });
+
+    it('emits saveKnativeDomain event when knative domain editor emits save event with custom domain', () => {
+      const newHostName = 'someothernewhostname.com';
+      propsData.applications.knative.hostname = newHostName;
+      propsData.applications.knative.pagesDomain = null;
+      knativeDomainEditor.vm.$emit('save');
 
       expect(eventHub.$emit).toHaveBeenCalledWith('saveKnativeDomain', {
         id: 'knative',
-        params: { hostname: newHostname },
+        params: {
+          hostname: newHostName,
+          pages_domain_id: undefined,
+        },
       });
     });
 
     it('emits setKnativeHostname event when knative domain editor emits change event', () => {
-      wrapper.find(KnativeDomainEditor).vm.$emit('set', newHostname);
+      wrapper.find(KnativeDomainEditor).vm.$emit('set', {
+        domain: availableDomain.domain,
+        domainId: availableDomain.id,
+      });
 
-      expect(eventHub.$emit).toHaveBeenCalledWith('setKnativeHostname', {
+      expect(eventHub.$emit).toHaveBeenCalledWith('setKnativeDomain', {
         id: 'knative',
-        hostname: newHostname,
+        domain: availableDomain.domain,
+        domainId: availableDomain.id,
       });
     });
   });

spec/frontend/clusters/components/knative_domain_editor_spec.js

 import { shallowMount } from '@vue/test-utils';
+import { GlDropdownItem } from '@gitlab/ui';
 import KnativeDomainEditor from '~/clusters/components/knative_domain_editor.vue';
 import LoadingButton from '~/vue_shared/components/loading_button.vue';
 import { APPLICATION_STATUS } from '~/clusters/constants';
@@ -80,7 +81,7 @@ describe('KnativeDomainEditor', () => {
     it('triggers save event and pass current knative hostname', () => {
       wrapper.find(LoadingButton).vm.$emit('click');
       return wrapper.vm.$nextTick().then(() => {
-        expect(wrapper.emitted('save')[0]).toEqual([knative.hostname]);
+        expect(wrapper.emitted('save')[0]).toEqual([]);
       });
     });
   });
@@ -104,14 +105,43 @@ describe('KnativeDomainEditor', () => {
 
   describe('when knative domain name input changes', () => {
     it('emits "set" event with updated domain name', () => {
-      createComponent({ knative });
+      const newDomain = {
+        id: 4,
+        domain: 'newhostname.com',
+      };
+
+      createComponent({ knative: { ...knative, availableDomains: [newDomain] } });
+      jest.spyOn(wrapper.vm, 'selectDomain');
+
+      wrapper.find(GlDropdownItem).vm.$emit('click');
+
+      return wrapper.vm.$nextTick().then(() => {
+        expect(wrapper.vm.selectDomain).toHaveBeenCalledWith(newDomain);
+        expect(wrapper.emitted('set')[0]).toEqual([
+          {
+            domain: newDomain.domain,
+            domainId: newDomain.id,
+          },
+        ]);
+      });
+    });
 
+    it('emits "set" event with updated custom domain name', () => {
       const newHostname = 'newhostname.com';
 
+      createComponent({ knative });
+      jest.spyOn(wrapper.vm, 'selectCustomDomain');
+
       wrapper.setData({ knativeHostname: newHostname });
 
       return wrapper.vm.$nextTick().then(() => {
-        expect(wrapper.emitted('set')[0]).toEqual([newHostname]);
+        expect(wrapper.vm.selectCustomDomain).toHaveBeenCalledWith(newHostname);
+        expect(wrapper.emitted('set')[0]).toEqual([
+          {
+            domain: newHostname,
+            domainId: null,
+          },
+        ]);
       });
     });
   });