diff options
Diffstat (limited to 'spec/frontend/environments')
7 files changed, 135 insertions, 46 deletions
diff --git a/spec/frontend/environments/deploy_board_component_spec.js b/spec/frontend/environments/deploy_board_component_spec.js index f0fb4d1027c..6bf87f7b07f 100644 --- a/spec/frontend/environments/deploy_board_component_spec.js +++ b/spec/frontend/environments/deploy_board_component_spec.js @@ -23,9 +23,9 @@ describe('Deploy Board', () => { }); describe('with valid data', () => { - beforeEach((done) => { + beforeEach(() => { wrapper = createComponent(); - nextTick(done); + return nextTick(); }); it('should render percentage with completion value provided', () => { @@ -127,14 +127,14 @@ describe('Deploy Board', () => { }); describe('with empty state', () => { - beforeEach((done) => { + beforeEach(() => { wrapper = createComponent({ deployBoardData: {}, isLoading: false, isEmpty: true, logsPath, }); - nextTick(done); + return nextTick(); }); it('should render the empty state', () => { @@ -146,14 +146,14 @@ describe('Deploy Board', () => { }); describe('with loading state', () => { - beforeEach((done) => { + beforeEach(() => { wrapper = createComponent({ deployBoardData: {}, isLoading: true, isEmpty: false, logsPath, }); - nextTick(done); + return nextTick(); }); it('should render loading spinner', () => { @@ -163,7 +163,7 @@ describe('Deploy Board', () => { describe('has legend component', () => { let statuses = []; - beforeEach((done) => { + beforeEach(() => { wrapper = createComponent({ isLoading: false, isEmpty: false, @@ -171,7 +171,7 @@ describe('Deploy Board', () => { deployBoardData: deployBoardMockData, }); ({ statuses } = wrapper.vm); - nextTick(done); + return nextTick(); }); it('with all the possible statuses', () => { diff --git a/spec/frontend/environments/empty_state_spec.js b/spec/frontend/environments/empty_state_spec.js new file mode 100644 index 00000000000..974afc6d032 --- /dev/null +++ b/spec/frontend/environments/empty_state_spec.js @@ -0,0 +1,53 @@ +import { mountExtended } from 'helpers/vue_test_utils_helper'; +import { s__ } from '~/locale'; +import EmptyState from '~/environments/components/empty_state.vue'; +import { ENVIRONMENTS_SCOPE } from '~/environments/constants'; + +const HELP_PATH = '/help'; + +describe('~/environments/components/empty_state.vue', () => { + let wrapper; + + const createWrapper = ({ propsData = {} } = {}) => + mountExtended(EmptyState, { + propsData: { + scope: ENVIRONMENTS_SCOPE.AVAILABLE, + helpPath: HELP_PATH, + ...propsData, + }, + }); + + afterEach(() => { + wrapper.destroy(); + }); + + it('shows an empty state for available environments', () => { + wrapper = createWrapper(); + + const title = wrapper.findByRole('heading', { + name: s__("Environments|You don't have any environments."), + }); + + expect(title.exists()).toBe(true); + }); + + it('shows an empty state for stopped environments', () => { + wrapper = createWrapper({ propsData: { scope: ENVIRONMENTS_SCOPE.STOPPED } }); + + const title = wrapper.findByRole('heading', { + name: s__("Environments|You don't have any stopped environments."), + }); + + expect(title.exists()).toBe(true); + }); + + it('shows a link to the the help path', () => { + wrapper = createWrapper(); + + const link = wrapper.findByRole('link', { + name: s__('Environments|How do I create an environment?'), + }); + + expect(link.attributes('href')).toBe(HELP_PATH); + }); +}); diff --git a/spec/frontend/environments/emtpy_state_spec.js b/spec/frontend/environments/emtpy_state_spec.js deleted file mode 100644 index 862d90e50dc..00000000000 --- a/spec/frontend/environments/emtpy_state_spec.js +++ /dev/null @@ -1,24 +0,0 @@ -import { shallowMount } from '@vue/test-utils'; -import EmptyState from '~/environments/components/empty_state.vue'; - -describe('environments empty state', () => { - let vm; - - beforeEach(() => { - vm = shallowMount(EmptyState, { - propsData: { - helpPath: 'bar', - }, - }); - }); - - afterEach(() => { - vm.destroy(); - }); - - it('renders the empty state', () => { - expect(vm.find('.js-blank-state-title').text()).toEqual( - "You don't have any environments right now", - ); - }); -}); diff --git a/spec/frontend/environments/environment_item_spec.js b/spec/frontend/environments/environment_item_spec.js index 0b36d2a940d..0761d04229c 100644 --- a/spec/frontend/environments/environment_item_spec.js +++ b/spec/frontend/environments/environment_item_spec.js @@ -1,4 +1,5 @@ import { mount } from '@vue/test-utils'; +import { GlAvatarLink, GlAvatar } from '@gitlab/ui'; import { cloneDeep } from 'lodash'; import { format } from 'timeago.js'; import { mockTracking, unmockTracking, triggerEvent } from 'helpers/tracking_helper'; @@ -44,10 +45,16 @@ describe('Environment item', () => { const findAutoStop = () => wrapper.find('.js-auto-stop'); const findUpcomingDeployment = () => wrapper.find('[data-testid="upcoming-deployment"]'); + const findLastDeployment = () => wrapper.find('[data-testid="environment-deployment-id-cell"]'); const findUpcomingDeploymentContent = () => wrapper.find('[data-testid="upcoming-deployment-content"]'); const findUpcomingDeploymentStatusLink = () => wrapper.find('[data-testid="upcoming-deployment-status-link"]'); + const findLastDeploymentAvatarLink = () => findLastDeployment().findComponent(GlAvatarLink); + const findLastDeploymentAvatar = () => findLastDeployment().findComponent(GlAvatar); + const findUpcomingDeploymentAvatarLink = () => + findUpcomingDeployment().findComponent(GlAvatarLink); + const findUpcomingDeploymentAvatar = () => findUpcomingDeployment().findComponent(GlAvatar); afterEach(() => { wrapper.destroy(); @@ -79,9 +86,19 @@ describe('Environment item', () => { describe('With user information', () => { it('should render user avatar with link to profile', () => { - expect(wrapper.find('.js-deploy-user-container').props('linkHref')).toEqual( - environment.last_deployment.user.web_url, - ); + const avatarLink = findLastDeploymentAvatarLink(); + const avatar = findLastDeploymentAvatar(); + const { username, avatar_url, web_url } = environment.last_deployment.user; + + expect(avatarLink.attributes('href')).toBe(web_url); + expect(avatar.props()).toMatchObject({ + src: avatar_url, + entityName: username, + }); + expect(avatar.attributes()).toMatchObject({ + title: username, + alt: `${username}'s avatar`, + }); }); }); @@ -108,9 +125,16 @@ describe('Environment item', () => { describe('When the envionment has an upcoming deployment', () => { describe('When the upcoming deployment has a deployable', () => { it('should render the build ID and user', () => { - expect(findUpcomingDeploymentContent().text()).toMatchInterpolatedText( - '#27 by upcoming-username', - ); + const avatarLink = findUpcomingDeploymentAvatarLink(); + const avatar = findUpcomingDeploymentAvatar(); + const { username, avatar_url, web_url } = environment.upcoming_deployment.user; + + expect(findUpcomingDeploymentContent().text()).toMatchInterpolatedText('#27 by'); + expect(avatarLink.attributes('href')).toBe(web_url); + expect(avatar.props()).toMatchObject({ + src: avatar_url, + entityName: username, + }); }); it('should render a status icon with a link and tooltip', () => { @@ -139,10 +163,17 @@ describe('Environment item', () => { }); }); - it('should still renders the build ID and user', () => { - expect(findUpcomingDeploymentContent().text()).toMatchInterpolatedText( - '#27 by upcoming-username', - ); + it('should still render the build ID and user avatar', () => { + const avatarLink = findUpcomingDeploymentAvatarLink(); + const avatar = findUpcomingDeploymentAvatar(); + const { username, avatar_url, web_url } = environment.upcoming_deployment.user; + + expect(findUpcomingDeploymentContent().text()).toMatchInterpolatedText('#27 by'); + expect(avatarLink.attributes('href')).toBe(web_url); + expect(avatar.props()).toMatchObject({ + src: avatar_url, + entityName: username, + }); }); it('should not render the status icon', () => { @@ -383,7 +414,7 @@ describe('Environment item', () => { }); it('should hide non-folder properties', () => { - expect(wrapper.find('[data-testid="environment-deployment-id-cell"]').exists()).toBe(false); + expect(findLastDeployment().exists()).toBe(false); expect(wrapper.find('[data-testid="environment-build-cell"]').exists()).toBe(false); }); }); diff --git a/spec/frontend/environments/environment_table_spec.js b/spec/frontend/environments/environment_table_spec.js index c7582e4b06d..666e87c748e 100644 --- a/spec/frontend/environments/environment_table_spec.js +++ b/spec/frontend/environments/environment_table_spec.js @@ -122,7 +122,7 @@ describe('Environment table', () => { expect(wrapper.find('.deploy-board-icon').exists()).toBe(true); }); - it('should toggle deploy board visibility when arrow is clicked', (done) => { + it('should toggle deploy board visibility when arrow is clicked', async () => { const mockItem = { name: 'review', size: 1, @@ -142,7 +142,6 @@ describe('Environment table', () => { eventHub.$on('toggleDeployBoard', (env) => { expect(env.id).toEqual(mockItem.id); - done(); }); factory({ @@ -154,7 +153,7 @@ describe('Environment table', () => { }, }); - wrapper.find('.deploy-board-icon').trigger('click'); + await wrapper.find('.deploy-board-icon').trigger('click'); }); it('should set the environment to change and weight when a change canary weight event is recevied', async () => { diff --git a/spec/frontend/environments/graphql/mock_data.js b/spec/frontend/environments/graphql/mock_data.js index 1b7b35702de..7e436476a8f 100644 --- a/spec/frontend/environments/graphql/mock_data.js +++ b/spec/frontend/environments/graphql/mock_data.js @@ -543,6 +543,7 @@ export const resolvedEnvironment = { externalUrl: 'https://example.org', environmentType: 'review', nameWithoutType: 'hello', + tier: 'development', lastDeployment: { id: 78, iid: 24, @@ -551,6 +552,7 @@ export const resolvedEnvironment = { status: 'success', createdAt: '2022-01-07T15:47:27.415Z', deployedAt: '2022-01-07T15:47:32.450Z', + tierInYaml: 'staging', tag: false, isLast: true, user: { diff --git a/spec/frontend/environments/new_environment_item_spec.js b/spec/frontend/environments/new_environment_item_spec.js index 1d7a33fb95b..cf0c8a7e7ca 100644 --- a/spec/frontend/environments/new_environment_item_spec.js +++ b/spec/frontend/environments/new_environment_item_spec.js @@ -73,6 +73,34 @@ describe('~/environments/components/new_environment_item.vue', () => { expect(name.text()).toHaveLength(80); }); + describe('tier', () => { + it('displays the tier of the environment when defined in yaml', () => { + wrapper = createWrapper({ apolloProvider: createApolloProvider() }); + + const tier = wrapper.findByTitle(s__('Environment|Deployment tier')); + + expect(tier.text()).toBe(resolvedEnvironment.lastDeployment.tierInYaml); + }); + + it('does not display the tier if not defined in yaml', () => { + const environment = { + ...resolvedEnvironment, + lastDeployment: { + ...resolvedEnvironment.lastDeployment, + tierInYaml: null, + }, + }; + wrapper = createWrapper({ + propsData: { environment }, + apolloProvider: createApolloProvider(), + }); + + const tier = wrapper.findByTitle(s__('Environment|Deployment tier')); + + expect(tier.exists()).toBe(false); + }); + }); + describe('url', () => { it('shows a link for the url if one is present', () => { wrapper = createWrapper({ apolloProvider: createApolloProvider() }); |