[Tests] Add cypress tests for login page (ToolJet#291)

cypress.json

@@ -0,0 +1,6 @@
+{
+  "baseUrl": "http://localhost:8082",
+  "env": {
+    "apiUrl": "http://localhost:3000"
+  }
+}

cypress/integration/auth.spec.js

@@ -0,0 +1,37 @@
+describe('User login', () => {
+  it('should take user to login page', () => {
+    cy.visit('/login');
+    cy.get('.card-title')
+      .should('have.text', 'Login to your account');
+  });
+
+  it('should redirect unauthenticated user to login page', () => {
+    cy.visit('/');
+    cy.location('pathname').should('equal', '/login');
+  });
+
+  it('should display invalid email or password error',  () => {
+    cy.login('fake_email', 'abcdefg');
+    cy.checkToastMessage('toast-login-auth-error', 'Invalid email or password')
+  });
+
+  it('should take user to the forgot password page', () => {
+    cy.visit('/forgot-password');
+    cy.get('.card-title')
+      .should('have.text', 'Forgot Password');
+  })
+
+  it('should take user to the signup page', () => {
+    cy.visit('/signup');
+    cy.get('.card-title')
+      .should('have.text', 'Create a ToolJet account');
+  })
+
+  it('should sign in the user', () => {
+    cy.visit('/login');
+    cy.login('dev@tooljet.io', 'password');
+    cy.location('pathname').should('equal', '/');
+    cy.get('.page-title')
+      .should('have.text', 'All applications');
+  })
+})

cypress/plugins/index.js

@@ -0,0 +1,22 @@
+/// <reference types="cypress" />
+// ***********************************************************
+// This example plugins/index.js can be used to load plugins
+//
+// You can change the location of this file or turn off loading
+// the plugins file with the 'pluginsFile' configuration option.
+//
+// You can read more here:
+// https://on.cypress.io/plugins-guide
+// ***********************************************************
+
+// This function is called when a project is opened or re-opened (e.g. due to
+// the project's config changing)
+
+/**
+ * @type {Cypress.PluginConfig}
+ */
+// eslint-disable-next-line no-unused-vars
+module.exports = (on, config) => {
+  // `on` is used to hook into various events Cypress emits
+  // `config` is the resolved Cypress config
+}

cypress/support/commands.js

@@ -0,0 +1,10 @@
+Cypress.Commands.add('login', (email, password) => {
+  cy.visit('/login');
+  cy.get('[data-testid="emailField"]').type(email);
+  cy.get('[data-testid="passwordField"]').type(password);
+  cy.get('[data-testid="loginButton"').click();
+})
+
+Cypress.Commands.add('checkToastMessage', (toastId, message) => {
+  cy.get(`[id=${toastId}]`).should('contain', message);
+});

cypress/support/index.js

@@ -0,0 +1,20 @@
+// ***********************************************************
+// This example support/index.js is processed and
+// loaded automatically before your test files.
+//
+// This is a great place to put global configuration and
+// behavior that modifies Cypress.
+//
+// You can change the location of this file or turn off
+// automatically serving support files with the
+// 'supportFile' configuration option.
+//
+// You can read more here:
+// https://on.cypress.io/configuration
+// ***********************************************************
+
+// Import commands.js using ES2015 syntax:
+import './commands'
+
+// Alternatively you can use CommonJS syntax:
+// require('./commands')

frontend/src/LoginPage/LoginPage.jsx

@@ -35,7 +35,7 @@ class LoginPage extends React.Component {
         this.setState({ isLoading: false });
       },
       () => {
-        toast.error('Invalid username or password', { hideProgressBar: true, position: 'top-center' });
+        toast.error('Invalid email or password', { toastId: 'toast-login-auth-error', hideProgressBar: true, position: 'top-center' });
         this.setState({ isLoading: false });
       }
     );
@@ -63,6 +63,7 @@ class LoginPage extends React.Component {
                   type="email"
                   className="form-control"
                   placeholder="Enter email"
+                  data-testid="emailField"
                 />
               </div>
               <div className="mb-2">
@@ -82,12 +83,13 @@ class LoginPage extends React.Component {
                     className="form-control"
                     placeholder="Password"
                     autoComplete="off"
+                    data-testid="passwordField"
                   />
                   <span className="input-group-text"></span>
                 </div>
               </div>
               <div className="form-footer">
-                <button className={`btn btn-primary w-100 ${isLoading ? 'btn-loading' : ''}`} onClick={this.authUser}>
+                <button data-testid="loginButton" className={`btn btn-primary w-100 ${isLoading ? 'btn-loading' : ''}`} onClick={this.authUser}>
                   Sign in
                 </button>
               </div>