Bugfix for licenses without an url

This commit solves
https://gitlab.com/gitlab-org/gitlab/-/issues/322160
It introduces a bugfix for Licences without an url,
to not display a broken link, but the License name
in plain text.

ee/app/assets/javascripts/vue_shared/license_compliance/components/license_issue_body.vue

@@ -25,7 +25,8 @@ export default {
 
 <template>
   <div class="report-block-info license-item">
-    <gl-link :href="issue.url" target="_blank">{{ issue.name }}</gl-link>
+    <gl-link v-if="issue.url" :href="issue.url" target="_blank">{{ issue.name }}</gl-link>
+    <span v-else data-testid="license-copy">{{ issue.name }}</span>
     <license-packages v-if="hasPackages" :packages="issue.packages" class="text-secondary" />
   </div>
 </template>

ee/changelogs/unreleased/jnnkl-pipeline-license-no-url-fix.yml

+---
+title: Fix for licenses without an url in license issue body
+merge_request: 56534
+author:
+type: changed

ee/spec/frontend/vue_shared/license_compliance/__snapshots__/mr_widget_license_report_spec.js.snap

@@ -3,7 +3,7 @@
 exports[`License Report MR Widget report section report body should render correctly 1`] = `
 <smart-virtual-list-stub
   class="report-block-container"
-  length="1"
+  length="2"
   remain="20"
   rtag="div"
   size="26"

ee/spec/frontend/vue_shared/license_compliance/components/license_issue_body_spec.js

-import Vue from 'vue';
-
+import { GlLink } from '@gitlab/ui';
+import { shallowMount } from '@vue/test-utils';
 import LicenseIssueBody from 'ee/vue_shared/license_compliance/components/license_issue_body.vue';
-import createStore from 'ee/vue_shared/license_compliance/store';
-import { trimText } from 'helpers/text_helper';
-import { mountComponentWithStore } from 'helpers/vue_mount_component_helper';
+import LicensePackages from 'ee/vue_shared/license_compliance/components/license_packages.vue';
+import { extendedWrapper } from 'helpers/vue_test_utils_helper';
 import { licenseReport } from '../mock_data';
 
 describe('LicenseIssueBody', () => {
-  const issue = licenseReport[0];
-  const Component = Vue.extend(LicenseIssueBody);
-  let vm;
-  let store;
+  let wrapper;
+
+  const findLicenseIssueBody = () => wrapper.findComponent(LicenseIssueBody);
+  const findLicensePackages = () => wrapper.findComponent(LicensePackages);
+  const findGlLink = () => wrapper.find(GlLink);
+  const findText = () => wrapper.find('[data-testid="license-copy"]');
+
+  const createComponent = (props = {}) => {
+    wrapper = extendedWrapper(
+      shallowMount(LicenseIssueBody, {
+        propsData: {
+          ...props,
+        },
+      }),
+    );
+  };
 
   beforeEach(() => {
-    store = createStore();
+    createComponent({ issue: licenseReport[0] });
   });
 
   afterEach(() => {
-    vm.$destroy();
+    wrapper.destroy();
   });
 
-  describe('template', () => {
-    beforeEach(() => {
-      vm = mountComponentWithStore(Component, { props: { issue }, store });
+  describe('on load', () => {
+    it('renders license issue body', () => {
+      expect(findLicenseIssueBody().exists()).toBe(true);
     });
 
-    it('renders component container element with class `license-item`', () => {
-      expect(vm.$el.classList.contains('license-item')).toBe(true);
+    it('renders packages list', () => {
+      expect(findLicensePackages().exists()).toBe(true);
     });
+  });
 
+  describe('when issue url is defined', () => {
     it('renders link to view license', () => {
-      const linkEl = vm.$el.querySelector('.license-item > a');
+      const link = findGlLink();
+      const text = findText();
 
-      expect(linkEl).not.toBeNull();
-      expect(linkEl.innerText.trim()).toBe(issue.name);
+      expect(link.text()).toBe(licenseReport[0].name);
+      expect(link.attributes('href')).toBe(licenseReport[0].url);
+      expect(text.exists()).toBe(false);
     });
+  });
 
-    it('renders packages list', () => {
-      const packagesEl = vm.$el.querySelector('.license-packages');
+  describe('when issue url is undefined', () => {
+    beforeEach(() => {
+      createComponent({ issue: licenseReport[1] });
+    });
+
+    it('renders text to view license', () => {
+      const link = findGlLink();
+      const text = findText();
 
-      expect(packagesEl).not.toBeNull();
-      expect(trimText(packagesEl.innerText)).toBe('Used by pg, puma, foo, and 2 more');
+      expect(text.text()).toBe(licenseReport[1].name);
+      expect(link.exists()).toBe(false);
     });
   });
 
@@ -49,14 +71,12 @@ describe('LicenseIssueBody', () => {
       const issueWithoutPackages = licenseReport[0];
       issueWithoutPackages.packages = [];
 
-      vm = mountComponentWithStore(Component, { props: { issue: issueWithoutPackages }, store });
+      createComponent({ issue: issueWithoutPackages });
     });
 
     it('does not render packages list', () => {
-      const packagesEl = vm.$el.querySelector('.license-packages');
-
-      expect(packagesEl).toBeNull();
-      vm.$destroy();
+      const packages = findLicensePackages();
+      expect(packages.exists()).toBe(false);
     });
   });
 });

ee/spec/frontend/vue_shared/license_compliance/mock_data.js

@@ -56,6 +56,47 @@ export const licenseReport = [
       },
     ],
   },
+  {
+    name: 'another New BSD',
+    count: 5,
+    packages: [
+      {
+        name: 'pg',
+        url: 'https://bitbucket.org/ged/ruby-pg',
+        description:
+          'Pg is the Ruby interface to the {PostgreSQL RDBMS}[http://www.postgresql.org/]',
+        paths: ['.'],
+      },
+      {
+        name: 'puma',
+        url: 'http://puma.io',
+        description:
+          'Puma is a simple, fast, threaded, and highly concurrent HTTP 1.1 server for Ruby/Rack applications',
+        paths: ['.'],
+      },
+      {
+        name: 'foo',
+        url: 'https://bitbucket.org/ged/ruby-pg',
+        description:
+          'Pg is the Ruby interface to the {PostgreSQL RDBMS}[http://www.postgresql.org/]',
+        paths: ['.'],
+      },
+      {
+        name: 'bar',
+        url: 'http://puma.io',
+        description:
+          'Puma is a simple, fast, threaded, and highly concurrent HTTP 1.1 server for Ruby/Rack applications',
+        paths: ['.'],
+      },
+      {
+        name: 'baz',
+        url: 'https://bitbucket.org/ged/ruby-pg',
+        description:
+          'Pg is the Ruby interface to the {PostgreSQL RDBMS}[http://www.postgresql.org/]',
+        paths: ['.'],
+      },
+    ],
+  },
 ];
 
 export const generateReportGroup = ({ status = 'some-status', numberOfLicenses = 0 } = {}) => ({