1 files changed, 150 insertions, 0 deletions
diff --git a/spec/frontend/user_lists/components/edit_user_list_spec.js b/spec/frontend/user_lists/components/edit_user_list_spec.js
new file mode 100644
index 00000000000..51a38e12916
--- /dev/null
+++ b/spec/frontend/user_lists/components/edit_user_list_spec.js
@@ -0,0 +1,150 @@
+import Vue from 'vue';
+import Vuex from 'vuex';
+import { createLocalVue, mount } from '@vue/test-utils';
+import { GlAlert, GlLoadingIcon } from '@gitlab/ui';
+import waitForPromises from 'helpers/wait_for_promises';
+import Api from '~/api';
+import createStore from '~/user_lists/store/edit';
+import EditUserList from '~/user_lists/components/edit_user_list.vue';
+import UserListForm from '~/user_lists/components/user_list_form.vue';
+import { userList } from '../../feature_flags/mock_data';
+import { redirectTo } from '~/lib/utils/url_utility';
+
+jest.mock('~/api');
+jest.mock('~/lib/utils/url_utility');
+
+const localVue = createLocalVue(Vue);
+localVue.use(Vuex);
+
+describe('user_lists/components/edit_user_list', () => {
+  let wrapper;
+
+  const setInputValue = value => wrapper.find('[data-testid="user-list-name"]').setValue(value);
+
+  const click = button => wrapper.find(`[data-testid="${button}"]`).trigger('click');
+  const clickSave = () => click('save-user-list');
+
+  const destroy = () => wrapper?.destroy();
+
+  const factory = () => {
+    destroy();
+
+    wrapper = mount(EditUserList, {
+      localVue,
+      store: createStore({ projectId: '1', userListIid: '2' }),
+      provide: {
+        userListsDocsPath: '/docs/user_lists',
+      },
+    });
+  };
+
+  afterEach(() => {
+    destroy();
+  });
+
+  describe('loading', () => {
+    beforeEach(() => {
+      Api.fetchFeatureFlagUserList.mockReturnValue(new Promise(() => {}));
+      factory();
+    });
+
+    it('should show a loading icon', () => {
+      expect(wrapper.find(GlLoadingIcon).exists()).toBe(true);
+    });
+  });
+
+  describe('loading error', () => {
+    const message = 'error creating list';
+    let alert;
+
+    beforeEach(async () => {
+      Api.fetchFeatureFlagUserList.mockRejectedValue({ message });
+      factory();
+      await waitForPromises();
+
+      alert = wrapper.find(GlAlert);
+    });
+
+    it('should show a flash with the error respopnse', () => {
+      expect(alert.text()).toContain(message);
+    });
+
+    it('should not be dismissible', async () => {
+      expect(alert.props('dismissible')).toBe(false);
+    });
+
+    it('should not show a user list form', () => {
+      expect(wrapper.find(UserListForm).exists()).toBe(false);
+    });
+  });
+
+  describe('update', () => {
+    beforeEach(() => {
+      Api.fetchFeatureFlagUserList.mockResolvedValue({ data: userList });
+      factory();
+
+      return wrapper.vm.$nextTick();
+    });
+
+    it('should link to the documentation', () => {
+      const link = wrapper.find('[data-testid="user-list-docs-link"]');
+      expect(link.attributes('href')).toBe('/docs/user_lists');
+    });
+
+    it('should link the cancel button to the user list details path', () => {
+      const link = wrapper.find('[data-testid="user-list-cancel"]');
+      expect(link.attributes('href')).toBe(userList.path);
+    });
+
+    it('should show the user list name in the title', () => {
+      expect(wrapper.find('[data-testid="user-list-title"]').text()).toBe(`Edit ${userList.name}`);
+    });
+
+    describe('success', () => {
+      beforeEach(() => {
+        Api.updateFeatureFlagUserList.mockResolvedValue({ data: userList });
+        setInputValue('test');
+        clickSave();
+        return wrapper.vm.$nextTick();
+      });
+
+      it('should create a user list with the entered name', () => {
+        expect(Api.updateFeatureFlagUserList).toHaveBeenCalledWith('1', {
+          name: 'test',
+          iid: userList.iid,
+        });
+      });
+
+      it('should redirect to the feature flag details page', () => {
+        expect(redirectTo).toHaveBeenCalledWith(userList.path);
+      });
+    });
+
+    describe('error', () => {
+      let alert;
+      let message;
+
+      beforeEach(async () => {
+        message = 'error creating list';
+        Api.updateFeatureFlagUserList.mockRejectedValue({ message });
+        setInputValue('test');
+        clickSave();
+        await waitForPromises();
+
+        alert = wrapper.find(GlAlert);
+      });
+
+      it('should show a flash with the error respopnse', () => {
+        expect(alert.text()).toContain(message);
+      });
+
+      it('should dismiss the error if dismiss is clicked', async () => {
+        alert.find('button').trigger('click');
+
+        await wrapper.vm.$nextTick();
+
+        expect(alert.exists()).toBe(false);
+      });
+    });
+  });
+});