import { GlLink } from '@gitlab/ui'; import { shallowMount } from '@vue/test-utils'; import { nextTick } from 'vue'; import LinksSection from '~/monitoring/components/links_section.vue'; import { createStore } from '~/monitoring/stores'; describe('Links Section component', () => { let store; let wrapper; const createShallowWrapper = () => { wrapper = shallowMount(LinksSection, { store, }); }; const setState = (links) => { store.state.monitoringDashboard = { ...store.state.monitoringDashboard, emptyState: null, links, }; }; const findLinks = () => wrapper.findAll(GlLink); beforeEach(() => { store = createStore(); createShallowWrapper(); }); it('does not render a section if no links are present', async () => { setState(); await nextTick(); expect(findLinks().length).toBe(0); }); it('renders a link inside a section', () => { setState([ { title: 'GitLab Website', url: 'https://gitlab.com', }, ]); return wrapper.vm.$nextTick(() => { expect(findLinks()).toHaveLength(1); const firstLink = findLinks().at(0); expect(firstLink.attributes('href')).toBe('https://gitlab.com'); expect(firstLink.text()).toBe('GitLab Website'); }); }); it('renders multiple links inside a section', () => { const links = new Array(10) .fill(null) .map((_, i) => ({ title: `Title ${i}`, url: `https://gitlab.com/projects/${i}` })); setState(links); return wrapper.vm.$nextTick(() => { expect(findLinks()).toHaveLength(10); }); }); });