Blob header default actions

1/4 components constituting the Blob File header component

app/assets/javascripts/blob/components/blob_header_default_actions.vue

+<script>
+import { GlButton, GlButtonGroup, GlIcon, GlTooltipDirective } from '@gitlab/ui';
+import { __ } from '~/locale';
+import { BTN_COPY_CONTENTS_TITLE, BTN_DOWNLOAD_TITLE, BTN_RAW_TITLE } from './constants';
+
+export default {
+  components: {
+    GlIcon,
+    GlButtonGroup,
+    GlButton,
+  },
+  directives: {
+    GlTooltip: GlTooltipDirective,
+  },
+  props: {
+    blob: {
+      type: Object,
+      required: true,
+    },
+  },
+  computed: {
+    copyBtnTitle() {
+      return __(BTN_COPY_CONTENTS_TITLE);
+    },
+    rawBtnTitle() {
+      return __(BTN_RAW_TITLE);
+    },
+    downloadBtnTitle() {
+      return __(BTN_DOWNLOAD_TITLE);
+    },
+    rawUrl() {
+      return this.blob.rawPath;
+    },
+    downloadUrl() {
+      return `${this.blob.rawPath}?inline=false`;
+    },
+  },
+  methods: {
+    requestCopyContents() {
+      this.$emit('copy');
+    },
+  },
+};
+</script>
+<template>
+  <gl-button-group>
+    <gl-button
+      v-gl-tooltip.hover
+      :aria-label="copyBtnTitle"
+      :title="copyBtnTitle"
+      @click="requestCopyContents"
+    >
+      <gl-icon name="copy-to-clipboard" :size="14" />
+    </gl-button>
+    <gl-button
+      v-gl-tooltip.hover
+      :aria-label="rawBtnTitle"
+      :title="rawBtnTitle"
+      :href="rawUrl"
+      rel="noopener noreferrer"
+      target="_blank"
+    >
+      <gl-icon name="doc-code" :size="14" />
+    </gl-button>
+    <gl-button
+      v-gl-tooltip.hover
+      :aria-label="downloadBtnTitle"
+      :title="downloadBtnTitle"
+      :href="downloadUrl"
+      rel="noopener noreferrer"
+      target="_blank"
+    >
+      <gl-icon name="download" :size="14" />
+    </gl-button>
+  </gl-button-group>
+</template>

app/assets/javascripts/blob/components/constants.js

+export const BTN_COPY_CONTENTS_TITLE = 'Copy file contents';
+export const BTN_RAW_TITLE = 'Open raw';
+export const BTN_DOWNLOAD_TITLE = 'Download';

spec/frontend/blob/components/blob_header_default_actions_spec.js

+import { mount } from '@vue/test-utils';
+import BlobHeaderActions from '~/blob/components/blob_header_default_actions.vue';
+import {
+  BTN_COPY_CONTENTS_TITLE,
+  BTN_DOWNLOAD_TITLE,
+  BTN_RAW_TITLE,
+} from '~/blob/components/constants';
+import { GlButtonGroup, GlButton } from '@gitlab/ui';
+import { Blob } from './mock_data';
+
+describe('Blob Header Default Actions', () => {
+  let wrapper;
+  let btnGroup;
+  let buttons;
+  const hrefPrefix = 'http://localhost';
+
+  function createComponent(props = {}) {
+    wrapper = mount(BlobHeaderActions, {
+      propsData: {
+        blob: Object.assign({}, Blob, props),
+      },
+    });
+  }
+
+  beforeEach(() => {
+    createComponent();
+    btnGroup = wrapper.find(GlButtonGroup);
+    buttons = wrapper.findAll(GlButton);
+  });
+
+  afterEach(() => {
+    wrapper.destroy();
+  });
+
+  describe('renders', () => {
+    it('gl-button-group component', () => {
+      expect(btnGroup.exists()).toBe(true);
+    });
+
+    it('exactly 3 buttons with predefined actions', () => {
+      expect(buttons.length).toBe(3);
+      [BTN_COPY_CONTENTS_TITLE, BTN_RAW_TITLE, BTN_DOWNLOAD_TITLE].forEach((title, i) => {
+        expect(buttons.at(i).vm.$el.title).toBe(title);
+      });
+    });
+
+    it('correct href attribute on RAW button', () => {
+      expect(buttons.at(1).vm.$el.href).toBe(`${hrefPrefix}${Blob.rawPath}`);
+    });
+
+    it('correct href attribute on Download button', () => {
+      expect(buttons.at(2).vm.$el.href).toBe(`${hrefPrefix}${Blob.rawPath}?inline=false`);
+    });
+  });
+
+  describe('functionally', () => {
+    it('emits an event when a Copy Contents button is clicked', () => {
+      jest.spyOn(wrapper.vm, '$emit');
+      buttons.at(0).vm.$emit('click');
+
+      expect(wrapper.vm.$emit).toHaveBeenCalledWith('copy');
+    });
+  });
+});