2022-05-23 09:08:01 +00:00
|
|
|
/* eslint-disable vue/require-prop-types */
|
|
|
|
/* eslint-disable vue/one-component-per-file */
|
2021-02-25 03:10:50 +00:00
|
|
|
import { createWrapper } from '@vue/test-utils';
|
2021-03-03 21:11:13 +00:00
|
|
|
import Vue from 'vue';
|
2022-05-23 09:08:01 +00:00
|
|
|
import { setHTMLFixture, resetHTMLFixture } from 'helpers/fixtures';
|
2021-02-25 03:10:50 +00:00
|
|
|
|
2022-05-23 09:08:01 +00:00
|
|
|
import {
|
|
|
|
initAccessTokenTableApp,
|
|
|
|
initExpiresAtField,
|
|
|
|
initNewAccessTokenApp,
|
|
|
|
initTokensApp,
|
|
|
|
} from '~/access_tokens';
|
|
|
|
import * as AccessTokenTableApp from '~/access_tokens/components/access_token_table_app.vue';
|
2022-07-21 15:09:12 +00:00
|
|
|
import ExpiresAtField from '~/access_tokens/components/expires_at_field.vue';
|
2022-05-23 09:08:01 +00:00
|
|
|
import * as NewAccessTokenApp from '~/access_tokens/components/new_access_token_app.vue';
|
|
|
|
import * as TokensApp from '~/access_tokens/components/tokens_app.vue';
|
|
|
|
import { FEED_TOKEN, INCOMING_EMAIL_TOKEN, STATIC_OBJECT_TOKEN } from '~/access_tokens/constants';
|
|
|
|
import { __, sprintf } from '~/locale';
|
2021-02-25 03:10:50 +00:00
|
|
|
|
|
|
|
describe('access tokens', () => {
|
2022-05-23 09:08:01 +00:00
|
|
|
let wrapper;
|
2021-03-03 21:11:13 +00:00
|
|
|
|
2022-05-23 09:08:01 +00:00
|
|
|
afterEach(() => {
|
|
|
|
wrapper?.destroy();
|
|
|
|
resetHTMLFixture();
|
2021-02-25 03:10:50 +00:00
|
|
|
});
|
|
|
|
|
2022-05-23 09:08:01 +00:00
|
|
|
describe('initAccessTokenTableApp', () => {
|
|
|
|
const accessTokenType = 'personal access token';
|
|
|
|
const accessTokenTypePlural = 'personal access tokens';
|
|
|
|
const initialActiveAccessTokens = [{ id: '1' }];
|
|
|
|
|
|
|
|
const FakeAccessTokenTableApp = Vue.component('FakeComponent', {
|
|
|
|
inject: [
|
|
|
|
'accessTokenType',
|
|
|
|
'accessTokenTypePlural',
|
|
|
|
'initialActiveAccessTokens',
|
|
|
|
'noActiveTokensMessage',
|
|
|
|
'showRole',
|
|
|
|
],
|
|
|
|
props: [
|
|
|
|
'accessTokenType',
|
|
|
|
'accessTokenTypePlural',
|
|
|
|
'initialActiveAccessTokens',
|
|
|
|
'noActiveTokensMessage',
|
|
|
|
'showRole',
|
|
|
|
],
|
|
|
|
render: () => null,
|
|
|
|
});
|
|
|
|
AccessTokenTableApp.default = FakeAccessTokenTableApp;
|
|
|
|
|
|
|
|
it('mounts the component and provides required values', () => {
|
|
|
|
setHTMLFixture(
|
|
|
|
`<div id="js-access-token-table-app"
|
|
|
|
data-access-token-type="${accessTokenType}"
|
|
|
|
data-access-token-type-plural="${accessTokenTypePlural}"
|
|
|
|
data-initial-active-access-tokens=${JSON.stringify(initialActiveAccessTokens)}
|
|
|
|
>
|
|
|
|
</div>`,
|
|
|
|
);
|
|
|
|
|
|
|
|
const vueInstance = initAccessTokenTableApp();
|
|
|
|
|
|
|
|
wrapper = createWrapper(vueInstance);
|
|
|
|
const component = wrapper.findComponent(FakeAccessTokenTableApp);
|
|
|
|
|
|
|
|
expect(component.exists()).toBe(true);
|
|
|
|
|
|
|
|
expect(component.props()).toMatchObject({
|
|
|
|
// Required value
|
|
|
|
accessTokenType,
|
|
|
|
accessTokenTypePlural,
|
|
|
|
initialActiveAccessTokens,
|
|
|
|
|
|
|
|
// Default values
|
|
|
|
noActiveTokensMessage: sprintf(__('This user has no active %{accessTokenTypePlural}.'), {
|
|
|
|
accessTokenTypePlural,
|
|
|
|
}),
|
|
|
|
showRole: false,
|
|
|
|
});
|
|
|
|
});
|
|
|
|
|
|
|
|
it('mounts the component and provides all values', () => {
|
|
|
|
const noActiveTokensMessage = 'This group has no active access tokens.';
|
|
|
|
setHTMLFixture(
|
|
|
|
`<div id="js-access-token-table-app"
|
|
|
|
data-access-token-type="${accessTokenType}"
|
|
|
|
data-access-token-type-plural="${accessTokenTypePlural}"
|
|
|
|
data-initial-active-access-tokens=${JSON.stringify(initialActiveAccessTokens)}
|
|
|
|
data-no-active-tokens-message="${noActiveTokensMessage}"
|
|
|
|
data-show-role
|
|
|
|
>
|
|
|
|
</div>`,
|
|
|
|
);
|
|
|
|
|
|
|
|
const vueInstance = initAccessTokenTableApp();
|
|
|
|
|
|
|
|
wrapper = createWrapper(vueInstance);
|
|
|
|
const component = wrapper.findComponent(FakeAccessTokenTableApp);
|
|
|
|
|
|
|
|
expect(component.exists()).toBe(true);
|
|
|
|
expect(component.props()).toMatchObject({
|
|
|
|
accessTokenType,
|
|
|
|
accessTokenTypePlural,
|
|
|
|
initialActiveAccessTokens,
|
|
|
|
noActiveTokensMessage,
|
|
|
|
showRole: true,
|
|
|
|
});
|
|
|
|
});
|
|
|
|
|
|
|
|
it('returns `null`', () => {
|
|
|
|
expect(initNewAccessTokenApp()).toBe(null);
|
|
|
|
});
|
2021-02-25 03:10:50 +00:00
|
|
|
});
|
|
|
|
|
2022-07-21 15:09:12 +00:00
|
|
|
describe('initExpiresAtField', () => {
|
2021-02-25 03:10:50 +00:00
|
|
|
describe('when mount element exists', () => {
|
2022-07-21 15:09:12 +00:00
|
|
|
const nameAttribute = 'access_tokens[expires_at]';
|
|
|
|
const idAttribute = 'access_tokens_expires_at';
|
2021-03-26 09:09:24 +00:00
|
|
|
|
2021-02-25 03:10:50 +00:00
|
|
|
beforeEach(() => {
|
2022-05-23 09:08:01 +00:00
|
|
|
setHTMLFixture(
|
2022-07-21 15:09:12 +00:00
|
|
|
`<div class="js-access-tokens-expires-at">
|
2022-05-23 09:08:01 +00:00
|
|
|
<input
|
2022-07-21 15:09:12 +00:00
|
|
|
name="access_tokens[expires_at]"
|
|
|
|
data-js-name="expiresAt"
|
|
|
|
id="access_tokens_expires_at"
|
2022-05-23 09:08:01 +00:00
|
|
|
placeholder="Foo bar"
|
|
|
|
value="1,2"
|
|
|
|
/>
|
|
|
|
</div>`,
|
|
|
|
);
|
|
|
|
});
|
|
|
|
|
2021-03-03 21:11:13 +00:00
|
|
|
it('mounts component and sets `inputAttrs` prop', async () => {
|
2022-07-21 15:09:12 +00:00
|
|
|
wrapper = createWrapper(initExpiresAtField());
|
|
|
|
const component = wrapper.findComponent(ExpiresAtField);
|
2021-02-25 03:10:50 +00:00
|
|
|
|
|
|
|
expect(component.exists()).toBe(true);
|
|
|
|
expect(component.props('inputAttrs')).toEqual({
|
2021-03-26 09:09:24 +00:00
|
|
|
name: nameAttribute,
|
|
|
|
id: idAttribute,
|
2021-03-05 21:09:03 +00:00
|
|
|
value: '1,2',
|
2021-02-25 03:10:50 +00:00
|
|
|
placeholder: 'Foo bar',
|
|
|
|
});
|
|
|
|
});
|
|
|
|
});
|
|
|
|
|
|
|
|
describe('when mount element does not exist', () => {
|
|
|
|
it('returns `null`', () => {
|
2022-07-21 15:09:12 +00:00
|
|
|
expect(initExpiresAtField()).toBe(null);
|
2021-02-25 03:10:50 +00:00
|
|
|
});
|
|
|
|
});
|
|
|
|
});
|
2022-05-23 09:08:01 +00:00
|
|
|
|
|
|
|
describe('initNewAccessTokenApp', () => {
|
|
|
|
it('mounts the component and sets `accessTokenType` prop', () => {
|
|
|
|
const accessTokenType = 'personal access token';
|
|
|
|
setHTMLFixture(
|
|
|
|
`<div id="js-new-access-token-app" data-access-token-type="${accessTokenType}"></div>`,
|
|
|
|
);
|
|
|
|
|
|
|
|
const FakeNewAccessTokenApp = Vue.component('FakeComponent', {
|
|
|
|
inject: ['accessTokenType'],
|
|
|
|
props: ['accessTokenType'],
|
|
|
|
render: () => null,
|
|
|
|
});
|
|
|
|
NewAccessTokenApp.default = FakeNewAccessTokenApp;
|
|
|
|
|
|
|
|
const vueInstance = initNewAccessTokenApp();
|
|
|
|
|
|
|
|
wrapper = createWrapper(vueInstance);
|
|
|
|
const component = wrapper.findComponent(FakeNewAccessTokenApp);
|
|
|
|
|
|
|
|
expect(component.exists()).toBe(true);
|
|
|
|
expect(component.props('accessTokenType')).toEqual(accessTokenType);
|
|
|
|
});
|
|
|
|
|
|
|
|
it('returns `null`', () => {
|
|
|
|
expect(initNewAccessTokenApp()).toBe(null);
|
|
|
|
});
|
|
|
|
});
|
|
|
|
|
|
|
|
describe('initTokensApp', () => {
|
2022-09-15 18:10:36 +00:00
|
|
|
it('mounts the component and provides`tokenTypes`', () => {
|
2022-05-23 09:08:01 +00:00
|
|
|
const tokensData = {
|
|
|
|
[FEED_TOKEN]: FEED_TOKEN,
|
|
|
|
[INCOMING_EMAIL_TOKEN]: INCOMING_EMAIL_TOKEN,
|
|
|
|
[STATIC_OBJECT_TOKEN]: STATIC_OBJECT_TOKEN,
|
|
|
|
};
|
|
|
|
setHTMLFixture(
|
|
|
|
`<div id="js-tokens-app" data-tokens-data=${JSON.stringify(tokensData)}></div>`,
|
|
|
|
);
|
|
|
|
|
|
|
|
const FakeTokensApp = Vue.component('FakeComponent', {
|
|
|
|
inject: ['tokenTypes'],
|
|
|
|
props: ['tokenTypes'],
|
|
|
|
render: () => null,
|
|
|
|
});
|
|
|
|
TokensApp.default = FakeTokensApp;
|
|
|
|
|
|
|
|
const vueInstance = initTokensApp();
|
|
|
|
|
|
|
|
wrapper = createWrapper(vueInstance);
|
|
|
|
const component = wrapper.findComponent(FakeTokensApp);
|
|
|
|
|
|
|
|
expect(component.exists()).toBe(true);
|
|
|
|
expect(component.props('tokenTypes')).toEqual(tokensData);
|
|
|
|
});
|
|
|
|
|
|
|
|
it('returns `null`', () => {
|
|
|
|
expect(initNewAccessTokenApp()).toBe(null);
|
|
|
|
});
|
|
|
|
});
|
2021-02-25 03:10:50 +00:00
|
|
|
});
|