Welcome to mirror list, hosted at ThFree Co, Russian Federation.

gitlab.com/gitlab-org/gitlab-foss.git - Unnamed repository; edit this file 'description' to name the repository.
summaryrefslogtreecommitdiff
path: root/spec/frontend/badges
diff options
context:
space:
mode:
Diffstat (limited to 'spec/frontend/badges')
-rw-r--r--spec/frontend/badges/components/badge_form_spec.js15
-rw-r--r--spec/frontend/badges/components/badge_list_row_spec.js119
-rw-r--r--spec/frontend/badges/components/badge_list_spec.js95
-rw-r--r--spec/frontend/badges/components/badge_settings_spec.js41
4 files changed, 106 insertions, 164 deletions
diff --git a/spec/frontend/badges/components/badge_form_spec.js b/spec/frontend/badges/components/badge_form_spec.js
index d7519f1f80d..d3d2544dc4f 100644
--- a/spec/frontend/badges/components/badge_form_spec.js
+++ b/spec/frontend/badges/components/badge_form_spec.js
@@ -1,5 +1,6 @@
import MockAdapter from 'axios-mock-adapter';
import Vue from 'vue';
+// eslint-disable-next-line no-restricted-imports
import Vuex from 'vuex';
import { mount } from '@vue/test-utils';
import { DUMMY_IMAGE_URL, TEST_HOST } from 'helpers/test_constants';
@@ -49,7 +50,7 @@ describe('BadgeForm component', () => {
it('stops editing when cancel button is clicked', async () => {
createComponent({ isEditing: true });
- const cancelButton = wrapper.find('.row-content-block button');
+ const cancelButton = wrapper.findAll('[data-testid="action-buttons"] button').at(1);
await cancelButton.trigger('click');
@@ -143,13 +144,13 @@ describe('BadgeForm component', () => {
describe('if isEditing is false', () => {
const props = { isEditing: false };
- it('renders one button', () => {
+ it('renders two buttons', () => {
createComponent(props);
expect(wrapper.find('.row-content-block').exists()).toBe(false);
- const buttons = wrapper.findAll('.form-group:last-of-type button');
+ const buttons = wrapper.findAll('[data-testid="action-buttons"] button');
- expect(buttons).toHaveLength(1);
+ expect(buttons).toHaveLength(2);
const buttonAddWrapper = buttons.at(0);
expect(buttonAddWrapper.isVisible()).toBe(true);
@@ -164,15 +165,15 @@ describe('BadgeForm component', () => {
it('renders two buttons', () => {
createComponent(props);
- const buttons = wrapper.findAll('.row-content-block button');
+ const buttons = wrapper.findAll('[data-testid="action-buttons"] button');
expect(buttons).toHaveLength(2);
- const saveButton = buttons.at(1);
+ const saveButton = buttons.at(0);
expect(saveButton.isVisible()).toBe(true);
expect(saveButton.text()).toBe('Save changes');
- const cancelButton = buttons.at(0);
+ const cancelButton = buttons.at(1);
expect(cancelButton.isVisible()).toBe(true);
expect(cancelButton.text()).toBe('Cancel');
});
diff --git a/spec/frontend/badges/components/badge_list_row_spec.js b/spec/frontend/badges/components/badge_list_row_spec.js
deleted file mode 100644
index cbbeb36ff33..00000000000
--- a/spec/frontend/badges/components/badge_list_row_spec.js
+++ /dev/null
@@ -1,119 +0,0 @@
-import Vue from 'vue';
-import Vuex from 'vuex';
-import { mount } from '@vue/test-utils';
-
-import { setHTMLFixture, resetHTMLFixture } from 'helpers/fixtures';
-import BadgeListRow from '~/badges/components/badge_list_row.vue';
-import { GROUP_BADGE, PROJECT_BADGE } from '~/badges/constants';
-
-import createState from '~/badges/store/state';
-import mutations from '~/badges/store/mutations';
-import actions from '~/badges/store/actions';
-
-import { createDummyBadge } from '../dummy_badge';
-
-Vue.use(Vuex);
-
-describe('BadgeListRow component', () => {
- let badge;
- let wrapper;
- let mockedActions;
-
- const createComponent = (kind) => {
- setHTMLFixture(`<div id="delete-badge-modal" class="modal"></div>`);
-
- mockedActions = Object.fromEntries(Object.keys(actions).map((name) => [name, jest.fn()]));
-
- const store = new Vuex.Store({
- state: {
- ...createState(),
- kind: PROJECT_BADGE,
- },
- mutations,
- actions: mockedActions,
- });
-
- badge = createDummyBadge();
- badge.kind = kind;
- wrapper = mount(BadgeListRow, {
- attachTo: document.body,
- store,
- propsData: { badge },
- });
- };
-
- afterEach(() => {
- resetHTMLFixture();
- });
-
- describe('for a project badge', () => {
- beforeEach(() => {
- createComponent(PROJECT_BADGE);
- });
-
- it('renders the badge', () => {
- const badgeImage = wrapper.find('.project-badge');
-
- expect(badgeImage.exists()).toBe(true);
- expect(badgeImage.attributes('src')).toBe(badge.renderedImageUrl);
- });
-
- it('renders the badge name', () => {
- expect(wrapper.text()).toMatch(badge.name);
- });
-
- it('renders the badge link', () => {
- expect(wrapper.text()).toMatch(badge.linkUrl);
- });
-
- it('renders the badge kind', () => {
- expect(wrapper.text()).toMatch('Project Badge');
- });
-
- it('shows edit and delete buttons', () => {
- const buttons = wrapper.findAll('.table-button-footer button');
-
- expect(buttons).toHaveLength(2);
- const editButton = buttons.at(0);
-
- expect(editButton.isVisible()).toBe(true);
- expect(editButton.element).toHaveSpriteIcon('pencil');
-
- const deleteButton = buttons.at(1);
- expect(deleteButton.isVisible()).toBe(true);
- expect(deleteButton.element).toHaveSpriteIcon('remove');
- });
-
- it('calls editBadge when clicking then edit button', async () => {
- const editButton = wrapper.find('.table-button-footer button:first-of-type');
-
- await editButton.trigger('click');
-
- expect(mockedActions.editBadge).toHaveBeenCalled();
- });
-
- it('calls updateBadgeInModal and shows modal when clicking then delete button', async () => {
- const deleteButton = wrapper.find('.table-button-footer button:last-of-type');
-
- await deleteButton.trigger('click');
-
- expect(mockedActions.updateBadgeInModal).toHaveBeenCalled();
- });
- });
-
- describe('for a group badge', () => {
- beforeEach(() => {
- createComponent(GROUP_BADGE);
- });
-
- it('renders the badge kind', () => {
- expect(wrapper.text()).toMatch('Group Badge');
- });
-
- it('hides edit and delete buttons', () => {
- const buttons = wrapper.findAll('.table-button-footer button');
-
- expect(buttons).toHaveLength(0);
- });
- });
-});
diff --git a/spec/frontend/badges/components/badge_list_spec.js b/spec/frontend/badges/components/badge_list_spec.js
index 374b7b50af4..612e9bdc41f 100644
--- a/spec/frontend/badges/components/badge_list_spec.js
+++ b/spec/frontend/badges/components/badge_list_spec.js
@@ -1,14 +1,13 @@
+import { GlTable, GlButton } from '@gitlab/ui';
import Vue from 'vue';
+// eslint-disable-next-line no-restricted-imports
import Vuex from 'vuex';
-import { mount } from '@vue/test-utils';
-
-import BadgeList from '~/badges/components/badge_list.vue';
+import { mountExtended } from 'helpers/vue_test_utils_helper';
import { GROUP_BADGE, PROJECT_BADGE } from '~/badges/constants';
-
import createState from '~/badges/store/state';
import mutations from '~/badges/store/mutations';
import actions from '~/badges/store/actions';
-
+import BadgeList from '~/badges/components/badge_list.vue';
import { createDummyBadge } from '../dummy_badge';
Vue.use(Vuex);
@@ -21,9 +20,16 @@ const badges = Array.from({ length: numberOfDummyBadges }).map((_, idx) => ({
describe('BadgeList component', () => {
let wrapper;
+ let mockedActions;
+
+ const findTable = () => wrapper.findComponent(GlTable);
+ const findTableRow = (pos) => findTable().find('tbody').findAll('tr').at(pos);
+ const findButtons = () => wrapper.findByTestId('badge-actions').findAllComponents(GlButton);
+ const findEditButton = () => wrapper.findByTestId('edit-badge-button');
+ const findDeleteButton = () => wrapper.findByTestId('delete-badge');
const createComponent = (customState) => {
- const mockedActions = Object.fromEntries(Object.keys(actions).map((name) => [name, jest.fn()]));
+ mockedActions = Object.fromEntries(Object.keys(actions).map((name) => [name, jest.fn()]));
const store = new Vuex.Store({
state: {
@@ -35,28 +41,23 @@ describe('BadgeList component', () => {
actions: mockedActions,
});
- wrapper = mount(BadgeList, { store });
+ wrapper = mountExtended(BadgeList, {
+ store,
+ stubs: {
+ GlTable,
+ GlButton,
+ },
+ });
};
describe('for project badges', () => {
- it('renders a header with the badge count', () => {
- createComponent({
- kind: PROJECT_BADGE,
- badges,
- });
-
- const header = wrapper.find('.card-header');
-
- expect(header.text()).toMatchInterpolatedText('Your badges 3');
- });
-
it('renders a row for each badge', () => {
createComponent({
kind: PROJECT_BADGE,
badges,
});
- const rows = wrapper.findAll('.gl-responsive-table-row');
+ const rows = findTable().find('tbody').findAll('tr');
expect(rows).toHaveLength(numberOfDummyBadges);
});
@@ -89,4 +90,60 @@ describe('BadgeList component', () => {
expect(wrapper.text()).toMatch('This group has no badges');
});
});
+
+ describe('BadgeList item', () => {
+ beforeEach(() => {
+ createComponent({
+ kind: PROJECT_BADGE,
+ badges,
+ });
+ });
+
+ it('renders the badge', () => {
+ const badgeImage = wrapper.find('.project-badge');
+
+ expect(badgeImage.exists()).toBe(true);
+ expect(badgeImage.attributes('src')).toBe(badges[0].renderedImageUrl);
+ });
+
+ it('renders the badge name', () => {
+ const badgeCell = findTableRow(0).findAll('td').at(0);
+
+ expect(badgeCell.text()).toMatch(badges[0].name);
+ });
+
+ it('renders the badge link', () => {
+ expect(wrapper.text()).toMatch(badges[0].linkUrl);
+ });
+
+ it('renders the badge kind', () => {
+ expect(wrapper.text()).toMatch('Project Badge');
+ });
+
+ it('shows edit and delete buttons', () => {
+ expect(findButtons()).toHaveLength(2);
+
+ const editButton = findEditButton();
+
+ expect(editButton.isVisible()).toBe(true);
+ expect(editButton.element).toHaveSpriteIcon('pencil');
+
+ const deleteButton = findDeleteButton();
+
+ expect(deleteButton.isVisible()).toBe(true);
+ expect(deleteButton.element).toHaveSpriteIcon('remove');
+ });
+
+ it('calls editBadge when clicking then edit button', () => {
+ findEditButton().trigger('click');
+
+ expect(mockedActions.editBadge).toHaveBeenCalled();
+ });
+
+ it('calls updateBadgeInModal and shows modal when clicking then delete button', () => {
+ findDeleteButton().trigger('click');
+
+ expect(mockedActions.updateBadgeInModal).toHaveBeenCalled();
+ });
+ });
});
diff --git a/spec/frontend/badges/components/badge_settings_spec.js b/spec/frontend/badges/components/badge_settings_spec.js
index 7ad2c99869c..af7389b4240 100644
--- a/spec/frontend/badges/components/badge_settings_spec.js
+++ b/spec/frontend/badges/components/badge_settings_spec.js
@@ -1,10 +1,11 @@
-import { GlModal } from '@gitlab/ui';
+import { GlCard, GlTable } from '@gitlab/ui';
import { shallowMount } from '@vue/test-utils';
-import Vue, { nextTick } from 'vue';
+import Vue from 'vue';
+// eslint-disable-next-line no-restricted-imports
import Vuex from 'vuex';
-import BadgeList from '~/badges/components/badge_list.vue';
-import BadgeListRow from '~/badges/components/badge_list_row.vue';
import BadgeSettings from '~/badges/components/badge_settings.vue';
+import BadgeList from '~/badges/components/badge_list.vue';
+import BadgeForm from '~/badges/components/badge_form.vue';
import store from '~/badges/store';
import { createDummyBadge } from '../dummy_badge';
@@ -22,8 +23,10 @@ describe('BadgeSettings component', () => {
wrapper = shallowMount(BadgeSettings, {
store,
stubs: {
+ GlCard,
+ GlTable,
'badge-list': BadgeList,
- 'badge-list-row': BadgeListRow,
+ 'badge-form': BadgeForm,
},
});
};
@@ -32,35 +35,35 @@ describe('BadgeSettings component', () => {
createComponent();
});
- it('displays modal if button for deleting a badge is clicked', async () => {
- const button = wrapper.find('[data-testid="delete-badge"]');
+ it('renders a header with the badge count', () => {
+ createComponent();
- button.vm.$emit('click');
- await nextTick();
+ const cardTitle = wrapper.find('.gl-new-card-title');
+ const cardCount = wrapper.find('.gl-new-card-count');
- const modal = wrapper.findComponent(GlModal);
- expect(modal.isVisible()).toBe(true);
+ expect(cardTitle.text()).toContain('Your badges');
+ expect(cardCount.text()).toContain('1');
});
- it('displays a form to add a badge', () => {
- expect(wrapper.find('[data-testid="add-new-badge"]').isVisible()).toBe(true);
+ it('displays a table', () => {
+ expect(wrapper.findComponent(GlTable).isVisible()).toBe(true);
});
- it('displays badge list', () => {
+ it('renders badge add form', () => {
+ expect(wrapper.findComponent(BadgeForm).exists()).toBe(true);
+ });
+
+ it('renders badge list', () => {
expect(wrapper.findComponent(BadgeList).isVisible()).toBe(true);
});
describe('when editing', () => {
beforeEach(() => {
- createComponent(true);
+ createComponent({ isEditing: true });
});
it('displays a form to edit a badge', () => {
expect(wrapper.find('[data-testid="edit-badge"]').isVisible()).toBe(true);
});
-
- it('displays no badge list', () => {
- expect(wrapper.findComponent(BadgeList).isVisible()).toBe(false);
- });
});
});
generated by cgit v1.2.3 (git 2.25.1) at 2024-08-19 15:37:14 +0300