Add latest changes from gitlab-org/gitlab@13-4-stable-ee

6 files changed, 86 insertions, 27 deletions

diff --git a/spec/frontend/clusters/components/__snapshots__/new_cluster_spec.js.snap b/spec/frontend/clusters/components/__snapshots__/new_cluster_spec.js.snap
new file mode 100644
index 00000000000..5577176bcc5
--- /dev/null
+++ b/spec/frontend/clusters/components/__snapshots__/new_cluster_spec.js.snap
@@ -0,0 +1,8 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`NewCluster renders the cluster component correctly 1`] = `
+"<div>
+  <h4>Enter the details for your Kubernetes cluster</h4>
+  <p>Please enter access information for your Kubernetes cluster. If you need help, you can read our <b-link-stub href=\\"/some/help/path\\" target=\\"_blank\\" event=\\"click\\" routertag=\\"a\\" class=\\"gl-link\\">documentation</b-link-stub> on Kubernetes</p>
+</div>"
+`;
diff --git a/spec/frontend/clusters/components/application_row_spec.js b/spec/frontend/clusters/components/application_row_spec.js
index b97d4dbf355..0a964426c95 100644
--- a/spec/frontend/clusters/components/application_row_spec.js
+++ b/spec/frontend/clusters/components/application_row_spec.js
@@ -48,7 +48,7 @@ describe('Application Row', () => {
   describe('Install button', () => {
     const button = () => wrapper.find('.js-cluster-application-install-button');
     const checkButtonState = (label, loading, disabled) => {
-      expect(button().props('label')).toEqual(label);
+      expect(button().text()).toEqual(label);
       expect(button().props('loading')).toEqual(loading);
       expect(button().props('disabled')).toEqual(disabled);
     };
@@ -56,7 +56,7 @@ describe('Application Row', () => {
     it('has indeterminate state on page load', () => {
       mountComponent({ status: null });
 
-      expect(button().props('label')).toBeUndefined();
+      expect(button().text()).toBe('');
     });
 
     it('has install button', () => {
@@ -225,7 +225,7 @@ describe('Application Row', () => {
       mountComponent({ updateAvailable: true });
 
       expect(button().exists()).toBe(true);
-      expect(button().props('label')).toContain('Update');
+      expect(button().text()).toContain('Update');
     });
 
     it('has enabled "Retry update" when update process fails', () => {
@@ -235,14 +235,14 @@ describe('Application Row', () => {
       });
 
       expect(button().exists()).toBe(true);
-      expect(button().props('label')).toContain('Retry update');
+      expect(button().text()).toContain('Retry update');
     });
 
     it('has disabled "Updating" when APPLICATION_STATUS.UPDATING', () => {
       mountComponent({ status: APPLICATION_STATUS.UPDATING });
 
       expect(button().exists()).toBe(true);
-      expect(button().props('label')).toContain('Updating');
+      expect(button().text()).toContain('Updating');
     });
 
     it('clicking update button emits event', () => {
@@ -300,11 +300,11 @@ describe('Application Row', () => {
       beforeEach(() => mountComponent({ updateAvailable: true }));
 
       it('the modal is not rendered', () => {
-        expect(wrapper.contains(UpdateApplicationConfirmationModal)).toBe(false);
+        expect(wrapper.find(UpdateApplicationConfirmationModal).exists()).toBe(false);
       });
 
       it('the correct button is rendered', () => {
-        expect(wrapper.contains("[data-qa-selector='update_button']")).toBe(true);
+        expect(wrapper.find("[data-qa-selector='update_button']").exists()).toBe(true);
       });
     });
 
@@ -318,11 +318,13 @@ describe('Application Row', () => {
       });
 
       it('displays a modal', () => {
-        expect(wrapper.contains(UpdateApplicationConfirmationModal)).toBe(true);
+        expect(wrapper.find(UpdateApplicationConfirmationModal).exists()).toBe(true);
       });
 
       it('the correct button is rendered', () => {
-        expect(wrapper.contains("[data-qa-selector='update_button_with_confirmation']")).toBe(true);
+        expect(wrapper.find("[data-qa-selector='update_button_with_confirmation']").exists()).toBe(
+          true,
+        );
       });
 
       it('triggers updateApplication event', () => {
@@ -344,8 +346,10 @@ describe('Application Row', () => {
           version: '1.1.2',
         });
 
-        expect(wrapper.contains("[data-qa-selector='update_button_with_confirmation']")).toBe(true);
-        expect(wrapper.contains(UpdateApplicationConfirmationModal)).toBe(true);
+        expect(wrapper.find("[data-qa-selector='update_button_with_confirmation']").exists()).toBe(
+          true,
+        );
+        expect(wrapper.find(UpdateApplicationConfirmationModal).exists()).toBe(true);
       });
 
       it('does not need confirmation is version is 3.0.0', () => {
@@ -355,8 +359,8 @@ describe('Application Row', () => {
           version: '3.0.0',
         });
 
-        expect(wrapper.contains("[data-qa-selector='update_button']")).toBe(true);
-        expect(wrapper.contains(UpdateApplicationConfirmationModal)).toBe(false);
+        expect(wrapper.find("[data-qa-selector='update_button']").exists()).toBe(true);
+        expect(wrapper.find(UpdateApplicationConfirmationModal).exists()).toBe(false);
       });
 
       it('does not need confirmation if version is higher than 3.0.0', () => {
@@ -366,8 +370,8 @@ describe('Application Row', () => {
           version: '5.2.1',
         });
 
-        expect(wrapper.contains("[data-qa-selector='update_button']")).toBe(true);
-        expect(wrapper.contains(UpdateApplicationConfirmationModal)).toBe(false);
+        expect(wrapper.find("[data-qa-selector='update_button']").exists()).toBe(true);
+        expect(wrapper.find(UpdateApplicationConfirmationModal).exists()).toBe(false);
       });
     });
   });
diff --git a/spec/frontend/clusters/components/fluentd_output_settings_spec.js b/spec/frontend/clusters/components/fluentd_output_settings_spec.js
index 0bc4eb73bf9..c263679a45c 100644
--- a/spec/frontend/clusters/components/fluentd_output_settings_spec.js
+++ b/spec/frontend/clusters/components/fluentd_output_settings_spec.js
@@ -168,7 +168,7 @@ describe('FluentdOutputSettings', () => {
       });
 
       it('displays a error message', () => {
-        expect(wrapper.contains(GlAlert)).toBe(true);
+        expect(wrapper.find(GlAlert).exists()).toBe(true);
       });
     });
   });
diff --git a/spec/frontend/clusters/components/knative_domain_editor_spec.js b/spec/frontend/clusters/components/knative_domain_editor_spec.js
index a07258dcc69..11ebe1b5d61 100644
--- a/spec/frontend/clusters/components/knative_domain_editor_spec.js
+++ b/spec/frontend/clusters/components/knative_domain_editor_spec.js
@@ -1,7 +1,6 @@
 import { shallowMount } from '@vue/test-utils';
-import { GlDeprecatedDropdownItem } from '@gitlab/ui';
+import { GlDeprecatedDropdownItem, GlButton } 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';
 
 const { UPDATING } = APPLICATION_STATUS;
@@ -79,7 +78,7 @@ describe('KnativeDomainEditor', () => {
     });
 
     it('triggers save event and pass current knative hostname', () => {
-      wrapper.find(LoadingButton).vm.$emit('click');
+      wrapper.find(GlButton).vm.$emit('click');
       return wrapper.vm.$nextTick().then(() => {
         expect(wrapper.emitted('save').length).toEqual(1);
       });
@@ -166,15 +165,15 @@ describe('KnativeDomainEditor', () => {
     });
 
     it('renders loading spinner in save button', () => {
-      expect(wrapper.find(LoadingButton).props('loading')).toBe(true);
+      expect(wrapper.find(GlButton).props('loading')).toBe(true);
     });
 
     it('renders disabled save button', () => {
-      expect(wrapper.find(LoadingButton).props('disabled')).toBe(true);
+      expect(wrapper.find(GlButton).props('disabled')).toBe(true);
     });
 
     it('renders save button with "Saving" label', () => {
-      expect(wrapper.find(LoadingButton).props('label')).toBe('Saving');
+      expect(wrapper.find(GlButton).text()).toBe('Saving');
     });
   });
 });
