summaryrefslogtreecommitdiff
path: root/spec/frontend/projects/commit_box/info/load_branches_spec.js
blob: 9456e6ef5f5161b5545381316458ca2889fcb419 (plain)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
import axios from 'axios';
import MockAdapter from 'axios-mock-adapter';
import { setHTMLFixture } from 'helpers/fixtures';
import waitForPromises from 'helpers/wait_for_promises';
import { loadBranches } from '~/projects/commit_box/info/load_branches';

const mockCommitPath = '/commit/abcd/branches';
const mockBranchesRes =
  '<a href="/-/commits/main">main</a><span><a href="/-/commits/my-branch">my-branch</a></span>';

describe('~/projects/commit_box/info/load_branches', () => {
  let mock;

  const getElInnerHtml = () => document.querySelector('.js-commit-box-info').innerHTML;

  beforeEach(() => {
    setHTMLFixture(`
      <div class="js-commit-box-info" data-commit-path="${mockCommitPath}">
        <div class="commit-info branches">
          <span class="spinner"/>
        </div>
      </div>`);

    mock = new MockAdapter(axios);
    mock.onGet(mockCommitPath).reply(200, mockBranchesRes);
  });

  it('loads and renders branches info', async () => {
    loadBranches();
    await waitForPromises();

    expect(getElInnerHtml()).toMatchInterpolatedText(
      `<div class="commit-info branches">${mockBranchesRes}</div>`,
    );
  });

  it('does not load when no container is provided', async () => {
    loadBranches('.js-another-class');
    await waitForPromises();

    expect(mock.history.get).toHaveLength(0);
  });

  describe('when branches request returns unsafe content', () => {
    beforeEach(() => {
      mock
        .onGet(mockCommitPath)
        .reply(200, '<a onload="alert(\'xss!\');" href="/-/commits/main">main</a>');
    });

    it('displays sanitized html', async () => {
      loadBranches();
      await waitForPromises();

      expect(getElInnerHtml()).toMatchInterpolatedText(
        '<div class="commit-info branches"><a href="/-/commits/main">main</a></div>',
      );
    });
  });

  describe('when branches request fails', () => {
    beforeEach(() => {
      mock.onGet(mockCommitPath).reply(500, 'Error!');
    });

    it('attempts to load and renders an error', async () => {
      loadBranches();
      await waitForPromises();

      expect(getElInnerHtml()).toMatchInterpolatedText(
        '<div class="commit-info branches">Failed to load branches. Please try again.</div>',
      );
    });
  });
});