test: add e2e test

[gpBlockchain]

What Changed

Resolve: #120

add e2e test

Motivation

Change Type

Indicate the type of change your pull request is:

• documentation
• patch
• minor
• major

Some pre-actions are required to trigger the E2E test

• Create a repository for e2e-test-report.
  https://github.com/gpBlockchain/nexus/blob/fe55bc73f738619d33f6ab8f11b633fe6fdf7535/.github/workflows/e2e.yaml#L89
• Create a personal access token (PAT) to allow pushing the report after the e2e test is completed.
  https://github.com/gpBlockchain/nexus/blob/fe55bc73f738619d33f6ab8f11b633fe6fdf7535/.github/workflows/e2e.yaml#L100
• how to create PAT
  https://github.com/gpBlockchain/nexus/tree/lgp/fix-e2e/e2e/packages/e2e#how-to-add-personal-access-token

[codecov]

Codecov Report

Merging #151 (d6408cc) into main (cd79532) will not change coverage.
The diff coverage is n/a.

@@           Coverage Diff           @@
##             main     #151   +/-   ##
=======================================
  Coverage   86.75%   86.75%           
=======================================
  Files          41       41           
  Lines         770      770           
  Branches       95       95           
=======================================
  Hits          668      668           
  Misses         20       20           
  Partials       82       82           

📣 We’re building smart automated test selection to slash your CI/CD build times. Learn more

[IronLu233]

Seems it is not a test case, maybe a setup step for global.

Please use globalSetup

[gpBlockchain]

At that time, I made some adjustments in globalSetup, but it seemed that the Allure plugin had not been loaded yet, which resulted in an error. Therefore, I directly wrote it in the test case instead.

[IronLu233]

add a TODO or FIXME here for complain the reason.

[gpBlockchain]

the "recordVideo" function was too difficult to use, so I commented it out.now will remove it

[IronLu233]

The better way is to modify these rules. I have seen many /* eslint-disable xxxxxxx */ in e2e. these rules may not suitable to enable on the e2e test files. @homura can we modify it? I need your opinion.

[homura]

There are only 12 disable mark in this PR, and I found no disable mark for any, therefore, just keep it as it is

[zhangyouxin]

Is there a ENV property for the path /home/runner/work/nexus/nexus?

[gpBlockchain]

This path is the fixed path in the action, need to modify it？

[homura]

The e2e/packages/e2e's lock file seems to be missing

[gpBlockchain]

The e2e/packages/e2e's lock file seems to be missing

update package-lock.json

[homura]

After the review, I think e2e needs to have some conventions, and here are some of my suggestions

Element Query

Priority

We can check out the testing-libarary

data-testid Standardization

use the data-testid to find an element, the data-testid recommend to use the BEM naming convention

block // 👍
my-block // 👍 dash to concatenate words
block__elem // 👍 element of a block
my-block__elem // 👍 dash block with element
my-block__another-elem // 👍 

MyBlock // 👎 migrate to dash 
myBlock // 👎 migrate to dash
block__elem__another-elem // 👎 multiple level element is not recommended

Testing Code

Follow the KISS (keep it simple, stupid) principle

• one file, one scenario, e.g. import-wallet, create-wallet, ownership-sign-tx
• only abstract if it is necessary, e.g. createTestEnv()

// ownership-sign-tx
// init with default mnemonic and whitelist
describe("fullOwnership sign transaction", () => {
  it('should send a signed tx successfully', () => {
    await createTestEnv({
      launchCkb: true
      // a ckb object implemented by playwright
    }, ({ rpc, ckb, nexus, browser }) => {
      // open the nexus-e2e
      await browser.open("http://localhost:3000")

      // simulate a dApp to assemble a transaction
      const provider = new FullOwnershipProvider(ckb)
      txSkeleton = await provider.injectCapacity({
        amount: CkbAmount.from(1000)
      })
      // NO await here, since we need do something on Nexus extension
      const signTxPromise = provider.signTransaction(tx)
      
      await nexus.focus();
      await nexus.fill(`[type="password"]`, DEFAULT_PASSWORD)
      await nexus.click({text: "Approve"})

      // await signed tx here
      const signature = await signTxPromise 
      const txHash = await sendTransaction(tx)
      await rpc.waitForNextBlock()
      expect(await rpc.getTransaction(txHash)).not.empty()
    })
  })
})