feat: implement playwright for browser compatibility testing

.changeset/grumpy-wolves-worry.md

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

.github/workflows/test.yaml

@@ -34,37 +34,49 @@ jobs:
       - name: Lint
         run: pnpm lint
 
+      - name: Validate tests
+        run: pnpm test:validate
+
       - 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
+        run: pnpm ci:test && pnpm ci:test --browser && pnpm test:merge-coverage && pnpm test:report-coverage
 
       - name: Upload coverage to Github artifacts
         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
         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

@@ -114,7 +114,7 @@ pnpm test -- --coverage --my-other-flag
 pnpm test packages/my-desired-package
 
 # run tests for a specific file
-pnpm test packages/my-desired-package/src/my.test.ts
+pnpm test packages/my-desired-package/src/my.browser.test.ts
 ```
 
 Or if you want to start a local Fuel-Core node and run all tests serially you can do:

apps/docs-snippets/src/guide/testing/tweaking-the-blockchain.node.browser.test.ts

@@ -0,0 +1,17 @@
+import { Provider, fromTai64ToUnix } from 'fuels';
+
+describe(__filename, () => {
+  test('produceBlocks with custom timestamp docs snippet', async () => {
+    const provider = new Provider('http://127.0.0.1:4000/graphql');
+    const latestBlock = await provider.getBlock('latest');
+    if (!latestBlock) {
+      throw new Error('No latest block');
+    }
+    const lastBlockNumber = latestBlock.height;
+    // #region Provider-produceBlocks-custom-timestamp
+    const lastBlockTimestamp = fromTai64ToUnix(latestBlock.time);
+    const latestBlockNumber = await provider.produceBlocks(3, lastBlockTimestamp + 1000);
+    // #endregion Provider-produceBlocks-custom-timestamp
+    expect(latestBlockNumber.toHex()).toBe(lastBlockNumber.add(3).toHex());
+  });
+});

apps/docs-snippets/src/guide/types/evm-address.test.ts → apps/docs-snippets/src/guide/types/evm-address.node.browser.test.ts

@@ -4,7 +4,7 @@ import { Address } from 'fuels';
 import { SnippetProjectEnum } from '../../../projects';
 import { createAndDeployContractFromProject } from '../../utils';
 
-describe('EvMAddress', () => {
+describe(__filename, () => {
   let contract: Contract;
   const Bits256: B256AddressEvm =
     '0x000000000000000000000000210cf886ce41952316441ae4cac35f00f0e882a6';

apps/docs/src/guide/contracts/call-parameters.md

@@ -18,7 +18,7 @@ The `forward` parameter allows the sending of a specific amount of coins to a co
 
 <!-- forward:example:end -->
 
-<<< @/../../docs-snippets/src/guide/contracts/call-parameters.test.ts#call-params-1{ts:line-numbers}
+<<< @/../../docs-snippets/src/guide/contracts/call-parameters.node.browser.test.ts#call-params-1{ts:line-numbers}
 
 ## Gas Limit Parameter
 
@@ -29,7 +29,7 @@ The `gasLimit` refers to the maximum amount of gas that can be consumed specific
 
 <!-- gas_limit:example:end -->
 
-<<< @/../../docs-snippets/src/guide/contracts/call-parameters.test.ts#call-params-2{ts:line-numbers}
+<<< @/../../docs-snippets/src/guide/contracts/call-parameters.node.browser.test.ts#call-params-2{ts:line-numbers}
 
 ## Call Parameters `gasLimit` vs Transaction Parameters `gasLimit`
 
@@ -41,4 +41,4 @@ If you don't set the `gasLimit` for the Call, the Transaction `gasLimit` will be
 
 You can set both Call Parameters and Transaction Parameters within the same contract function call.
 
-<<< @/../../docs-snippets/src/guide/contracts/call-parameters.test.ts#call-params-3{ts:line-numbers}
+<<< @/../../docs-snippets/src/guide/contracts/call-parameters.node.browser.test.ts#call-params-3{ts:line-numbers}

apps/docs/src/guide/contracts/calls-with-different-wallets.md

@@ -6,12 +6,12 @@ This guide demonstrates how to make contract calls using different wallets and p
 
 To change the wallet associated with a contract instance, assign a new wallet to the instance's `account` property. This allows you to make contract calls with different wallets in a concise manner:
 
-<<< @/../../docs-snippets/src/guide/contracts/calls-with-different-wallets.test.ts#calls-with-different-wallets-1{ts:line-numbers}
+<<< @/../../docs-snippets/src/guide/contracts/calls-with-different-wallets.node.browser.test.ts#calls-with-different-wallets-1{ts:line-numbers}
 
 ## Changing Providers
 
 Similarly, you can assign a custom provider to a contract instance by modifying its provider property. This enables you to use a provider wrapper of your choice:
 
-<<< @/../../docs-snippets/src/guide/contracts/calls-with-different-wallets.test.ts#calls-with-different-wallets-2{ts:line-numbers}
+<<< @/../../docs-snippets/src/guide/contracts/calls-with-different-wallets.node.browser.test.ts#calls-with-different-wallets-2{ts:line-numbers}
 
 > **Note:** When connecting a different wallet to an existing contract instance, the provider used to deploy the contract takes precedence over the newly set provider. If you have two wallets connected to separate providers (each communicating with a different fuel-core instance), the provider assigned to the deploying wallet will be used for contract calls. This behavior is only relevant when multiple providers (i.e., fuel-core instances) are present and can be ignored otherwise.

apps/docs/src/guide/contracts/configurable-constants.md

@@ -20,14 +20,14 @@ If each of these constants has new values that have been assigned to them, the f
 
 During contract deployment, you can define new values for the configurable constants. This is achieved as follows:
 
-<<< @/../../docs-snippets/src/guide/contracts/configurable-constants.test.ts#configurable-constants-2{ts:line-numbers}
+<<< @/../../docs-snippets/src/guide/contracts/configurable-constants.node.browser.test.ts#configurable-constants-2{ts:line-numbers}
 
 You can assign new values to any of these configurable constants.
 
 If you wish to assign a new value to just one constant, you can do the following:
 
-<<< @/../../docs-snippets/src/guide/contracts/configurable-constants.test.ts#configurable-constants-3{ts:line-numbers}
+<<< @/../../docs-snippets/src/guide/contracts/configurable-constants.node.browser.test.ts#configurable-constants-3{ts:line-numbers}
 
 Please note that when assigning new values for a `Struct`, all properties of the `Struct` must be defined. Failing to do so will result in an error:
 
-<<< @/../../docs-snippets/src/guide/contracts/configurable-constants.test.ts#configurable-constants-4{ts:line-numbers}
+<<< @/../../docs-snippets/src/guide/contracts/configurable-constants.node.browser.test.ts#configurable-constants-4{ts:line-numbers}

apps/docs/src/guide/contracts/contract-balance.md

@@ -26,7 +26,7 @@ The `transfer` function calls the built-in Sway function `transfer_to_address`,
 
 Let's execute this contract and use the `getBalance` method to validate the remaining asset amount the contract has left to spend.
 
-<<< @/../../docs-snippets/src/guide/contracts/contract-balance.test.ts#contract-balance-3{ts:line-numbers}
+<<< @/../../docs-snippets/src/guide/contracts/contract-balance.node.browser.test.ts#contract-balance-3{ts:line-numbers}
 
 In this example, we first forward an asset amount greater than the amount required for the transfer and then execute the contract call.
 

apps/docs/src/guide/contracts/cost-estimation.md

@@ -8,10 +8,10 @@ The following example demonstrate how to get the estimated transaction cost for:
 
 ## 1. Single contract call transaction:
 
-<<< @/../../docs-snippets/src/guide/contracts/cost-estimation.test.ts#cost-estimation-1{ts:line-numbers}
+<<< @/../../docs-snippets/src/guide/contracts/cost-estimation.node.browser.test.ts#cost-estimation-1{ts:line-numbers}
 
 ## 2. Multiple contract calls transaction:
 
-<<< @/../../docs-snippets/src/guide/contracts/cost-estimation.test.ts#cost-estimation-2{ts:line-numbers}
+<<< @/../../docs-snippets/src/guide/contracts/cost-estimation.node.browser.test.ts#cost-estimation-2{ts:line-numbers}
 
 You can use the transaction cost estimation to set the gas limit for an actual call or display the estimated cost to the user.

apps/docs/src/guide/contracts/deploying-contracts.md

@@ -17,24 +17,24 @@ After writing a contract in Sway and compiling it with `forc build` (<a :href="i
 
 Before deploying a contract, set up the necessary environment by importing the required SDK components and initializing a wallet and a provider.
 
-<<< @/../../docs-snippets/src/guide/contracts/deploying-contracts.test.ts#contract-setup-1{ts:line-numbers}
+<<< @/../../docs-snippets/src/guide/contracts/deploying-contracts.node.browser.test.ts#contract-setup-1{ts:line-numbers}
 
 ## 3. Loading Contract Artifacts
 
 Load the contract bytecode and JSON ABI, generated from the Sway source, into the SDK.
 
-<<< @/../../docs-snippets/src/guide/contracts/deploying-contracts.test.ts#contract-setup-2{ts:line-numbers}
+<<< @/../../docs-snippets/src/guide/contracts/deploying-contracts.node.browser.test.ts#contract-setup-2{ts:line-numbers}
 
 ## 4. Deploying the Contract
 
 Initialize a `ContractFactory` with the bytecode, ABI, and wallet. Deploy the contract and use its methods.
 
-<<< @/../../docs-snippets/src/guide/contracts/deploying-contracts.test.ts#contract-setup-3{ts:line-numbers}
+<<< @/../../docs-snippets/src/guide/contracts/deploying-contracts.node.browser.test.ts#contract-setup-3{ts:line-numbers}
 
 ## 5. Executing a Contract Call
 
 Now that the contract is deployed, you can interact with it. In the following steps, you'll learn how to execute contract calls.
 
-<<< @/../../docs-snippets/src/guide/contracts/deploying-contracts.test.ts#contract-setup-4{ts:line-numbers}
+<<< @/../../docs-snippets/src/guide/contracts/deploying-contracts.node.browser.test.ts#contract-setup-4{ts:line-numbers}
 
 For a more comprehensive TypeScript-backed Fuel usage, learn how to [generate types from ABI](../abi-typegen/generating-types-from-abi.md)

apps/docs/src/guide/contracts/index.md

@@ -9,6 +9,6 @@ In the Fuel Network, contracts play a crucial role in facilitating interactions
 
 For instance, consider a Sway contract with two ABI methods called `echo_str_8(str[8])` and `echo_u8(u8)`. After deploying the contract, you can call the methods as follows:
 
-<<< @/../../docs-snippets/src/guide/contracts/index.test.ts#echo-values{ts:line-numbers}
+<<< @/../../docs-snippets/src/guide/contracts/index.node.browser.test.ts#echo-values{ts:line-numbers}
 
 The example above demonstrates a simple contract call using default configurations. The following sections will explore how to further configure various parameters for contract calls, allowing for more advanced interactions with your deployed contracts in the Fuel Network.

apps/docs/src/guide/contracts/inter-contract-calls.md

@@ -22,6 +22,6 @@ The `TokenDepositor` contract imports the `SimpleToken` contract and calls its `
 
 Once both contracts are deployed, we can use the SDK to make the `TokenDepositor` contract to call the `SimpleToken` contract.
 
