Add specs for expand button updates

This involves updating componenet file
and also deleting the old test file

app/assets/javascripts/releases/list/components/evidence_block.vue

+<script>
+import { __, sprintf } from '~/locale';
+import { GlLink, GlTooltipDirective } from '@gitlab/ui';
+import { truncateSha } from '~/lib/utils/text_utility';
+import Icon from '~/vue_shared/components/icon.vue';
+import ClipboardButton from '~/vue_shared/components/clipboard_button.vue';
+import ExpandButton from '~/vue_shared/components/expand_button.vue';
+
+export default {
+  name: 'EvidenceBlock',
+  components: {
+    ClipboardButton,
+    ExpandButton,
+    GlLink,
+    Icon,
+  },
+  directives: {
+    GlTooltip: GlTooltipDirective,
+  },
+  props: {
+    release: {
+      type: Object,
+      required: true,
+    },
+  },
+  computed: {
+    evidenceTitle() {
+      return sprintf(__('%{tag}-evidence.json'), { tag: this.release.tag_name });
+    },
+    evidenceUrl() {
+      return this.release.assets && this.release.assets.evidence_file_path;
+    },
+    shortSha() {
+      return truncateSha(this.sha);
+    },
+    sha() {
+      return this.release.evidence_sha;
+    },
+  },
+};
+</script>
+
+<template>
+  <div>
+    <div class="card-text prepend-top-default">
+      <b>
+        {{ __('Evidence collection') }}
+      </b>
+    </div>
+    <div class="d-flex align-items-baseline">
+      <gl-link
+        v-gl-tooltip
+        class="monospace"
+        :title="__('Download evidence JSON')"
+        :download="evidenceTitle"
+        :href="evidenceUrl"
+      >
+        <icon name="review-list" class="align-top append-right-4" /><span>{{ evidenceTitle }}</span>
+      </gl-link>
+
+      <expand-button>
+        <template slot="short">
+          <span class="js-short monospace">{{ shortSha }}</span>
+        </template>
+        <template slot="expanded">
+          <span class="js-expanded monospace gl-pl-1">{{ sha }}</span>
+        </template>
+      </expand-button>
+      <clipboard-button
+        :title="__('Copy commit SHA')"
+        :text="sha"
+        css-class="btn-default btn-transparent btn-clipboard"
+      />
+    </div>
+  </div>
+</template>

app/assets/javascripts/releases/list/components/release_block.vue

@@ -11,10 +11,12 @@ import { getLocationHash } from '~/lib/utils/url_utility';
 import { scrollToElement } from '~/lib/utils/common_utils';
 import glFeatureFlagsMixin from '~/vue_shared/mixins/gl_feature_flags_mixin';
 import ReleaseBlockFooter from './release_block_footer.vue';
