-
Notifications
You must be signed in to change notification settings - Fork 56
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
feat(orga): add a modal to force invitation confirmation
- Loading branch information
1 parent
9be578b
commit 4214ce0
Showing
7 changed files
with
174 additions
and
7 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,35 @@ | ||
| import { action } from '@ember/object'; | ||
| import { service } from '@ember/service'; | ||
| import Component from '@glimmer/component'; | ||
| import { tracked } from '@glimmer/tracking'; | ||
|
|
||
| import isEmailValid from '../../utils/email-validator'; | ||
|
|
||
| export default class InviteForm extends Component { | ||
| @service intl; | ||
| @tracked modalOpen = false; | ||
| @tracked emailError = null; | ||
|
|
||
| @action | ||
| openModal() { | ||
| const emailInput = this.args?.email?.trim(); | ||
| if (!emailInput) { | ||
| this.emailError = this.intl.t('pages.team-new.errors.mandatory-email-field'); | ||
| return; | ||
| } | ||
| const emails = emailInput.split(',').map((email) => email.trim()); | ||
| const areEmailsValid = emails.every((email) => isEmailValid(email)); | ||
|
|
||
| if (!areEmailsValid) { | ||
| this.emailError = this.intl.t('pages.team-new.errors.invalid-input'); | ||
| return; | ||
| } | ||
| this.emailError = null; | ||
| this.modalOpen = true; | ||
| } | ||
|
|
||
| @action | ||
| closeModal() { | ||
| this.modalOpen = false; | ||
| } | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,13 @@ | ||
| .invite-form { | ||
|
|
||
| &__email-field { | ||
| min-height: 70px; | ||
| } | ||
|
|
||
| &__error-message { | ||
| margin-top: 0.5rem; | ||
| color: var(--pix-error-700); | ||
| font-size: 0.875rem; | ||
| line-height: 1.2; | ||
| } | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
|
|
@@ -10,7 +10,4 @@ | |
| } | ||
| } | ||
|
|
||
| .invite-form__email-field { | ||
| min-height: 70px; | ||
| } | ||
|
|
||
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,10 +1,12 @@ | ||
| import { fillByLabel, render } from '@1024pix/ember-testing-library'; | ||
| import { click } from '@ember/test-helpers'; | ||
| import { hbs } from 'ember-cli-htmlbars'; | ||
| import { t } from 'ember-intl/test-support'; | ||
| import { module, test } from 'qunit'; | ||
| import sinon from 'sinon'; | ||
|
|
||
| import setupIntlRenderingTest from '../../../helpers/setup-intl-rendering'; | ||
| import { waitForDialog } from '../../../helpers/wait-for'; | ||
|
|
||
| module('Integration | Component | Team::InviteForm', function (hooks) { | ||
| setupIntlRenderingTest(hooks); | ||
|
|
@@ -17,16 +19,16 @@ module('Integration | Component | Team::InviteForm', function (hooks) { | |
|
|
||
| test('it should contain email input and validation button', async function (assert) { | ||
| // when | ||
| await render( | ||
| const screen = await render( | ||
| hbs`<Team::InviteForm @onSubmit={{this.inviteSpy}} @onCancel={{this.cancelSpy}} @onUpdateEmail={{this.updateEmail}} />`, | ||
| ); | ||
|
|
||
| // then | ||
| assert.dom('#email').exists(); | ||
| assert.dom('#email').isRequired(); | ||
| assert.dom('button[type="submit"]').exists(); | ||
| assert.ok(screen.getByText(t('pages.team-new-item.invite-button'))); | ||
| assert.dom(screen.queryByRole('dialog')).doesNotExist(); | ||
| }); | ||
|
|
||
| test('it should bind organizationInvitation properties with email form input', async function (assert) { | ||
| // given | ||
| this.set('email', '[email protected]'); | ||
|
|
@@ -46,4 +48,75 @@ module('Integration | Component | Team::InviteForm', function (hooks) { | |
| // then | ||
| assert.ok(this.updateEmail.called); | ||
| }); | ||
| test('it should open confirmation modal when invite button is clicked', async function (assert) { | ||
| // given | ||
| this.set('email', '[email protected]'); | ||
| const screen = await render( | ||
| hbs`<Team::InviteForm | ||
| @email={{this.email}} | ||
| @onSubmit={{this.inviteSpy}} | ||
| @onCancel={{this.cancelSpy}} | ||
| @onUpdateEmail={{this.updateEmail}} | ||
| />`, | ||
| ); | ||
|
|
||
| // when | ||
| const inputLabel = `${t('pages.team-new-item.input-label')} *`; | ||
| await fillByLabel(inputLabel, '[email protected]'); | ||
| const inviteButton = await screen.findByRole('button', { | ||
| name: t('pages.team-new-item.invite-button'), | ||
| }); | ||
| await click(inviteButton); | ||
| await waitForDialog(); | ||
| // then | ||
| assert.dom(screen.getByRole('dialog')).isVisible(); | ||
| }); | ||
| test('it should display error message when no email is in input and invite button is clicked', async function (assert) { | ||
| // given | ||
| //this.set('email', '[email protected]'); | ||
| this.set('email', ''); | ||
| const errorMessage = t('pages.team-new.errors.mandatory-email-field'); | ||
| const screen = await render( | ||
| hbs`<Team::InviteForm | ||
| @email={{this.email}} | ||
| @onSubmit={{this.inviteSpy}} | ||
| @onCancel={{this.cancelSpy}} | ||
| @onUpdateEmail={{this.updateEmail}} | ||
| />`, | ||
| ); | ||
|
|
||
| // when | ||
| const inputLabel = `${t('pages.team-new-item.input-label')} *`; | ||
| await fillByLabel(inputLabel, ''); | ||
| const inviteButton = await screen.findByRole('button', { | ||
| name: t('pages.team-new-item.invite-button'), | ||
| }); | ||
| await click(inviteButton); | ||
| // then | ||
| assert.dom(await screen.findByText(errorMessage)).exists(); | ||
| assert.dom(screen.queryByRole('dialog')).doesNotExist(); | ||
| }); | ||
| test('it should display error message when email format is not correct', async function (assert) { | ||
| // given | ||
| this.set('email', '[email protected];alex-mail.incorrect'); | ||
| const errorMessage = t('pages.team-new.errors.invalid-input'); | ||
| const screen = await render( | ||
| hbs`<Team::InviteForm | ||
| @email={{this.email}} | ||
| @onSubmit={{this.inviteSpy}} | ||
| @onCancel={{this.cancelSpy}} | ||
| @onUpdateEmail={{this.updateEmail}} | ||
| />`, | ||
| ); | ||
|
|
||
| // when | ||
| const inviteButton = await screen.findByRole('button', { | ||
| name: t('pages.team-new-item.invite-button'), | ||
| }); | ||
|
|
||
| await click(inviteButton); | ||
| // then | ||
| assert.dom(await screen.findByText(errorMessage)).exists(); | ||
| assert.dom(screen.queryByRole('dialog')).doesNotExist(); | ||
| }); | ||
| }); | ||