Merge pull request #749 from Magickbase/develop

.github/workflows/test.e2e.yml

@@ -31,7 +31,7 @@ jobs:
         run: npx cypress info
 
       - name: Cypress run
-        uses: cypress-io/[email protected].1
+        uses: cypress-io/[email protected].2
         with:
           install: false
           build: npm run build

components/ChartComponents/index.tsx

@@ -3,7 +3,7 @@ import styles from './styles.module.scss'
 export const CustomTooltip: React.FC<any> = ({ active, payload, label, theme }) => {
   if (active && payload && payload.length) {
     return (
-      <div className={styles.tooltipContent}>
+      <div className={styles.tooltipContent} data-cy="chart-tooltip">
         <div>{`${label}`}</div>
         <ul>
           {payload.map(({ name, value }, idx) => (
@@ -29,6 +29,7 @@ export const CustomYLabel: React.FC<any> = ({ value, theme, isMobile, align = 'l
       fontSize={isMobile ? 12 : 14}
       textAnchor="middle"
       style={{ transform: 'rotate(-90deg)' }}
+      data-cy="chart-y-label"
     >
       {value}
     </text>

components/ChartList/index.tsx

@@ -100,11 +100,11 @@ const ChartList: React.FC<{ charts: { dailyData: ReturnType<typeof getDailyDataR
             },
           },
         }}
-        action={<ClearIcon onClick={() => setAlertOpen(false)} />}
+        action={<ClearIcon data-cy="remove-charts-banner-btn" onClick={() => setAlertOpen(false)} />}
       >
         {t(`updateTimeInfo`)}
       </Alert>
-      <Stack spacing={{ xs: 3, md: 5 }}>
+      <Stack spacing={{ xs: 3, md: 5 }} data-cy="charts-list">
         {keysList.map(keys => (
           <Box key={keys.map(k => k.key).join()}>
             <Typography
@@ -113,6 +113,7 @@ const ChartList: React.FC<{ charts: { dailyData: ReturnType<typeof getDailyDataR
               color="secondary"
               fontSize={{ xs: 15, md: 20 }}
               mb={{ xs: 1.8, md: 3 }}
+              data-cy="chart-title"
             >
               {t(`title.${keys.map(k => k.key).join('/')}`)}
             </Typography>

components/Header.tsx

@@ -306,6 +306,7 @@ const Header = () => {
             <Button
               color="secondary"
               disableRipple
+              id="token-menu"
               sx={{
                 'textTransform': 'none',
                 'mx': 2,
@@ -326,6 +327,7 @@ const Header = () => {
             <Button
               color="secondary"
               disableRipple
+              id="contracts-menu"
               sx={{
                 'textTransform': 'none',
                 'mx': 2,
@@ -349,6 +351,7 @@ const Header = () => {
             <Button
               color="secondary"
               disableRipple
+              id="charts-menu"
               sx={{
                 'textTransform': 'none',
                 'mx': 2,
@@ -372,6 +375,7 @@ const Header = () => {
             <Button
               color="secondary"
               disableRipple
+              id="chains-menu"
               sx={{
                 'textTransform': 'none',
                 'mx': 2,
@@ -392,6 +396,7 @@ const Header = () => {
             <Button
               color="secondary"
               disableRipple
+              id="i18n-menu"
               sx={{
                 'textTransform': 'none',
                 'ml': 2,

components/RawBlockData/index.tsx

@@ -49,6 +49,7 @@ const RawBlockData: React.FC<{ no: number }> = ({ no }) => {
           readOnly
           style={textareaStyle}
           className="mono-font"
+          data-cy="raw-data"
         />
       ) : isLoading ? (
         <Skeleton variant="rectangular" animation="wave" height="80ch" />

cypress.json

@@ -6,9 +6,11 @@
       "url": "/api/__coverage__"
     }
   },
-  "defaultCommandTimeout": 12000,
-  "responseTimeout": 15000,
-  "pageLoadTimeout": 20000,
+  "defaultCommandTimeout": 24000,
+  "responseTimeout": 16000,
+  "pageLoadTimeout": 24000,
+  "viewportWidth": 1100,
+  "viewportHeight": 1000,
   "pluginsFile": "node_modules/@cypress/code-coverage/plugins",
   "supportFile": "node_modules/@cypress/code-coverage/support",
   "projectId": "2sb35d"

cypress/fixtures/blocks.json

@@ -0,0 +1,7 @@
+{
+  "blockWithTxs": "0x0a9fbb868d381f65328a811ffe441f80c328400b583887731ae7195579e0ca5d",
+  "blockWithBridgedTransfers": "0x2ae0d8f85f982800cbdf8b20c4b3e6b6023453dc60dd5e522d22f11cb34b2733",
+  "blockWithRawData": "0x2ae0d8f85f982800cbdf8b20c4b3e6b6023453dc60dd5e522d22f11cb34b2733",
+  "blockWithoutTxs": "0x90ce1c2c2e988167a55143e9abc13a68f70d0e04a8b47aa19fa8ac1918ed8dc9",
+  "blockWithoutBridgedTransfers": "0x90ce1c2c2e988167a55143e9abc13a68f70d0e04a8b47aa19fa8ac1918ed8dc9"
+}

cypress/integration/block/index.spec.ts

@@ -1,23 +1,34 @@
 /// <reference types="cypress" />
 
 context('Block Page', () => {
-  const hash = '0x0a9fbb868d381f65328a811ffe441f80c328400b583887731ae7195579e0ca5d'
+  let blockWithTxs: string
+  let blockWithBridgedTransfers: string
+  let blockWithRawData: string
+  let blockWithoutTxs: string
+  let blockWithoutBridgedTransfers: string
 
-  before(() =>
-    cy.visit(`/en-US/block/${hash}`, {
-      headers: {
-        'Accept-Encoding': 'gzip, deflate',
-      },
-    }),
-  )
+  before(() => {
+    cy.fixture('blocks').then(blocks => {
+      blockWithTxs = blocks.blockWithTxs
+      blockWithBridgedTransfers = blocks.blockWithBridgedTransfers
+      blockWithRawData = blocks.blockWithRawData
+      blockWithoutTxs = blocks.blockWithoutTxs
+      blockWithoutBridgedTransfers = blocks.blockWithoutBridgedTransfers
+      return cy.visit(`/en-US/block/${blockWithTxs}`, {
+        headers: {
+          'Accept-Encoding': 'gzip, deflate',
+        },
+      })
+    })
+  })
 
   describe('block info', () => {
     it('should have title with block number', () => {
       cy.get('h5').should('contain.text', 'Block # 131,229')
     })
 
     it('should have block hash', () => {
-      cy.get('dl').first().find('dt').should('have.text', 'block hash').next().should('have.text', hash)
+      cy.get('dl').first().find('dt').should('have.text', 'block hash').next().should('have.text', blockWithTxs)
     })
 
     it('should have timestamp', () => {
@@ -162,10 +173,10 @@ context('Block Page', () => {
       cy.get('[role=tab]')
         .first()
         .should('have.text', 'Transactions')
-        .should('have.attr', 'href', `/block/${hash}?tab=transactions`)
+        .should('have.attr', 'href', `/block/${blockWithTxs}?tab=transactions`)
         .next()
         .should('have.text', 'Bridged Transfers')
-        .should('have.attr', 'href', `/block/${hash}?tab=bridged`)
+        .should('have.attr', 'href', `/block/${blockWithTxs}?tab=bridged`)
     })
   })
 
@@ -230,4 +241,85 @@ context('Block Page', () => {
         .should('have.text', '0.00000000')
     })
   })
+
+  describe('should have a list of bridged transfers', () => {
+    before(() => {
+      cy.visit(`/en-US/block/${blockWithBridgedTransfers}?tab=bridged`)
+    })
+    it('should have 7 fields', () => {
+      cy.get('th')
+        .first()
+        .should('contain.text', 'Type')
+        .next()
+        .should('contain.text', 'Value')
+        .next()
+        .should('contain.text', 'pCKB')
+        .next()
+        .should('contain.text', 'Age')
+        .next()
+        .should('contain.text', 'Account')
+        .next()
+        .should('contain.text', 'CKB Txn')
+        .next()
+        .should('contain.text', 'Block')
+    })
+
+    it('should have at least one record', () => {
+      cy.get('tbody tr').should('have.length.at.least', 1)
+    })
+
+    it('should have 7 values in a record', () => {
+      cy.get('tbody tr')
+        .first()
+        .find('td')
+        .first()
+        .should('have.text', 'Withdrawal')
+        .next()
+        .should('have.text', '10 USDC')
+        .next()
+        .should('have.text', '400')
+        .next()
+        .should(field => {
+          expect(field.find('time').attr('datetime')).to.eq('2022-07-10T14:08:57.261Z')
+        })
+        .next()
+        .should(field => {
+          expect(field.text()).to.eq('0x9c0992...62a638b5')
+          expect(field.find('a').attr('href')).to.eq('/account/0x9c09926927201527812364cf97aa9bb962a638b5')
+        })
+        .next()
+        .should(field => {
+          expect(field.text()).to.eq('0x1973a2...ab6a7ab4')
+          expect(field.find('a').attr('href')).to.eq(
+            'https://pudge.explorer.nervos.org/transaction/0x1973a24ce482a1988a667214d951514227d8d460e145a108998abee9ab6a7ab4#2',
+          )
+        })
+        .next()
+        .should(field => {
+          expect(field.text()).to.eq('178,574')
+          expect(field.find('a').attr('href')).to.eq(
+            '/block/0x2ae0d8f85f982800cbdf8b20c4b3e6b6023453dc60dd5e522d22f11cb34b2733',
+          )
+        })
+    })
+  })
+
+  // describe('should have raw data', () => {
+  //   it('should have raw data', () => {
+  //     cy.visit(`/en-US/block/${blockWithRawData}?tab=raw-data`)
+  //     cy.get('h6').should('have.text', 'Block')
+  //     cy.get('[data-cy="raw-data"]', { timeout: 60000 }).should('be.visible')
+  //   })
+  // })
+
+  describe('should display tabs with empty data', () => {
+    it('should display empty transactions list', () => {
+      cy.visit(`/en-US/block/${blockWithoutTxs}`)
+      cy.get('tbody').should('contain.text', "There're no matching entries")
+    })
+    it('should display empty bridged transfers list', () => {
+      cy.visit(`/en-US/block/${blockWithoutBridgedTransfers}?tab=bridged`)
+      cy.get('tbody').should('contain.text', "There're no matching entries")
+    })
+  })
 })