97 lines
3 KiB
JavaScript
97 lines
3 KiB
JavaScript
import { GlTabs, GlTab } from '@gitlab/ui';
|
|
import { shallowMountExtended } from 'helpers/vue_test_utils_helper';
|
|
import { mockTracking } from 'helpers/tracking_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,
|
|
EVENT_LABEL_TABS,
|
|
EVENT_ACTIONS_CHANGE,
|
|
} from '~/clusters_list/constants';
|
|
|
|
const defaultBranchName = 'default-branch';
|
|
|
|
describe('ClustersMainViewComponent', () => {
|
|
let wrapper;
|
|
let trackingSpy;
|
|
|
|
const propsData = {
|
|
defaultBranchName,
|
|
};
|
|
|
|
beforeEach(() => {
|
|
wrapper = shallowMountExtended(ClustersMainView, {
|
|
propsData,
|
|
});
|
|
trackingSpy = mockTracking(undefined, wrapper.element, jest.spyOn);
|
|
});
|
|
|
|
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'} | ${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);
|
|
});
|
|
|
|
it('sends the correct tracking event', () => {
|
|
findTabs().vm.$emit('input', 1);
|
|
expect(trackingSpy).toHaveBeenCalledWith(undefined, EVENT_ACTIONS_CHANGE, {
|
|
label: EVENT_LABEL_TABS,
|
|
property: AGENT,
|
|
});
|
|
});
|
|
});
|
|
});
|