summaryrefslogtreecommitdiff
path: root/spec/frontend/google_cloud/components
diff options
context:
space:
mode:
Diffstat (limited to 'spec/frontend/google_cloud/components')
-rw-r--r--spec/frontend/google_cloud/components/app_spec.js86
-rw-r--r--spec/frontend/google_cloud/components/errors/gcp_error_spec.js34
-rw-r--r--spec/frontend/google_cloud/components/errors/no_gcp_projects_spec.js33
-rw-r--r--spec/frontend/google_cloud/components/home_spec.js61
-rw-r--r--spec/frontend/google_cloud/components/service_accounts_form_spec.js59
-rw-r--r--spec/frontend/google_cloud/components/service_accounts_list_spec.js (renamed from spec/frontend/google_cloud/components/service_accounts_spec.js)6
6 files changed, 236 insertions, 43 deletions
diff --git a/spec/frontend/google_cloud/components/app_spec.js b/spec/frontend/google_cloud/components/app_spec.js
index bb86eb5c22e..570ac1e6ed1 100644
--- a/spec/frontend/google_cloud/components/app_spec.js
+++ b/spec/frontend/google_cloud/components/app_spec.js
@@ -1,65 +1,71 @@
import { shallowMount } from '@vue/test-utils';
-import { GlTab, GlTabs } from '@gitlab/ui';
+import { mapValues } from 'lodash';
import App from '~/google_cloud/components/app.vue';
+import Home from '~/google_cloud/components/home.vue';
import IncubationBanner from '~/google_cloud/components/incubation_banner.vue';
-import ServiceAccounts from '~/google_cloud/components/service_accounts.vue';
+import ServiceAccountsForm from '~/google_cloud/components/service_accounts_form.vue';
+import GcpError from '~/google_cloud/components/errors/gcp_error.vue';
+import NoGcpProjects from '~/google_cloud/components/errors/no_gcp_projects.vue';
+
+const BASE_FEEDBACK_URL =
+ 'https://gitlab.com/gitlab-org/incubation-engineering/five-minute-production/meta/-/issues/new';
+const SCREEN_COMPONENTS = {
+ Home,
+ ServiceAccountsForm,
+ GcpError,
+ NoGcpProjects,
+};
+const SERVICE_ACCOUNTS_FORM_PROPS = {
+ gcpProjects: [1, 2, 3],
+ environments: [4, 5, 6],
+ cancelPath: '',
+};
+const HOME_PROPS = {
+ serviceAccounts: [{}, {}],
+ createServiceAccountUrl: '#url-create-service-account',
+ emptyIllustrationUrl: '#url-empty-illustration',
+};
describe('google_cloud App component', () => {
let wrapper;
const findIncubationBanner = () => wrapper.findComponent(IncubationBanner);
- const findTabs = () => wrapper.findComponent(GlTabs);
- const findTabItems = () => findTabs().findAllComponents(GlTab);
- const findConfigurationTab = () => findTabItems().at(0);
- const findDeploymentTab = () => findTabItems().at(1);
- const findServicesTab = () => findTabItems().at(2);
- const findServiceAccounts = () => findConfigurationTab().findComponent(ServiceAccounts);
-
- beforeEach(() => {
- const propsData = {
- serviceAccounts: [{}, {}],
- createServiceAccountUrl: '#url-create-service-account',
- emptyIllustrationUrl: '#url-empty-illustration',
- };
- wrapper = shallowMount(App, { propsData });
- });
afterEach(() => {
wrapper.destroy();
});
- it('should contain incubation banner', () => {
- expect(findIncubationBanner().exists()).toBe(true);
- });
-
- describe('google_cloud App tabs', () => {
- it('should contain tabs', () => {
- expect(findTabs().exists()).toBe(true);
- });
+ describe.each`
+ screen | extraProps | componentName
+ ${'gcp_error'} | ${{ error: 'mock_gcp_client_error' }} | ${'GcpError'}
+ ${'no_gcp_projects'} | ${{}} | ${'NoGcpProjects'}
+ ${'service_accounts_form'} | ${SERVICE_ACCOUNTS_FORM_PROPS} | ${'ServiceAccountsForm'}
+ ${'home'} | ${HOME_PROPS} | ${'Home'}
+ `('for screen=$screen', ({ screen, extraProps, componentName }) => {
+ const component = SCREEN_COMPONENTS[componentName];
- it('should contain three tab items', () => {
- expect(findTabItems().length).toBe(3);
+ beforeEach(() => {
+ wrapper = shallowMount(App, { propsData: { screen, ...extraProps } });
});
- describe('configuration tab', () => {
- it('should exist', () => {
- expect(findConfigurationTab().exists()).toBe(true);
- });
+ it(`renders only ${componentName}`, () => {
+ const existences = mapValues(SCREEN_COMPONENTS, (x) => wrapper.findComponent(x).exists());
- it('should contain service accounts component', () => {
- expect(findServiceAccounts().exists()).toBe(true);
+ expect(existences).toEqual({
+ ...mapValues(SCREEN_COMPONENTS, () => false),
+ [componentName]: true,
});
});
- describe('deployments tab', () => {
- it('should exist', () => {
- expect(findDeploymentTab().exists()).toBe(true);
- });
+ it(`renders the ${componentName} with props`, () => {
+ expect(wrapper.findComponent(component).props()).toEqual(extraProps);
});
- describe('services tab', () => {
- it('should exist', () => {
- expect(findServicesTab().exists()).toBe(true);
+ it('renders incubation banner', () => {
+ expect(findIncubationBanner().props()).toEqual({
+ shareFeedbackUrl: `${BASE_FEEDBACK_URL}?issuable_template=general_feedback`,
+ reportBugUrl: `${BASE_FEEDBACK_URL}?issuable_template=report_bug`,
+ featureRequestUrl: `${BASE_FEEDBACK_URL}?issuable_template=feature_request`,
});
});
});
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/home_spec.js b/spec/frontend/google_cloud/components/home_spec.js
new file mode 100644
index 00000000000..9b4c3a79f11
--- /dev/null
+++ b/spec/frontend/google_cloud/components/home_spec.js
@@ -0,0 +1,61 @@
+import { shallowMount } from '@vue/test-utils';
+import { GlTab, GlTabs } from '@gitlab/ui';
+import Home from '~/google_cloud/components/home.vue';
+import ServiceAccountsList from '~/google_cloud/components/service_accounts_list.vue';
+
+describe('google_cloud Home component', () => {
+ let wrapper;
+
+ const findTabs = () => wrapper.findComponent(GlTabs);
+ const findTabItems = () => findTabs().findAllComponents(GlTab);
+ const findTabItemsModel = () =>
+ findTabs()
+ .findAllComponents(GlTab)
+ .wrappers.map((x) => ({
+ title: x.attributes('title'),
+ disabled: x.attributes('disabled'),
+ }));
+
+ const TEST_HOME_PROPS = {
+ serviceAccounts: [{}, {}],
+ createServiceAccountUrl: '#url-create-service-account',
+ emptyIllustrationUrl: '#url-empty-illustration',
+ };
+
+ beforeEach(() => {
+ const propsData = {
+ screen: 'home',
+ ...TEST_HOME_PROPS,
+ };
+ wrapper = shallowMount(Home, { propsData });
+ });
+
+ afterEach(() => {
+ wrapper.destroy();
+ });
+
+ describe('google_cloud App tabs', () => {
+ it('should contain tabs', () => {
+ expect(findTabs().exists()).toBe(true);
+ });
+
+ it('should contain three tab items', () => {
+ expect(findTabItemsModel()).toEqual([
+ { title: 'Configuration', disabled: undefined },
+ { title: 'Deployments', disabled: '' },
+ { title: 'Services', disabled: '' },
+ ]);
+ });
+
+ describe('configuration tab', () => {
+ it('should contain service accounts component', () => {
+ const serviceAccounts = findTabItems().at(0).findComponent(ServiceAccountsList);
+ expect(serviceAccounts.props()).toEqual({
+ list: TEST_HOME_PROPS.serviceAccounts,
+ createUrl: TEST_HOME_PROPS.createServiceAccountUrl,
+ emptyIllustrationUrl: TEST_HOME_PROPS.emptyIllustrationUrl,
+ });
+ });
+ });
+ });
+});
diff --git a/spec/frontend/google_cloud/components/service_accounts_form_spec.js b/spec/frontend/google_cloud/components/service_accounts_form_spec.js
new file mode 100644
index 00000000000..5394d0cdaef
--- /dev/null
+++ b/spec/frontend/google_cloud/components/service_accounts_form_spec.js
@@ -0,0 +1,59 @@
+import { shallowMount } from '@vue/test-utils';
+import { GlButton, GlFormGroup, GlFormSelect } from '@gitlab/ui';
+import ServiceAccountsForm from '~/google_cloud/components/service_accounts_form.vue';
+
+describe('ServiceAccountsForm 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 = { gcpProjects: [], environments: [], cancelPath: '#cancel-url' };
+
+ beforeEach(() => {
+ wrapper = shallowMount(ServiceAccountsForm, { propsData });
+ });
+
+ afterEach(() => {
+ wrapper.destroy();
+ });
+
+ 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', () => {
View Lorry Controller Status