diff options
Diffstat (limited to 'spec/frontend/environments/new_environment_folder_spec.js')
-rw-r--r-- | spec/frontend/environments/new_environment_folder_spec.js | 74 |
1 files changed, 74 insertions, 0 deletions
diff --git a/spec/frontend/environments/new_environment_folder_spec.js b/spec/frontend/environments/new_environment_folder_spec.js new file mode 100644 index 00000000000..5696e187a86 --- /dev/null +++ b/spec/frontend/environments/new_environment_folder_spec.js @@ -0,0 +1,74 @@ +import VueApollo from 'vue-apollo'; +import Vue from 'vue'; +import { GlCollapse, GlIcon } from '@gitlab/ui'; +import createMockApollo from 'helpers/mock_apollo_helper'; +import { mountExtended } from 'helpers/vue_test_utils_helper'; +import EnvironmentsFolder from '~/environments/components/new_environment_folder.vue'; +import { s__ } from '~/locale'; +import { resolvedEnvironmentsApp, resolvedFolder } from './graphql/mock_data'; + +Vue.use(VueApollo); + +describe('~/environments/components/new_environments_folder.vue', () => { + let wrapper; + let environmentFolderMock; + let nestedEnvironment; + let folderName; + + const findLink = () => wrapper.findByRole('link', { name: s__('Environments|Show all') }); + + const createApolloProvider = () => { + const mockResolvers = { Query: { folder: environmentFolderMock } }; + + return createMockApollo([], mockResolvers); + }; + + const createWrapper = (propsData, apolloProvider) => + mountExtended(EnvironmentsFolder, { apolloProvider, propsData }); + + beforeEach(() => { + environmentFolderMock = jest.fn(); + [nestedEnvironment] = resolvedEnvironmentsApp.environments; + environmentFolderMock.mockReturnValue(resolvedFolder); + wrapper = createWrapper({ nestedEnvironment }, createApolloProvider()); + folderName = wrapper.findByText(nestedEnvironment.name); + }); + + afterEach(() => { + wrapper?.destroy(); + }); + + it('displays the name of the folder', () => { + expect(folderName.text()).toBe(nestedEnvironment.name); + }); + + describe('collapse', () => { + let icons; + let collapse; + + beforeEach(() => { + collapse = wrapper.findComponent(GlCollapse); + icons = wrapper.findAllComponents(GlIcon); + }); + + it('is collapsed by default', () => { + const link = findLink(); + + expect(collapse.attributes('visible')).toBeUndefined(); + expect(icons.wrappers.map((i) => i.props('name'))).toEqual(['angle-right', 'folder-o']); + expect(folderName.classes('gl-font-weight-bold')).toBe(false); + expect(link.exists()).toBe(false); + }); + + it('opens on click', async () => { + await folderName.trigger('click'); + + const link = findLink(); + + expect(collapse.attributes('visible')).toBe('true'); + expect(icons.wrappers.map((i) => i.props('name'))).toEqual(['angle-down', 'folder-open']); + expect(folderName.classes('gl-font-weight-bold')).toBe(true); + expect(link.attributes('href')).toBe(nestedEnvironment.latest.folderPath); + }); + }); +}); |