summaryrefslogtreecommitdiff
path: root/spec/frontend/user_lists/components/new_user_list_spec.js
blob: 004cfb6ca07431845539465b937d7575e5ec8690 (plain)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
import { GlAlert } from '@gitlab/ui';
import { mount } from '@vue/test-utils';
import Vue, { nextTick } from 'vue';
import Vuex from 'vuex';
import waitForPromises from 'helpers/wait_for_promises';
import Api from '~/api';
import { redirectTo } from '~/lib/utils/url_utility'; // eslint-disable-line import/no-deprecated
import NewUserList from '~/user_lists/components/new_user_list.vue';
import createStore from '~/user_lists/store/new';
import { userList } from 'jest/feature_flags/mock_data';

jest.mock('~/api');
jest.mock('~/lib/utils/url_utility');

Vue.use(Vuex);

describe('user_lists/components/new_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');

  beforeEach(() => {
    wrapper = mount(NewUserList, {
      store: createStore({ projectId: '1' }),
      provide: {
        featureFlagsPath: '/feature_flags',
        userListsDocsPath: '/docs/user_lists',
      },
    });
  });

  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 buton back to feature flags', () => {
    const cancel = wrapper.find('[data-testid="user-list-cancel"');
    expect(cancel.attributes('href')).toBe('/feature_flags');
  });

  describe('create', () => {
    describe('success', () => {
      beforeEach(async () => {
        Api.createFeatureFlagUserList.mockResolvedValue({ data: userList });
        setInputValue('test');
        click('save-user-list');
        await nextTick();
      });

      it('should create a user list with the entered name', () => {
        expect(Api.createFeatureFlagUserList).toHaveBeenCalledWith('1', {
          name: 'test',
          user_xids: '',
        });
      });

      it('should redirect to the feature flag details page', () => {
        expect(redirectTo).toHaveBeenCalledWith(userList.path); // eslint-disable-line import/no-deprecated
      });
    });

    describe('error', () => {
      let alert;

      beforeEach(async () => {
        Api.createFeatureFlagUserList.mockRejectedValue({ message: 'error creating list' });
        setInputValue('test');
        click('save-user-list');

        await waitForPromises();

        alert = wrapper.findComponent(GlAlert);
      });

      it('should show a flash with the error respopnse', () => {
        expect(alert.text()).toContain('error creating list');
      });

      it('should dismiss the error when the dismiss button is clicked', async () => {
        alert.find('button').trigger('click');

        await nextTick();

        expect(alert.exists()).toBe(false);
      });
    });
  });
});