diff --git a/spec/frontend/clusters/components/new_cluster_spec.js b/spec/frontend/clusters/components/new_cluster_spec.js
new file mode 100644
index 00000000000..bb4898f98ba
--- /dev/null
+++ b/spec/frontend/clusters/components/new_cluster_spec.js
@@ -0,0 +1,41 @@
+import { shallowMount } from '@vue/test-utils';
+import { GlLink, GlSprintf } from '@gitlab/ui';
+import NewCluster from '~/clusters/components/new_cluster.vue';
+import createClusterStore from '~/clusters/stores/new_cluster';
+
+describe('NewCluster', () => {
+  let store;
+  let wrapper;
+
+  const createWrapper = () => {
+    store = createClusterStore({ clusterConnectHelpPath: '/some/help/path' });
+    wrapper = shallowMount(NewCluster, { store, stubs: { GlLink, GlSprintf } });
+    return wrapper.vm.$nextTick();
+  };
+
+  const findDescription = () => wrapper.find(GlSprintf);
+
+  const findLink = () => wrapper.find(GlLink);
+
+  beforeEach(() => {
+    return createWrapper();
+  });
+
+  afterEach(() => {
+    wrapper.destroy();
+  });
+
+  it('renders the cluster component correctly', () => {
+    expect(wrapper.html()).toMatchSnapshot();
+  });
+
+  it('renders the correct information text', () => {
+    expect(findDescription().text()).toContain(
+      'Please enter access information for your Kubernetes cluster.',
+    );
+  });
+
+  it('renders a valid help link set by the backend', () => {
+    expect(findLink().attributes('href')).toBe('/some/help/path');
+  });
+});
diff --git a/spec/frontend/clusters/components/uninstall_application_button_spec.js b/spec/frontend/clusters/components/uninstall_application_button_spec.js
index 9f9397d4d41..387e2188572 100644
--- a/spec/frontend/clusters/components/uninstall_application_button_spec.js
+++ b/spec/frontend/clusters/components/uninstall_application_button_spec.js
@@ -1,6 +1,6 @@
 import { shallowMount } from '@vue/test-utils';
