Add latest changes from gitlab-org/gitlab@master

5 files changed, 139 insertions, 7 deletions

diff --git a/spec/frontend/google_cloud/components/errors/gcp_error_spec.js b/spec/frontend/google_cloud/components/errors/gcp_error_spec.js
new file mode 100644
index 00000000000..4062a8b902a
--- /dev/null
+++ b/spec/frontend/google_cloud/components/errors/gcp_error_spec.js
@@ -0,0 +1,34 @@
+import { shallowMount } from '@vue/test-utils';
+import { GlAlert } from '@gitlab/ui';
+import GcpError from '~/google_cloud/components/errors/gcp_error.vue';
+
+describe('GcpError component', () => {
+  let wrapper;
+
+  const findAlert = () => wrapper.findComponent(GlAlert);
+  const findBlockquote = () => wrapper.find('blockquote');
+
+  const propsData = { error: 'IAM and CloudResourceManager API disabled' };
+
+  beforeEach(() => {
+    wrapper = shallowMount(GcpError, { propsData });
+  });
+
+  afterEach(() => {
+    wrapper.destroy();
+  });
+
+  it('contains alert', () => {
+    expect(findAlert().exists()).toBe(true);
+  });
+
+  it('contains relevant text', () => {
+    const alertText = findAlert().text();
+    expect(findAlert().props('title')).toBe(GcpError.i18n.title);
+    expect(alertText).toContain(GcpError.i18n.description);
+  });
+
+  it('contains error stacktrace', () => {
+    expect(findBlockquote().text()).toBe(propsData.error);
+  });
+});
diff --git a/spec/frontend/google_cloud/components/errors/no_gcp_projects_spec.js b/spec/frontend/google_cloud/components/errors/no_gcp_projects_spec.js
new file mode 100644
index 00000000000..e1e20377880
--- /dev/null
+++ b/spec/frontend/google_cloud/components/errors/no_gcp_projects_spec.js
@@ -0,0 +1,33 @@
+import { mount } from '@vue/test-utils';
+import { GlAlert, GlButton } from '@gitlab/ui';
+import NoGcpProjects from '~/google_cloud/components/errors/no_gcp_projects.vue';
+
+describe('NoGcpProjects component', () => {
+  let wrapper;
+
+  const findAlert = () => wrapper.findComponent(GlAlert);
+  const findButton = () => wrapper.findComponent(GlButton);
+
+  beforeEach(() => {
+    wrapper = mount(NoGcpProjects);
+  });
+
+  afterEach(() => {
+    wrapper.destroy();
+  });
+
+  it('contains alert', () => {
+    expect(findAlert().exists()).toBe(true);
+  });
+
+  it('contains relevant text', () => {
+    expect(findAlert().props('title')).toBe(NoGcpProjects.i18n.title);
+    expect(findAlert().text()).toContain(NoGcpProjects.i18n.description);
+  });
+
+  it('contains create gcp project button', () => {
+    const button = findButton();
+    expect(button.text()).toBe(NoGcpProjects.i18n.createLabel);
+    expect(button.attributes('href')).toBe('https://console.cloud.google.com/projectcreate');
+  });
+});
diff --git a/spec/frontend/google_cloud/components/app_spec.js b/spec/frontend/google_cloud/components/screens/app_spec.js
index bb86eb5c22e..bd766a79f51 100644
--- a/spec/frontend/google_cloud/components/app_spec.js
+++ b/spec/frontend/google_cloud/components/screens/app_spec.js
@@ -1,8 +1,8 @@
 import { shallowMount } from '@vue/test-utils';
 import { GlTab, GlTabs } from '@gitlab/ui';
-import App from '~/google_cloud/components/app.vue';
+import App from '~/google_cloud/components/screens/app.vue';
 import IncubationBanner from '~/google_cloud/components/incubation_banner.vue';