+import EvidenceBlock from './evidence_block.vue';
 
 export default {
   name: 'ReleaseBlock',
   components: {
+    EvidenceBlock,
     GlLink,
     GlBadge,
     GlButton,
@@ -70,6 +72,9 @@ export default {
     hasAuthor() {
       return !_.isEmpty(this.author);
     },
+    hasEvidence() {
+      return Boolean(this.release.evidence_sha);
+    },
     shouldRenderMilestones() {
       return !_.isEmpty(this.release.milestones);
     },
@@ -81,6 +86,9 @@ export default {
         this.glFeatures.releaseEditPage && this.release._links && this.release._links.edit_url,
       );
     },
+    shouldShowEvidence() {
+      return this.glFeatures.releaseEvidenceCollection;
+    },
     shouldShowFooter() {
       return this.glFeatures.releaseIssueSummary;
     },
@@ -217,6 +225,8 @@ export default {
         </div>
       </div>
 
+      <evidence-block v-if="hasEvidence && shouldShowEvidence" :release="release" />
+
       <div class="card-text prepend-top-default">
         <div v-html="release.description_html"></div>
       </div>

app/assets/javascripts/vue_shared/components/expand_button.vue

 <script>
+import { GlButton } from '@gitlab/ui';
 import { __ } from '~/locale';
 import Icon from '~/vue_shared/components/icon.vue';
 
@@ -15,6 +16,7 @@ import Icon from '~/vue_shared/components/icon.vue';
 export default {
   name: 'ExpandButton',
   components: {
+    GlButton,
     Icon,
   },
   data() {
@@ -39,15 +41,25 @@ export default {
 </script>
 <template>
   <span>
-    <button
+    <gl-button
       v-show="isCollapsed"
       :aria-label="ariaLabel"
       type="button"
-      class="text-expander btn-blank"
+      class="js-text-expander-prepend text-expander btn-blank"
       @click="onClick"
     >
       <icon :size="12" name="ellipsis_h" />
-    </button>
+    </gl-button>
+    <span v-if="isCollapsed"> <slot name="short"></slot> </span>
     <span v-if="!isCollapsed"> <slot name="expanded"></slot> </span>
+    <gl-button
+      v-show="!isCollapsed"
+      :aria-label="ariaLabel"
+      type="button"
+      class="js-text-expander-append text-expander btn-blank"
+      @click="onClick"
+    >
+      <icon :size="12" name="ellipsis_h" />
+    </gl-button>
   </span>
 </template>

app/controllers/projects/releases_controller.rb

@@ -8,6 +8,7 @@ class Projects::ReleasesController < Projects::ApplicationController
   before_action do
     push_frontend_feature_flag(:release_edit_page, project, default_enabled: true)
     push_frontend_feature_flag(:release_issue_summary, project)
+    push_frontend_feature_flag(:release_evidence_collection, project)
   end
   before_action :authorize_update_release!, only: %i[edit update]
 

changelogs/unreleased/26019-add-evidence-json.yml

+---
+title: Add evidence collection for Releases
+merge_request: 18874
+author:
+type: changed

locale/gitlab.pot

@@ -374,6 +374,9 @@ msgstr[1] ""
 msgid "%{tabname} changed"
 msgstr ""
 
+msgid "%{tag}-evidence.json"
+msgstr ""
+
 msgid "%{template_project_id} is unknown or invalid"
 msgstr ""
 
@@ -6028,6 +6031,9 @@ msgstr ""
 msgid "Download codes"
 msgstr ""
 
+msgid "Download evidence JSON"
+msgstr ""
+
 msgid "Download export"
 msgstr ""
 
@@ -6949,6 +6955,9 @@ msgstr ""
 msgid "Everything you need to create a GitLab Pages site using plain HTML."
 msgstr ""
 
+msgid "Evidence collection"
+msgstr ""
+
 msgid "Example: @sub\\.company\\.com$"
 msgstr ""
 

spec/frontend/releases/list/components/evidence_block_spec.js

+import { mount, createLocalVue } from '@vue/test-utils';
+import { GlLink } from '@gitlab/ui';
+import { truncateSha } from '~/lib/utils/text_utility';
+import Icon from '~/vue_shared/components/icon.vue';
+import { release } from '../../mock_data';
+import EvidenceBlock from '~/releases/list/components/evidence_block.vue';
+import ClipboardButton from '~/vue_shared/components/clipboard_button.vue';
+
+describe('Evidence Block', () => {
+  let wrapper;
+
+  const factory = (options = {}) => {
+    const localVue = createLocalVue();
+
+    wrapper = mount(localVue.extend(EvidenceBlock), {
+      localVue,
+      ...options,
+    });
+  };
+
+  beforeEach(() => {
+    factory({
+      propsData: {
+        release,
+      },
+    });
+  });
+
+  afterEach(() => {
+    wrapper.destroy();
+  });
+
+  it('renders the evidence icon', () => {
+    expect(wrapper.find(Icon).props('name')).toBe('review-list');
+  });
+
+  it('renders the title for the dowload link', () => {
+    expect(wrapper.find(GlLink).text()).toBe(`${release.tag_name}-evidence.json`);
+  });
+
+  it('renders the correct hover text for the download', () => {
+    expect(wrapper.find(GlLink).attributes('data-original-title')).toBe('Download evidence JSON');
+  });
+
+  it('renders the correct file link for download', () => {
+    expect(wrapper.find(GlLink).attributes().download).toBe(`${release.tag_name}-evidence.json`);
+  });
+
+  describe('sha text', () => {
+    it('renders the short sha initially', () => {
+      expect(wrapper.find('.js-short').text()).toBe(truncateSha(release.evidence_sha));
+    });
+
+    it('renders the long sha after expansion', () => {
+      wrapper.find('.js-text-expander-prepend').trigger('click');
+      expect(wrapper.find('.js-expanded').text()).toBe(release.evidence_sha);
+    });
+  });
+
+  describe('copy to clipboard button', () => {
+    it('renders button', () => {
+      expect(wrapper.find(ClipboardButton).exists()).toBe(true);
+    });
+
+    it('renders the correct hover text', () => {
+      expect(wrapper.find(ClipboardButton).attributes('data-original-title')).toBe(
+        'Copy commit SHA',
+      );
+    });
+
+    it('copies the sha', () => {
+      expect(wrapper.find(ClipboardButton).attributes('data-clipboard-text')).toBe(
+        release.evidence_sha,
+      );
+    });
+  });
+});

spec/frontend/releases/list/components/release_block_spec.js

 import { mount } from '@vue/test-utils';
+import EvidenceBlock from '~/releases/list/components/evidence_block.vue';
 import ReleaseBlock from '~/releases/list/components/release_block.vue';
 import ReleaseBlockFooter from '~/releases/list/components/release_block_footer.vue';
 import timeagoMixin from '~/vue_shared/mixins/timeago';
@@ -220,6 +221,26 @@ describe('Release block', () => {
     });
   });
 
+  describe('evidence block', () => {
+    it('renders the evidence block when the evidence is available and the feature flag is true', () =>
+      factory(releaseClone, { releaseEvidenceCollection: true }).then(() =>
+        expect(wrapper.find(EvidenceBlock).exists()).toBe(true),
+      ));
+
+    it('does not render the evidence block when the evidence is available but the feature flag is false', () =>
+      factory(releaseClone, { releaseEvidenceCollection: true }).then(() =>
+        expect(wrapper.find(EvidenceBlock).exists()).toBe(true),
+      ));
+
+    it('does not render the evidence block when there is no evidence', () => {
+      releaseClone.evidence_sha = null;
+
+      return factory(releaseClone).then(() => {
+        expect(wrapper.find(EvidenceBlock).exists()).toBe(false);
+      });
+    });
+  });
+
   describe('anchor scrolling', () => {
     beforeEach(() => {
       scrollToElement.mockClear();

spec/frontend/releases/mock_data.js

@@ -35,6 +35,7 @@ export const release = {
   description_html: '<p data-sourcepos="1:1-1:21" dir="auto">A super nice release!</p>',
   created_at: '2019-08-26T17:54:04.952Z',
   released_at: '2019-08-26T17:54:04.807Z',
+  evidence_sha: 'fb3a125fd69a0e5048ebfb0ba43eb32ce4911520dd8d',
   author: {
     id: 1,
     name: 'Administrator',
@@ -62,6 +63,8 @@ export const release = {
   milestones,
   assets: {
     count: 5,
+    evidence_file_path:
+      'https://20592.qa-tunnel.gitlab.info/root/test-deployments/-/releases/v1.1.2/evidence.json',
     sources: [
       {
         format: 'zip',

spec/frontend/vue_shared/components/__snapshots__/expand_button_spec.js.snap

+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Expand button on click when short text is provided renders button after text 1`] = `"<span><button aria-label=\\"Click to expand text\\" type=\\"button\\" class=\\"btn js-text-expander-prepend text-expander btn-blank btn-secondary\\" style=\\"display: none;\\"><svg aria-hidden=\\"true\\" class=\\"s12 ic-ellipsis_h\\"><use xlink:href=\\"#ellipsis_h\\"></use></svg></button> <!----> <span><p>Expanded!</p></span> <button aria-label=\\"Click to expand text\\" type=\\"button\\" class=\\"btn js-text-expander-append text-expander btn-blank btn-secondary\\" style=\\"\\"><svg aria-hidden=\\"true\\" class=\\"s12 ic-ellipsis_h\\"><use xlink:href=\\"#ellipsis_h\\"></use></svg></button></span>"`;
+
+exports[`Expand button when short text is provided renders button before text 1`] = `"<span><button aria-label=\\"Click to expand text\\" type=\\"button\\" class=\\"btn js-text-expander-prepend text-expander btn-blank btn-secondary\\"><svg aria-hidden=\\"true\\" class=\\"s12 ic-ellipsis_h\\"><use xlink:href=\\"#ellipsis_h\\"></use></svg></button> <span><p>Short</p></span> <!----> <button aria-label=\\"Click to expand text\\" type=\\"button\\" class=\\"btn js-text-expander-append text-expander btn-blank btn-secondary\\" style=\\"display: none;\\"><svg aria-hidden=\\"true\\" class=\\"s12 ic-ellipsis_h\\"><use xlink:href=\\"#ellipsis_h\\"></use></svg></button></span>"`;

spec/frontend/vue_shared/components/expand_button_spec.js

+import Vue from 'vue';
+import { mount, createLocalVue } from '@vue/test-utils';
+import ExpandButton from '~/vue_shared/components/expand_button.vue';
+
+const text = {
+  expanded: 'Expanded!',
+  short: 'Short',
+};
+
+describe('Expand button', () => {
+  let wrapper;
+
+  const expanderPrependEl = () => wrapper.find('.js-text-expander-prepend');
+  const expanderAppendEl = () => wrapper.find('.js-text-expander-append');
+
+  const factory = (options = {}) => {
+    const localVue = createLocalVue();
+
+    wrapper = mount(localVue.extend(ExpandButton), {
+      localVue,
+      ...options,
+    });
+  };
+
+  beforeEach(() => {
+    factory({
+      slots: {
+        expanded: `<p>${text.expanded}</p>`,
+      },
+    });
+  });
+
+  afterEach(() => {
+    wrapper.destroy();
+  });
+
+  it('renders the prepended collapse button', () => {
+    expect(expanderPrependEl().isVisible()).toBe(true);
+    expect(expanderAppendEl().isVisible()).toBe(false);
+  });
+
+  it('renders no text when short text is not provided', () => {
+    expect(wrapper.find(ExpandButton).text()).toBe('');
+  });
+
+  it('does not render expanded text', () => {
+    expect(
+      wrapper
+        .find(ExpandButton)
+        .text()
+        .trim(),
+    ).not.toBe(text.short);
+  });
+
+  describe('when short text is provided', () => {
+    beforeEach(() => {
+      factory({
+        slots: {
+          expanded: `<p>${text.expanded}</p>`,
+          short: `<p>${text.short}</p>`,
+        },
+      });
+    });
+
+    it('renders short text', () => {
+      expect(
+        wrapper
+          .find(ExpandButton)
+          .text()
+          .trim(),
+      ).toBe(text.short);
+    });
+
+    it('renders button before text', () => {
+      expect(expanderPrependEl().isVisible()).toBe(true);
+      expect(expanderAppendEl().isVisible()).toBe(false);
+      expect(wrapper.find(ExpandButton).html()).toMatchSnapshot();
+    });
+  });
+
+  describe('on click', () => {
+    beforeEach(done => {
+      expanderPrependEl().trigger('click');
+      Vue.nextTick(done);
+    });
+
+    afterEach(() => {
+      expanderAppendEl().trigger('click');
+    });
+
+    it('renders only the append collapse button', () => {
+      expect(expanderAppendEl().isVisible()).toBe(true);
+      expect(expanderPrependEl().isVisible()).toBe(false);
+    });
+
+    it('renders the expanded text', () => {
+      expect(wrapper.find(ExpandButton).text()).toContain(text.expanded);
+    });
+
+    describe('when short text is provided', () => {
+      beforeEach(done => {
+        factory({
+          slots: {
+            expanded: `<p>${text.expanded}</p>`,
+            short: `<p>${text.short}</p>`,
+          },
+        });
+
+        expanderPrependEl().trigger('click');
+        Vue.nextTick(done);
+      });
+
+      it('only renders expanded text', () => {
+        expect(
+          wrapper
+            .find(ExpandButton)
+            .text()
+            .trim(),
+        ).toBe(text.expanded);
+      });
+
+      it('renders button after text', () => {
+        expect(expanderPrependEl().isVisible()).toBe(false);
+        expect(expanderAppendEl().isVisible()).toBe(true);
+        expect(wrapper.find(ExpandButton).html()).toMatchSnapshot();
+      });
+    });
+  });
+
+  describe('append button', () => {
+    beforeEach(done => {
+      expanderPrependEl().trigger('click');
+      Vue.nextTick(done);
+    });
+
+    it('clicking hides itself and shows prepend', () => {
+      expect(expanderAppendEl().isVisible()).toBe(true);
+      expanderAppendEl().trigger('click');
+      expect(expanderPrependEl().isVisible()).toBe(true);
+    });
+
+    it('clicking hides expanded text', () => {
+      expect(
+        wrapper
+          .find(ExpandButton)
+          .text()
+          .trim(),
+      ).toBe(text.expanded);
+      expanderAppendEl().trigger('click');
+      expect(
+        wrapper
+          .find(ExpandButton)
+          .text()
+          .trim(),
+      ).not.toBe(text.expanded);
+    });
+
+    describe('when short text is provided', () => {
+      beforeEach(done => {
+        factory({
+          slots: {
+            expanded: `<p>${text.expanded}</p>`,
+            short: `<p>${text.short}</p>`,
+          },
+        });
+
+        expanderPrependEl().trigger('click');
+        Vue.nextTick(done);
+      });
+
+      it('clicking reveals short text', () => {
+        expect(
+          wrapper
+            .find(ExpandButton)
+            .text()
+            .trim(),
+        ).toBe(text.expanded);
+        expanderAppendEl().trigger('click');
+        expect(
+          wrapper
+            .find(ExpandButton)
+            .text()
+            .trim(),
+        ).toBe(text.short);
+      });
+    });
+  });
+});

spec/javascripts/vue_shared/components/expand_button_spec.js

-import Vue from 'vue';
-import expandButton from '~/vue_shared/components/expand_button.vue';
-import mountComponent from 'spec/helpers/vue_mount_component_helper';
-
-describe('expand button', () => {
-  const Component = Vue.extend(expandButton);
-  let vm;
-
-  beforeEach(() => {
-    vm = mountComponent(Component, {
-      slots: {
-        expanded: '<p>Expanded!</p>',
-      },
-    });
-  });
-
-  afterEach(() => {
-    vm.$destroy();
-  });
-
-  it('renders a collapsed button', () => {
-    expect(vm.$children[0].iconTestClass).toEqual('ic-ellipsis_h');
-  });
-
-  it('hides expander on click', done => {
-    vm.$el.querySelector('button').click();
-    vm.$nextTick(() => {
-      expect(vm.$el.querySelector('button').getAttribute('style')).toEqual('display: none;');
-      done();
-    });
-  });
-});