wip(mon-pix): use password checklist input in sign in form

for test purposes
1024pix · Oct 10, 2024 · 21f4c35 · 21f4c35
1 parent b7dfd00
commit 21f4c35
Show file tree

Hide file tree

Showing 3 changed files with 34 additions and 28 deletions.
diff --git a/mon-pix/app/components/authentication/password-input/index.gjs b/mon-pix/app/components/authentication/password-input/index.gjs
@@ -62,7 +62,7 @@ export default class PasswordInput extends Component {
   }
 
   @action
-  handlePasswordChanged(event) {
+  handlePasswordChange(event) {
     this.value = event.target.value;
     this.errors = this.checkRules();
 
@@ -90,7 +90,7 @@ export default class PasswordInput extends Component {
       @errorMessage={{t "components.authentication.password-input.error-message"}}
       @id="password"
       @validationStatus={{this.validationStatus}}
-      {{on "input" this.handlePasswordChanged}}
+      {{on "input" this.handlePasswordChange}}
       {{on "blur" this.handleValidationStatus}}
       ...attributes
     >

diff --git a/mon-pix/app/components/authentication/signin-form.gjs b/mon-pix/app/components/authentication/signin-form.gjs
@@ -12,6 +12,8 @@ import { t } from 'ember-intl';
 import get from 'lodash/get';
 import ENV from 'mon-pix/config/environment';
 
+import PasswordInput from './password-input';
+
 export default class SigninForm extends Component {
   @service url;
   @service session;
@@ -163,5 +165,7 @@ export default class SigninForm extends Component {
         {{t "pages.sign-in.actions.submit"}}
       </PixButton>
     </form>
+
+    <PasswordInput {{on "input" this.updatePassword}} required />
   </template>
 }
diff --git a/mon-pix/tests/integration/components/authentication/password-input/index-test.gjs b/mon-pix/tests/integration/components/authentication/password-input/index-test.gjs
@@ -19,102 +19,104 @@ module('Integration | Component | authentication | password-input', function (ho
 
   test('it respects all rules', async function (assert) {
     // given
-    const password = 'Pix12345';
+    const validPassword = 'Pix12345';
     const onInput = sinon.spy();
 
     const screen = await render(<template><PasswordInput {{on "input" onInput}} /></template>);
 
     // when
-    await fillByLabel(t(I18N.PASSWORD_INPUT_LABEL), password);
+    await fillByLabel(t(I18N.PASSWORD_INPUT_LABEL), validPassword);
     const passwordInputElement = screen.getByLabelText(t(I18N.PASSWORD_INPUT_LABEL));
     await blur(passwordInputElement);
 
     // then
     const onInputEvent = onInput.firstCall.args[0];
-    assert.strictEqual(onInputEvent.target.value, password);
+    assert.strictEqual(onInputEvent.target.value, validPassword);
 
     assert.dom(passwordInputElement).doesNotHaveAttribute('aria-invalid');
 
-    const rulesStatusMessage = t(I18N.RULES_STATUS_MESSAGE, { rulesCompleted: 4, rulesNumber: 4 });
+    const rulesStatusMessage = t(I18N.RULES_STATUS_MESSAGE, { rulesCompleted: 4, rulesCount: 4 });
     assert.dom(screen.getByText(rulesStatusMessage)).exists();
   });
 
   test('it does not respect any rules', async function (assert) {
     // given
-    const password = '     ';
+    const invalidPassword = '     ';
     const onInput = sinon.stub();
 
     const screen = await render(<template><PasswordInput {{on "input" onInput}} /></template>);
 
     // when
-    await fillByLabel(t(I18N.PASSWORD_INPUT_LABEL), password);
+    await fillByLabel(t(I18N.PASSWORD_INPUT_LABEL), invalidPassword);
     const passwordInputElement = screen.getByLabelText(t(I18N.PASSWORD_INPUT_LABEL));
     await blur(passwordInputElement);
 
     // then
     assert.dom(passwordInputElement).hasAttribute('aria-invalid');
-
-    const rulesStatusMessage = t(I18N.RULES_STATUS_MESSAGE, { rulesCompleted: 0, rulesNumber: 4 });
-    assert.dom(screen.getByText(rulesStatusMessage)).exists();
+    assert.dom(screen.getByText(t(I18N.ERROR_MESSAGE))).exists();
   });
 
   test('it must have a minimum length of 8 chars', async function (assert) {
     // given
-    const password = 'Pix1234';
+    const invalidPassword = 'Pix1234';
     const onInput = sinon.stub();
 
     const screen = await render(<template><PasswordInput {{on "input" onInput}} /></template>);
 
     // when
-    await fillByLabel(t(I18N.PASSWORD_INPUT_LABEL), password);
+    await fillByLabel(t(I18N.PASSWORD_INPUT_LABEL), invalidPassword);
+    const passwordInputElement = screen.getByLabelText(t(I18N.PASSWORD_INPUT_LABEL));
+    await blur(passwordInputElement);
 
     // then
-    const rulesStatusMessage = t(I18N.RULES_STATUS_MESSAGE, { rulesCompleted: 3, rulesNumber: 4 });
-    assert.dom(screen.getByText(rulesStatusMessage)).exists();
+    assert.dom(passwordInputElement).hasAttribute('aria-invalid');
   });
 
   test('it must contains at least one uppercase char', async function (assert) {
     // given
-    const password = 'pix12345';
+    const invalidPassword = 'pix12345';
     const onInput = sinon.stub();
 
     const screen = await render(<template><PasswordInput {{on "input" onInput}} /></template>);
 
     // when
-    await fillByLabel(t(I18N.PASSWORD_INPUT_LABEL), password);
+    await fillByLabel(t(I18N.PASSWORD_INPUT_LABEL), invalidPassword);
+    const passwordInputElement = screen.getByLabelText(t(I18N.PASSWORD_INPUT_LABEL));
+    await blur(passwordInputElement);
 
     // then
-    const rulesStatusMessage = t(I18N.RULES_STATUS_MESSAGE, { rulesCompleted: 3, rulesNumber: 4 });
-    assert.dom(screen.getByText(rulesStatusMessage)).exists();
+    assert.dom(passwordInputElement).hasAttribute('aria-invalid');
   });
 
   test('it must contains at least one lowercase char', async function (assert) {
     // given
-    const password = 'PIX12345';
+    const invalidPassword = 'PIX12345';
     const onInput = sinon.stub();
 
     const screen = await render(<template><PasswordInput {{on "input" onInput}} /></template>);
 
     // when
-    await fillByLabel(t(I18N.PASSWORD_INPUT_LABEL), password);
+    await fillByLabel(t(I18N.PASSWORD_INPUT_LABEL), invalidPassword);
+    const passwordInputElement = screen.getByLabelText(t(I18N.PASSWORD_INPUT_LABEL));
+    await blur(passwordInputElement);
 
     // then
-    const rulesStatusMessage = t(I18N.RULES_STATUS_MESSAGE, { rulesCompleted: 3, rulesNumber: 4 });
-    assert.dom(screen.getByText(rulesStatusMessage)).exists();
+    assert.dom(passwordInputElement).hasAttribute('aria-invalid');
   });
 
-  test('it must contains at least one digit', async function (assert) {
+  test('it must contains at least one number', async function (assert) {
     // given
-    const password = 'PIXpixPIX';
+    const invalidPassword = 'PIXpixPIX';
     const onInput = sinon.stub();
 
     const screen = await render(<template><PasswordInput {{on "input" onInput}} /></template>);
 
     // when
-    await fillByLabel(t(I18N.PASSWORD_INPUT_LABEL), password);
+    await fillByLabel(t(I18N.PASSWORD_INPUT_LABEL), invalidPassword);
+    const passwordInputElement = screen.getByLabelText(t(I18N.PASSWORD_INPUT_LABEL));
+    await blur(passwordInputElement);
 
     // then
-    const rulesStatusMessage = t(I18N.RULES_STATUS_MESSAGE, { rulesCompleted: 3, rulesNumber: 4 });
-    assert.dom(screen.getByText(rulesStatusMessage)).exists();
+    assert.dom(passwordInputElement).hasAttribute('aria-invalid');
   });
 });