debian-mirror-gitlab/spec/frontend/clusters/agents/components/token_table_spec.js
2022-05-07 20:08:51 +05:30

154 lines
4.3 KiB
JavaScript

import { GlEmptyState, GlTooltip, GlTruncate } from '@gitlab/ui';
import { mount } from '@vue/test-utils';
import TokenTable from '~/clusters/agents/components/token_table.vue';
import CreateTokenButton from '~/clusters/agents/components/create_token_button.vue';
import { useFakeDate } from 'helpers/fake_date';
import { extendedWrapper } from 'helpers/vue_test_utils_helper';
import { MAX_LIST_COUNT } from '~/clusters/agents/constants';
describe('ClusterAgentTokenTable', () => {
let wrapper;
useFakeDate([2021, 2, 15]);
const defaultTokens = [
{
id: '1',
createdAt: '2021-02-13T00:00:00Z',
description: 'Description of token 1',
createdByUser: {
name: 'user-1',
},
lastUsedAt: '2021-02-13T00:00:00Z',
name: 'token-1',
},
{
id: '2',
createdAt: '2021-02-10T00:00:00Z',
description: null,
createdByUser: null,
lastUsedAt: null,
name: 'token-2',
},
];
const clusterAgentId = 'cluster-agent-id';
const cursor = {
first: MAX_LIST_COUNT,
last: null,
};
const provide = {
agentName: 'cluster-agent',
projectPath: 'path/to/project',
canAdminCluster: true,
};
const createComponent = (tokens) => {
wrapper = extendedWrapper(
mount(TokenTable, { propsData: { tokens, clusterAgentId, cursor }, provide }),
);
};
const findEmptyState = () => wrapper.findComponent(GlEmptyState);
const findCreateTokenBtn = () => wrapper.findComponent(CreateTokenButton);
beforeEach(() => {
return createComponent(defaultTokens);
});
afterEach(() => {
wrapper.destroy();
});
it('displays the create token button', () => {
expect(findCreateTokenBtn().exists()).toBe(true);
});
it('passes the correct params to the create token component', () => {
expect(findCreateTokenBtn().props()).toMatchObject({
clusterAgentId,
cursor,
});
});
it.each`
name | lineNumber
${'token-1'} | ${0}
${'token-2'} | ${1}
`('displays token name "$name" for line "$lineNumber"', ({ name, lineNumber }) => {
const tokens = wrapper.findAllByTestId('agent-token-name');
const token = tokens.at(lineNumber);
expect(token.text()).toBe(name);
});
it.each`
lastContactText | lineNumber
${'2 days ago'} | ${0}
${'Never'} | ${1}
`(
'displays last contact information "$lastContactText" for line "$lineNumber"',
({ lastContactText, lineNumber }) => {
const tokens = wrapper.findAllByTestId('agent-token-used');
const token = tokens.at(lineNumber);
expect(token.text()).toBe(lastContactText);
},
);
it.each`
createdText | lineNumber
${'2 days ago'} | ${0}
${'5 days ago'} | ${1}
`(
'displays created information "$createdText" for line "$lineNumber"',
({ createdText, lineNumber }) => {
const tokens = wrapper.findAllByTestId('agent-token-created-time');
const token = tokens.at(lineNumber);
expect(token.text()).toBe(createdText);
},
);
it.each`
createdBy | lineNumber
${'user-1'} | ${0}
${'Unknown user'} | ${1}
`(
'displays creator information "$createdBy" for line "$lineNumber"',
({ createdBy, lineNumber }) => {
const tokens = wrapper.findAllByTestId('agent-token-created-user');
const token = tokens.at(lineNumber);
expect(token.text()).toBe(createdBy);
},
);
it.each`
description | truncatesText | hasTooltip | lineNumber
${'Description of token 1'} | ${true} | ${true} | ${0}
${''} | ${false} | ${false} | ${1}
`(
'displays description information "$description" for line "$lineNumber"',
({ description, truncatesText, hasTooltip, lineNumber }) => {
const tokens = wrapper.findAllByTestId('agent-token-description');
const token = tokens.at(lineNumber);
expect(token.text()).toContain(description);
expect(token.find(GlTruncate).exists()).toBe(truncatesText);
expect(token.find(GlTooltip).exists()).toBe(hasTooltip);
},
);
describe('when there are no tokens', () => {
beforeEach(() => {
return createComponent([]);
});
it('displays an empty state', () => {
const emptyState = findEmptyState();
expect(emptyState.exists()).toBe(true);
expect(emptyState.text()).toContain(TokenTable.i18n.noTokens);
});
});
});