Add latest changes from gitlab-org/gitlab@14-7-stable-eev14.7.0-rc42

1 files changed, 88 insertions, 0 deletions

diff --git a/spec/frontend/repository/components/blob_controls_spec.js b/spec/frontend/repository/components/blob_controls_spec.js
new file mode 100644
index 00000000000..03e389ea5cb
--- /dev/null
+++ b/spec/frontend/repository/components/blob_controls_spec.js
@@ -0,0 +1,88 @@
+import { createLocalVue } from '@vue/test-utils';
+import VueApollo from 'vue-apollo';
+import { nextTick } from 'vue';
+import createMockApollo from 'helpers/mock_apollo_helper';
+import waitForPromises from 'helpers/wait_for_promises';
+import BlobControls from '~/repository/components/blob_controls.vue';
+import blobControlsQuery from '~/repository/queries/blob_controls.query.graphql';
+import { shallowMountExtended } from 'helpers/vue_test_utils_helper';
+import createRouter from '~/repository/router';
+import { updateElementsVisibility } from '~/repository/utils/dom';
+import { blobControlsDataMock, refMock } from '../mock_data';
+
+jest.mock('~/repository/utils/dom');
+
+let router;
+let wrapper;
+let mockResolver;
+
+const localVue = createLocalVue();
+
+const createComponent = async () => {
+  localVue.use(VueApollo);
+
+  const project = { ...blobControlsDataMock };
+  const projectPath = 'some/project';
+
+  router = createRouter(projectPath, refMock);
+
+  router.replace({ name: 'blobPath', params: { path: '/some/file.js' } });
+
+  mockResolver = jest.fn().mockResolvedValue({ data: { project } });
+
+  wrapper = shallowMountExtended(BlobControls, {
+    localVue,
+    router,
+    apolloProvider: createMockApollo([[blobControlsQuery, mockResolver]]),
+    propsData: { projectPath },
+    mixins: [{ data: () => ({ ref: refMock }) }],
+  });
+
+  await waitForPromises();
+};
+
+describe('Blob controls component', () => {
+  const findFindButton = () => wrapper.findByTestId('find');
+  const findBlameButton = () => wrapper.findByTestId('blame');
+  const findHistoryButton = () => wrapper.findByTestId('history');
+  const findPermalinkButton = () => wrapper.findByTestId('permalink');
+
+  beforeEach(() => createComponent());
+
+  afterEach(() => wrapper.destroy());
+
+  it('renders a find button with the correct href', () => {
+    expect(findFindButton().attributes('href')).toBe('find/file.js');
+  });
+
+  it('renders a blame button with the correct href', () => {
+    expect(findBlameButton().attributes('href')).toBe('blame/file.js');
+  });
+
+  it('renders a history button with the correct href', () => {
+    expect(findHistoryButton().attributes('href')).toBe('history/file.js');
+  });
+
+  it('renders a permalink button with the correct href', () => {
+    expect(findPermalinkButton().attributes('href')).toBe('permalink/file.js');
+  });
+
+  it.each`
+    name                 | path
+    ${'blobPathDecoded'} | ${null}
+    ${'treePathDecoded'} | ${'myFile.js'}
+  `(
+    'does not render any buttons if router name is $name and router path is $path',
+    async ({ name, path }) => {
+      router.replace({ name, params: { path } });
+
+      await nextTick();
+
+      expect(findFindButton().exists()).toBe(false);
+      expect(findBlameButton().exists()).toBe(false);
+      expect(findHistoryButton().exists()).toBe(false);
+      expect(findPermalinkButton().exists()).toBe(false);
+      expect(updateElementsVisibility).toHaveBeenCalledWith('.tree-controls', true);
+    },
+  );
+});