diff options
Diffstat (limited to 'spec/frontend/environments/environment_details/page_spec.js')
-rw-r--r-- | spec/frontend/environments/environment_details/page_spec.js | 69 |
1 files changed, 69 insertions, 0 deletions
diff --git a/spec/frontend/environments/environment_details/page_spec.js b/spec/frontend/environments/environment_details/page_spec.js new file mode 100644 index 00000000000..3a1a3238abe --- /dev/null +++ b/spec/frontend/environments/environment_details/page_spec.js @@ -0,0 +1,69 @@ +import Vue from 'vue'; +import VueApollo from 'vue-apollo'; +import { GlLoadingIcon, GlTableLite } from '@gitlab/ui'; +import resolvedEnvironmentDetails from 'test_fixtures/graphql/environments/graphql/queries/environment_details.query.graphql.json'; +import emptyEnvironmentDetails from 'test_fixtures/graphql/environments/graphql/queries/environment_details.query.graphql.empty.json'; +import { mountExtended } from 'helpers/vue_test_utils_helper'; +import EnvironmentsDetailPage from '~/environments/environment_details/index.vue'; +import EmptyState from '~/environments/environment_details/empty_state.vue'; +import getEnvironmentDetails from '~/environments/graphql/queries/environment_details.query.graphql'; +import createMockApollo from '../../__helpers__/mock_apollo_helper'; +import waitForPromises from '../../__helpers__/wait_for_promises'; + +describe('~/environments/environment_details/page.vue', () => { + Vue.use(VueApollo); + + let wrapper; + + const defaultWrapperParameters = { + resolvedData: resolvedEnvironmentDetails, + }; + + const createWrapper = ({ resolvedData } = defaultWrapperParameters) => { + const mockApollo = createMockApollo([ + [getEnvironmentDetails, jest.fn().mockResolvedValue(resolvedData)], + ]); + + return mountExtended(EnvironmentsDetailPage, { + apolloProvider: mockApollo, + propsData: { + projectFullPath: 'gitlab-group/test-project', + environmentName: 'test-environment-name', + }, + }); + }; + + describe('when fetching data', () => { + it('should show a loading indicator', () => { + wrapper = createWrapper(); + + expect(wrapper.findComponent(GlLoadingIcon).exists()).toBe(true); + expect(wrapper.findComponent(GlTableLite).exists()).not.toBe(true); + }); + }); + + describe('when data is fetched', () => { + describe('and there are deployments', () => { + beforeEach(async () => { + wrapper = createWrapper(); + await waitForPromises(); + }); + it('should render a table when query is loaded', async () => { + expect(wrapper.findComponent(GlLoadingIcon).exists()).not.toBe(true); + expect(wrapper.findComponent(GlTableLite).exists()).toBe(true); + }); + }); + + describe('and there are no deployments', () => { + beforeEach(async () => { + wrapper = createWrapper({ resolvedData: emptyEnvironmentDetails }); + await waitForPromises(); + }); + + it('should render empty state component', async () => { + expect(wrapper.findComponent(GlTableLite).exists()).toBe(false); + expect(wrapper.findComponent(EmptyState).exists()).toBe(true); + }); + }); + }); +}); |