Add latest changes from gitlab-org/gitlab@master

3 files changed, 212 insertions, 0 deletions

diff --git a/spec/frontend/google_cloud/components/cloudsql/create_instance_form_spec.js b/spec/frontend/google_cloud/components/cloudsql/create_instance_form_spec.js
new file mode 100644
index 00000000000..de644a33b50
--- /dev/null
+++ b/spec/frontend/google_cloud/components/cloudsql/create_instance_form_spec.js
@@ -0,0 +1,103 @@
+import { GlFormCheckbox } from '@gitlab/ui';
+import { shallowMountExtended } from 'helpers/vue_test_utils_helper';
+import InstanceForm from '~/google_cloud/components/cloudsql/create_instance_form.vue';
+
+describe('google_cloud::cloudsql::create_instance_form component', () => {
+  let wrapper;
+
+  const findByTestId = (id) => wrapper.findByTestId(id);
+  const findCancelButton = () => findByTestId('cancel-button');
+  const findCheckbox = () => wrapper.findComponent(GlFormCheckbox);
+  const findHeader = () => wrapper.find('header');
+  const findSubmitButton = () => findByTestId('submit-button');
+
+  const propsData = {
+    gcpProjects: [],
+    refs: [],
+    cancelPath: '#cancel-url',
+    formTitle: 'mock form title',
+    formDescription: 'mock form description',
+    databaseVersions: [],
+    tiers: [],
+  };
+
+  beforeEach(() => {
+    wrapper = shallowMountExtended(InstanceForm, { propsData, stubs: { GlFormCheckbox } });
+  });
+
+  afterEach(() => {
+    wrapper.destroy();
+  });
+
+  it('contains header', () => {
+    expect(findHeader().exists()).toBe(true);
+  });
+
+  it('contains GCP project form group', () => {
+    const formGroup = findByTestId('form_group_gcp_project');
+    expect(formGroup.exists()).toBe(true);
+    expect(formGroup.attributes('label')).toBe(InstanceForm.i18n.gcpProjectLabel);
+    expect(formGroup.attributes('description')).toBe(InstanceForm.i18n.gcpProjectDescription);
+  });
+
+  it('contains GCP project dropdown', () => {
+    const select = findByTestId('select_gcp_project');
+    expect(select.exists()).toBe(true);
+  });
+
+  it('contains Environments form group', () => {
+    const formGroup = findByTestId('form_group_environments');
+    expect(formGroup.exists()).toBe(true);
+    expect(formGroup.attributes('label')).toBe(InstanceForm.i18n.refsLabel);
+    expect(formGroup.attributes('description')).toBe(InstanceForm.i18n.refsDescription);
+  });
+
+  it('contains Environments dropdown', () => {
+    const select = findByTestId('select_environments');
+    expect(select.exists()).toBe(true);
+  });
+
+  it('contains Tier form group', () => {
+    const formGroup = findByTestId('form_group_tier');
+    expect(formGroup.exists()).toBe(true);
+    expect(formGroup.attributes('label')).toBe(InstanceForm.i18n.tierLabel);
+    expect(formGroup.attributes('description')).toBe(InstanceForm.i18n.tierDescription);
+  });
+
+  it('contains Tier dropdown', () => {
+    const select = findByTestId('select_tier');
+    expect(select.exists()).toBe(true);
+  });
+
+  it('contains Database Version form group', () => {
+    const formGroup = findByTestId('form_group_database_version');
+    expect(formGroup.exists()).toBe(true);
+    expect(formGroup.attributes('label')).toBe(InstanceForm.i18n.databaseVersionLabel);
+  });
+
+  it('contains Database Version dropdown', () => {
+    const select = findByTestId('select_database_version');
+    expect(select.exists()).toBe(true);
+  });
+
+  it('contains Submit button', () => {
+    expect(findSubmitButton().exists()).toBe(true);
+    expect(findSubmitButton().text()).toBe(InstanceForm.i18n.submitLabel);
+  });
+
+  it('contains Cancel button', () => {
+    expect(findCancelButton().exists()).toBe(true);
+    expect(findCancelButton().text()).toBe(InstanceForm.i18n.cancelLabel);
+    expect(findCancelButton().attributes('href')).toBe('#cancel-url');
+  });
+
+  it('contains Confirmation checkbox', () => {
+    const checkbox = findCheckbox();
+    expect(checkbox.text()).toBe(InstanceForm.i18n.checkboxLabel);
+  });
+
+  it('checkbox must be required', () => {
+    const checkbox = findCheckbox();
+    expect(checkbox.attributes('required')).toBe('true');
+  });
+});
diff --git a/spec/frontend/google_cloud/components/cloudsql/instance_table_spec.js b/spec/frontend/google_cloud/components/cloudsql/instance_table_spec.js
new file mode 100644
index 00000000000..286f2b8e379
--- /dev/null
+++ b/spec/frontend/google_cloud/components/cloudsql/instance_table_spec.js
@@ -0,0 +1,65 @@
+import { shallowMount } from '@vue/test-utils';
+import { GlEmptyState, GlTable } from '@gitlab/ui';
+import InstanceTable from '~/google_cloud/components/cloudsql/instance_table.vue';
+
+describe('google_cloud::databases::service_table component', () => {
+  let wrapper;
+
+  const findEmptyState = () => wrapper.findComponent(GlEmptyState);
+  const findTable = () => wrapper.findComponent(GlTable);
+
+  afterEach(() => {
+    wrapper.destroy();
+  });
+
+  describe('when there are no instances', () => {
+    beforeEach(() => {
+      const propsData = {
+        cloudsqlInstances: [],
+        emptyIllustrationUrl: '#empty-illustration-url',
+      };
+      wrapper = shallowMount(InstanceTable, { propsData });
+    });
+
+    it('should depict empty state', () => {
+      const emptyState = findEmptyState();
+      expect(emptyState.exists()).toBe(true);
+      expect(emptyState.attributes('title')).toBe(InstanceTable.i18n.noInstancesTitle);
+      expect(emptyState.attributes('description')).toBe(InstanceTable.i18n.noInstancesDescription);
+    });
+  });
+
+  describe('when there are three instances', () => {
+    beforeEach(() => {
+      const propsData = {
+        cloudsqlInstances: [
+          {
+            ref: '*',
+            gcp_project: 'test-gcp-project',
+            instance_name: 'postgres-14-instance',
+            version: 'POSTGRES_14',
+          },
+          {
+            ref: 'production',
+            gcp_project: 'prod-gcp-project',
+            instance_name: 'postgres-14-instance',
+            version: 'POSTGRES_14',
+          },
+          {
+            ref: 'staging',
+            gcp_project: 'test-gcp-project',
+            instance_name: 'postgres-14-instance',
+            version: 'POSTGRES_14',
+          },
+        ],
+        emptyIllustrationUrl: '#empty-illustration-url',
+      };
+      wrapper = shallowMount(InstanceTable, { propsData });
+    });
+
+    it('should contain a table', () => {
+      const table = findTable();
+      expect(table.exists()).toBe(true);
+    });
+  });
+});
diff --git a/spec/frontend/google_cloud/components/databases/service_table_spec.js b/spec/frontend/google_cloud/components/databases/service_table_spec.js
new file mode 100644
index 00000000000..142e32c1a4b
--- /dev/null
+++ b/spec/frontend/google_cloud/components/databases/service_table_spec.js
@@ -0,0 +1,44 @@
+import { GlTable } from '@gitlab/ui';
+import { mountExtended } from 'helpers/vue_test_utils_helper';
+import ServiceTable from '~/google_cloud/components/databases/service_table.vue';
+
+describe('google_cloud::databases::service_table component', () => {
+  let wrapper;
+
+  const findTable = () => wrapper.findComponent(GlTable);
+
+  beforeEach(() => {
+    const propsData = {
+      cloudsqlPostgresUrl: '#url-cloudsql-postgres',
+      cloudsqlMysqlUrl: '#url-cloudsql-mysql',
+      cloudsqlSqlserverUrl: '#url-cloudsql-sqlserver',
+      alloydbPostgresUrl: '#url-alloydb-postgres',
+      memorystoreRedisUrl: '#url-memorystore-redis',
+      firestoreUrl: '#url-firestore',
+    };
+    wrapper = mountExtended(ServiceTable, { propsData });
+  });
+
+  afterEach(() => {
+    wrapper.destroy();
+  });
+
+  it('should contain a table', () => {
+    expect(findTable().exists()).toBe(true);
+  });
+
+  it.each`
+    name                    | testId                         | url
+    ${'cloudsql-postgres'}  | ${'button-cloudsql-postgres'}  | ${'#url-cloudsql-postgres'}
+    ${'cloudsql-mysql'}     | ${'button-cloudsql-mysql'}     | ${'#url-cloudsql-mysql'}
+    ${'cloudsql-sqlserver'} | ${'button-cloudsql-sqlserver'} | ${'#url-cloudsql-sqlserver'}
+    ${'alloydb-postgres'}   | ${'button-alloydb-postgres'}   | ${'#url-alloydb-postgres'}
+    ${'memorystore-redis'}  | ${'button-memorystore-redis'}  | ${'#url-memorystore-redis'}
+    ${'firestore'}          | ${'button-firestore'}          | ${'#url-firestore'}
+  `('renders $name button with correct url', ({ testId, url }) => {
+    const button = wrapper.findByTestId(testId);
+
+    expect(button.exists()).toBe(true);
+    expect(button.attributes('href')).toBe(url);
+  });
+});