diff --git a/webpack/assets/javascripts/react_app/components/users/PersonalAccessTokens/PersonalAccessTokenModal.test.js b/webpack/assets/javascripts/react_app/components/users/PersonalAccessTokens/PersonalAccessTokenModal.test.js index 9d1c30b94c61..94516aa4dc3f 100644 --- a/webpack/assets/javascripts/react_app/components/users/PersonalAccessTokens/PersonalAccessTokenModal.test.js +++ b/webpack/assets/javascripts/react_app/components/users/PersonalAccessTokens/PersonalAccessTokenModal.test.js @@ -18,11 +18,26 @@ jest.useFakeTimers(); jest.mock('../../../redux/API/APIActions'); const middlewares = [thunk]; const mockStore = configureMockStore(middlewares); -const store = mockStore({}); +const store = mockStore({ + API: {}, + tokens: [], + personalAccessTokens: { + newPersonalAccessToken: {}, + tokens: [], + }, +}); describe('Personal access token modal', () => { - /*it('fills input fields and submits form with errors', async () => { + it.only('fills input fields and successfully submits form', async () => { + //console.log(APIActions); const spy = jest.spyOn(APIActions, 'post'); + console.log(`POST: ${APIActions.post()}`); + APIActions.post.mockImplementation(() => { + console.log('PIZZA'); + return null; + }); + console.log(`POST2: ${APIActions.post()}`); + console.log(`spy: ${spy}`); render( @@ -38,47 +53,51 @@ describe('Personal access token modal', () => { jest.advanceTimersByTime(1000); }); - expect( - screen.getByText('Create Personal Access Token') - ).toBeInTheDocument(); - + const nameField = screen.getByLabelText('personal-token-name'); const atRadioButton = screen.getByText('At'); const dateField = screen.getByLabelText('expires-date'); const timeField = screen.getByLabelText('expires-time'); await act(async () => { - fireEvent.click(atRadioButton); - fireEvent.change(dateField, { - target: { value: '2000-01-01' }, + fireEvent.change(nameField, { + target: { value: 'token-name' }, }); }); await act(async () => { - fireEvent.click(screen.getByLabelText('confirm-button')); + fireEvent.click(atRadioButton); + fireEvent.change(dateField, { + target: { value: '2035-01-01' }, + }); }); - expect(screen.queryAllByText('Fill out the name')).toHaveLength(1); - expect(screen.queryAllByText('Cannot be in the past')).toHaveLength(1); - await act(async () => { fireEvent.change(timeField, { - target: { value: 'text' }, + target: { value: '01:00:00' }, }); }); - expect(screen.queryAllByText('Enter valid time: HH:MM:SS')).toHaveLength(1); - - await waitFor(() => expect(spy).toThrow()); - });*/ + await act(async () => { + fireEvent.click(screen.getByLabelText('confirm-button')); + }); - it.only('fills input fields and successfully submits form', async () => { - //console.log(APIActions); - const spy = jest.spyOn(APIActions, 'post'); - APIActions.post.mockImplementation(async () => { - console.log('PIZZA'); + await waitFor(() => expect(spy).toBeCalled()); + expect(spy).toHaveBeenCalledWith({ + url: '/url', + values: { + name: 'token-name', + expires_at: '2035-01-01 01:00:00', + controller: 'personal_access_tokens', + }, + item: 'personal_access_token', + message: __('Personal Access Token was successfully created.'), + actions: undefined, + successCallback: expect.any(Function), }); + }); - //API.post.mockClear(); + /*it('fills input fields and submits form with errors', async () => { + const spy = jest.spyOn(APIActions, 'post'); render( @@ -94,46 +113,36 @@ describe('Personal access token modal', () => { jest.advanceTimersByTime(1000); }); - const nameField = screen.getByLabelText('personal-token-name'); + expect( + screen.getByText('Create Personal Access Token') + ).toBeInTheDocument(); + const atRadioButton = screen.getByText('At'); const dateField = screen.getByLabelText('expires-date'); const timeField = screen.getByLabelText('expires-time'); await act(async () => { - fireEvent.change(nameField, { - target: { value: 'token-name' }, + fireEvent.click(atRadioButton); + fireEvent.change(dateField, { + target: { value: '2000-01-01' }, }); }); await act(async () => { - fireEvent.click(atRadioButton); - fireEvent.change(dateField, { - target: { value: '2035-01-01' }, - }); + fireEvent.click(screen.getByLabelText('confirm-button')); }); + expect(screen.queryAllByText('Fill out the name')).toHaveLength(1); + expect(screen.queryAllByText('Cannot be in the past')).toHaveLength(1); + await act(async () => { fireEvent.change(timeField, { - target: { value: '01:00:00' }, + target: { value: 'text' }, }); }); - await act(async () => { - fireEvent.click(screen.getByLabelText('confirm-button')); - }); + expect(screen.queryAllByText('Enter valid time: HH:MM:SS')).toHaveLength(1); - await waitFor(() => expect(spy).toBeCalled()); - expect(spy).toHaveBeenCalledWith({ - url: '/url', - values: { - name: 'token-name', - expires_at: '2035-01-01 01:00:00', - controller: 'personal_access_tokens', - }, - item: 'personal_access_token', - message: __('Personal Access Token was successfully created.'), - actions: undefined, - successCallback: expect.any(Function), - }); - }); + await waitFor(() => expect(spy).toThrow()); + });*/ }); diff --git a/webpack/assets/javascripts/react_app/components/users/PersonalAccessTokens/PersonalAccessTokensSelectors.js b/webpack/assets/javascripts/react_app/components/users/PersonalAccessTokens/PersonalAccessTokensSelectors.js index dba28c3f08eb..07d5540ce7a9 100644 --- a/webpack/assets/javascripts/react_app/components/users/PersonalAccessTokens/PersonalAccessTokensSelectors.js +++ b/webpack/assets/javascripts/react_app/components/users/PersonalAccessTokens/PersonalAccessTokensSelectors.js @@ -11,7 +11,10 @@ import { export const selectNewPersonalAccessToken = state => state.personalAccessTokens.newPersonalAccessToken; -export const selectTokens = state => state.personalAccessTokens.tokens; +export const selectTokens = state => { + console.log(state); + return state.personalAccessTokens.tokens; +}; export const selectIsSubmitting = state => selectAPIStatus(state, PERSONAL_ACCESS_TOKENS_REQUEST) === STATUS.PENDING ||