add verify credentials spec

cypress/e2e/login/verify-credentials.cy.ts

@@ -0,0 +1,41 @@
+import { LoginPage } from '@support/pages/login.page'
+// how can we stub this function called by the Login form page?
+// verifyCredentials from 'src/utils/Credentials'
+// plu we need to stub Constants from 'src/utils/Constants.js
+
+describe('Login form', () => {
+  // a fake user that normally cannot log in
+  // but we want to stub the verifyCredentials and VALID_USERNAMES
+  // to make this user work
+  const username = 'aUser'
+  const password = 'aPassword'
+
+  it('calls verifyCredentials', () => {
+    // create a stub function that always returns true
+    // give this stub an alias "verify"
+    // https://on.cypress.io/stub
+    // https://on.cypress.io/as
+    //
+    // visit the login page
+    // and before the application loads its code
+    // set properties "window.VALID_USERNAMES" and
+    // "window.verifyCredentials" to our fake values
+    // https://on.cypress.io/visit
+    // Tip: use the "onBeforeLoad" method
+    // Tip 2: read these properties from the "window" object
+    // in your application code if they are set.
+    cy.visit('/', {
+      onBeforeLoad(win) {},
+    })
+    // fill the form with our test username info
+    cy.get(LoginPage.selectors.form).fillForm({
+      [LoginPage.selectors.username]: username,
+      [LoginPage.selectors.password]: password,
+    })
+    LoginPage.getLogin().click()
+    // we should be logged in and redirected to the inventory page
+    cy.location('pathname').should('equal', '/inventory.html')
+    // the stub aliased "verify" should have been called once by the application
+    // with the test username and password entered in the login form
+  })
+})

src/index.jsx

@@ -37,33 +37,3 @@ ReactDOM.render(routing, document.getElementById('root'))
 // unregister() to register() below. Note this comes with some pitfalls.
 // Learn more about service workers: https://cra.link/PWA
 serviceWorkerRegistration.register()
-
-/* istanbul ignore next */
-if (window.Cypress) {
-  // enable the popup in some situations
-  // by varying the float limit. 1 means the popup always appears
-  // 0 means the popup will never appear
-  if (Math.random() < 1) {
-    const delay = Cypress._.random(1000, 2000)
-    setTimeout(() => {
-      Cypress.$(document.body).append(
-        Cypress.$(`
-        <div style="position: fixed; top: 0; left: 0; right: 0; bottom: 0; width: 100%; height: 100%; background-color: rgba(0,0,0,0.4);
-          display: flex; align-items: center; justify-content: center" id="modal">
-          <div style="width: 200px; height: 300px; background-color: white; padding: 1rem">
-            <div style="float: right; width: 28px; height: 28px; border: 1px solid black;
-              font-size: 20px; font-weight: bold; text-align: center; line-height: 28px; autofocus"
-              id="close-modal">X</div>
-            <div style="display: flex; flex-direction: column; margin-top: 2rem">
-              Modal with some promotion
-            </div>
-          </div>
-        </div>
-      `),
-      )
-      document.getElementById('close-modal').addEventListener('click', () => {
-        document.getElementById('modal').style.display = 'none'
-      })
-    }, delay)
-  }
-}