1 files changed, 44 insertions, 0 deletions
diff --git a/spec/frontend/google_cloud/databases/service_table_spec.js b/spec/frontend/google_cloud/databases/service_table_spec.js
new file mode 100644
index 00000000000..4a622e544e1
--- /dev/null
+++ b/spec/frontend/google_cloud/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/databases/service_table.vue';
+
+describe('google_cloud/databases/service_table', () => {
+  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);
+  });
+});