diff options
Diffstat (limited to 'spec/frontend/diffs/components/shared')
| -rw-r--r-- | spec/frontend/diffs/components/shared/__snapshots__/findings_drawer_spec.js.snap | 225 | ||||
| -rw-r--r-- | spec/frontend/diffs/components/shared/findings_drawer_spec.js | 118 |
2 files changed, 317 insertions, 26 deletions
diff --git a/spec/frontend/diffs/components/shared/__snapshots__/findings_drawer_spec.js.snap b/spec/frontend/diffs/components/shared/__snapshots__/findings_drawer_spec.js.snap index cfc34bd2f25..33a268c06cc 100644 --- a/spec/frontend/diffs/components/shared/__snapshots__/findings_drawer_spec.js.snap +++ b/spec/frontend/diffs/components/shared/__snapshots__/findings_drawer_spec.js.snap @@ -1,6 +1,6 @@ // Jest Snapshot v1, https://goo.gl/fbAQLP -exports[`FindingsDrawer matches the snapshot 1`] = ` +exports[`FindingsDrawer General Rendering matches the snapshot with detected badge 1`] = ` <transition-stub class="findings-drawer" name="gl-drawer" @@ -16,7 +16,7 @@ exports[`FindingsDrawer matches the snapshot 1`] = ` class="gl-drawer-title" > <h2 - class="drawer-heading gl-font-base gl-mb-0 gl-mt-0" + class="drawer-heading gl-font-base gl-mb-0 gl-mt-0 gl-w-28" > <svg aria-hidden="true" @@ -61,6 +61,227 @@ exports[`FindingsDrawer matches the snapshot 1`] = ` > <li class="gl-mb-4" + data-testid="findings-drawer-title" + > + <p + class="gl-line-height-20" + > + <span + class="gl-display-block gl-font-weight-bold gl-mb-1" + data-testid="findings-drawer-item-description" + > + Name + </span> + <span + data-testid="findings-drawer-item-value-prop" + > + mockedtitle + </span> + </p> + </li> + <li + class="gl-mb-4" + > + <p + class="gl-line-height-20" + > + <span + class="gl-display-block gl-font-weight-bold gl-mb-1" + data-testid="findings-drawer-item-description" + > + Status + </span> + <span + class="badge badge-pill badge-warning gl-badge md text-capitalize" + > + detected + </span> + </p> + </li> + <li + class="gl-mb-4" + > + <p + class="gl-line-height-20" + > + <span + class="gl-display-block gl-font-weight-bold gl-mb-1" + data-testid="findings-drawer-item-description" + > + Description + </span> + <span + data-testid="findings-drawer-item-value-prop" + > + fakedesc + </span> + </p> + </li> + <li + class="gl-mb-4" + > + <p + class="gl-line-height-20" + > + <span + class="gl-display-block gl-font-weight-bold gl-mb-1" + data-testid="findings-drawer-item-description" + > + Project + </span> + <a + class="gl-link" + href="/testpath" + > + testname + </a> + </p> + </li> + <li + class="gl-mb-4" + > + <p + class="gl-line-height-20" + > + <span + class="gl-display-block gl-font-weight-bold gl-mb-1" + data-testid="findings-drawer-item-description" + > + File + </span> + <span + data-testid="findings-drawer-item-value-prop" + /> + </p> + </li> + <li + class="gl-mb-4" + > + <p + class="gl-line-height-20" + > + <span + class="gl-display-block gl-font-weight-bold gl-mb-1" + data-testid="findings-drawer-item-description" + > + Identifiers + </span> + <span> + <a + class="gl-link" + href="https://semgrep.dev/r/gitlab.eslint.detect-disable-mustache-escape" + > + eslint.detect-disable-mustache-escape + </a> + </span> + </p> + </li> + <li + class="gl-mb-4" + > + <p + class="gl-line-height-20" + > + <span + class="gl-display-block gl-font-weight-bold gl-mb-1" + data-testid="findings-drawer-item-description" + > + Tool + </span> + <span + data-testid="findings-drawer-item-value-prop" + > + SAST + </span> + </p> + </li> + <li + class="gl-mb-4" + > + <p + class="gl-line-height-20" + > + <span + class="gl-display-block gl-font-weight-bold gl-mb-1" + data-testid="findings-drawer-item-description" + > + Engine + </span> + <span + data-testid="findings-drawer-item-value-prop" + > + testengine name + </span> + </p> + </li> + </ul> + </div> + </aside> +</transition-stub> +`; + +exports[`FindingsDrawer General Rendering matches the snapshot with dismissed badge 1`] = ` +<transition-stub + class="findings-drawer" + name="gl-drawer" +> + <aside + class="gl-drawer gl-drawer-default" + style="top: 0px; z-index: 252;" + > + <div + class="gl-drawer-header" + > + <div + class="gl-drawer-title" + > + <h2 + class="drawer-heading gl-font-base gl-mb-0 gl-mt-0 gl-w-28" + > + <svg + aria-hidden="true" + class="gl-icon gl-text-orange-300 gl-vertical-align-baseline! inline-findings-severity-icon s12" + data-testid="severity-low-icon" + role="img" + > + <use + href="file-mock#severity-low" + /> + </svg> + <span + class="drawer-heading-severity" + > + low + </span> + SAST Finding + </h2> + <button + aria-label="Close drawer" + class="btn btn-default btn-default-tertiary btn-icon btn-sm gl-button gl-drawer-close-button" + type="button" + > + <svg + aria-hidden="true" + class="gl-button-icon gl-icon s16" + data-testid="close-icon" + role="img" + > + <use + href="file-mock#close" + /> + </svg> + </button> + </div> + </div> + <div + class="gl-drawer-body gl-drawer-body-scrim" + > + <ul + class="gl-border-b-initial gl-list-style-none gl-mb-0 gl-pb-0!" + > + <li + class="gl-mb-4" + data-testid="findings-drawer-title" > <p class="gl-line-height-20" diff --git a/spec/frontend/diffs/components/shared/findings_drawer_spec.js b/spec/frontend/diffs/components/shared/findings_drawer_spec.js index 62d875ed9b7..00b4ca262be 100644 --- a/spec/frontend/diffs/components/shared/findings_drawer_spec.js +++ b/spec/frontend/diffs/components/shared/findings_drawer_spec.js @@ -1,36 +1,106 @@ +import { nextTick } from 'vue'; import { GlDrawer } from '@gitlab/ui'; import FindingsDrawer from '~/diffs/components/shared/findings_drawer.vue'; import { mountExtended } from 'helpers/vue_test_utils_helper'; -import { mockFinding, mockProject } from '../../mock_data/findings_drawer'; - -let wrapper; -const getDrawer = () => wrapper.findComponent(GlDrawer); -const closeEvent = 'close'; - -const createWrapper = () => { - return mountExtended(FindingsDrawer, { - propsData: { - drawer: mockFinding, - project: mockProject, - }, - }); -}; +import { + mockFindingDismissed, + mockFindingDetected, + mockProject, + mockFindingsMultiple, +} from '../../mock_data/findings_drawer'; describe('FindingsDrawer', () => { - it('renders without errors', () => { - wrapper = createWrapper(); - expect(wrapper.exists()).toBe(true); + let wrapper; + + const findPreviousButton = () => wrapper.findByTestId('findings-drawer-prev-button'); + const findNextButton = () => wrapper.findByTestId('findings-drawer-next-button'); + const findTitle = () => wrapper.findByTestId('findings-drawer-title'); + const createWrapper = ( + drawer = { findings: [mockFindingDetected], index: 0 }, + project = mockProject, + ) => { + return mountExtended(FindingsDrawer, { + propsData: { + drawer, + project, + }, + }); + }; + + describe('General Rendering', () => { + beforeEach(() => { + wrapper = createWrapper(); + }); + it('renders without errors', () => { + expect(wrapper.exists()).toBe(true); + }); + + it('emits close event when gl-drawer emits close event', () => { + wrapper.findComponent(GlDrawer).vm.$emit('close'); + expect(wrapper.emitted('close')).toHaveLength(1); + }); + + it('matches the snapshot with dismissed badge', () => { + expect(wrapper.element).toMatchSnapshot(); + }); + + it('matches the snapshot with detected badge', () => { + expect(wrapper.element).toMatchSnapshot(); + }); }); - it('emits close event when gl-drawer emits close event', () => { - wrapper = createWrapper(); + describe('Prev/Next Buttons with Multiple Items', () => { + it('renders prev/next buttons when there are multiple items', () => { + wrapper = createWrapper({ findings: mockFindingsMultiple, index: 0 }); + expect(findPreviousButton().exists()).toBe(true); + expect(findNextButton().exists()).toBe(true); + }); + + it('does not render prev/next buttons when there is only one item', () => { + wrapper = createWrapper({ findings: [mockFindingDismissed], index: 0 }); + expect(findPreviousButton().exists()).toBe(false); + expect(findNextButton().exists()).toBe(false); + }); - getDrawer().vm.$emit(closeEvent); - expect(wrapper.emitted(closeEvent)).toHaveLength(1); + it('calls prev method on prev button click and loops correct activeIndex', async () => { + wrapper = createWrapper({ findings: mockFindingsMultiple, index: 0 }); + expect(findTitle().text()).toBe(`Name ${mockFindingsMultiple[0].title}`); + + await findPreviousButton().trigger('click'); + await nextTick(); + expect(findTitle().text()).toBe(`Name ${mockFindingsMultiple[2].title}`); + + await findPreviousButton().trigger('click'); + await nextTick(); + expect(findTitle().text()).toBe(`Name ${mockFindingsMultiple[1].title}`); + }); + + it('calls next method on next button click', async () => { + wrapper = createWrapper({ findings: mockFindingsMultiple, index: 0 }); + expect(findTitle().text()).toBe(`Name ${mockFindingsMultiple[0].title}`); + + await findNextButton().trigger('click'); + await nextTick(); + expect(findTitle().text()).toBe(`Name ${mockFindingsMultiple[1].title}`); + + await findNextButton().trigger('click'); + await nextTick(); + expect(findTitle().text()).toBe(`Name ${mockFindingsMultiple[2].title}`); + + await findNextButton().trigger('click'); + await nextTick(); + expect(findTitle().text()).toBe(`Name ${mockFindingsMultiple[0].title}`); + }); }); - it('matches the snapshot', () => { - wrapper = createWrapper(); - expect(wrapper.element).toMatchSnapshot(); + describe('Active Index Handling', () => { + it('watcher sets active index on drawer prop change', async () => { + wrapper = createWrapper(); + const newFinding = { findings: mockFindingsMultiple, index: 2 }; + + await wrapper.setProps({ drawer: newFinding }); + await nextTick(); + expect(findTitle().text()).toBe(`Name ${mockFindingsMultiple[2].title}`); + }); }); }); |