1 files changed, 113 insertions, 0 deletions
diff --git a/spec/frontend/organizations/new/components/app_spec.js b/spec/frontend/organizations/new/components/app_spec.js
new file mode 100644
index 00000000000..06d30ad6b12
--- /dev/null
+++ b/spec/frontend/organizations/new/components/app_spec.js
@@ -0,0 +1,113 @@
+import VueApollo from 'vue-apollo';
+import Vue, { nextTick } from 'vue';
+
+import { shallowMountExtended } from 'helpers/vue_test_utils_helper';
+import App from '~/organizations/new/components/app.vue';
+import resolvers from '~/organizations/shared/graphql/resolvers';
+import NewEditForm from '~/organizations/shared/components/new_edit_form.vue';
+import { visitUrlWithAlerts } from '~/lib/utils/url_utility';
+import { createOrganizationResponse } from '~/organizations/mock_data';
+import { createAlert } from '~/alert';
+import createMockApollo from 'helpers/mock_apollo_helper';
+import waitForPromises from 'helpers/wait_for_promises';
+
+Vue.use(VueApollo);
+jest.useFakeTimers();
+
+jest.mock('~/lib/utils/url_utility');
+jest.mock('~/alert');
+
+describe('OrganizationNewApp', () => {
+  let wrapper;
+  let mockApollo;
+
+  const createComponent = ({ mockResolvers = resolvers } = {}) => {
+    mockApollo = createMockApollo([], mockResolvers);
+
+    wrapper = shallowMountExtended(App, { apolloProvider: mockApollo });
+  };
+
+  const findForm = () => wrapper.findComponent(NewEditForm);
+  const submitForm = async () => {
+    findForm().vm.$emit('submit', { name: 'Foo bar', path: 'foo-bar' });
+    await nextTick();
+  };
+
+  afterEach(() => {
+    mockApollo = null;
+  });
+
+  it('renders form', () => {
+    createComponent();
+
+    expect(findForm().exists()).toBe(true);
+  });
+
+  describe('when form is submitted', () => {
+    describe('when API is loading', () => {
+      beforeEach(async () => {
+        const mockResolvers = {
+          Mutation: {
+            createOrganization: jest.fn().mockReturnValueOnce(new Promise(() => {})),
+          },
+        };
+
+        createComponent({ mockResolvers });
+
+        await submitForm();
+      });
+
+      it('sets `NewEditForm` `loading` prop to `true`', () => {
+        expect(findForm().props('loading')).toBe(true);
+      });
+    });
+
+    describe('when API request is successful', () => {
+      beforeEach(async () => {
+        createComponent();
+        await submitForm();
+        jest.runAllTimers();
+        await waitForPromises();
+      });
+
+      it('redirects user to organization path', () => {
+        expect(visitUrlWithAlerts).toHaveBeenCalledWith(
+          createOrganizationResponse.organization.path,
+          [
+            {
+              id: 'organization-successfully-created',
+              title: 'Organization successfully created.',
+              message: 'You can now start using your new organization.',
+              variant: 'success',
+            },
+          ],
+        );
+      });
+    });
+
+    describe('when API request is not successful', () => {
+      const error = new Error();
+
+      beforeEach(async () => {
+        const mockResolvers = {
+          Mutation: {
+            createOrganization: jest.fn().mockRejectedValueOnce(error),
+          },
+        };
+
+        createComponent({ mockResolvers });
+        await submitForm();
+        jest.runAllTimers();
+        await waitForPromises();
+      });
+
+      it('displays error alert', () => {
+        expect(createAlert).toHaveBeenCalledWith({
+          message: 'An error occurred creating an organization. Please try again.',
+          error,
+          captureError: true,
+        });
+      });
+    });
+  });
+});