diff options
Diffstat (limited to 'spec/frontend/clusters_list/components/clusters_main_view_spec.js')
-rw-r--r-- | spec/frontend/clusters_list/components/clusters_main_view_spec.js | 82 |
1 files changed, 82 insertions, 0 deletions
diff --git a/spec/frontend/clusters_list/components/clusters_main_view_spec.js b/spec/frontend/clusters_list/components/clusters_main_view_spec.js new file mode 100644 index 00000000000..c2233e5d39c --- /dev/null +++ b/spec/frontend/clusters_list/components/clusters_main_view_spec.js @@ -0,0 +1,82 @@ +import { GlTabs, GlTab } from '@gitlab/ui'; +import { shallowMountExtended } from 'helpers/vue_test_utils_helper'; +import ClustersMainView from '~/clusters_list/components/clusters_main_view.vue'; +import InstallAgentModal from '~/clusters_list/components/install_agent_modal.vue'; +import { + AGENT, + CERTIFICATE_BASED, + CLUSTERS_TABS, + MAX_CLUSTERS_LIST, + MAX_LIST_COUNT, +} from '~/clusters_list/constants'; + +const defaultBranchName = 'default-branch'; + +describe('ClustersMainViewComponent', () => { + let wrapper; + + const propsData = { + defaultBranchName, + }; + + beforeEach(() => { + wrapper = shallowMountExtended(ClustersMainView, { + propsData, + }); + }); + + afterEach(() => { + wrapper.destroy(); + }); + + const findTabs = () => wrapper.findComponent(GlTabs); + const findAllTabs = () => wrapper.findAllComponents(GlTab); + const findGlTabAtIndex = (index) => findAllTabs().at(index); + const findComponent = () => wrapper.findByTestId('clusters-tab-component'); + const findModal = () => wrapper.findComponent(InstallAgentModal); + + it('renders `GlTabs` with `syncActiveTabWithQueryParams` and `queryParamName` props set', () => { + expect(findTabs().exists()).toBe(true); + expect(findTabs().props('syncActiveTabWithQueryParams')).toBe(true); + }); + + it('renders correct number of tabs', () => { + expect(findAllTabs()).toHaveLength(CLUSTERS_TABS.length); + }); + + it('passes child-component param to the component', () => { + expect(findComponent().props('defaultBranchName')).toBe(defaultBranchName); + }); + + it('passes correct max-agents param to the modal', () => { + expect(findModal().props('maxAgents')).toBe(MAX_CLUSTERS_LIST); + }); + + describe('tabs', () => { + it.each` + tabTitle | queryParamValue | lineNumber + ${'All'} | ${'all'} | ${0} + ${'Agent'} | ${AGENT} | ${1} + ${'Certificate based'} | ${CERTIFICATE_BASED} | ${2} + `( + 'renders correct tab title and query param value', + ({ tabTitle, queryParamValue, lineNumber }) => { + expect(findGlTabAtIndex(lineNumber).attributes('title')).toBe(tabTitle); + expect(findGlTabAtIndex(lineNumber).props('queryParamValue')).toBe(queryParamValue); + }, + ); + }); + + describe('when the child component emits the tab change event', () => { + beforeEach(() => { + findComponent().vm.$emit('changeTab', AGENT); + }); + it('changes the tab', () => { + expect(findTabs().attributes('value')).toBe('1'); + }); + + it('passes correct max-agents param to the modal', () => { + expect(findModal().props('maxAgents')).toBe(MAX_LIST_COUNT); + }); + }); +}); |