Add latest changes from gitlab-org/gitlab@master

4 files changed, 142 insertions, 0 deletions

diff --git a/spec/frontend/google_cloud/components/app_spec.js b/spec/frontend/google_cloud/components/app_spec.js
index 5ddc0ffa50f..69978dbaf07 100644
--- a/spec/frontend/google_cloud/components/app_spec.js
+++ b/spec/frontend/google_cloud/components/app_spec.js
@@ -22,7 +22,9 @@ const SERVICE_ACCOUNTS_FORM_PROPS = {
 };
 const HOME_PROPS = {
   serviceAccounts: [{}, {}],
+  gcpRegions: [{}, {}],
   createServiceAccountUrl: '#url-create-service-account',
+  configureGcpRegionsUrl: '#url-configure-gcp-regions',
   emptyIllustrationUrl: '#url-empty-illustration',
   enableCloudRunUrl: '#url-enable-cloud-run',
   enableCloudStorageUrl: '#enableCloudStorageUrl',
diff --git a/spec/frontend/google_cloud/components/gcp_regions_form_spec.js b/spec/frontend/google_cloud/components/gcp_regions_form_spec.js
new file mode 100644
index 00000000000..9f3bf707b18
--- /dev/null
+++ b/spec/frontend/google_cloud/components/gcp_regions_form_spec.js
@@ -0,0 +1,59 @@
+import { shallowMount } from '@vue/test-utils';
+import { GlButton, GlFormGroup, GlFormSelect } from '@gitlab/ui';
+import GcpRegionsForm from '~/google_cloud/components/gcp_regions_form.vue';
+
+describe('GcpRegionsForm component', () => {
+  let wrapper;
+
+  const findHeader = () => wrapper.find('header');
+  const findAllFormGroups = () => wrapper.findAllComponents(GlFormGroup);
+  const findAllFormSelects = () => wrapper.findAllComponents(GlFormSelect);
+  const findAllButtons = () => wrapper.findAllComponents(GlButton);
+
+  const propsData = { availableRegions: [], environments: [], cancelPath: '#cancel-url' };
+
+  beforeEach(() => {
+    wrapper = shallowMount(GcpRegionsForm, { propsData });
+  });
+
+  afterEach(() => {
+    wrapper.destroy();
+  });
+
+  it('contains header', () => {
+    expect(findHeader().exists()).toBe(true);
+  });
+
+  it('contains Regions form group', () => {
+    const formGroup = findAllFormGroups().at(0);
+    expect(formGroup.exists()).toBe(true);
+  });
+
+  it('contains Regions dropdown', () => {
+    const select = findAllFormSelects().at(0);
+    expect(select.exists()).toBe(true);
+  });
+
+  it('contains Environments form group', () => {
+    const formGroup = findAllFormGroups().at(1);
+    expect(formGroup.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(GcpRegionsForm.i18n.submitLabel);
+  });
+
+  it('contains Cancel button', () => {
+    const button = findAllButtons().at(1);
+    expect(button.exists()).toBe(true);
+    expect(button.text()).toBe(GcpRegionsForm.i18n.cancelLabel);
+    expect(button.attributes('href')).toBe('#cancel-url');
+  });
+});
diff --git a/spec/frontend/google_cloud/components/gcp_regions_list_spec.js b/spec/frontend/google_cloud/components/gcp_regions_list_spec.js
new file mode 100644
index 00000000000..ab0c17451e8
--- /dev/null
+++ b/spec/frontend/google_cloud/components/gcp_regions_list_spec.js
@@ -0,0 +1,79 @@
+import { mount } from '@vue/test-utils';
+import { GlButton, GlEmptyState, GlTable } from '@gitlab/ui';
+import GcpRegionsList from '~/google_cloud/components/gcp_regions_list.vue';
+
+describe('GcpRegions component', () => {
+  describe('when the project does not have any configured regions', () => {
+    let wrapper;
+
+    const findEmptyState = () => wrapper.findComponent(GlEmptyState);
+    const findButtonInEmptyState = () => findEmptyState().findComponent(GlButton);
+
+    beforeEach(() => {
+      const propsData = {
+        list: [],
+        createUrl: '#create-url',
+        emptyIllustrationUrl: '#empty-illustration-url',
+      };
+      wrapper = mount(GcpRegionsList, { propsData });
+    });
+
+    afterEach(() => {
+      wrapper.destroy();
+    });
+
+    it('shows the empty state component', () => {
+      expect(findEmptyState().exists()).toBe(true);
+    });
+    it('shows the link to create new service accounts', () => {
+      const button = findButtonInEmptyState();
+      expect(button.exists()).toBe(true);
+      expect(button.text()).toBe('Configure regions');
+      expect(button.attributes('href')).toBe('#create-url');
+    });
+  });
+
+  describe('when three gcp regions are passed via props', () => {
+    let wrapper;
+
+    const findTitle = () => wrapper.find('h2');
+    const findDescription = () => wrapper.find('p');
+    const findTable = () => wrapper.findComponent(GlTable);
+    const findRows = () => findTable().findAll('tr');
+    const findButton = () => wrapper.findComponent(GlButton);
+
+    beforeEach(() => {
+      const propsData = {
+        list: [{}, {}, {}],
+        createUrl: '#create-url',
+        emptyIllustrationUrl: '#empty-illustration-url',
+      };
+      wrapper = mount(GcpRegionsList, { propsData });
+    });
+
+    it('shows the title', () => {
+      expect(findTitle().text()).toBe('Regions');
+    });
+
+    it('shows the description', () => {
+      expect(findDescription().text()).toBe(
+        'Configure your environments to be deployed to specific geographical regions',
+      );
+    });
+
+    it('shows the table', () => {
+      expect(findTable().exists()).toBe(true);
+    });
+
+    it('table must have three rows + header row', () => {
+      expect(findRows()).toHaveLength(4);
+    });
+
+    it('shows the link to create new service accounts', () => {
+      const button = findButton();
+      expect(button.exists()).toBe(true);
+      expect(button.text()).toBe('Configure regions');
+      expect(button.attributes('href')).toBe('#create-url');
+    });
+  });
+});
diff --git a/spec/frontend/google_cloud/components/home_spec.js b/spec/frontend/google_cloud/components/home_spec.js
index 57cf831b19b..1ce97097374 100644
--- a/spec/frontend/google_cloud/components/home_spec.js
+++ b/spec/frontend/google_cloud/components/home_spec.js
@@ -18,7 +18,9 @@ describe('google_cloud Home component', () => {
 
   const TEST_HOME_PROPS = {
     serviceAccounts: [{}, {}],
+    gcpRegions: [{}, {}],
     createServiceAccountUrl: '#url-create-service-account',
+    configureGcpRegionsUrl: '#url-configure-gcp-regions',
     emptyIllustrationUrl: '#url-empty-illustration',
     enableCloudRunUrl: '#url-enable-cloud-run',
     enableCloudStorageUrl: '#enableCloudStorageUrl',