diff options
Diffstat (limited to 'spec/frontend/access_tokens/components/access_token_table_app_spec.js')
| -rw-r--r-- | spec/frontend/access_tokens/components/access_token_table_app_spec.js | 147 |
1 files changed, 91 insertions, 56 deletions
diff --git a/spec/frontend/access_tokens/components/access_token_table_app_spec.js b/spec/frontend/access_tokens/components/access_token_table_app_spec.js index aed3db4aa4c..2fa14810578 100644 --- a/spec/frontend/access_tokens/components/access_token_table_app_spec.js +++ b/spec/frontend/access_tokens/components/access_token_table_app_spec.js @@ -1,6 +1,6 @@ import { GlButton, GlPagination, GlTable } from '@gitlab/ui'; -import { mount } from '@vue/test-utils'; import { nextTick } from 'vue'; +import { mountExtended } from 'helpers/vue_test_utils_helper'; import AccessTokenTableApp from '~/access_tokens/components/access_token_table_app.vue'; import { EVENT_SUCCESS, PAGE_SIZE } from '~/access_tokens/components/constants'; import { __, s__, sprintf } from '~/locale'; @@ -11,7 +11,7 @@ describe('~/access_tokens/components/access_token_table_app', () => { const accessTokenType = 'personal access token'; const accessTokenTypePlural = 'personal access tokens'; - const initialActiveAccessTokens = []; + const information = undefined; const noActiveTokensMessage = 'This user has no active personal access tokens.'; const showRole = false; @@ -43,11 +43,12 @@ describe('~/access_tokens/components/access_token_table_app', () => { ]; const createComponent = (props = {}) => { - wrapper = mount(AccessTokenTableApp, { + wrapper = mountExtended(AccessTokenTableApp, { provide: { accessTokenType, accessTokenTypePlural, - initialActiveAccessTokens, + information, + initialActiveAccessTokens: defaultActiveAccessTokens, noActiveTokensMessage, showRole, ...props, @@ -71,8 +72,8 @@ describe('~/access_tokens/components/access_token_table_app', () => { wrapper?.destroy(); }); - it('should render the `GlTable` with default empty message', () => { - createComponent(); + it('should render an empty table with a default message', () => { + createComponent({ initialActiveAccessTokens: [] }); const cells = findCells(); expect(cells).toHaveLength(1); @@ -81,58 +82,61 @@ describe('~/access_tokens/components/access_token_table_app', () => { ); }); - it('should render the `GlTable` with custom empty message', () => { + it('should render an empty table with a custom message', () => { const noTokensMessage = 'This group has no active access tokens.'; - createComponent({ noActiveTokensMessage: noTokensMessage }); + createComponent({ initialActiveAccessTokens: [], noActiveTokensMessage: noTokensMessage }); const cells = findCells(); expect(cells).toHaveLength(1); expect(cells.at(0).text()).toBe(noTokensMessage); }); - it('should render an h5 element', () => { + it('should show a title indicating the amount of tokens', () => { createComponent(); expect(wrapper.find('h5').text()).toBe( sprintf(__('Active %{accessTokenTypePlural} (%{totalAccessTokens})'), { accessTokenTypePlural, - totalAccessTokens: initialActiveAccessTokens.length, + totalAccessTokens: defaultActiveAccessTokens.length, }), ); }); - it('should render the `GlTable` component with default 6 column headers', () => { - createComponent(); + it('should render information section', () => { + const info = 'This is my information'; + createComponent({ information: info }); - const headers = findHeaders(); - expect(headers).toHaveLength(6); - [ - __('Token name'), - __('Scopes'), - s__('AccessTokens|Created'), - __('Last Used'), - __('Expires'), - __('Action'), - ].forEach((text, index) => { - expect(headers.at(index).text()).toBe(text); - }); + expect(wrapper.findByTestId('information-section').text()).toBe(info); }); - it('should render the `GlTable` component with 7 headers', () => { - createComponent({ showRole: true }); + describe('table headers', () => { + it('should include `Action` column', () => { + createComponent(); + + const headers = findHeaders(); + expect(headers.wrappers.map((header) => header.text())).toStrictEqual([ + __('Token name'), + __('Scopes'), + s__('AccessTokens|Created'), + __('Last Used'), + __('Expires'), + __('Action'), + ]); + }); - const headers = findHeaders(); - expect(headers).toHaveLength(7); - [ - __('Token name'), - __('Scopes'), - s__('AccessTokens|Created'), - __('Last Used'), - __('Expires'), - __('Role'), - __('Action'), - ].forEach((text, index) => { - expect(headers.at(index).text()).toBe(text); + it('should include `Role` column', () => { + createComponent({ showRole: true }); + + const headers = findHeaders(); + expect(headers.wrappers.map((header) => header.text())).toStrictEqual([ + __('Token name'), + __('Scopes'), + s__('AccessTokens|Created'), + __('Last Used'), + __('Expires'), + __('Role'), + __('Action'), + ]); }); }); @@ -150,8 +154,8 @@ describe('~/access_tokens/components/access_token_table_app', () => { expect(assistiveElement.text()).toBe(s__('AccessTokens|The last time a token was used')); }); - it('updates the table after a success AJAX event', async () => { - createComponent({ showRole: true }); + it('updates the table after new tokens are created', async () => { + createComponent({ initialActiveAccessTokens: [], showRole: true }); await triggerSuccess(); const cells = findCells(); @@ -190,16 +194,43 @@ describe('~/access_tokens/components/access_token_table_app', () => { expect(button.props('category')).toBe('tertiary'); }); - describe('revoke path', () => { - beforeEach(() => { - createComponent({ showRole: true }); + describe('when revoke_path is', () => { + describe('absent in all tokens', () => { + it('should not include `Action` column', () => { + createComponent({ + initialActiveAccessTokens: defaultActiveAccessTokens.map( + ({ revoke_path, ...rest }) => rest, + ), + showRole: true, + }); + + const headers = findHeaders(); + expect(headers).toHaveLength(6); + [ + __('Token name'), + __('Scopes'), + s__('AccessTokens|Created'), + __('Last Used'), + __('Expires'), + __('Role'), + ].forEach((text, index) => { + expect(headers.at(index).text()).toBe(text); + }); + }); }); it.each([{ revoke_path: null }, { revoke_path: undefined }])( - 'with %p, does not show revoke button', - async (input) => { - await triggerSuccess(defaultActiveAccessTokens.map((data) => ({ ...data, ...input }))); - + '%p in some tokens, does not show revoke button', + (input) => { + createComponent({ + initialActiveAccessTokens: [ + defaultActiveAccessTokens.map((data) => ({ ...data, ...input }))[0], + defaultActiveAccessTokens[1], + ], + showRole: true, + }); + + expect(findHeaders().at(6).text()).toBe(__('Action')); expect(findCells().at(6).findComponent(GlButton).exists()).toBe(false); }, ); @@ -207,7 +238,6 @@ describe('~/access_tokens/components/access_token_table_app', () => { it('sorts rows alphabetically', async () => { createComponent({ showRole: true }); - await triggerSuccess(); const cells = findCells(); @@ -226,7 +256,6 @@ describe('~/access_tokens/components/access_token_table_app', () => { it('sorts rows by date', async () => { createComponent({ showRole: true }); - await triggerSuccess(); const cells = findCells(); @@ -242,14 +271,20 @@ describe('~/access_tokens/components/access_token_table_app', () => { expect(cells.at(10).text()).toBe('Never'); }); - it('should show the pagination component when needed', async () => { - createComponent(); - expect(findPagination().exists()).toBe(false); + describe('pagination', () => { + it('does not show pagination component', () => { + createComponent({ + initialActiveAccessTokens: Array(PAGE_SIZE).fill(defaultActiveAccessTokens[0]), + }); - await triggerSuccess(Array(PAGE_SIZE).fill(defaultActiveAccessTokens[0])); - expect(findPagination().exists()).toBe(false); + expect(findPagination().exists()).toBe(false); + }); - await triggerSuccess(Array(PAGE_SIZE + 1).fill(defaultActiveAccessTokens[0])); - expect(findPagination().exists()).toBe(true); + it('shows the pagination component', () => { + createComponent({ + initialActiveAccessTokens: Array(PAGE_SIZE + 1).fill(defaultActiveAccessTokens[0]), + }); + expect(findPagination().exists()).toBe(true); + }); }); }); |