-<<< @/../../docs-snippets/src/guide/contracts/inter-contract-calls.test.ts#inter-contract-calls-3{ts:line-numbers}
+<<< @/../../docs-snippets/src/guide/contracts/inter-contract-calls.node.browser.test.ts#inter-contract-calls-3{ts:line-numbers}
 
 Pay attention to the method `addContracts` called by the TokenDepositor contract. This method accepts an array of instances of deployed contracts. Without calling this method, the inter-contract call will not work.

apps/docs/src/guide/contracts/logs.md

@@ -8,6 +8,6 @@ Consider the following example contract:
 
 To access the logged values in TypeScript, use the `logs` property in the `FunctionInvocationResult` of a contract call result. The logs data will be stored in an `Array<any>`:
 
-<<< @/../../docs-snippets/src/guide/contracts/logs.test.ts#log-2{ts:line-numbers}
+<<< @/../../docs-snippets/src/guide/contracts/logs.node.browser.test.ts#log-2{ts:line-numbers}
 
 This approach allows you to work seamlessly with logged values in your contract, making it easier to understand and debug the contract's behavior.

apps/docs/src/guide/contracts/managing-deployed-contracts.md

@@ -20,12 +20,12 @@ When you log the `contractId` property of an instantiated Contract using `consol
 
 If you have already an instantiated and deployed contract in hands you can create another contract instance simply by using the `contractId` property and the contract JSON abi:
 
-<<< @/../../docs-snippets/src/guide/contracts/managing-deployed-contracts.test.ts#managing-deployed-contracts-1{ts:line-numbers}
+<<< @/../../docs-snippets/src/guide/contracts/managing-deployed-contracts.node.browser.test.ts#managing-deployed-contracts-1{ts:line-numbers}
 
 The previous example assumes that you have a `Contract` instance at hand. However, some Fuel tools and Sway use the [b256](../types/bits256.md) type format, a hex-encoded string-like type, for contract IDs.
 
 You might have this format instead, for example, if you have deployed your contract with `forc deploy`.
 
 The process of instantiating a `Contract` remains the same when using a contract ID of type `b256`:
 
-<<< @/../../docs-snippets/src/guide/contracts/managing-deployed-contracts.test.ts#managing-deployed-contracts-2{ts:line-numbers}
+<<< @/../../docs-snippets/src/guide/contracts/managing-deployed-contracts.node.browser.test.ts#managing-deployed-contracts-2{ts:line-numbers}

apps/docs/src/guide/contracts/multicalls.md

@@ -16,17 +16,17 @@ Use the `multiCall` method to call multiple functions on the same contract in a
 
 <!-- multicall:example:end -->
 
-<<< @/../../docs-snippets/src/guide/contracts/multicalls.test.ts#multicall-1{ts:line-numbers}
+<<< @/../../docs-snippets/src/guide/contracts/multicalls.node.browser.test.ts#multicall-1{ts:line-numbers}
 
 ## Different contracts multi calls
 
 The `multiCall` method also allows you to execute multiple contract calls to distinct contracts within a single transaction:
 
-<<< @/../../docs-snippets/src/guide/contracts/multicalls.test.ts#multicall-2{ts:line-numbers}
+<<< @/../../docs-snippets/src/guide/contracts/multicalls.node.browser.test.ts#multicall-2{ts:line-numbers}
 
 You can also chain supported contract call methods, like `callParams`, for each contract call:
 
-<<< @/../../docs-snippets/src/guide/contracts/multicalls.test.ts#multicall-3{ts:line-numbers}
+<<< @/../../docs-snippets/src/guide/contracts/multicalls.node.browser.test.ts#multicall-3{ts:line-numbers}
 
 When chaining contract call methods within `multiCall`, avoid executing the contract functions themselves, such as `.call`, `.get`, and `.simulate`.
 

apps/docs/src/guide/contracts/simulate-transactions.md

@@ -7,7 +7,7 @@ Simulating a transaction is a powerful feature that allows you to validate wheth
 
 You can use the `simulate()` method to test your transactions:
 
-<<< @/../../docs-snippets/src/guide/contracts/simulate-transactions.test.ts#simulate-transactions-1{ts:line-numbers}
+<<< @/../../docs-snippets/src/guide/contracts/simulate-transactions.node.browser.test.ts#simulate-transactions-1{ts:line-numbers}
 
 Simulating a transaction allows you to catch potential errors or issues before submitting the real transaction, making it a valuable tool for development and user interaction.
 
@@ -22,7 +22,7 @@ When interacting with a contract, you might want to execute a method that does n
 
 In such cases, you can use the `simulate()` method:
 
-<<< @/../../docs-snippets/src/guide/contracts/simulate-transactions.test.ts#simulate-transactions-2{ts:line-numbers}
+<<< @/../../docs-snippets/src/guide/contracts/simulate-transactions.node.browser.test.ts#simulate-transactions-2{ts:line-numbers}
 
 Using `simulate()` for read-only calls or to test transactions provides a way to safely and efficiently access information from the blockchain or validate how a transaction would behave. It ensures that no changes will be made to the blockchain and no resources will be spent, making it a valuable tool for data retrieval and development.
 

apps/docs/src/guide/contracts/storage-slots.md

@@ -2,10 +2,10 @@
 
 When deploying a contract, you can specify the custom storage slots that you want to use.
 
-<<< @/../../../packages/fuel-gauge/src/storage-test-contract.test.ts#contract-deployment-storage-slots{ts:line-numbers}
+<<< @/../../../packages/fuel-gauge/src/storage-test-contract.node.browser.test.ts#contract-deployment-storage-slots{ts:line-numbers}
 
 In the above example, we directly imported the storage slots from a JSON file generated by the Sway compiler.
 
 Instead of importing from a file, you can also specify the custom storage slots directly in your code:
 
-<<< @/../../../packages/fuel-gauge/src/storage-test-contract.test.ts#contract-deployment-storage-slots-inline{ts:line-numbers}
+<<< @/../../../packages/fuel-gauge/src/storage-test-contract.node.browser.test.ts#contract-deployment-storage-slots-inline{ts:line-numbers}

apps/docs/src/guide/contracts/transaction-parameters.md

@@ -23,7 +23,7 @@ To set these parameters, use the optional `TxParams` object and pass it to the `
 
 <!-- set_tx_params:example:end -->
 
