diff options
Diffstat (limited to 'spec/frontend/clusters_list/components/agents_spec.js')
| -rw-r--r-- | spec/frontend/clusters_list/components/agents_spec.js | 116 |
1 files changed, 100 insertions, 16 deletions
diff --git a/spec/frontend/clusters_list/components/agents_spec.js b/spec/frontend/clusters_list/components/agents_spec.js index c9ca10f6bf7..3cfa4b92bc0 100644 --- a/spec/frontend/clusters_list/components/agents_spec.js +++ b/spec/frontend/clusters_list/components/agents_spec.js @@ -1,12 +1,18 @@ -import { GlAlert, GlKeysetPagination, GlLoadingIcon } from '@gitlab/ui'; +import { GlAlert, GlKeysetPagination, GlLoadingIcon, GlBanner } from '@gitlab/ui'; import { createLocalVue, shallowMount } from '@vue/test-utils'; import VueApollo from 'vue-apollo'; +import { nextTick } from 'vue'; import AgentEmptyState from '~/clusters_list/components/agent_empty_state.vue'; import AgentTable from '~/clusters_list/components/agent_table.vue'; import Agents from '~/clusters_list/components/agents.vue'; -import { ACTIVE_CONNECTION_TIME } from '~/clusters_list/constants'; +import { + ACTIVE_CONNECTION_TIME, + AGENT_FEEDBACK_KEY, + AGENT_FEEDBACK_ISSUE, +} from '~/clusters_list/constants'; import getAgentsQuery from '~/clusters_list/graphql/queries/get_agents.query.graphql'; import createMockApollo from 'helpers/mock_apollo_helper'; +import LocalStorageSync from '~/vue_shared/components/local_storage_sync.vue'; const localVue = createLocalVue(); localVue.use(VueApollo); @@ -21,13 +27,26 @@ describe('Agents', () => { projectPath: 'path/to/project', }; - const createWrapper = ({ props = {}, agents = [], pageInfo = null, trees = [], count = 0 }) => { + const createWrapper = async ({ + props = {}, + glFeatures = {}, + agents = [], + pageInfo = null, + trees = [], + count = 0, + }) => { const provide = provideData; const apolloQueryResponse = { data: { project: { id: '1', - clusterAgents: { nodes: agents, pageInfo, tokens: { nodes: [] }, count }, + clusterAgents: { + nodes: agents, + pageInfo, + connections: { nodes: [] }, + tokens: { nodes: [] }, + count, + }, repository: { tree: { trees: { nodes: trees, pageInfo } } }, }, }, @@ -44,35 +63,48 @@ describe('Agents', () => { ...defaultProps, ...props, }, - provide: provideData, + provide: { + ...provideData, + glFeatures, + }, + stubs: { + GlBanner, + LocalStorageSync, + }, }); - return wrapper.vm.$nextTick(); + await nextTick(); }; - const findAgentTable = () => wrapper.find(AgentTable); - const findEmptyState = () => wrapper.find(AgentEmptyState); - const findPaginationButtons = () => wrapper.find(GlKeysetPagination); + const findAgentTable = () => wrapper.findComponent(AgentTable); + const findEmptyState = () => wrapper.findComponent(AgentEmptyState); + const findPaginationButtons = () => wrapper.findComponent(GlKeysetPagination); + const findAlert = () => wrapper.findComponent(GlAlert); + const findBanner = () => wrapper.findComponent(GlBanner); afterEach(() => { - if (wrapper) { - wrapper.destroy(); - } + wrapper.destroy(); + + localStorage.removeItem(AGENT_FEEDBACK_KEY); }); describe('when there is a list of agents', () => { let testDate = new Date(); const agents = [ { + __typename: 'ClusterAgent', id: '1', name: 'agent-1', webPath: '/agent-1', + connections: null, tokens: null, }, { + __typename: 'ClusterAgent', id: '2', name: 'agent-2', webPath: '/agent-2', + connections: null, tokens: { nodes: [ { @@ -103,6 +135,7 @@ describe('Agents', () => { configFolder: undefined, status: 'unused', lastContact: null, + connections: null, tokens: null, }, { @@ -116,6 +149,7 @@ describe('Agents', () => { webPath: '/agent-2', status: 'active', lastContact: new Date(testDate).getTime(), + connections: null, tokens: { nodes: [ { @@ -143,6 +177,49 @@ describe('Agents', () => { expect(wrapper.emitted().onAgentsLoad).toEqual([[count]]); }); + describe.each` + featureFlagEnabled | localStorageItemExists | bannerShown + ${true} | ${false} | ${true} + ${true} | ${true} | ${false} + ${false} | ${true} | ${false} + ${false} | ${false} | ${false} + `( + 'when the feature flag enabled is $featureFlagEnabled and dismissed localStorage item exists is $localStorageItemExists', + ({ featureFlagEnabled, localStorageItemExists, bannerShown }) => { + const glFeatures = { + showGitlabAgentFeedback: featureFlagEnabled, + }; + beforeEach(() => { + if (localStorageItemExists) { + localStorage.setItem(AGENT_FEEDBACK_KEY, true); + } + + return createWrapper({ glFeatures, agents, count, trees }); + }); + + it(`should ${bannerShown ? 'show' : 'hide'} the feedback banner`, () => { + expect(findBanner().exists()).toBe(bannerShown); + }); + }, + ); + + describe('when the agent feedback banner is present', () => { + const glFeatures = { + showGitlabAgentFeedback: true, + }; + beforeEach(() => { + return createWrapper({ glFeatures, agents, count, trees }); + }); + + it('should render the correct title', () => { + expect(findBanner().props('title')).toBe('Tell us what you think'); + }); + + it('should render the correct issue link', () => { + expect(findBanner().props('buttonLink')).toBe(AGENT_FEEDBACK_ISSUE); + }); + }); + describe('when the agent has recently connected tokens', () => { it('should set agent status to active', () => { expect(findAgentTable().props('agents')).toMatchObject(expectedAgentsList); @@ -179,7 +256,10 @@ describe('Agents', () => { beforeEach(() => { return createWrapper({ agents, - pageInfo, + pageInfo: { + ...pageInfo, + __typename: 'PageInfo', + }, }); }); @@ -216,6 +296,10 @@ describe('Agents', () => { expect(findAgentTable().exists()).toBe(false); expect(findEmptyState().exists()).toBe(true); }); + + it('should not show agent feedback alert', () => { + expect(findAlert().exists()).toBe(false); + }); }); describe('when agents query has errored', () => { @@ -224,7 +308,7 @@ describe('Agents', () => { }); it('displays an alert message', () => { - expect(wrapper.find(GlAlert).exists()).toBe(true); + expect(findAlert().text()).toBe('An error occurred while loading your Agents'); }); }); @@ -239,14 +323,14 @@ describe('Agents', () => { }, }; - beforeEach(() => { + beforeEach(async () => { wrapper = shallowMount(Agents, { mocks, propsData: defaultProps, provide: provideData, }); - return wrapper.vm.$nextTick(); + await nextTick(); }); it('displays a loading icon', () => { |