feat: implement playwright for browser compatibility testing

.changeset/grumpy-wolves-worry.md

@@ -0,0 +1,2 @@
+---
+---

.github/workflows/test.yaml

@@ -16,7 +16,7 @@ jobs:
     with:
       doc-folder-path: "apps/docs/src"
 
-  test:
+  build:
     runs-on: ubuntu-latest
     steps:
       - name: Checkout
@@ -34,37 +34,123 @@ jobs:
       - name: Lint
         run: pnpm lint
 
+      - name: Validate tests
+        run: pnpm test:validate
+
+  test-node:
+    runs-on: ubuntu-latest
+    needs: build
+    steps:
+      - name: Checkout
+        uses: actions/checkout@v3
+
+      - name: CI Setup
+        uses: ./.github/actions/ci-setup
+
+      - name: Build
+        run: pnpm build
+
+      - name: Run Node Tests
+        run: pnpm ci:test-node
+
+      - name: Upload Node Coverage
+        uses: actions/upload-artifact@v2
+        with:
+          name: node
+          path: coverage/environments/node
+
+  test-browser:
+    runs-on: ubuntu-latest
+    needs: build
+    steps:
+      - name: Checkout
+        uses: actions/checkout@v3
+
+      - name: CI Setup
+        uses: ./.github/actions/ci-setup
+
+      - name: Build
+        run: pnpm build
+
+      - name: Run Browser Tests
+        run: pnpm ci:test-browser
+
+      - name: Upload Browser Coverage
+        uses: actions/upload-artifact@v2
+        with:
+          name: browser
+          path: coverage/environments/browser
+
+  test:
+    runs-on: ubuntu-latest
+    needs: [test-node, test-browser]
+    steps:
+      - name: Checkout
+        uses: actions/checkout@v3
+
+      - name: CI Setup
+        uses: ./.github/actions/ci-setup
+
+      - name: Build
+        run: pnpm build
+
+      - name: Generate Coverage Directory
+        run: mkdir -p coverage/environments
+
+      - name: Download Coverage for Browser Tests
+        uses: dawidd6/action-download-artifact@v2
+        with:
+          workflow: test.yaml
+          name: browser
+          path: coverage/environments
+
+      - name: Download Coverage for Node Tests
+        uses: dawidd6/action-download-artifact@v2
+        with:
+          workflow: test.yaml
+          name: node
+          path: coverage/environments
+
+      - name: Merge Coverage
+        run: pnpm test:merge-coverage && pnpm test:report-coverage
+
       - name: Find PR Number
         uses: jwalton/gh-find-current-pr@v1
         id: findPr
 
-      - name: Run tests and collect coverage
-        if: ${{ !steps.findPr.outputs.number }}
-        run: pnpm ci:test -- --json --coverage --testLocationInResults --outputFile=report.master.json
-
-      - name: Upload coverage to Github artifacts
+      - name: Upload Coverage Artifact
         uses: actions/upload-artifact@v3
         if: ${{ !steps.findPr.outputs.number }}
         with:
-          name: coverage-reports
-          path: report.master.json
+          name: coverage-master
+          path: coverage/report
 
-      - name: Download coverage artifact
+      - name: Download Coverage Artifact
         uses: dawidd6/action-download-artifact@v2
-        if: ${{ steps.findPr.outputs.number }}
+        # TODO: Remove PR != check once #1182 has been merged
+        if: ${{ (steps.findPr.outputs.number) && (steps.findPr.outputs.number != 1182)}}
         with:
           workflow: test.yaml
           branch: master
-          name: coverage-reports
-          path: coverage-reports
+          name: coverage-master
+          path: coverage-master
+
+      # TODO: Delete once #1182 has been merged
+      - name: Download coverage artifact (temporary)
+        uses: dawidd6/action-download-artifact@v2
+        if: ${{ (steps.findPr.outputs.number) && (steps.findPr.outputs.number == 1182)}}
+        with:
+          workflow: test.yaml
+          run_id: 5940564903
+          name: coverage-master
+          path: coverage-master
 
-      - name: Run tests and post reports to PR
-        uses: ArtiomTr/jest-coverage-report-action@v2
+      - name: Report Coverage
+        uses: romeovs/lcov-reporter-action@v0.3.1
         if: ${{ steps.findPr.outputs.number }}
         with:
           github-token: ${{ secrets.GITHUB_TOKEN }}
-          package-manager: pnpm
-          annotations: failed-tests
-          test-script: pnpm ci:test
-          prnumber: ${{ steps.findPr.outputs.number }}
-          base-coverage-file: coverage-reports/report.master.json
+          lcov-file: coverage/report/lcov.info
+          lcov-base: coverage-master/lcov.info
+          delete-old-comments: true
+          title: "Coverage Report"

