diff options
Diffstat (limited to 'spec/frontend/clusters/agents/components/show_spec.js')
-rw-r--r-- | spec/frontend/clusters/agents/components/show_spec.js | 195 |
1 files changed, 195 insertions, 0 deletions
diff --git a/spec/frontend/clusters/agents/components/show_spec.js b/spec/frontend/clusters/agents/components/show_spec.js new file mode 100644 index 00000000000..fd04ff8b3e7 --- /dev/null +++ b/spec/frontend/clusters/agents/components/show_spec.js @@ -0,0 +1,195 @@ +import { GlAlert, GlKeysetPagination, GlLoadingIcon, GlSprintf, GlTab } from '@gitlab/ui'; +import { createLocalVue, shallowMount } from '@vue/test-utils'; +import VueApollo from 'vue-apollo'; +import ClusterAgentShow from '~/clusters/agents/components/show.vue'; +import TokenTable from '~/clusters/agents/components/token_table.vue'; +import getAgentQuery from '~/clusters/agents/graphql/queries/get_cluster_agent.query.graphql'; +import { useFakeDate } from 'helpers/fake_date'; +import createMockApollo from 'helpers/mock_apollo_helper'; +import waitForPromises from 'helpers/wait_for_promises'; +import TimeAgoTooltip from '~/vue_shared/components/time_ago_tooltip.vue'; + +const localVue = createLocalVue(); +localVue.use(VueApollo); + +describe('ClusterAgentShow', () => { + let wrapper; + useFakeDate([2021, 2, 15]); + + const propsData = { + agentName: 'cluster-agent', + projectPath: 'path/to/project', + }; + + const defaultClusterAgent = { + id: '1', + createdAt: '2021-02-13T00:00:00Z', + createdByUser: { + name: 'user-1', + }, + name: 'token-1', + tokens: { + count: 1, + nodes: [], + pageInfo: null, + }, + }; + + const createWrapper = ({ clusterAgent, queryResponse = null }) => { + const agentQueryResponse = + queryResponse || jest.fn().mockResolvedValue({ data: { project: { clusterAgent } } }); + const apolloProvider = createMockApollo([[getAgentQuery, agentQueryResponse]]); + + wrapper = shallowMount(ClusterAgentShow, { + localVue, + apolloProvider, + propsData, + stubs: { GlSprintf, TimeAgoTooltip, GlTab }, + }); + }; + + const createWrapperWithoutApollo = ({ clusterAgent, loading = false }) => { + const $apollo = { queries: { clusterAgent: { loading } } }; + + wrapper = shallowMount(ClusterAgentShow, { + propsData, + mocks: { $apollo, clusterAgent }, + stubs: { GlTab }, + }); + }; + + const findCreatedText = () => wrapper.find('[data-testid="cluster-agent-create-info"]').text(); + const findLoadingIcon = () => wrapper.find(GlLoadingIcon); + const findPaginationButtons = () => wrapper.find(GlKeysetPagination); + const findTokenCount = () => wrapper.find('[data-testid="cluster-agent-token-count"]').text(); + + afterEach(() => { + wrapper.destroy(); + }); + + describe('default behaviour', () => { + beforeEach(() => { + return createWrapper({ clusterAgent: defaultClusterAgent }); + }); + + it('displays the agent name', () => { + expect(wrapper.text()).toContain(propsData.agentName); + }); + + it('displays agent create information', () => { + expect(findCreatedText()).toMatchInterpolatedText('Created by user-1 2 days ago'); + }); + + it('displays token count', () => { + expect(findTokenCount()).toMatchInterpolatedText( + `${ClusterAgentShow.i18n.tokens} ${defaultClusterAgent.tokens.count}`, + ); + }); + + it('renders token table', () => { + expect(wrapper.find(TokenTable).exists()).toBe(true); + }); + + it('should not render pagination buttons when there are no additional pages', () => { + expect(findPaginationButtons().exists()).toBe(false); + }); + }); + + describe('when create user is unknown', () => { + const missingUser = { + ...defaultClusterAgent, + createdByUser: null, + }; + + beforeEach(() => { + return createWrapper({ clusterAgent: missingUser }); + }); + + it('displays agent create information with unknown user', () => { + expect(findCreatedText()).toMatchInterpolatedText('Created by Unknown user 2 days ago'); + }); + }); + + describe('when token count is missing', () => { + const missingTokens = { + ...defaultClusterAgent, + tokens: null, + }; + + beforeEach(() => { + return createWrapper({ clusterAgent: missingTokens }); + }); + + it('displays token header with no count', () => { + expect(findTokenCount()).toMatchInterpolatedText(`${ClusterAgentShow.i18n.tokens}`); + }); + }); + + describe('when the token list has additional pages', () => { + const pageInfo = { + hasNextPage: true, + hasPreviousPage: false, + startCursor: 'prev', + endCursor: 'next', + }; + + const tokenPagination = { + ...defaultClusterAgent, + tokens: { + ...defaultClusterAgent.tokens, + pageInfo, + }, + }; + + beforeEach(() => { + return createWrapper({ clusterAgent: tokenPagination }); + }); + + it('should render pagination buttons', () => { + expect(findPaginationButtons().exists()).toBe(true); + }); + + it('should pass pageInfo to the pagination component', () => { + expect(findPaginationButtons().props()).toMatchObject(pageInfo); + }); + }); + + describe('when the agent query is loading', () => { + describe('when the clusterAgent is missing', () => { + beforeEach(() => { + return createWrapper({ + clusterAgent: null, + queryResponse: jest.fn().mockReturnValue(new Promise(() => {})), + }); + }); + + it('displays a loading icon and hides the token tab', () => { + expect(findLoadingIcon().exists()).toBe(true); + expect(wrapper.text()).not.toContain(ClusterAgentShow.i18n.tokens); + }); + }); + + describe('when the clusterAgent is present', () => { + beforeEach(() => { + createWrapperWithoutApollo({ clusterAgent: defaultClusterAgent, loading: true }); + }); + + it('displays a loading icon and token tab', () => { + expect(findLoadingIcon().exists()).toBe(true); + expect(wrapper.text()).toContain(ClusterAgentShow.i18n.tokens); + }); + }); + }); + + describe('when the agent query has errored', () => { + beforeEach(() => { + createWrapper({ clusterAgent: null, queryResponse: jest.fn().mockRejectedValue() }); + return waitForPromises(); + }); + + it('displays an alert message', () => { + expect(wrapper.find(GlAlert).exists()).toBe(true); + expect(wrapper.text()).toContain(ClusterAgentShow.i18n.loadingError); + }); + }); +}); |