diff options
Diffstat (limited to 'spec/frontend/labels/delete_label_modal_spec.js')
-rw-r--r-- | spec/frontend/labels/delete_label_modal_spec.js | 83 |
1 files changed, 83 insertions, 0 deletions
diff --git a/spec/frontend/labels/delete_label_modal_spec.js b/spec/frontend/labels/delete_label_modal_spec.js new file mode 100644 index 00000000000..c1e6ce87990 --- /dev/null +++ b/spec/frontend/labels/delete_label_modal_spec.js @@ -0,0 +1,83 @@ +import { TEST_HOST } from 'helpers/test_constants'; +import { initDeleteLabelModal } from '~/labels'; + +describe('DeleteLabelModal', () => { + const buttons = [ + { + labelName: 'label 1', + subjectName: 'GitLab Org', + destroyPath: `${TEST_HOST}/1`, + }, + { + labelName: 'label 2', + subjectName: 'GitLab Org', + destroyPath: `${TEST_HOST}/2`, + }, + ]; + + beforeEach(() => { + const buttonContainer = document.createElement('div'); + + buttons.forEach((x) => { + const button = document.createElement('button'); + button.setAttribute('class', 'js-delete-label-modal-button'); + button.setAttribute('data-label-name', x.labelName); + button.setAttribute('data-subject-name', x.subjectName); + button.setAttribute('data-destroy-path', x.destroyPath); + button.innerHTML = 'Action'; + buttonContainer.appendChild(button); + }); + + document.body.appendChild(buttonContainer); + }); + + afterEach(() => { + document.body.innerHTML = ''; + }); + + const findJsHooks = () => document.querySelectorAll('.js-delete-label-modal-button'); + const findModal = () => document.querySelector('.gl-modal'); + + it('starts with only js-containers', () => { + expect(findJsHooks()).toHaveLength(buttons.length); + expect(findModal()).toBe(null); + }); + + describe('when first button clicked', () => { + beforeEach(() => { + initDeleteLabelModal(); + findJsHooks().item(0).click(); + }); + + it('does not replace js-containers with GlModal', () => { + expect(findJsHooks()).toHaveLength(buttons.length); + }); + + it('renders GlModal', () => { + expect(findModal()).not.toBe(null); + }); + }); + + describe.each` + index + ${0} + ${1} + `(`when multiple buttons exist`, ({ index }) => { + beforeEach(() => { + initDeleteLabelModal(); + findJsHooks().item(index).click(); + }); + + it('correct props are passed to gl-modal', () => { + expect(findModal().querySelector('.modal-title').innerHTML).toContain( + buttons[index].labelName, + ); + expect(findModal().querySelector('.modal-body').innerHTML).toContain( + buttons[index].subjectName, + ); + expect(findModal().querySelector('.modal-footer .btn-danger').href).toContain( + buttons[index].destroyPath, + ); + }); + }); +}); |