-import ServiceAccounts from '~/google_cloud/components/service_accounts.vue';
+import ServiceAccountsList from '~/google_cloud/components/service_accounts_list.vue';
 
 describe('google_cloud App component', () => {
   let wrapper;
@@ -13,7 +13,7 @@ describe('google_cloud App component', () => {
   const findConfigurationTab = () => findTabItems().at(0);
   const findDeploymentTab = () => findTabItems().at(1);
   const findServicesTab = () => findTabItems().at(2);
-  const findServiceAccounts = () => findConfigurationTab().findComponent(ServiceAccounts);
+  const findServiceAccountsList = () => findConfigurationTab().findComponent(ServiceAccountsList);
 
   beforeEach(() => {
     const propsData = {
@@ -47,7 +47,7 @@ describe('google_cloud App component', () => {
       });
 
       it('should contain service accounts component', () => {
-        expect(findServiceAccounts().exists()).toBe(true);
+        expect(findServiceAccountsList().exists()).toBe(true);
       });
     });
 
diff --git a/spec/frontend/google_cloud/components/screens/service_accounts_form_spec.js b/spec/frontend/google_cloud/components/screens/service_accounts_form_spec.js
new file mode 100644
index 00000000000..3899b7d8a9d
--- /dev/null
+++ b/spec/frontend/google_cloud/components/screens/service_accounts_form_spec.js
@@ -0,0 +1,65 @@
+import { shallowMount } from '@vue/test-utils';
+import { GlButton, GlFormGroup, GlFormSelect } from '@gitlab/ui';
+import IncubationBanner from '~/google_cloud/components/incubation_banner.vue';
+import ServiceAccountsForm from '~/google_cloud/components/screens/service_accounts_form.vue';
+
+describe('ServiceAccountsForm component', () => {
+  let wrapper;
+
+  const findIncubationBanner = () => wrapper.findComponent(IncubationBanner);
+  const findHeader = () => wrapper.find('header');
+  const findAllFormGroups = () => wrapper.findAllComponents(GlFormGroup);
+  const findAllFormSelects = () => wrapper.findAllComponents(GlFormSelect);
+  const findAllButtons = () => wrapper.findAllComponents(GlButton);
+
+  const propsData = { gcpProjects: [], environments: [], cancelPath: '#cancel-url' };
+
+  beforeEach(() => {
+    wrapper = shallowMount(ServiceAccountsForm, { propsData });
+  });
+
+  afterEach(() => {
+    wrapper.destroy();
+  });
+
+  it('contains incubation banner', () => {
+    expect(findIncubationBanner().exists()).toBe(true);
+  });
+
+  it('contains header', () => {
+    expect(findHeader().exists()).toBe(true);
+  });
+
+  it('contains GCP project form group', () => {
+    const formGroup = findAllFormGroups().at(0);
+    expect(formGroup.exists()).toBe(true);
+  });
+
+  it('contains GCP project dropdown', () => {
+    const select = findAllFormSelects().at(0);
+    expect(select.exists()).toBe(true);
+  });
+
+  it('contains Environments form group', () => {
+    const formGorup = findAllFormGroups().at(1);
+    expect(formGorup.exists()).toBe(true);
+  });
+
+  it('contains Environments dropdown', () => {
+    const select = findAllFormSelects().at(1);
+    expect(select.exists()).toBe(true);
+  });
+
+  it('contains Submit button', () => {
+    const button = findAllButtons().at(0);
+    expect(button.exists()).toBe(true);
+    expect(button.text()).toBe(ServiceAccountsForm.i18n.submitLabel);
+  });
+
+  it('contains Cancel button', () => {
+    const button = findAllButtons().at(1);
+    expect(button.exists()).toBe(true);
+    expect(button.text()).toBe(ServiceAccountsForm.i18n.cancelLabel);
+    expect(button.attributes('href')).toBe('#cancel-url');
+  });
+});
diff --git a/spec/frontend/google_cloud/components/service_accounts_spec.js b/spec/frontend/google_cloud/components/service_accounts_list_spec.js
index 3d097078f03..cdb3f74051c 100644
--- a/spec/frontend/google_cloud/components/service_accounts_spec.js
+++ b/spec/frontend/google_cloud/components/service_accounts_list_spec.js
@@ -1,6 +1,6 @@
 import { mount } from '@vue/test-utils';
 import { GlButton, GlEmptyState, GlTable } from '@gitlab/ui';
-import ServiceAccounts from '~/google_cloud/components/service_accounts.vue';
+import ServiceAccountsList from '~/google_cloud/components/service_accounts_list.vue';
 
 describe('ServiceAccounts component', () => {
   describe('when the project does not have any service accounts', () => {
@@ -15,7 +15,7 @@ describe('ServiceAccounts component', () => {
         createUrl: '#create-url',
         emptyIllustrationUrl: '#empty-illustration-url',
       };
-      wrapper = mount(ServiceAccounts, { propsData });
+      wrapper = mount(ServiceAccountsList, { propsData });
     });
 
     afterEach(() => {
@@ -48,7 +48,7 @@ describe('ServiceAccounts component', () => {
         createUrl: '#create-url',
         emptyIllustrationUrl: '#empty-illustration-url',
       };
-      wrapper = mount(ServiceAccounts, { propsData });
+      wrapper = mount(ServiceAccountsList, { propsData });
     });
 
     it('shows the title', () => {