From 5759a43ba66ac69ea7c9165adb0fd66c709c4e8c Mon Sep 17 00:00:00 2001
From: Gleb Bahmutov <gleb.bahmutov@gmail.com>
Date: Mon, 29 May 2023 16:24:04 -0400
Subject: [PATCH] add min length

---
 cypress/e2e/login/login-form.cy.ts | 30 +++++++++++++++++++++++++++---
 src/pages/Login.jsx                |  1 +
 2 files changed, 28 insertions(+), 3 deletions(-)

diff --git a/cypress/e2e/login/login-form.cy.ts b/cypress/e2e/login/login-form.cy.ts
index 6ec68c7..27c0696 100644
--- a/cypress/e2e/login/login-form.cy.ts
+++ b/cypress/e2e/login/login-form.cy.ts
@@ -6,7 +6,31 @@ describe('Login form', () => {
     cy.visit('/')
   })
 
-  it('hides the username', () => {
-    cy.get(LoginPage.selectors.username).type('username', { hide: true })
-  })
+  it(
+    'checks if the username is at least 6 characters',
+    { browser: ['electron', 'chrome'] },
+    () => {
+      // get the username input field and focus on it
+      // https://on.cypress.io/get
+      // https://on.cypress.io/focus
+      //
+      // type username that is too short
+      // using the cy.realType command from cypress-real-events plugin
+      //
+      // confirm the username input field has CSS pseudo class ":invalid"
+      // https://developer.mozilla.org/en-US/docs/Learn/Forms/Form_validation
+      // https://glebbahmutov.com/blog/form-validation-in-cypress/
+      //
+      // confirm the form is invalid by calling its method "checkValidity"
+      //
+      // we know we are getting a form element from the page
+      //
+      // confirm the validation message on the username input field
+      // includes the phrase "6 characters or more"
+      //
+      // confirm the username input element
+      // has property "validity" which is an object
+      // with "tooShort: true" property
+    },
+  )
 })
diff --git a/src/pages/Login.jsx b/src/pages/Login.jsx
index e0e70cc..a657411 100644
--- a/src/pages/Login.jsx
+++ b/src/pages/Login.jsx
@@ -89,6 +89,7 @@ function Login(props) {
                   name="user-name"
                   autoCorrect="off"
                   autoCapitalize="none"
+                  minLength="6"
                 />
                 <InputError
                   isError={Boolean(error)}