diff options
Diffstat (limited to 'spec/frontend/vue_merge_request_widget/components/widget')
| -rw-r--r-- | spec/frontend/vue_merge_request_widget/components/widget/__snapshots__/dynamic_content_spec.js.snap | 154 | ||||
| -rw-r--r-- | spec/frontend/vue_merge_request_widget/components/widget/app_spec.js | 45 |
2 files changed, 155 insertions, 44 deletions
diff --git a/spec/frontend/vue_merge_request_widget/components/widget/__snapshots__/dynamic_content_spec.js.snap b/spec/frontend/vue_merge_request_widget/components/widget/__snapshots__/dynamic_content_spec.js.snap index ce4bf11f16b..d5d3f56e451 100644 --- a/spec/frontend/vue_merge_request_widget/components/widget/__snapshots__/dynamic_content_spec.js.snap +++ b/spec/frontend/vue_merge_request_widget/components/widget/__snapshots__/dynamic_content_spec.js.snap @@ -1,63 +1,133 @@ // Jest Snapshot v1, https://goo.gl/fbAQLP exports[`~/vue_merge_request_widget/components/widget/dynamic_content.vue renders given data 1`] = ` -"<div class=\\"gl-display-flex gl-border-t gl-py-3 gl-pl-7 gl-align-items-baseline\\"> - <!----> - <div class=\\"gl-w-full gl-min-w-0\\"> - <div class=\\"gl-display-flex\\"> - <div class=\\"gl-mb-2\\"><strong class=\\"gl-display-block\\">This is a header</strong><span class=\\"gl-display-block\\">This is a subheader</span></div> - <div class=\\"gl-ml-auto gl-display-flex gl-align-items-baseline\\"> - <help-popover-stub options=\\"[object Object]\\" icon=\\"information-o\\" triggerclass=\\"\\" class=\\"\\"> - <p class=\\"gl-mb-0\\">Widget help popover content</p> - <!----> +<div + class="gl-align-items-baseline gl-border-t gl-display-flex gl-pl-7 gl-py-3" +> + <div + class="gl-min-w-0 gl-w-full" + > + <div + class="gl-display-flex" + > + <div + class="gl-mb-2" + > + <strong + class="gl-display-block" + > + This is a header + </strong> + <span + class="gl-display-block" + > + This is a subheader + </span> + </div> + <div + class="gl-align-items-baseline gl-display-flex gl-ml-auto" + > + <help-popover-stub + icon="information-o" + options="[object Object]" + triggerclass="" + > + <p + class="gl-mb-0" + > + Widget help popover content + </p> </help-popover-stub> - <!----> </div> </div> - <div class=\\"gl-display-flex gl-align-items-baseline\\"> - <status-icon-stub level=\\"2\\" name=\\"MyWidget\\" iconname=\\"success\\"></status-icon-stub> - <div class=\\"gl-w-full gl-display-flex\\"> - <div class=\\"gl-display-flex gl-flex-grow-1\\"> - <div class=\\"gl-display-flex gl-flex-grow-1 gl-align-items-baseline\\"> + <div + class="gl-align-items-baseline gl-display-flex" + > + <status-icon-stub + iconname="success" + level="2" + name="MyWidget" + /> + <div + class="gl-display-flex gl-w-full" + > + <div + class="gl-display-flex gl-flex-grow-1" + > + <div + class="gl-align-items-baseline gl-display-flex gl-flex-grow-1" + > <div> - <p class=\\"gl-mb-0 gl-mr-1\\">Main text for the row</p> - <gl-link-stub href=\\"https://gitlab.com\\">Optional link to display after text</gl-link-stub> - <!----> + <p + class="gl-mb-0 gl-mr-1" + > + Main text for the row + </p> + <gl-link-stub + href="https://gitlab.com" + > + Optional link to display after text + </gl-link-stub> </div> - <gl-badge-stub size=\\"md\\" variant=\\"info\\" iconsize=\\"md\\"> + <gl-badge-stub + iconsize="md" + size="md" + variant="info" + > Badge is optional. Text to be displayed inside badge </gl-badge-stub> </div> - <!----> - <p class=\\"gl-m-0 gl-font-sm\\">Optional: Smaller sub-text to be displayed below the main text</p> + <p + class="gl-font-sm gl-m-0" + > + Optional: Smaller sub-text to be displayed below the main text + </p> </div> - <ul class=\\"gl-m-0 gl-p-0 gl-list-style-none\\"> + <ul + class="gl-list-style-none gl-m-0 gl-p-0" + > <li> - <div class=\\"gl-display-flex gl-align-items-center\\" data-qa-selector=\\"child_content\\"> - <!----> - <div class=\\"gl-w-full gl-min-w-0\\"> - <div class=\\"gl-display-flex\\"> - <div class=\\"gl-mb-2\\"><strong class=\\"gl-display-block\\">Child row header</strong> - <!----> + <div + class="gl-align-items-center gl-display-flex" + data-qa-selector="child_content" + > + <div + class="gl-min-w-0 gl-w-full" + > + <div + class="gl-display-flex" + > + <div + class="gl-mb-2" + > + <strong + class="gl-display-block" + > + Child row header + </strong> </div> - <!----> </div> - <div class=\\"gl-display-flex gl-align-items-baseline\\"> - <!----> - <div class=\\"gl-w-full gl-display-flex\\"> - <div class=\\"gl-display-flex gl-flex-grow-1\\"> - <div class=\\"gl-display-flex gl-flex-grow-1 gl-align-items-baseline\\"> + <div + class="gl-align-items-baseline gl-display-flex" + > + <div + class="gl-display-flex gl-w-full" + > + <div + class="gl-display-flex gl-flex-grow-1" + > + <div + class="gl-align-items-baseline gl-display-flex gl-flex-grow-1" + > <div> - <p class=\\"gl-mb-0 gl-mr-1\\">This is recursive. It will be listed in level 3.</p> - <!----> - <!----> + <p + class="gl-mb-0 gl-mr-1" + > + This is recursive. It will be listed in level 3. + </p> </div> - <!----> </div> - <!----> - <!----> </div> - <!----> </div> </div> </div> @@ -67,5 +137,5 @@ exports[`~/vue_merge_request_widget/components/widget/dynamic_content.vue render </div> </div> </div> -</div>" +</div> `; diff --git a/spec/frontend/vue_merge_request_widget/components/widget/app_spec.js b/spec/frontend/vue_merge_request_widget/components/widget/app_spec.js index bf318cd6b88..205824c3edd 100644 --- a/spec/frontend/vue_merge_request_widget/components/widget/app_spec.js +++ b/spec/frontend/vue_merge_request_widget/components/widget/app_spec.js @@ -1,13 +1,23 @@ import { shallowMountExtended } from 'helpers/vue_test_utils_helper'; +import waitForPromises from 'helpers/wait_for_promises'; import App from '~/vue_merge_request_widget/components/widget/app.vue'; +import MrSecurityWidgetCE from '~/vue_merge_request_widget/extensions/security_reports/mr_widget_security_reports.vue'; +import MrTestReportWidget from '~/vue_merge_request_widget/extensions/test_report/index.vue'; +import MrTerraformWidget from '~/vue_merge_request_widget/extensions/terraform/index.vue'; +import MrCodeQualityWidget from '~/vue_merge_request_widget/extensions/code_quality/index.vue'; describe('MR Widget App', () => { let wrapper; - const createComponent = () => { + const createComponent = ({ mr = {} } = {}) => { wrapper = shallowMountExtended(App, { propsData: { - mr: {}, + mr: { + pipeline: { + path: '/path/to/pipeline', + }, + ...mr, + }, }, }); }; @@ -16,4 +26,35 @@ describe('MR Widget App', () => { createComponent(); expect(wrapper.findByTestId('mr-widget-app').exists()).toBe(true); }); + + describe('MRSecurityWidget', () => { + it('mounts MrSecurityWidgetCE', async () => { + createComponent(); + + await waitForPromises(); + + expect(wrapper.findComponent(MrSecurityWidgetCE).exists()).toBe(true); + }); + }); + + describe.each` + widgetName | widget | endpoint + ${'testReportWidget'} | ${MrTestReportWidget} | ${'testResultsPath'} + ${'terraformPlansWidget'} | ${MrTerraformWidget} | ${'terraformReportsPath'} + ${'codeQualityWidget'} | ${MrCodeQualityWidget} | ${'codequalityReportsPath'} + `('$widgetName', ({ widget, endpoint }) => { + it(`is mounted when ${endpoint} is defined`, async () => { + createComponent({ mr: { [endpoint]: `path/to/${endpoint}` } }); + await waitForPromises(); + + expect(wrapper.findComponent(widget).exists()).toBe(true); + }); + + it(`is not mounted when ${endpoint} is not defined`, async () => { + createComponent(); + await waitForPromises(); + + expect(wrapper.findComponent(widget).exists()).toBe(false); + }); + }); }); |