1 files changed, 195 insertions, 0 deletions
diff --git a/spec/frontend/user_lists/components/user_lists_spec.js b/spec/frontend/user_lists/components/user_lists_spec.js
new file mode 100644
index 00000000000..7a33c6faac9
--- /dev/null
+++ b/spec/frontend/user_lists/components/user_lists_spec.js
@@ -0,0 +1,195 @@
+import { GlEmptyState, GlLoadingIcon } from '@gitlab/ui';
+import { within } from '@testing-library/dom';
+import { mount, createWrapper } from '@vue/test-utils';
+import Vue from 'vue';
+import Vuex from 'vuex';
+import waitForPromises from 'helpers/wait_for_promises';
+import Api from '~/api';
+import UserListsComponent from '~/user_lists/components/user_lists.vue';
+import UserListsTable from '~/user_lists/components/user_lists_table.vue';
+import createStore from '~/user_lists/store/index';
+import TablePagination from '~/vue_shared/components/pagination/table_pagination.vue';
+import { userList } from '../../feature_flags/mock_data';
+
+jest.mock('~/api');
+
+Vue.use(Vuex);
+
+describe('~/user_lists/components/user_lists.vue', () => {
+  const mockProvide = {
+    newUserListPath: '/user-lists/new',
+    featureFlagsHelpPagePath: '/help/feature-flags',
+    errorStateSvgPath: '/assets/illustrations/feature_flag.svg',
+  };
+
+  const mockState = {
+    projectId: '1',
+  };
+
+  let wrapper;
+  let store;
+
+  const factory = (provide = mockProvide, fn = mount) => {
+    store = createStore(mockState);
+    wrapper = fn(UserListsComponent, {
+      store,
+      provide,
+    });
+  };
+
+  const newButton = () => within(wrapper.element).queryAllByText('New user list');
+
+  afterEach(() => {
+    wrapper.destroy();
+    wrapper = null;
+  });
+
+  describe('without permissions', () => {
+    const provideData = {
+      ...mockProvide,
+      newUserListPath: null,
+    };
+
+    beforeEach(() => {
+      Api.fetchFeatureFlagUserLists.mockResolvedValue({ data: [], headers: {} });
+      factory(provideData);
+    });
+
+    it('does not render new user list button', () => {
+      expect(newButton()).toHaveLength(0);
+    });
+  });
+
+  describe('loading state', () => {
+    it('renders a loading icon', () => {
+      Api.fetchFeatureFlagUserLists.mockReturnValue(new Promise(() => {}));
+
+      factory();
+
+      const loadingElement = wrapper.findComponent(GlLoadingIcon);
+
+      expect(loadingElement.exists()).toBe(true);
+      expect(loadingElement.props('label')).toEqual('Loading user lists');
+    });
+  });
+
+  describe('successful request', () => {
+    describe('without user lists', () => {
+      let emptyState;
+
+      beforeEach(async () => {
+        Api.fetchFeatureFlagUserLists.mockResolvedValue({ data: [], headers: {} });
+
+        factory();
+        await waitForPromises();
+        await Vue.nextTick();
+
+        emptyState = wrapper.findComponent(GlEmptyState);
+      });
+
+      it('should render the empty state', async () => {
+        expect(emptyState.exists()).toBe(true);
+      });
+
+      it('renders new feature flag button', () => {
+        expect(newButton()).not.toHaveLength(0);
+      });
+
+      it('renders generic title', () => {
+        const title = createWrapper(
+          within(emptyState.element).getByText('Get started with user lists'),
+        );
+        expect(title.exists()).toBe(true);
+      });
+
+      it('renders generic description', () => {
+        const description = createWrapper(
+          within(emptyState.element).getByText(
+            'User lists allow you to define a set of users to use with Feature Flags.',
+          ),
+        );
+        expect(description.exists()).toBe(true);
+      });
+    });
+
+    describe('with paginated user lists', () => {
+      let table;
+
+      beforeEach(async () => {
+        Api.fetchFeatureFlagUserLists.mockResolvedValue({
+          data: [userList],
+          headers: {
+            'x-next-page': '2',
+            'x-page': '1',
+            'X-Per-Page': '2',
+            'X-Prev-Page': '',
+            'X-TOTAL': '37',
+            'X-Total-Pages': '5',
+          },
+        });
+
+        factory();
+        jest.spyOn(store, 'dispatch');
+        await Vue.nextTick();
+        table = wrapper.findComponent(UserListsTable);
+      });
+
+      it('should render a table with feature flags', () => {
+        expect(table.exists()).toBe(true);
+        expect(table.props('userLists')).toEqual([userList]);
+      });
+
+      it('renders new feature flag button', () => {
+        expect(newButton()).not.toHaveLength(0);
+      });
+
+      describe('pagination', () => {
+        let pagination;
+
+        beforeEach(() => {
+          pagination = wrapper.findComponent(TablePagination);
+        });
+
+        it('should render pagination', () => {
+          expect(pagination.exists()).toBe(true);
+        });
+
+        it('should make an API request when page is clicked', () => {
+          jest.spyOn(store, 'dispatch');
+          pagination.vm.change('4');
+
+          expect(store.dispatch).toHaveBeenCalledWith('setUserListsOptions', {
+            page: '4',
+          });
+        });
+      });
+    });
+  });
+
+  describe('unsuccessful request', () => {
+    beforeEach(async () => {
+      Api.fetchFeatureFlagUserLists.mockRejectedValue();
+      factory();
+
+      await Vue.nextTick();
+    });
+
+    it('should render error state', () => {
+      const emptyState = wrapper.findComponent(GlEmptyState);
+      const title = createWrapper(
+        within(emptyState.element).getByText('There was an error fetching the user lists.'),
+      );
+      expect(title.exists()).toBe(true);
+      const description = createWrapper(
+        within(emptyState.element).getByText(
+          'Try again in a few moments or contact your support team.',
+        ),
+      );
+      expect(description.exists()).toBe(true);
+    });
+
+    it('renders new feature flag button', () => {
+      expect(newButton()).not.toHaveLength(0);
+    });
+  });
+});