diff options
Diffstat (limited to 'spec/frontend')
3 files changed, 154 insertions, 0 deletions
diff --git a/spec/frontend/blob/components/__snapshots__/blob_header_filepath_spec.js.snap b/spec/frontend/blob/components/__snapshots__/blob_header_filepath_spec.js.snap new file mode 100644 index 00000000000..7382a3a4cf7 --- /dev/null +++ b/spec/frontend/blob/components/__snapshots__/blob_header_filepath_spec.js.snap @@ -0,0 +1,35 @@ +// Jest Snapshot v1, https://goo.gl/fbAQLP + +exports[`Blob Header Filepath rendering matches the snapshot 1`] = ` +<div + class="file-header-content d-flex align-items-center lh-100" +> + + <file-icon-stub + aria-hidden="true" + cssclasses="mr-2" + filename="dummy.md" + size="18" + /> + + <strong + class="file-title-name qa-file-title-name mr-1 js-blob-header-filepath" + > + dummy.md + </strong> + + <small + class="mr-2" + > + a lot + </small> + + <clipboard-button-stub + cssclass="btn-clipboard btn-transparent lh-100 position-static" + gfm="\`dummy.md\`" + text="dummy.md" + title="Copy file path" + tooltipplacement="top" + /> +</div> +`; diff --git a/spec/frontend/blob/components/blob_header_filepath_spec.js b/spec/frontend/blob/components/blob_header_filepath_spec.js new file mode 100644 index 00000000000..d029ba2a7a4 --- /dev/null +++ b/spec/frontend/blob/components/blob_header_filepath_spec.js @@ -0,0 +1,90 @@ +import { shallowMount } from '@vue/test-utils'; +import BlobHeaderFilepath from '~/blob/components/blob_header_filepath.vue'; +import ClipboardButton from '~/vue_shared/components/clipboard_button.vue'; +import { Blob as MockBlob } from './mock_data'; +import { numberToHumanSize } from '~/lib/utils/number_utils'; + +const mockHumanReadableSize = 'a lot'; +jest.mock('~/lib/utils/number_utils', () => ({ + numberToHumanSize: jest.fn(() => mockHumanReadableSize), +})); + +describe('Blob Header Filepath', () => { + let wrapper; + + function createComponent(blobProps = {}, options = {}) { + wrapper = shallowMount(BlobHeaderFilepath, { + propsData: { + blob: Object.assign({}, MockBlob, blobProps), + }, + ...options, + }); + } + + afterEach(() => { + wrapper.destroy(); + }); + + describe('rendering', () => { + it('matches the snapshot', () => { + createComponent(); + expect(wrapper.element).toMatchSnapshot(); + }); + + it('renders regular name', () => { + createComponent(); + expect( + wrapper + .find('.js-blob-header-filepath') + .text() + .trim(), + ).toBe(MockBlob.name); + }); + + it('does not fail if the name is empty', () => { + const emptyName = ''; + createComponent({ name: emptyName }); + expect(wrapper.find('.js-blob-header-filepath').exists()).toBe(false); + }); + + it('renders copy-to-clipboard icon that copies path of the Blob', () => { + createComponent(); + const btn = wrapper.find(ClipboardButton); + expect(btn.exists()).toBe(true); + expect(btn.vm.text).toBe(MockBlob.path); + }); + + it('renders filesize in a human-friendly format', () => { + createComponent(); + expect(numberToHumanSize).toHaveBeenCalled(); + expect(wrapper.vm.blobSize).toBe(mockHumanReadableSize); + }); + + it('renders a slot and prepends its contents to the existing one', () => { + const slotContent = 'Foo Bar'; + createComponent( + {}, + { + scopedSlots: { + filepathPrepend: `<span>${slotContent}</span>`, + }, + }, + ); + + expect(wrapper.text()).toContain(slotContent); + expect( + wrapper + .text() + .trim() + .substring(0, slotContent.length), + ).toBe(slotContent); + }); + }); + + describe('functionality', () => { + it('sets gfm value correctly on the clipboard-button', () => { + createComponent(); + expect(wrapper.vm.gfmCopyText).toBe('`dummy.md`'); + }); + }); +}); diff --git a/spec/frontend/blob/components/mock_data.js b/spec/frontend/blob/components/mock_data.js new file mode 100644 index 00000000000..4f7b297aba0 --- /dev/null +++ b/spec/frontend/blob/components/mock_data.js @@ -0,0 +1,29 @@ +export const Blob = { + binary: false, + highlightedData: + '<h1 data-sourcepos="1:1-1:19" dir="auto">\n<a id="user-content-this-one-is-dummy" class="anchor" href="#this-one-is-dummy" aria-hidden="true"></a>This one is dummy</h1>\n<h2 data-sourcepos="3:1-3:21" dir="auto">\n<a id="user-content-and-has-sub-header" class="anchor" href="#and-has-sub-header" aria-hidden="true"></a>And has sub-header</h2>\n<p data-sourcepos="5:1-5:27" dir="auto">Even some stupid text here</p>', + name: 'dummy.md', + path: 'dummy.md', + rawPath: '/flightjs/flight/snippets/51/raw', + size: 75, + simpleViewer: { + collapsed: false, + fileType: 'text', + loadAsync: true, + loadingPartialName: 'loading', + renderError: null, + tooLarge: false, + type: 'simple', + }, + richViewer: { + collapsed: false, + fileType: 'markup', + loadAsync: true, + loadingPartialName: 'loading', + renderError: null, + tooLarge: false, + type: 'rich', + }, +}; + +export default {}; |