Add latest changes from gitlab-org/gitlab@15-5-stable-eev15.5.0-rc42

9 files changed, 619 insertions, 8 deletions

diff --git a/spec/frontend/projects/settings/branch_rules/components/edit/branch_dropdown_spec.js b/spec/frontend/projects/settings/branch_rules/components/edit/branch_dropdown_spec.js
new file mode 100644
index 00000000000..11f219c1f90
--- /dev/null
+++ b/spec/frontend/projects/settings/branch_rules/components/edit/branch_dropdown_spec.js
@@ -0,0 +1,110 @@
+import Vue, { nextTick } from 'vue';
+import VueApollo from 'vue-apollo';
+import { GlDropdown, GlSearchBoxByType, GlDropdownItem, GlSprintf } from '@gitlab/ui';
+import { shallowMountExtended } from 'helpers/vue_test_utils_helper';
+import BranchDropdown, {
+  i18n,
+} from '~/projects/settings/branch_rules/components/edit/branch_dropdown.vue';
+import createMockApollo from 'helpers/mock_apollo_helper';
+import branchesQuery from '~/projects/settings/branch_rules/queries/branches.query.graphql';
+import waitForPromises from 'helpers/wait_for_promises';
+import { createAlert } from '~/flash';
+
+Vue.use(VueApollo);
+jest.mock('~/flash');
+
+describe('Branch dropdown', () => {
+  let wrapper;
+
+  const projectPath = 'test/project';
+  const value = 'main';
+  const mockBranchNames = ['test 1', 'test 2'];
+
+  const createComponent = async ({ branchNames = mockBranchNames, resolver } = {}) => {
+    const mockResolver =
+      resolver ||
+      jest.fn().mockResolvedValue({
+        data: { project: { id: '1', repository: { branchNames } } },
+      });
+    const apolloProvider = createMockApollo([[branchesQuery, mockResolver]]);
+
+    wrapper = shallowMountExtended(BranchDropdown, {
+      apolloProvider,
+      propsData: { projectPath, value },
+    });
+
+    await waitForPromises();
+  };
+
+  const findGlDropdown = () => wrapper.findComponent(GlDropdown);
+  const findAllBranches = () => wrapper.findAllComponents(GlDropdownItem);
+  const findNoDataMsg = () => wrapper.findByTestId('no-data');
+  const findGlSearchBoxByType = () => wrapper.findComponent(GlSearchBoxByType);
+  const findWildcardButton = () => wrapper.findByTestId('create-wildcard-button');
+  const findHelpText = () => wrapper.findComponent(GlSprintf);
+  const setSearchTerm = (searchTerm) => findGlSearchBoxByType().vm.$emit('input', searchTerm);
+
+  beforeEach(() => createComponent());
+
+  afterEach(() => {
+    wrapper.destroy();
+  });
+
+  it('renders a GlDropdown component with the correct props', () => {
+    expect(findGlDropdown().props()).toMatchObject({ text: value });
+  });
+
+  it('renders GlDropdownItem components for each branch', () => {
+    expect(findAllBranches().length).toBe(mockBranchNames.length);
+
+    mockBranchNames.forEach((branchName, index) =>
+      expect(findAllBranches().at(index).text()).toBe(branchName),
+    );
+  });
+
+  it('emits `select` with the branch name when a branch is clicked', () => {
+    findAllBranches().at(0).vm.$emit('click');
+    expect(wrapper.emitted('input')).toEqual([[mockBranchNames[0]]]);
+  });
+
+  describe('branch searching', () => {
+    it('displays a message if no branches can be found', async () => {
+      await createComponent({ branchNames: [] });
+
+      expect(findNoDataMsg().text()).toBe(i18n.noMatch);
+    });
+
+    it('displays a loading state while search request is in flight', async () => {
+      setSearchTerm('test');
+      await nextTick();
+
+      expect(findGlSearchBoxByType().props()).toMatchObject({ isLoading: true });
+    });
+
+    it('renders a wildcard button', async () => {
+      const searchTerm = 'test-*';
+      setSearchTerm(searchTerm);
+      await nextTick();
+
+      expect(findWildcardButton().exists()).toBe(true);
+      findWildcardButton().vm.$emit('click');
+      expect(wrapper.emitted('createWildcard')).toEqual([[searchTerm]]);
+    });
+
+    it('renders help text', () => {
+      expect(findHelpText().attributes('message')).toBe(i18n.branchHelpText);
+    });
+  });
+
+  it('displays an error message if fetch failed', async () => {
+    const error = new Error('an error occurred');
+    const resolver = jest.fn().mockRejectedValueOnce(error);
+    await createComponent({ resolver });
+
+    expect(createAlert).toHaveBeenCalledWith({
+      message: i18n.fetchBranchesError,
+      captureError: true,
+      error,
+    });
+  });
+});
diff --git a/spec/frontend/projects/settings/branch_rules/components/edit/index_spec.js b/spec/frontend/projects/settings/branch_rules/components/edit/index_spec.js
new file mode 100644
index 00000000000..21e63fdb24d
--- /dev/null
+++ b/spec/frontend/projects/settings/branch_rules/components/edit/index_spec.js
@@ -0,0 +1,108 @@
+import { nextTick } from 'vue';
+import { getParameterByName } from '~/lib/utils/url_utility';
+import { shallowMountExtended } from 'helpers/vue_test_utils_helper';
+import RuleEdit from '~/projects/settings/branch_rules/components/edit/index.vue';
+import BranchDropdown from '~/projects/settings/branch_rules/components/edit/branch_dropdown.vue';
+import Protections from '~/projects/settings/branch_rules/components/edit/protections/index.vue';
+
+jest.mock('~/lib/utils/url_utility', () => ({
+  getParameterByName: jest.fn().mockImplementation(() => 'main'),
+  joinPaths: jest.fn(),
+  setUrlFragment: jest.fn(),
+}));
+
+describe('Edit branch rule', () => {
+  let wrapper;
+  const projectPath = 'test/testing';
+
+  const createComponent = () => {
+    wrapper = shallowMountExtended(RuleEdit, { propsData: { projectPath } });
+  };
+
+  const findBranchDropdown = () => wrapper.findComponent(BranchDropdown);
+  const findProtections = () => wrapper.findComponent(Protections);
+
+  beforeEach(() => createComponent());
+
+  afterEach(() => {
+    wrapper.destroy();
+  });
+
+  it('gets the branch param from url', () => {
+    expect(getParameterByName).toHaveBeenCalledWith('branch');
+  });
+
+  describe('BranchDropdown', () => {
+    it('renders a BranchDropdown component with the correct props', () => {
+      expect(findBranchDropdown().props()).toMatchObject({
+        projectPath,
+        value: 'main',
+      });
+    });
+
+    it('sets the correct value when `input` is emitted', async () => {
+      const branch = 'test';
+      findBranchDropdown().vm.$emit('input', branch);
+      await nextTick();
+      expect(findBranchDropdown().props('value')).toBe(branch);
+    });
+
+    it('sets the correct value when `createWildcard` is emitted', async () => {
+      const wildcard = 'test-*';
+      findBranchDropdown().vm.$emit('createWildcard', wildcard);
+      await nextTick();
+      expect(findBranchDropdown().props('value')).toBe(wildcard);
+    });
+  });
+
+  describe('Protections', () => {
+    it('renders a Protections component with the correct props', () => {
+      expect(findProtections().props('protections')).toMatchObject({
+        membersAllowedToPush: [],
+        allowForcePush: false,
+        membersAllowedToMerge: [],
+        requireCodeOwnersApproval: false,
+      });
+    });
+
+    it('updates protections when change-allowed-to-push-members is emitted', async () => {
+      const membersAllowedToPush = ['test'];
+      findProtections().vm.$emit('change-allowed-to-push-members', membersAllowedToPush);
+      await nextTick();
+
+      expect(findProtections().props('protections')).toEqual(
+        expect.objectContaining({ membersAllowedToPush }),
+      );
+    });
+
+    it('updates protections when change-allow-force-push is emitted', async () => {
+      const allowForcePush = true;
+      findProtections().vm.$emit('change-allow-force-push', allowForcePush);
+      await nextTick();
+
+      expect(findProtections().props('protections')).toEqual(
+        expect.objectContaining({ allowForcePush }),
+      );
+    });
+
+    it('updates protections when change-allowed-to-merge-members is emitted', async () => {
+      const membersAllowedToMerge = ['test'];
+      findProtections().vm.$emit('change-allowed-to-merge-members', membersAllowedToMerge);
+      await nextTick();
+
+      expect(findProtections().props('protections')).toEqual(
+        expect.objectContaining({ membersAllowedToMerge }),
+      );
+    });
+
+    it('updates protections when change-require-code-owners-approval is emitted', async () => {
+      const requireCodeOwnersApproval = true;
+      findProtections().vm.$emit('change-require-code-owners-approval', requireCodeOwnersApproval);
+      await nextTick();
+
+      expect(findProtections().props('protections')).toEqual(
+        expect.objectContaining({ requireCodeOwnersApproval }),
+      );
+    });
+  });
+});
diff --git a/spec/frontend/projects/settings/branch_rules/components/protections/index_spec.js b/spec/frontend/projects/settings/branch_rules/components/edit/protections/index_spec.js
index 3592fa50622..ee90ff8318f 100644
--- a/spec/frontend/projects/settings/branch_rules/components/protections/index_spec.js
+++ b/spec/frontend/projects/settings/branch_rules/components/edit/protections/index_spec.js
@@ -3,10 +3,10 @@ import { GlLink } from '@gitlab/ui';
 import { mountExtended } from 'helpers/vue_test_utils_helper';
 import Protections, {
   i18n,
-} from '~/projects/settings/branch_rules/components/protections/index.vue';
-import PushProtections from '~/projects/settings/branch_rules/components/protections/push_protections.vue';
-import MergeProtections from '~/projects/settings/branch_rules/components/protections/merge_protections.vue';
-import { protections } from '../../mock_data';
+} from '~/projects/settings/branch_rules/components/edit/protections/index.vue';
+import PushProtections from '~/projects/settings/branch_rules/components/edit/protections/push_protections.vue';
+import MergeProtections from '~/projects/settings/branch_rules/components/edit/protections/merge_protections.vue';
+import { protections } from '../../../mock_data';
 
 describe('Branch Protections', () => {
   let wrapper;
diff --git a/spec/frontend/projects/settings/branch_rules/components/protections/merge_protections_spec.js b/spec/frontend/projects/settings/branch_rules/components/edit/protections/merge_protections_spec.js
index 0e168a2ad78..b5fdc46d600 100644
--- a/spec/frontend/projects/settings/branch_rules/components/protections/merge_protections_spec.js
+++ b/spec/frontend/projects/settings/branch_rules/components/edit/protections/merge_protections_spec.js
@@ -2,8 +2,8 @@ import { GlFormGroup, GlFormCheckbox } from '@gitlab/ui';
 import { mountExtended } from 'helpers/vue_test_utils_helper';
 import MergeProtections, {
   i18n,
-} from '~/projects/settings/branch_rules/components/protections/merge_protections.vue';
-import { membersAllowedToMerge, requireCodeOwnersApproval } from '../../mock_data';
+} from '~/projects/settings/branch_rules/components/edit/protections/merge_protections.vue';
+import { membersAllowedToMerge, requireCodeOwnersApproval } from '../../../mock_data';
 
 describe('Merge Protections', () => {
   let wrapper;
diff --git a/spec/frontend/projects/settings/branch_rules/components/protections/push_protections_spec.js b/spec/frontend/projects/settings/branch_rules/components/edit/protections/push_protections_spec.js
index d54dad08338..60bb7a51dcb 100644
--- a/spec/frontend/projects/settings/branch_rules/components/protections/push_protections_spec.js
+++ b/spec/frontend/projects/settings/branch_rules/components/edit/protections/push_protections_spec.js
@@ -2,8 +2,8 @@ import { GlFormGroup, GlSprintf, GlFormCheckbox } from '@gitlab/ui';
 import { shallowMountExtended } from 'helpers/vue_test_utils_helper';
 import PushProtections, {
   i18n,
-} from '~/projects/settings/branch_rules/components/protections/push_protections.vue';
-import { membersAllowedToPush, allowForcePush } from '../../mock_data';
+} from '~/projects/settings/branch_rules/components/edit/protections/push_protections.vue';
+import { membersAllowedToPush, allowForcePush } from '../../../mock_data';
 
 describe('Push Protections', () => {
   let wrapper;
diff --git a/spec/frontend/projects/settings/branch_rules/components/view/index_spec.js b/spec/frontend/projects/settings/branch_rules/components/view/index_spec.js
new file mode 100644
index 00000000000..bf4026b65db
--- /dev/null
+++ b/spec/frontend/projects/settings/branch_rules/components/view/index_spec.js
@@ -0,0 +1,113 @@
+import Vue from 'vue';
+import VueApollo from 'vue-apollo';
+import * as util from '~/lib/utils/url_utility';
+import { shallowMountExtended } from 'helpers/vue_test_utils_helper';
+import createMockApollo from 'helpers/mock_apollo_helper';
+import waitForPromises from 'helpers/wait_for_promises';
+import RuleView from '~/projects/settings/branch_rules/components/view/index.vue';
+import {
+  I18N,
+  ALL_BRANCHES_WILDCARD,
+} from '~/projects/settings/branch_rules/components/view/constants';
+import Protection from '~/projects/settings/branch_rules/components/view/protection.vue';
+import branchRulesQuery from '~/projects/settings/branch_rules/queries/branch_rules_details.query.graphql';
+import { sprintf } from '~/locale';
+import { branchProtectionsMockResponse } from './mock_data';
+
+jest.mock('~/lib/utils/url_utility', () => ({
+  getParameterByName: jest.fn().mockReturnValue('main'),
+  joinPaths: jest.fn(),
+}));
+
+Vue.use(VueApollo);
+
+const protectionMockProps = {
+  headerLinkHref: 'protected/branches',
+  headerLinkTitle: 'Manage in Protected Branches',
+  roles: [{ accessLevelDescription: 'Maintainers' }],
+  users: [{ avatarUrl: 'test.com/user.png', name: 'peter', webUrl: 'test.com' }],
+};
+
+describe('View branch rules', () => {
+  let wrapper;
+  let fakeApollo;
+  const projectPath = 'test/testing';
+  const protectedBranchesPath = 'protected/branches';
+  const approvalRulesPath = 'approval/rules';
+  const branchProtectionsMockRequestHandler = jest
+    .fn()
+    .mockResolvedValue(branchProtectionsMockResponse);
+
+  const createComponent = async () => {
+    fakeApollo = createMockApollo([[branchRulesQuery, branchProtectionsMockRequestHandler]]);
+
+    wrapper = shallowMountExtended(RuleView, {
+      apolloProvider: fakeApollo,
+      provide: { projectPath, protectedBranchesPath, approvalRulesPath },
+    });
+
+    await waitForPromises();
+  };
+
+  beforeEach(() => createComponent());
+
+  afterEach(() => wrapper.destroy());
+
+  const findBranchName = () => wrapper.findByTestId('branch');
+  const findBranchTitle = () => wrapper.findByTestId('branch-title');
+  const findBranchProtectionTitle = () => wrapper.findByText(I18N.protectBranchTitle);
+  const findBranchProtections = () => wrapper.findAllComponents(Protection);
+  const findForcePushTitle = () => wrapper.findByText(I18N.allowForcePushDescription);
+  const findApprovalsTitle = () => wrapper.findByText(I18N.approvalsTitle);
+
+  it('gets the branch param from url and renders it in the view', () => {
+    expect(util.getParameterByName).toHaveBeenCalledWith('branch');
+    expect(findBranchName().text()).toBe('main');
+    expect(findBranchTitle().text()).toBe(I18N.branchNameOrPattern);
+  });
+
+  it('renders the correct label if all branches are targeted', async () => {
+    jest.spyOn(util, 'getParameterByName').mockReturnValueOnce(ALL_BRANCHES_WILDCARD);
+    await createComponent();
+
+    expect(findBranchName().text()).toBe(I18N.allBranches);
+    expect(findBranchTitle().text()).toBe(I18N.targetBranch);
+    jest.restoreAllMocks();
+  });
+
+  it('renders the correct branch title', () => {
+    expect(findBranchTitle().exists()).toBe(true);
+  });
+
+  it('renders a branch protection title', () => {
+    expect(findBranchProtectionTitle().exists()).toBe(true);
+  });
+
+  it('renders a branch protection component for push rules', () => {
+    expect(findBranchProtections().at(0).props()).toMatchObject({
+      header: sprintf(I18N.allowedToPushHeader, { total: 2 }),
+      ...protectionMockProps,
+    });
+  });
+
+  it('renders force push protection', () => {
+    expect(findForcePushTitle().exists()).toBe(true);
+  });
+
+  it('renders a branch protection component for merge rules', () => {
+    expect(findBranchProtections().at(1).props()).toMatchObject({
+      header: sprintf(I18N.allowedToMergeHeader, { total: 2 }),
+      ...protectionMockProps,
+    });
+  });
+
+  it('renders a branch protection component for approvals', () => {
+    expect(findApprovalsTitle().exists()).toBe(true);
+
+    expect(findBranchProtections().at(2).props()).toMatchObject({
+      header: sprintf(I18N.approvalsHeader, { total: 0 }),
+      headerLinkHref: approvalRulesPath,
+      headerLinkTitle: I18N.manageApprovalsLinkTitle,
+    });
+  });
+});
diff --git a/spec/frontend/projects/settings/branch_rules/components/view/mock_data.js b/spec/frontend/projects/settings/branch_rules/components/view/mock_data.js
new file mode 100644
index 00000000000..c3f573061da
--- /dev/null
+++ b/spec/frontend/projects/settings/branch_rules/components/view/mock_data.js
@@ -0,0 +1,141 @@
+const usersMock = [
+  {
+    username: 'usr1',
+    webUrl: 'http://test.test/usr1',
+    name: 'User 1',
+    avatarUrl: 'http://test.test/avt1.png',
+  },
+  {
+    username: 'usr2',
+    webUrl: 'http://test.test/usr2',
+    name: 'User 2',
+    avatarUrl: 'http://test.test/avt2.png',
+  },
+  {
+    username: 'usr3',
+    webUrl: 'http://test.test/usr3',
+    name: 'User 3',
+    avatarUrl: 'http://test.test/avt3.png',
+  },
+  {
+    username: 'usr4',
+    webUrl: 'http://test.test/usr4',
+    name: 'User 4',
+    avatarUrl: 'http://test.test/avt4.png',
+  },
+  {
+    username: 'usr5',
+    webUrl: 'http://test.test/usr5',
+    name: 'User 5',
+    avatarUrl: 'http://test.test/avt5.png',
+  },
+];
+
+const accessLevelsMock = [
+  { accessLevelDescription: 'Administrator' },
+  { accessLevelDescription: 'Maintainer' },
+];
+
+const approvalsRequired = 3;
+
+const groupsMock = [{ name: 'test_group_1' }, { name: 'test_group_2' }];
+
+export const protectionPropsMock = {
+  header: 'Test protection',
+  headerLinkTitle: 'Test link title',
+  headerLinkHref: 'Test link href',
+  roles: accessLevelsMock,
+  users: usersMock,
+  groups: groupsMock,
+  approvals: [
+    {
+      name: 'test',
+      eligibleApprovers: { nodes: usersMock },
+      approvalsRequired,
+    },
+  ],
+};
+
+export const protectionRowPropsMock = {
+  title: 'Test title',
+  users: usersMock,
+  accessLevels: accessLevelsMock,
+  approvalsRequired,
+};
+
+export const accessLevelsMockResponse = [
+  {
+    __typename: 'PushAccessLevelEdge',
+    node: {
+      __typename: 'PushAccessLevel',
+      accessLevel: 40,
+      accessLevelDescription: 'Jona Langworth',
+      group: null,
+      user: {
+        __typename: 'UserCore',
+        id: '123',
+        webUrl: 'test.com',
+        name: 'peter',
+        avatarUrl: 'test.com/user.png',
+      },
+    },
+  },
+  {
+    __typename: 'PushAccessLevelEdge',
+    node: {
+      __typename: 'PushAccessLevel',
+      accessLevel: 40,
+      accessLevelDescription: 'Maintainers',
+      group: null,
+      user: null,
+    },
+  },
+];
+
+export const branchProtectionsMockResponse = {
+  data: {
+    project: {
+      id: 'gid://gitlab/Project/6',
+      __typename: 'Project',
+      branchRules: {
+        __typename: 'BranchRuleConnection',
+        nodes: [
+          {
+            __typename: 'BranchRule',
+            name: 'main',
+            branchProtection: {
+              __typename: 'BranchProtection',
+              allowForcePush: true,
+              codeOwnerApprovalRequired: true,
+              mergeAccessLevels: {
+                __typename: 'MergeAccessLevelConnection',
+                edges: accessLevelsMockResponse,
+              },
+              pushAccessLevels: {
+                __typename: 'PushAccessLevelConnection',
+                edges: accessLevelsMockResponse,
+              },
+            },
+          },
+          {
+            __typename: 'BranchRule',
+            name: '*',
+            branchProtection: {
+              __typename: 'BranchProtection',
+              allowForcePush: true,
+              codeOwnerApprovalRequired: true,
+              mergeAccessLevels: {
+                __typename: 'MergeAccessLevelConnection',
+                edges: [],
+              },
+              pushAccessLevels: {
+                __typename: 'PushAccessLevelConnection',
+                edges: [],
+              },
+            },
+          },
+        ],
+      },
+    },
+  },
+};
diff --git a/spec/frontend/projects/settings/branch_rules/components/view/protection_row_spec.js b/spec/frontend/projects/settings/branch_rules/components/view/protection_row_spec.js
new file mode 100644
index 00000000000..b0a69bedd3e
--- /dev/null
+++ b/spec/frontend/projects/settings/branch_rules/components/view/protection_row_spec.js
@@ -0,0 +1,71 @@
+import { GlAvatarsInline, GlAvatar, GlAvatarLink } from '@gitlab/ui';
+import { shallowMountExtended } from 'helpers/vue_test_utils_helper';
+import ProtectionRow, {
+  MAX_VISIBLE_AVATARS,
+  AVATAR_SIZE,
+} from '~/projects/settings/branch_rules/components/view/protection_row.vue';
+import { protectionRowPropsMock } from './mock_data';
+
+describe('Branch rule protection row', () => {
+  let wrapper;
+
+  const createComponent = () => {
+    wrapper = shallowMountExtended(ProtectionRow, {
+      propsData: protectionRowPropsMock,
+      stubs: { GlAvatarsInline },
+    });
+  };
+
+  beforeEach(() => createComponent());
+
+  afterEach(() => wrapper.destroy());
+
+  const findTitle = () => wrapper.findByText(protectionRowPropsMock.title);
+  const findAvatarsInline = () => wrapper.findComponent(GlAvatarsInline);
+  const findAvatarLinks = () => wrapper.findAllComponents(GlAvatarLink);
+  const findAvatars = () => wrapper.findAllComponents(GlAvatar);
+  const findAccessLevels = () => wrapper.findAllByTestId('access-level');
+  const findApprovalsRequired = () =>
+    wrapper.findByText(`${protectionRowPropsMock.approvalsRequired} approvals required`);
+
+  it('renders a title', () => {
+    expect(findTitle().exists()).toBe(true);
+  });
+
+  it('renders an avatars-inline component', () => {
+    expect(findAvatarsInline().props('avatars')).toMatchObject(protectionRowPropsMock.users);
+    expect(findAvatarsInline().props('badgeSrOnlyText')).toBe('1 additional user');
+  });
+
+  it('renders avatar-link components', () => {
+    expect(findAvatarLinks().length).toBe(MAX_VISIBLE_AVATARS);
+
+    expect(findAvatarLinks().at(1).attributes('href')).toBe(protectionRowPropsMock.users[1].webUrl);
+    expect(findAvatarLinks().at(1).attributes('title')).toBe(protectionRowPropsMock.users[1].name);
+  });
+
+  it('renders avatar components', () => {
+    expect(findAvatars().length).toBe(MAX_VISIBLE_AVATARS);
+
+    expect(findAvatars().at(1).attributes('src')).toBe(protectionRowPropsMock.users[1].avatarUrl);
+    expect(findAvatars().at(1).attributes('label')).toBe(protectionRowPropsMock.users[1].name);
+    expect(findAvatars().at(1).props('size')).toBe(AVATAR_SIZE);
+  });
+
+  it('renders access level descriptions', () => {
+    expect(findAccessLevels().length).toBe(protectionRowPropsMock.accessLevels.length);
+
+    expect(findAccessLevels().at(0).text()).toBe(
+      protectionRowPropsMock.accessLevels[0].accessLevelDescription,
+    );
+    expect(findAccessLevels().at(1).text()).toContain(',');
+
+    expect(findAccessLevels().at(1).text()).toContain(
+      protectionRowPropsMock.accessLevels[1].accessLevelDescription,
+    );
+  });
+
+  it('renders the number of approvals required', () => {
+    expect(findApprovalsRequired().exists()).toBe(true);
+  });
+});
diff --git a/spec/frontend/projects/settings/branch_rules/components/view/protection_spec.js b/spec/frontend/projects/settings/branch_rules/components/view/protection_spec.js
new file mode 100644
index 00000000000..e2fbb4f5bbb
--- /dev/null
+++ b/spec/frontend/projects/settings/branch_rules/components/view/protection_spec.js
@@ -0,0 +1,68 @@
+import { GlCard, GlLink } from '@gitlab/ui';
+import { shallowMountExtended } from 'helpers/vue_test_utils_helper';
+import Protection, { i18n } from '~/projects/settings/branch_rules/components/view/protection.vue';
+import ProtectionRow from '~/projects/settings/branch_rules/components/view/protection_row.vue';
+import { protectionPropsMock } from './mock_data';
+
+describe('Branch rule protection', () => {
+  let wrapper;
+
+  const createComponent = () => {
+    wrapper = shallowMountExtended(Protection, {
+      propsData: protectionPropsMock,
+      stubs: { GlCard },
+    });
+  };
+
+  beforeEach(() => createComponent());
+
+  afterEach(() => wrapper.destroy());
+
+  const findCard = () => wrapper.findComponent(GlCard);
+  const findHeader = () => wrapper.findByText(protectionPropsMock.header);
+  const findLink = () => wrapper.findComponent(GlLink);
+  const findProtectionRows = () => wrapper.findAllComponents(ProtectionRow);
+
+  it('renders a card component', () => {
+    expect(findCard().exists()).toBe(true);
+  });
+
+  it('renders a header with a link', () => {
+    expect(findHeader().exists()).toBe(true);
+    expect(findLink().text()).toBe(protectionPropsMock.headerLinkTitle);
+    expect(findLink().attributes('href')).toBe(protectionPropsMock.headerLinkHref);
+  });
+
+  it('renders a protection row for roles', () => {
+    expect(findProtectionRows().at(0).props()).toMatchObject({
+      accessLevels: protectionPropsMock.roles,
+      showDivider: false,
+      title: i18n.rolesTitle,
+    });
+  });
+
+  it('renders a protection row for users', () => {
+    expect(findProtectionRows().at(1).props()).toMatchObject({
+      users: protectionPropsMock.users,
+      showDivider: true,
+      title: i18n.usersTitle,
+    });
+  });
+
+  it('renders a protection row for groups', () => {
+    expect(findProtectionRows().at(2).props()).toMatchObject({
+      accessLevels: protectionPropsMock.groups,
+      showDivider: true,
+      title: i18n.groupsTitle,
+    });
+  });
+
+  it('renders a protection row for approvals', () => {
+    const approval = protectionPropsMock.approvals[0];
+    expect(findProtectionRows().at(3).props()).toMatchObject({
+      title: approval.name,
+      users: approval.eligibleApprovers.nodes,
+      approvalsRequired: approval.approvalsRequired,
+    });
+  });
+});