+import { GlButton } from '@gitlab/ui';
 import UninstallApplicationButton from '~/clusters/components/uninstall_application_button.vue';
-import LoadingButton from '~/vue_shared/components/loading_button.vue';
 import { APPLICATION_STATUS } from '~/clusters/constants';
 
 const { INSTALLED, UPDATING, UNINSTALLING } = APPLICATION_STATUS;
@@ -19,14 +19,21 @@ describe('UninstallApplicationButton', () => {
   });
 
   describe.each`
-    status          | loading  | disabled | label
+    status          | loading  | disabled | text
     ${INSTALLED}    | ${false} | ${false} | ${'Uninstall'}
     ${UPDATING}     | ${false} | ${true}  | ${'Uninstall'}
     ${UNINSTALLING} | ${true}  | ${true}  | ${'Uninstalling'}
-  `('when app status is $status', ({ loading, disabled, status, label }) => {
-    it(`renders a loading=${loading}, disabled=${disabled} button with label="${label}"`, () => {
+  `('when app status is $status', ({ loading, disabled, status, text }) => {
+    beforeAll(() => {
       createComponent({ status });
-      expect(wrapper.find(LoadingButton).props()).toMatchObject({ loading, disabled, label });
+    });
+
+    it(`renders a button with loading=${loading} and disabled=${disabled}`, () => {
+      expect(wrapper.find(GlButton).props()).toMatchObject({ loading, disabled });
+    });
+
+    it(`renders a button with text="${text}"`, () => {
+      expect(wrapper.find(GlButton).text()).toBe(text);
     });
   });
 });