From cc4f3556cf67829e6f413c2003b37e18fc93f60e Mon Sep 17 00:00:00 2001 From: Rajat Talesra Date: Sat, 29 Oct 2022 23:58:28 +0530 Subject: [PATCH] Use preact-modal in adminModal (#18613) * Commented test * Removed User subscription related modal code * Fixed test case * Updated tests * Added more tests --- .../controllers/config_controller.test.js | 34 ---- app/javascript/admin/adminModal.js | 83 +++++---- .../admin/controllers/config_controller.js | 21 +-- .../config/authenticationSection.spec.js | 162 +++++++++++++++++- 4 files changed, 219 insertions(+), 81 deletions(-) delete mode 100644 app/javascript/admin/__tests__/controllers/config_controller.test.js diff --git a/app/javascript/admin/__tests__/controllers/config_controller.test.js b/app/javascript/admin/__tests__/controllers/config_controller.test.js deleted file mode 100644 index 7a0fc5bf2..000000000 --- a/app/javascript/admin/__tests__/controllers/config_controller.test.js +++ /dev/null @@ -1,34 +0,0 @@ -import { Application } from '@hotwired/stimulus'; -import ConfigController from '../../controllers/config_controller'; - -describe('ConfigController', () => { - beforeEach(() => { - document.body.innerHTML = ` -
- -
-
`; - - global.scrollTo = jest.fn(); - - const application = Application.start(); - application.register('config', ConfigController); - }); - - describe('#activateEmailAuthModal', () => { - it('builds and adds a Modal to the page', () => { - const button = document.getElementsByTagName('button')[0]; - const modalAnchor = document.querySelector( - '[data-config-target="configModalAnchor"]', - ); - - button.click(); - - expect( - modalAnchor.firstElementChild.classList.contains('crayons-modal'), - ).toBe(true); - }); - }); -}); diff --git a/app/javascript/admin/adminModal.js b/app/javascript/admin/adminModal.js index 87110f097..2da395d42 100644 --- a/app/javascript/admin/adminModal.js +++ b/app/javascript/admin/adminModal.js @@ -1,16 +1,17 @@ +import { closeWindowModal, showWindowModal } from '@utilities/showModal'; + /** * A function to generate the HTML for a Crayons modal within the /admin/ space. * * @function adminModal * @param {Object} modalProps Properties of the Modal * @param {string} modalProps.title The title of the modal. - * @param {string} modalProps.controllerName The name of the controller activating the modal. - * @param {string} modalProps.closeModalFunction The name of the function that closes the modal. + * @param {function} modalProps.closeModalFunction The name of the function that closes the modal. * @param {string} modalProps.body The modal's content. May use HTML tags for styling. * @param {string} modalProps.leftBtnText The text for the modal's left button. - * @param {string} modalProps.leftBtnAction The function that fires when left button is clicked. + * @param {function} modalProps.leftBtnAction The function that fires when left button is clicked. * @param {string} modalProps.rightBtnText The text for the modal's right button. - * @param {string} modalProps.rightBtnAction The function that fires when right button is clicked. + * @param {function} modalProps.rightBtnAction The function that fires when right button is clicked. * @param {string} modalProps.leftBtnClasses Classes applied to left button. * @param {string} modalProps.rightBtnClasses Classes applied to right button. * @param {string} modalProps.leftCustomDataAttr A custom data attribute for the left button. @@ -18,7 +19,6 @@ */ export const adminModal = function ({ title, - controllerName, closeModalFunction, body, leftBtnText, @@ -30,36 +30,51 @@ export const adminModal = function ({ leftCustomDataAttr = null, rightCustomDataAttr = null, }) { - return ` -
-
-
-

${title}

- -
-
- ${body} -
- - -
-
+ const content = ` +
+ ${body} +
+ +
-
`; + + return showWindowModal({ + document: window.document, + title, + modalContent: content, + size: 'small', + onOpen: () => { + window.document + .getElementById(`left-btn`) + .addEventListener('click', (event) => { + closeWindowModal(); + leftBtnAction(event); + }); + + window.document + .getElementById(`right-btn`) + .addEventListener('click', (event) => { + closeWindowModal(); + rightBtnAction(event); + }); + + window.document + .querySelector(`.crayons-modal__dismiss`) + .addEventListener('click', (event) => { + closeModalFunction(event); + }); + }, + }); }; diff --git a/app/javascript/admin/controllers/config_controller.js b/app/javascript/admin/controllers/config_controller.js index f33e54522..9d3db9ed4 100644 --- a/app/javascript/admin/controllers/config_controller.js +++ b/app/javascript/admin/controllers/config_controller.js @@ -180,13 +180,12 @@ export default class ConfigController extends Controller { event.preventDefault(); this.configModalAnchorTarget.innerHTML = adminModal({ title: emailAuthModalTitle, - controllerName: 'config', - closeModalFunction: 'closeAdminModal', + closeModalFunction: this.closeAdminModal.bind(this), body: emailAuthModalBody, leftBtnText: 'Confirm disable', - leftBtnAction: 'disableEmailAuthFromModal', + leftBtnAction: this.disableEmailAuthFromModal.bind(this), rightBtnText: 'Cancel', - rightBtnAction: 'closeAdminModal', + rightBtnAction: this.closeAdminModal.bind(this), leftBtnClasses: 'crayons-btn--danger', rightBtnClasses: 'crayons-btn--secondary', }); @@ -260,13 +259,12 @@ export default class ConfigController extends Controller { const { providerOfficialName } = event.target.dataset; this.configModalAnchorTarget.innerHTML = adminModal({ title: this.authProviderModalTitle(providerOfficialName), - controllerName: 'config', - closeModalFunction: 'closeAdminModal', + closeModalFunction: this.closeAdminModal.bind(this), body: this.authProviderModalBody(providerOfficialName), leftBtnText: 'Confirm disable', - leftBtnAction: 'disableAuthProviderFromModal', + leftBtnAction: this.disableAuthProviderFromModal.bind(this), rightBtnText: 'Cancel', - rightBtnAction: 'closeAdminModal', + rightBtnAction: this.closeAdminModal.bind(this), leftBtnClasses: 'crayons-btn--danger', rightBtnClasses: 'crayons-btn--secondary', leftCustomDataAttr: `data-provider-name=${providerName}`, @@ -399,13 +397,12 @@ export default class ConfigController extends Controller { activateMissingKeysModal(providers) { this.configModalAnchorTarget.innerHTML = adminModal({ title: 'Setup not complete', - controllerName: 'config', - closeModalFunction: 'closeAdminModal', + closeModalFunction: this.closeAdminModal.bind(this), body: this.missingAuthKeysModalBody(providers), leftBtnText: 'Continue editing', - leftBtnAction: 'closeAdminModal', + leftBtnAction: this.closeAdminModal.bind(this), rightBtnText: 'Cancel', - rightBtnAction: 'cancelAuthProviderEnable', + rightBtnAction: this.cancelAuthProviderEnable.bind(this), rightBtnClasses: 'crayons-btn--secondary', }); } diff --git a/cypress/e2e/seededFlows/adminFlows/config/authenticationSection.spec.js b/cypress/e2e/seededFlows/adminFlows/config/authenticationSection.spec.js index d504fde5e..eabc69c6c 100644 --- a/cypress/e2e/seededFlows/adminFlows/config/authenticationSection.spec.js +++ b/cypress/e2e/seededFlows/adminFlows/config/authenticationSection.spec.js @@ -83,12 +83,100 @@ describe('Authentication Section', () => { cy.get('@authSectionForm').findByText('Update Settings').click(); - cy.get('.crayons-modal__box__body > ul > li') + cy.findByTestId('modal-container').as('modal'); + + cy.get('@modal') + .get('.admin-modal-content > ul > li') .contains('facebook') .should('be.visible'); }); }); + it('should display warning modal with multiple providers if keys are missing', () => { + cy.fixture('users/adminUser.json').as('user'); + cy.get('@user').then(() => { + cy.visit('/admin/customization/config'); + cy.findByTestId('authSectionForm').as('authSectionForm'); + + cy.get('@authSectionForm').findByText('Authentication').click(); + cy.get('#apple-auth-btn').click(); + cy.get('#facebook-auth-btn').click(); + + cy.get('@authSectionForm').findByText('Update Settings').click(); + + cy.findByTestId('modal-container').as('modal'); + + cy.get('@modal') + .get('.admin-modal-content > ul > li') + .contains('facebook') + .should('be.visible'); + + cy.get('@modal') + .get('.admin-modal-content > ul > li') + .contains('apple') + .should('be.visible'); + }); + }); + + it('closing warning modal should keep provider enabled', () => { + cy.fixture('users/adminUser.json').as('user'); + cy.get('@user').then(() => { + cy.visit('/admin/customization/config'); + cy.findByTestId('authSectionForm').as('authSectionForm'); + + cy.get('@authSectionForm').findByText('Authentication').click(); + cy.get('#facebook-auth-btn').click(); + + cy.get('@authSectionForm').findByText('Update Settings').click(); + + cy.findByTestId('modal-container').as('modal'); + cy.get('@modal').findByRole('button', { name: /Close/ }).click(); + + cy.get('@modal').should('not.exist'); + cy.get('@authSectionForm').findByText('Facebook key').should('exist'); + }); + }); + + it('continue editing button of modal should keep provider enabled', () => { + cy.fixture('users/adminUser.json').as('user'); + cy.get('@user').then(() => { + cy.visit('/admin/customization/config'); + cy.findByTestId('authSectionForm').as('authSectionForm'); + + cy.get('@authSectionForm').findByText('Authentication').click(); + cy.get('#facebook-auth-btn').click(); + + cy.get('@authSectionForm').findByText('Update Settings').click(); + + cy.findByTestId('modal-container').as('modal'); + cy.get('@modal').findByText('Continue editing').click(); + + cy.get('@modal').should('not.exist'); + cy.get('@authSectionForm').findByText('Facebook key').should('exist'); + }); + }); + + it('cancelling modal should reset providers', () => { + cy.fixture('users/adminUser.json').as('user'); + cy.get('@user').then(() => { + cy.visit('/admin/customization/config'); + cy.findByTestId('authSectionForm').as('authSectionForm'); + + cy.get('@authSectionForm').findByText('Authentication').click(); + cy.get('#facebook-auth-btn').click(); + + cy.get('@authSectionForm').findByText('Update Settings').click(); + + cy.findByTestId('modal-container').as('modal'); + cy.get('@modal').findByText('Cancel').click(); + + cy.get('@modal').should('not.exist'); + cy.get('@authSectionForm') + .findAllByRole('button', { name: 'Enable' }) + .should('have.length', 6); + }); + }); + it('should not display warning modal if provider keys present', () => { cy.fixture('users/adminUser.json').as('user'); @@ -132,5 +220,77 @@ describe('Authentication Section', () => { }); }); }); + + it('should display warning modal when disabling a provider', () => { + cy.fixture('users/adminUser.json').as('user'); + + cy.get('@user').then(() => { + cy.visit('/admin/customization/config'); + cy.findByTestId('authSectionForm').as('authSectionForm'); + + cy.get('@authSectionForm').findByText('Authentication').click(); + cy.get('#email-auth-enable-edit-btn').click(); + cy.get('@authSectionForm').findByText('Disable').click(); + + cy.findByTestId('modal-container').as('modal'); + cy.get('@modal').should('exist'); + }); + }); + + it('email-auth disable modal has correct header', () => { + cy.fixture('users/adminUser.json').as('user'); + + cy.get('@user').then(() => { + cy.visit('/admin/customization/config'); + cy.findByTestId('authSectionForm').as('authSectionForm'); + + cy.get('@authSectionForm').findByText('Authentication').click(); + cy.get('#email-auth-enable-edit-btn').click(); + cy.get('@authSectionForm').findByText('Disable').click(); + + cy.findByTestId('modal-container').as('modal'); + cy.get('@modal') + .findByText('Disable Email address registration') + .should('exist'); + }); + }); + + it('cancelling email-auth disable modal should close the modal', () => { + cy.fixture('users/adminUser.json').as('user'); + cy.get('@user').then(() => { + cy.visit('/admin/customization/config'); + cy.findByTestId('authSectionForm').as('authSectionForm'); + + cy.get('@authSectionForm').findByText('Authentication').click(); + cy.get('#email-auth-enable-edit-btn').click(); + cy.get('@authSectionForm').findByText('Disable').click(); + + cy.findByTestId('modal-container').as('modal'); + cy.get('@modal').findByText('Cancel').click(); + + cy.get('@modal').should('not.exist'); + cy.get('@authSectionForm').findByText('Disable').should('exist'); + }); + }); + + it('confirm disable button of email-auth disable modal should disable the auth', () => { + cy.fixture('users/adminUser.json').as('user'); + cy.get('@user').then(() => { + cy.visit('/admin/customization/config'); + cy.findByTestId('authSectionForm').as('authSectionForm'); + + cy.get('@authSectionForm').findByText('Authentication').click(); + cy.get('#email-auth-enable-edit-btn').click(); + cy.get('@authSectionForm').findByText('Disable').click(); + + cy.findByTestId('modal-container').as('modal'); + cy.get('@modal').findByText('Confirm disable').click(); + + cy.get('@modal').should('not.exist'); + cy.get('@authSectionForm') + .findAllByRole('button', { name: 'Enable' }) + .should('have.length', 7); + }); + }); }); });