.nycrc

@@ -0,0 +1,11 @@
+{
+  "extends": "@istanbuljs/nyc-config-typescript",
+  "all": true,
+  "include": ["packages/**/*.ts", "apps/docs-snippets/**/*.ts"],
+  "exclude": [
+    "/dist/",
+    "/apps/demo-nextjs",
+    "/apps/demo-react-cra",
+    "/dist/demo-react-vite"
+  ]
+}

CONTRIBUTING.md

@@ -107,20 +107,22 @@ And then run the tests in another terminal tab:
 # run all tests
 pnpm test
 
-# run tests while passing other flags to sub-program
-pnpm test -- --coverage --my-other-flag
+# run environment specific tests
+pnpm test:node
+pnpm test:browser
 
-# run tests for a specific package
-pnpm test packages/my-desired-package
-
-# run tests for a specific file
-pnpm test packages/my-desired-package/src/my.test.ts
+# run all tests and generate merged coverage
+pnpm test:coverage
 ```
 
 Or if you want to start a local Fuel-Core node and run all tests serially you can do:
 
 ```sh
 pnpm ci:test
+
+# or environment specific
+pnpm ci:test-node
+pnpm ci:test-browser
 ```
 
 This will run `node:run`, `test` and then `node:clean`

apps/demo-typegen/src/demo.test.ts

@@ -7,6 +7,10 @@
 import { DemoContractAbi__factory } from './generated-types';
 import bytecode from './generated-types/DemoContractAbi.hex';
 
+/**
+ * @group browser
+ * @group node
+ */
 describe('ExampleContract', () => {
   it('should return the input', async () => {
     const provider = new Provider('http://127.0.0.1:4000/graphql');

apps/docs-snippets/src/guide/contracts/call-parameters.test.ts

@@ -4,6 +4,10 @@
 import { SnippetProjectEnum } from '../../../projects';
 import { createAndDeployContractFromProject } from '../../utils';
 
+/**
+ * @group browser
+ * @group node
+ */
 describe(__filename, () => {
   let contract: Contract;
 

apps/docs-snippets/src/guide/contracts/calls-with-different-wallets.test.ts

@@ -4,6 +4,10 @@
 import { SnippetProjectEnum } from '../../../projects';
 import { createAndDeployContractFromProject } from '../../utils';
 
+/**
+ * @group browser
+ * @group node
+ */
 describe(__filename, () => {
   let deployedContract: Contract;
 

apps/docs-snippets/src/guide/contracts/configurable-constants.test.ts

@@ -4,6 +4,10 @@
 import { getSnippetProjectArtifacts, SnippetProjectEnum } from '../../../projects';
 import { getTestWallet } from '../../utils';
 
+/**
+ * @group browser
+ * @group node
+ */
 describe(__filename, () => {
   let wallet: WalletUnlocked;
 

apps/docs-snippets/src/guide/contracts/contract-balance.test.ts

@@ -4,6 +4,10 @@
 import { SnippetProjectEnum } from '../../../projects';
 import { createAndDeployContractFromProject } from '../../utils';
 
+/**
+ * @group browser
+ * @group node
+ */
 describe(__filename, () => {
   let contract: Contract;
 

apps/docs-snippets/src/guide/contracts/cost-estimation.test.ts

@@ -4,6 +4,10 @@ import { BaseAssetId } from 'fuels';
 import { SnippetProjectEnum } from '../../../projects';
 import { createAndDeployContractFromProject } from '../../utils';
 
+/**
+ * @group browser
+ * @group node
+ */
 describe(__filename, () => {
   let contract: Contract;
 

apps/docs-snippets/src/guide/contracts/deploying-contracts.test.ts

@@ -5,6 +5,10 @@ import { join } from 'path';
 import { SnippetProjectEnum } from '../../../projects';
 import { getTestWallet } from '../../utils';
 
+/**
+ * @group browser
+ * @group node
+ */
 describe(__filename, () => {
   let PRIVATE_KEY: string;
   let projectsPath: string;

apps/docs-snippets/src/guide/contracts/index.test.ts

@@ -3,6 +3,10 @@ import type { Contract } from 'fuels';
 import { SnippetProjectEnum } from '../../../projects';
 import { createAndDeployContractFromProject } from '../../utils';
 
+/**
+ * @group browser
+ * @group node
+ */
 describe(__filename, () => {
   let contract: Contract;
 

apps/docs-snippets/src/guide/contracts/inter-contract-calls.test.ts

@@ -4,6 +4,10 @@ import { BN, ContractFactory } from 'fuels';
 import { getSnippetProjectArtifacts, SnippetProjectEnum } from '../../../projects';
 import { getTestWallet } from '../../utils';
 
+/**
+ * @group browser
+ * @group node
+ */
 describe(__filename, () => {
   let wallet: WalletUnlocked;
 

apps/docs-snippets/src/guide/contracts/logs.test.ts

@@ -4,6 +4,10 @@ import { BN } from 'fuels';
 import { SnippetProjectEnum } from '../../../projects';
 import { createAndDeployContractFromProject } from '../../utils';
 
+/**
+ * @group browser
+ * @group node
+ */
 describe(__filename, () => {
   let contract: Contract;
 

apps/docs-snippets/src/guide/contracts/managing-deployed-contracts.test.ts

@@ -4,6 +4,10 @@ import { ContractFactory, Contract } from 'fuels';
 import { SnippetProjectEnum, getSnippetProjectArtifacts } from '../../../projects';
 import { getTestWallet } from '../../utils';
 
+/**
+ * @group browser
+ * @group node
+ */
 describe(__filename, () => {
   let contract: Contract;
   let contractId: AbstractAddress;

apps/docs-snippets/src/guide/contracts/multicalls.test.ts

@@ -4,6 +4,10 @@ import { BaseAssetId, BN, ContractFactory } from 'fuels';
 import { getSnippetProjectArtifacts, SnippetProjectEnum } from '../../../projects';
 import { getTestWallet } from '../../utils';
 
+/**
+ * @group browser
+ * @group node
+ */
 describe(__filename, () => {
   let echoContract: Contract;
   let counterContract: Contract;

apps/docs-snippets/src/guide/contracts/simulate-transactions.test.ts

@@ -3,6 +3,10 @@ import { BaseAssetId, Wallet, BN } from 'fuels';
 import { SnippetProjectEnum } from '../../../projects';
 import { createAndDeployContractFromProject } from '../../utils';
 
+/**
+ * @group browser
+ * @group node
+ */
 describe(__filename, () => {
   it('should successfully simulate contract call with forwarded amount', async () => {
     const contract = await createAndDeployContractFromProject(

apps/docs-snippets/src/guide/contracts/transaction-parameters.test.ts

@@ -4,6 +4,10 @@ import { BN } from 'fuels';
 import { SnippetProjectEnum } from '../../../projects';
 import { createAndDeployContractFromProject } from '../../utils';
 
+/**
+ * @group browser
+ * @group node
+ */
 describe(__filename, () => {
   let contract: Contract;
 

apps/docs-snippets/src/guide/predicates/index.test.ts

@@ -2,6 +2,10 @@ import { FUEL_NETWORK_URL, Provider, Predicate } from 'fuels';
 
 import { SnippetProjectEnum, getSnippetProjectArtifacts } from '../../../projects';
 
+/**
+ * @group browser
+ * @group node
+ */
 describe(__filename, () => {
   const { abiContents: jsonAbi, binHexlified: binary } = getSnippetProjectArtifacts(
     SnippetProjectEnum.RETURN_TRUE_PREDICATE

apps/docs-snippets/src/guide/predicates/predicate-with-configurable.test.ts

@@ -3,6 +3,10 @@ import { WalletUnlocked, Predicate, BaseAssetId, BN, getRandomB256 } from 'fuels
 import { SnippetProjectEnum, getSnippetProjectArtifacts } from '../../../projects';
 import { getTestWallet } from '../../utils';
 
+/**
+ * @group browser
+ * @group node
+ */
 describe(__filename, () => {
   let wallet: WalletUnlocked;
 

apps/docs-snippets/src/guide/predicates/send-and-spend-funds-from-predicates.test.ts

@@ -4,6 +4,10 @@ import { WalletUnlocked, FUEL_NETWORK_URL, Provider, Predicate, BN, getRandomB25
 import { SnippetProjectEnum, getSnippetProjectArtifacts } from '../../../projects';
 import { getTestWallet } from '../../utils';
 
+/**
+ * @group browser
+ * @group node
+ */
 describe(__filename, () => {
   let walletWithFunds: WalletUnlocked;
 

apps/docs-snippets/src/guide/scripts/script-custom-transaction.test.ts

@@ -10,6 +10,10 @@ import {
 import { SnippetProjectEnum, getSnippetProjectArtifacts } from '../../../projects';
 import { defaultTxParams, getTestWallet } from '../../utils';
 
+/**
+ * @group browser
+ * @group node
+ */
 describe(__filename, () => {
   let wallet: WalletUnlocked;
   let contract: Contract;