-<<< @/../../docs-snippets/src/guide/contracts/transaction-parameters.test.ts#transaction-parameters-2{ts:line-numbers}
+<<< @/../../docs-snippets/src/guide/contracts/transaction-parameters.node.browser.test.ts#transaction-parameters-2{ts:line-numbers}
 
 <!-- This section should explain the default tx params -->
 <!-- default_tx_params:example:start -->
@@ -41,4 +41,4 @@ You can also set `TxParams` when deploying contracts or transferring assets by p
 
 <!-- est:example:end -->
 
-<<< @/../../docs-snippets/src/guide/contracts/transaction-parameters.test.ts#transaction-parameters-3{ts:line-numbers}
+<<< @/../../docs-snippets/src/guide/contracts/transaction-parameters.node.browser.test.ts#transaction-parameters-3{ts:line-numbers}

apps/docs/src/guide/contracts/variable-outputs.md

@@ -18,6 +18,6 @@ Here's an example of a contract function that utilizes the `transfer_to_address`
 
 With the SDK, you can call `transfer_coins_to_output` by chaining the `txParams` and adding the property `variableOutputs: amount` to your contract call. Like this:
 
-<<< @/../../docs-snippets/src/guide/contracts/transaction-parameters.test.ts#variable-outputs-1{ts:line-numbers}
+<<< @/../../docs-snippets/src/guide/contracts/transaction-parameters.node.browser.test.ts#variable-outputs-1{ts:line-numbers}
 
 In the TypeScript SDK, the output variables are automatically added to the transaction's list of outputs. The output's amount and owner may vary based on the transaction execution.