Test/expand parties test coverage to include json (#1612)

* test: assets

* test: lint

apps/explorer-e2e/src/integration/asset.cy.js

@@ -13,7 +13,7 @@ context('Asset page', { tags: '@regression' }, function () {
       cy.common_validate_blocks_data_displayed(assetHeader);
     });
 
-    it('Assets and all asset details are displayed', function () {
+    it('Assets and all asset details are displayed in JSON', function () {
       cy.get_asset_information().then((assetsInfo) => {
         const assetNames = Object.keys(assetsInfo);
         assert.isAtLeast(
@@ -21,56 +21,50 @@ context('Asset page', { tags: '@regression' }, function () {
           3,
           'Ensuring we have at least 3 assets to test'
         );
+
         assetNames.forEach((assetName) => {
-          const assetInfo = assetsInfo[assetName];
-          cy.get(assetHeader).contains(assetInfo.symbol);
           cy.get(assetHeader)
             .contains(assetName)
             .next()
             .within(() => {
-              cy.get(jsonSection).within(() => {
+              cy.get(jsonSection)
-                cy.contains(`"name": "${assetName}"`).should('be.visible');
+                .invoke('text')
-                cy.contains(`"id": "${assetInfo.id}"`).should('be.visible');
+                .convert_string_json_to_js_object()
-                cy.contains(`"decimals": ${assetInfo.decimals}`).should(
+                .then((assetsListedInJson) => {
-                  'be.visible'
+                  const assetInfo = assetsInfo[assetName];
-                );
-                cy.contains(`"symbol": "${assetInfo.symbol}"`).should(
-                  'be.visible'
-                );
-                cy.contains(
-                  `"__typename": "${assetInfo.infrastructureFeeAccount.__typename}"`
-                ).should('be.visible');
-                cy.contains(
-                  `"type": "${assetInfo.infrastructureFeeAccount.type}"`
-                ).should('be.visible');
-                cy.contains(
-                  `"balance": "${assetInfo.infrastructureFeeAccount.balance}"`
-                ).should('be.visible');
-                cy.contains(
-                  `"__typename": "${assetInfo.source.__typename}"`
-                ).should('be.visible');
 
-                if (assetInfo.source.__typename == 'ERC20') {
+                  assert.equal(assetsListedInJson.name, assetInfo.name);
-                  cy.contains(
+                  assert.equal(assetsListedInJson.id, assetInfo.id);
-                    `"contractAddress": "${assetInfo.source.contractAddress}"`
+                  assert.equal(assetsListedInJson.decimals, assetInfo.decimals);
-                  ).should('be.visible');
+                  assert.equal(assetsListedInJson.symbol, assetInfo.symbol);
-                }
+                  assert.equal(
+                    assetsListedInJson.source.__typename,
+                    assetInfo.source.__typename
+                  );
 
-                if (assetInfo.source.__typename == 'BuiltinAsset') {
+                  if (assetInfo.source.__typename == 'ERC20') {
-                  cy.contains(
+                    assert.equal(
-                    `"maxFaucetAmountMint": "${assetInfo.source.maxFaucetAmountMint}"`
+                      assetsListedInJson.source.contractAddress,
-                  ).should('be.visible');
+                      assetInfo.source.contractAddress
-                }
+                    );
+                  }
 
-                let knownAssetTypes = ['BuiltinAsset', 'ERC20'];
+                  if (assetInfo.source.__typename == 'BuiltinAsset') {
-                assert.include(
+                    assert.equal(
-                  knownAssetTypes,
+                      assetsListedInJson.source.maxFaucetAmountMint,
-                  assetInfo.source.__typename,
+                      assetInfo.source.maxFaucetAmountMint
-                  `Checking that current asset type of ${assetInfo.source.__typename} /
+                    );
-                is one of: ${knownAssetTypes}: /
+                  }
-                If fail then we need to add extra tests for un-encountered asset types`
+
-                );
+                  let knownAssetTypes = ['BuiltinAsset', 'ERC20'];
-              });
+                  assert.include(
+                    knownAssetTypes,
+                    assetInfo.source.__typename,
+                    `Checking that current asset type of ${assetInfo.source.__typename} /
+                  is one of: ${knownAssetTypes}: /
+                  If fail then we need to add extra tests for un-encountered asset types`
+                  );
+                });
             });
         });
       });

apps/explorer-e2e/src/integration/parties.cy.js

@@ -33,6 +33,20 @@ context('Parties page', { tags: '@regression' }, function () {
       // Deliberate slow entry of party id/key - enabling transactions to sync
       cy.get(partiesSearchBox).type(vegaWalletPublicKey, { delay: 120 });
       cy.get(partiesSearchAction).click();
+      cy.get_connected_parties_accounts().as('party_accounts');
+
+      // Ensure balance of each party asset is correct
+      cy.get('@party_accounts').then((accounts) => {
+        assetsInTest.forEach((asset) => {
+          cy.get_asset_decimals(assetData[asset].id).then((assetDecimals) => {
+            assert.equal(
+              accounts[assetData[asset].id].balance,
+              assetData[asset].amount + assetDecimals,
+              `Checking ${assetData[asset].id} faucet was successfull`
+            );
+          });
+        });
+      });
     });
 
     it('should see party address id - having searched', function () {
@@ -42,7 +56,7 @@ context('Parties page', { tags: '@regression' }, function () {
         .should('be.visible');
     });
 
-    it('should see each asset - within asset data section', function () {
+    it('should see each asset and balance - within asset data section', function () {
       assetsInTest.forEach((asset) => {
         cy.contains(assetData[asset].name, txTimeout).should('be.visible');
         cy.contains(assetData[asset].name)
@@ -88,22 +102,83 @@ context('Parties page', { tags: '@regression' }, function () {
     it('should be able to see JSON of each asset containing correct balance and decimals', function () {
       cy.get(partiesJsonSection).should('be.visible');
 
-      assetsInTest.forEach((asset) => {
+      assetsInTest.forEach((assetInTest) => {
         cy.get(partiesJsonSection)
           .invoke('text')
           .convert_string_json_to_js_object()
-          .get_party_accounts_data()
+          .get_party_accounts_data_from_js_object()
-          .then((accounts) => {
+          .then((accountsListedInJson) => {
-            cy.get_asset_decimals(asset).then((assetDecimals) => {
+            cy.get_asset_information().then((assetsInfo) => {
+              const assetInfo =
+                assetsInfo[accountsListedInJson[assetInTest].asset.name];
+
               assert.equal(
-                accounts[asset].balance,
+                accountsListedInJson[assetInTest].asset.name,
-                assetData[asset].amount + assetDecimals
+                assetInfo.name
               );
+              assert.equal(
+                accountsListedInJson[assetInTest].asset.id,
+                assetInfo.id
+              );
+              assert.equal(
+                accountsListedInJson[assetInTest].asset.decimals,
+                assetInfo.decimals
+              );
+              assert.equal(
+                accountsListedInJson[assetInTest].asset.symbol,
+                assetInfo.symbol
+              );
+              assert.equal(
+                accountsListedInJson[assetInTest].asset.source.__typename,
+                assetInfo.source.__typename
+              );
+              cy.get_asset_decimals(assetInTest).then((assetDecimals) => {
+                assert.equal(
+                  accountsListedInJson[assetInTest].balance,
+                  assetData[assetInTest].amount + assetDecimals
+                );
+              });
             });
           });
       });
     });
 
+    it('should be able to switch parties page between light and dark mode', function () {
+      const whiteThemeSelectedMenuOptionColor = 'rgb(255, 7, 127)';
+      const whiteThemeJsonFieldBackColor = 'rgb(255, 255, 255)';
+      const whiteThemeSideMenuBackgroundColor = 'rgb(255, 255, 255)';
+      const blackThemeSelectedMenuOptionColor = 'rgb(223, 255, 11)';
+      const blackThemeJsonFieldBackColor = 'rgb(38, 38, 38)';
+      const blackThemeSideMenuBackgroundColor = 'rgb(0, 0, 0)';
+      const themeSwitcher = '[data-testid="theme-switcher"]';
+      const jsonFields = '.hljs';
+      const sideMenuBackground = '.absolute';
+
+      // White Mode
+      cy.get(themeSwitcher).click();
+      cy.get(partiesMenuHeader)
+        .should('have.css', 'background-color')
+        .and('include', whiteThemeSelectedMenuOptionColor);
+      cy.get(jsonFields)
+        .should('have.css', 'background-color')
+        .and('include', whiteThemeJsonFieldBackColor);
+      cy.get(sideMenuBackground)
+        .should('have.css', 'background-color')
+        .and('include', whiteThemeSideMenuBackgroundColor);
+
+      // Dark Mode
+      cy.get(themeSwitcher).click();
+      cy.get(partiesMenuHeader)
+        .should('have.css', 'background-color')
+        .and('include', blackThemeSelectedMenuOptionColor);
+      cy.get(jsonFields)
+        .should('have.css', 'background-color')
+        .and('include', blackThemeJsonFieldBackColor);
+      cy.get(sideMenuBackground)
+        .should('have.css', 'background-color')
+        .and('include', blackThemeSideMenuBackgroundColor);
+    });
+
     after(
       'teardown environment to prevent test data bleeding into other tests',
       function () {
@@ -122,28 +197,39 @@ context('Parties page', { tags: '@regression' }, function () {
       });
     });
 
-    Cypress.Commands.add(
+    Cypress.Commands.add('get_connected_parties_accounts', () => {
-      'convert_string_json_to_js_object',
+      const mutation =
-      { prevSubject: true },
+        '{partiesConnection {edges{node{accountsConnection{edges{node{\
-      (jsonBlobString) => {
+          balance type asset {id symbol decimals}}}}}}}}';
-        return JSON.parse(jsonBlobString);
+      cy.request({
-      }
+        method: 'POST',
-    );
+        url: `http://localhost:3028/query`,
+        body: {
+          query: mutation,
+        },
+        headers: { 'content-type': 'application/json' },
+      })
+        .its(
+          `body.data.partiesConnection.edges.1.node.accountsConnection.edges`
+        )
+        .then(function (response) {
+          let accounts = {};
+          response.forEach((account) => {
+            accounts[account.node.asset.id] = account.node;
+          });
+          return accounts;
+        });
+    });
 
     Cypress.Commands.add(
-      'get_party_accounts_data',
+      'get_party_accounts_data_from_js_object',
       { prevSubject: true },
       (jsObject) => {
         const accounts = jsObject.party.accounts.reduce(function (
           account,
           entry
         ) {
-          account[entry.asset.id] = {
+          account[entry.asset.id] = entry;
-            balance: entry.balance,
-            id: entry.asset.id,
-            decimals: entry.asset.decimals,
-            name: entry.asset.name,
-          };
           return account;
         },
         {});

apps/explorer-e2e/src/support/common.functions.js

@@ -67,3 +67,11 @@ Cypress.Commands.add(
     return clipboard.args[0][1];
   }
 );
+
+Cypress.Commands.add(
+  'convert_string_json_to_js_object',
+  { prevSubject: true },
+  (jsonBlobString) => {
+    return JSON.parse(jsonBlobString);
+  }
+);