Cypress e2e

.gitignore

@@ -6,4 +6,4 @@ out
 .idea
 storybook-static
 .yalc
-yalc.lock
+yalc.lock

cypress.config.ts

@@ -0,0 +1,9 @@
+import { defineConfig } from "cypress";
+
+export default defineConfig({
+  e2e: {
+    setupNodeEvents(on, config) {
+      // implement node event listeners here
+    },
+  },
+});

e2e/.gitignore

@@ -0,0 +1,5 @@
+node_modules
+videos
+screenshots
+env
+e2e/tests/reports

e2e/README.md

@@ -0,0 +1,49 @@
+# synpress_metamask_login
+
+This repo belongs to the written [tutorial](https://medium.com/coinmonks/test-e2e-login-to-dapp-with-metamask-with-synpress-5248dd1f17c1).
+
+Synpress is a wrapper of Cypress (e2e-frontend-testing) and allows to test web3 dApps with metamask interaction. This code base accompanies the written tutorial. It helps to onboard people to dApp e2e testing.
+
+## Getting Started
+
+The scripts that are linked to the wallet require MetaMask setup, which can be configured using the env file. It's essential to ensure you have sufficient balances in the tokens utilized within the scripts, along with Gas token balances to cover transaction fees.
+
+For the swap scripts, you'll find the tokens being used stored within variables named fromToken, toToken, and gasTokenName. The relevant transaction values, namely swapValue, sellTokenValue, and buyTokenValue, can be found in the pangolin-data.json file.
+(Do not use AVAX and USDC as fromToken and toToken)
+
+For the pool scripts, you'll find the tokens being used stored within variables named createPairToken1, createPairToken2, addliquidityToken1, addliquidityToken2, noPoolToken1, noPoolToken2, poolFoundToken1, poolFoundToken2 . The relevant transaction value namely addliquidityValuecan be also found in the pangolin-data.json file.
+(For createPair tokens select tokens that does not exist)
+(For noPool tokens select tokens that have no pool )
+(For poolFound tokens select tokens that have a pool)
+(Do not use AVAX as a token1)
+
+### Prerequisites
+
+- Node.js
+- npm
+
+### Installation
+
+1. Clone the repository: `git clone https://github.com/pangolindex/components`
+2. Navigate to the project directory: `cd e2e`
+3. Install dependencies: `npm install`
+
+### Running Tests
+
+To run scrips having wallet connected:
+
+npm test run
+
+To run scripts without wallet connect:
+
+npx cypress run
+
+## Useful Links
+
+- https://docs.cypress.io/guides/getting-started/installing-cypress
+- https://github.com/Synthetixio/synpress
+- https://github.com/yvesbou/synpress_metamask_login/new/main?readme=1
+
+Overview over possible synpress functions:
+
+- https://github.com/synthetixio/synpress/blob/master/support/index.d.ts

e2e/cypress.config.js

@@ -0,0 +1,17 @@
+const { defineConfig } = require('cypress');
+
+module.exports = defineConfig({
+  // setupNodeEvents can be defined in either
+  // the e2e or component configuration
+  reporter: 'cypress-mochawesome-reporter',
+  e2e: {
+    setupNodeEvents(on, config) {
+      require('cypress-mochawesome-reporter/plugin')(on);
+      // on('before:browser:launch', (browser = {}, launchOptions) => {
+      //   /* ... */
+      // })
+    },
+    baseUrl: 'https://dev.pangolin.exchange/#',
+    supportFile: false,
+  },
+});

e2e/cypress/e2e/Airdrop.cy.js

@@ -0,0 +1,92 @@
+/// <reference types = "cypress"/>
+import selectors from "../fixtures/selectors.json"
+import data from '../fixtures/pangolin-data.json'
+const {airdropSideMenu, airdropSideMenuSelect, pangolinTitle, songbirdLogo, cards, metamaskMenuTitle, metamaskMenuCrossBtn, haveQuestions, plusIcon, faqExp, minusIcon } = selectors.airdrop
+const {cardsNames, title, eligibleMsg, comingSoonMsg, haveQs} = data.airdrop
+const {connectWalletTxt} = data.swap
+const {connectToWallet} = data.dashboard
+describe(`Airdrop`, () => {
+    beforeEach('',() => {
+        cy.visit('/')
+        // Cypress.on('uncaught:exception', (err, runnable) => {
+        //     // returning false here prevents Cypress from
+        //     // failing the test
+        //     return false
+        // })
+        Cypress.on('uncaught:exception', (err, runnable, promise) => {
+
+            // if (err.message.includes("TypeError")) {
+            //     return false
+            // }
+
+            if (err.name === 'TypeError') {
+                return false
+            }
+          })
+
+        cy.get('#airdrop').click()
+    })
+
+    /******************* Selecting Airdrop from side menu **************************/
+    it(`TC-01, Verify that the airdrop page can be accessed from the side menu`, () => {
+        cy.get(airdropSideMenu)
+            .should("have.css", "background-color", "rgb(255, 200, 0)")
+        cy.get(airdropSideMenuSelect)
+            .should("have.class","ACTIVE")
+    })
+
+    /******************* Assertion on the cards **************************/
+    it(`TC-03,04,05,15,16,17,18,19,20,21, Verify that the user can see the card "Claim PNR" on the airdrop page`, () => {
+    cy.get(pangolinTitle).contains(title).should('be.visible')
+    cy.get(songbirdLogo).should('have.attr', 'src', './static/media/PSB.7fd03da2.svg').should('be.visible')
+    for(let i = 0; i < cardsNames.length; i++){
+     cy.get(cards).contains(`${cardsNames[i]}`).should('be.visible')
+        if(cardsNames[i] === "Old PSB Reimbursement" || cardsNames[i] === "Claim PSB") {
+            cy.contains(eligibleMsg).should('be.visible')
+            cy.get('button').should('contain', connectWalletTxt).eq(1).click()
+            cy.get(metamaskMenuTitle).should('contain', connectToWallet)
+            cy.get(metamaskMenuCrossBtn).click()
+        }
+        if(cardsNames[i] === "Claim PNR"  || cardsNames[i] === "Claim PFL") {
+            cy.contains(comingSoonMsg).should('be.visible')
+        }
+    }
+
+    })
+
+    /********************* FAQS Assertions **********************************/
+    it(`TC-08,09,10,11,12,13,14 Verify that the user can see the FAQ's on the airdrop page`, () => {
+        cy.get(haveQuestions).contains(haveQs).should('be.visible')
+        for(let i = 0; i < 6; i++){
+            //......... Clicking on the same + icon
+            cy.get(plusIcon).eq(i).click()
+            cy.get(minusIcon).should("be.visible")
+            cy.get(faqExp).should("be.visible")
+            cy.get(minusIcon).click()
+            cy.get(minusIcon).should("not.exist")
+            cy.get(faqExp).should("not.exist")
+            //......... Clicking on the next + icon
+            cy.get(plusIcon).eq(i).click()
+            cy.get(minusIcon).should("be.visible")
+            cy.get(faqExp).should("be.visible")
+            cy.get(plusIcon).eq(i+1)
+            if(i === 6){
+                cy.get(plusIcon).eq(i).click()
+            }
+            cy.get(plusIcon).eq(i).should("be.visible")
+            cy.get(minusIcon).click()
+        }
+    })
+})
+
+
+
+
+
+
+
+
+
+
+
+