Adding cypress to angor (#65)

* add cypress install

* update test

there were some UI changes

* Added cypress ids for UI elements

Added cypress ids for UI elements and updated test accordingly

cypress.config.js

@@ -0,0 +1,9 @@
+const { defineConfig } = require("cypress");
+
+module.exports = defineConfig({
+  e2e: {
+    setupNodeEvents(on, config) {
+      // implement node event listeners here
+    },
+  },
+});

cypress/e2e/wallet.cy.js

@@ -0,0 +1,21 @@
+import '../support/commands'
+import {Navbar,WALLET_DATA_CY} from '../support/enums'
+
+describe('template spec', () => {
+  beforeEach(() => {
+    cy.visitLocalhost();
+  });
+
+  it('createWallet', () => {
+    cy.clickOnNavBar(Navbar.WALLET)
+    cy.clickElementWithDataCy(WALLET_DATA_CY.CREATE_WALLET)
+    cy.clickElementWithDataCy(WALLET_DATA_CY.GENERATE_WALLET_WORDS)
+    cy.clickSubmitButton('New wallet password is null or empty');
+    cy.typeTextInElement('password','abc123')
+    cy.clickOnCheckBoxByDataCy(WALLET_DATA_CY.WALLET_CHECKBOX);
+    cy.clickSubmitButton();
+    cy.waitForLoader()
+    cy.get(`[data-cy=${WALLET_DATA_CY.BALANCE}]`).should('have.text', 'Balance: ');
+    cy.verifyBalance('0',WALLET_DATA_CY.BALANCE_AMOUNT)
+  });
+});

cypress/fixtures/example.json

@@ -0,0 +1,5 @@
+{
+  "name": "Using fixtures to represent data",
+  "email": "[email protected]",
+  "body": "Fixtures are a great way to mock data for responses to routes"
+}

cypress/support/commands.js

@@ -0,0 +1,71 @@
+
+Cypress.Commands.add('visitLocalhost', () => {
+    // Set the viewport to a desktop resolution
+    cy.viewport(1280, 720); // You can adjust the width and height as needed
+    cy.visit('http://localhost:5062/');
+    //  cy.get('.loader').should('not.exist'); // Wait for loader to disappear
+    cy.get('span[role="button"].material-icons.opacity-10.btn-angor.fs-3#theme-icon').should('be.visible').click(); // Interact with the theme icon
+}); 
+
+Cypress.Commands.add('clickOnNavBar', (dir) => {
+    cy.get(`[href="${dir}"]`).should('be.visible').click();
+});
+
+Cypress.Commands.add('clickOnButtonContain', (name) => {
+    cy.log(name)
+    cy.get('.btn.btn-primary')
+        .contains(`${name}`)
+        .filter(':visible') // Filter to only visible elements
+        .click(); // Click on it
+})
+
+Cypress.Commands.add('clickElementWithDataCy', (datacy) => {
+    cy.get(`[data-cy=${datacy}]`).click();
+})
+
+
+Cypress.Commands.add("clickCardContains", (name, msg) => {
+    cy.get('.card-body[role="button"]').contains(`${name}`).click();
+    cy.log(msg)
+    if(msg){
+        cy.get('.snackbar').should('be.visible'); // Assuming snackbar has a class 'snackbar'
+        cy.get('.snackbar').contains(msg); // Assuming snackbar contains text
+    }
+  })
+
+
+
+
+Cypress.Commands.add('clickSubmitButton', (msg) => {
+    cy.get('.btn.btn-success').click();
+    if(msg){
+        cy.get('#snackbar').should('be.visible'); // Assuming snackbar has a class 'snackbar'
+        cy.get('#snackbar').contains(msg); // Assuming snackbar contains text
+    }
+})
+
+Cypress.Commands.add('typeTextInElement', (type,msg) => {
+    cy.get(`.input-group input[type=${type}]`)
+        .type(msg);
+})
+
+Cypress.Commands.add('clickOnCheckBox', () => {
+    cy.get(`.form-check input[type="checkbox"]`)
+  .check();
+})
+
+Cypress.Commands.add('clickOnCheckBoxByDataCy', (datacy) => {
+    cy.get(`[data-cy=${datacy}]`).check();
+})
+
+Cypress.Commands.add('waitForLoader', () => {
+    cy.get('.loader').should('not.exist');
+})
+
+Cypress.Commands.add('verifyBalance', (num,datacy) => {
+    cy.get(`[data-cy=${datacy}]`)
+        .should('be.visible')
+        .contains(`${num}`);
+})
+
+

cypress/support/e2e.js

@@ -0,0 +1,20 @@
+// ***********************************************************
+// This example support/e2e.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')

cypress/support/enums.js

@@ -0,0 +1,15 @@
+const Navbar = {
+    WALLET: 'wallet',
+    CREATE_WALLET: 'Create Wallet',
+    GENERATE_WALLET: 'Generate New Wallet Words',
+};
+
+const WALLET_DATA_CY = {
+    CREATE_WALLET: 'create-wallet',
+    GENERATE_WALLET_WORDS: 'generate-wallet-words',
+    BALANCE: 'balance',
+    BALANCE_AMOUNT: 'balance-amount',
+    WALLET_CHECKBOX: 'wallet-checkbox',
+};
+
+export {Navbar,WALLET_DATA_CY};