feat: implement browser compatibility testing (#1630)

* feat: add browser testing infastructure * feat: reorganise crypto tests * feat: refactor fs promises usage * chore: changeset * chore: remove hardlinked deps * feat: add browser and os test matrix * feat: add missing os variable to test ci * feat: add no frozen lock file to browser test ci * feat: support further packages with browser testing * feat: add no frozen lockfile to browser install script * feat: add conditional name to CI test stage * feat: fix CI test matrix stage naem * feat: implement no frozen lockfile for final install in test ci * feat: change live test stage name * chore: rebuild * chore: change live ci stage to e2e Co-authored-by: Anderson Arboleya <anderson@arboleya.me> * chore: add doc to test ci name Co-authored-by: Anderson Arboleya <anderson@arboleya.me> * feat: group crypto browser and node tests * chore: use array of obj for test matrix * test: add missing hasher testr * chore: add no console lint rule to browser script * chore: remove browser test hardlink script * chore: rebuild --------- Co-authored-by: Anderson Arboleya <anderson@arboleya.me>
FuelLabs · Jan 17, 2024 · 2682148 · 2682148
1 parent ed0a49f
commit 2682148
Show file tree

Hide file tree

Showing 69 changed files with 1,332 additions and 121 deletions.
diff --git a/.changeset/sharp-clocks-camp.md b/.changeset/sharp-clocks-camp.md
@@ -0,0 +1,2 @@
+---
+---
diff --git a/.github/workflows/test.yaml b/.github/workflows/test.yaml
@@ -19,12 +19,17 @@ jobs:
 
   environments:
     runs-on: ubuntu-latest
-    name: ${{ matrix.env }} - v${{ matrix.version }}
+    # name will be node@<version> or browser
+    name: ${{ matrix.env.name }}${{ matrix.env.name == 'node' && '@' || ''}}${{ matrix.env.name == 'node' && matrix.env.version || ''}}
     strategy:
       fail-fast: false
       matrix:
-        env: [node]
-        version: [18.18.2, 20]
+        env:
+          [
+            { name: node, version: 18.18.2 },
+            { name: node, version: 20 },
+            { name: browser },
+          ]
     timeout-minutes: 25
     steps:
       - name: Checkout
@@ -33,7 +38,7 @@ jobs:
       - name: CI Setup
         uses: ./.github/actions/test-setup
         with:
-          node-version: ${{ matrix.version }}
+          node-version: ${{ matrix.env.version || 20 }}
 
       - name: Verify package.json integrity
         run: pnpm lint:package-jsons
@@ -51,14 +56,14 @@ jobs:
       - name: Validate Tests
         run: pnpm test:validate
 
-      - name: Run Tests - ${{ matrix.env }}
-        run: pnpm ci:test --${{ matrix.env }}
+      - name: Run Tests - ${{ matrix.env.name }}
+        run: pnpm ci:test --${{ matrix.env.name }}
 
-      - name: Upload Coverage - ${{ matrix.env }}
+      - name: Upload Coverage - ${{ matrix.env.name }}
         uses: actions/upload-artifact@v2
         with:
-          name: ${{ matrix.env }}
-          path: coverage/environments/${{ matrix.env }}
+          name: ${{ matrix.env.name }}
+          path: coverage/environments/${{ matrix.env.name }}
 
   test:
     runs-on: ubuntu-latest
@@ -126,8 +131,8 @@ jobs:
           mode: recreate
           create_if_not_exists: true
 
-  live-tests:
-    name: Run Live Tests
+  test-e2e:
+    name: e2e
     if: github.head_ref == 'changeset-release/master'
     runs-on: ubuntu-latest
     timeout-minutes: 5

diff --git a/internal/check-tests/src/all.test.ts b/internal/check-tests/src/all.test.ts
@@ -2,6 +2,7 @@ import { testAll } from './index';
 
 /**
  * @group node
+ * @group browser
  */
 describe('in:everywhere', () => {
   it('should work everywhere', () => {

diff --git a/internal/check-tests/src/browser.test.ts b/internal/check-tests/src/browser.test.ts
@@ -0,0 +1,10 @@
+import { testEach } from './index';
+
+/**
+ * @group browser
+ */
+describe('in:browser', () => {
+  it('should work on browser', () => {
+    expect(testEach()).toEqual('browser');
+  });
+});
diff --git a/internal/check-tests/src/index.ts b/internal/check-tests/src/index.ts
@@ -1,13 +1,17 @@
+const isBrowser = typeof window !== 'undefined' && typeof window.document !== 'undefined';
+
 const isNode =
   typeof process !== 'undefined' && process.versions != null && process.versions.node != null;
 
 export const testEach = (): string => {
   let env: string;
 
-  if (isNode) {
+  if (isBrowser) {
+    env = 'browser';
+  } else if (isNode) {
     env = 'node';
   } else {
-    throw new Error('Oops, invalid test environment detected');
+    throw new Error('Oops, no browser/node detected');
   }
 
   return env;

diff --git a/package.json b/package.json
@@ -21,6 +21,7 @@
     "test:coverage-diff": "tsx ./scripts/tests-coverage-diff.ts",
     "test:watch": "vitest --watch --config vite.node.config.mts $(scripts/tests-find.sh --node)",
     "test:validate": "./scripts/tests-validate.sh",
+    "test:browser": "vitest --run --coverage --config vite.browser.config.mts $(scripts/tests-find.sh --browser)",
     "test:e2e": "vitest --run --config vite.node.config.mts $(scripts/tests-find.sh --e2e)",
     "lint": "run-s lint:check prettier:check",
     "lint:check": "eslint . --ext .ts --max-warnings 0",
@@ -62,6 +63,7 @@
     "@types/web": "^0.0.65",
     "@typescript-eslint/eslint-plugin": "^6.9.0",
     "@typescript-eslint/parser": "^6.9.0",
+    "@vitest/browser": "^1.1.3",
     "@vitest/coverage-istanbul": "^1.1.3",
     "compare-versions": "^6.1.0",
     "conventional-changelog-angular": "^5.0.13",
@@ -80,6 +82,7 @@
     "eslint-plugin-react-hooks": "^4.6.0",
     "eslint-plugin-tsdoc": "^0.2.17",
     "glob": "^10.2.6",
+    "memfs": "^4.6.0",
     "nodemon": "^2.0.22",
     "npm-run-all": "^4.1.5",
     "nyc": "^15.1.0",
@@ -96,7 +99,8 @@
     "vite": "^5.0.11",
     "vite-plugin-node-polyfills": "^0.17.0",
     "vite-plugin-plain-text": "^1.4.2",
-    "vitest": "^1.1.3"
+    "vitest": "^1.1.3",
+    "webdriverio": "^8.27.0"
   },
   "pnpm": {
     "overrides": {

diff --git a/packages/abi-coder/src/coders/b256.test.ts b/packages/abi-coder/src/coders/b256.test.ts
@@ -5,6 +5,7 @@ import { B256Coder } from './b256';
 
 /**
  * @group node
+ * @group browser
  */
 describe('B256Coder', () => {
   const B256_DECODED = '0xd5579c46dfcc7f18207013e65b44e4cb4e2c2298f4ac457ba8f82743f31e930b';

diff --git a/packages/abi-coder/src/coders/b512.test.ts b/packages/abi-coder/src/coders/b512.test.ts
@@ -5,6 +5,7 @@ import { B512Coder } from './b512';
 
 /**
  * @group node
+ * @group browser
  */
 describe('B512Coder', () => {
   const B512_DECODED =

diff --git a/packages/abi-coder/src/coders/byte.test.ts b/packages/abi-coder/src/coders/byte.test.ts
@@ -7,6 +7,7 @@ import { ByteCoder } from './byte';
 
 /**
  * @group node
+ * @group browser
  */
 describe('ByteCoder', () => {
   it('should encode a byte', () => {

diff --git a/packages/abi-coder/src/coders/enum.test.ts b/packages/abi-coder/src/coders/enum.test.ts
@@ -11,6 +11,7 @@ import { U64Coder } from './u64';
 
 /**
  * @group node
+ * @group browser
  */
 describe('EnumCoder', () => {
   const coder = new EnumCoder('TestEnum', { a: new BooleanCoder(), b: new U64Coder() });

diff --git a/packages/abi-coder/src/coders/number.test.ts b/packages/abi-coder/src/coders/number.test.ts
@@ -7,6 +7,7 @@ import { NumberCoder } from './number';
 
 /**
  * @group node
+ * @group browser
  */
 describe('NumberCoder', () => {
   it('should encode min u8 number as a u8 coder', () => {

diff --git a/packages/abi-coder/src/coders/option.test.ts b/packages/abi-coder/src/coders/option.test.ts
@@ -10,6 +10,7 @@ import { U64Coder } from './u64';
 
 /**
  * @group node
+ * @group browser
  */
 describe('OptionCoder', () => {
   it('should encode a some u64 option ', () => {

diff --git a/packages/abi-coder/src/coders/raw-slice.test.ts b/packages/abi-coder/src/coders/raw-slice.test.ts
@@ -8,6 +8,7 @@ import { RawSliceCoder } from './raw-slice';
 
 /**
  * @group node
+ * @group browser
  */
 describe('RawSliceCoder', () => {
   it('should encode a raw-slice', () => {

diff --git a/packages/abi-coder/src/coders/stdString.test.ts b/packages/abi-coder/src/coders/stdString.test.ts
@@ -7,6 +7,7 @@ import { StdStringCoder } from './stdString';
 
 /**
  * @group node
+ * @group browser
  */
 describe('StdStringCoder', () => {
   it('should encode an empty string', () => {

diff --git a/packages/abi-coder/src/coders/string.test.ts b/packages/abi-coder/src/coders/string.test.ts
@@ -7,6 +7,7 @@ import { StringCoder } from './string';
 
 /**
  * @group node
+ * @group browser
  */
 describe('StringCoder', () => {
   const STRING_MIN_DECODED = '';

diff --git a/packages/abi-coder/src/coders/struct.test.ts b/packages/abi-coder/src/coders/struct.test.ts
@@ -11,6 +11,7 @@ import { U64Coder } from './u64';
 
 /**
  * @group node
+ * @group browser
  */
 describe('StructCoder', () => {
   const STRUCT_NAME = 'TestStruct';

diff --git a/packages/abi-coder/src/coders/tuple.test.ts b/packages/abi-coder/src/coders/tuple.test.ts
@@ -11,6 +11,7 @@ import { U64Coder } from './u64';
 
 /**
  * @group node
+ * @group browser
  */
 describe('Tuple Coder', () => {
   const coder = new TupleCoder<[BooleanCoder, U64Coder]>([new BooleanCoder(), new U64Coder()]);

diff --git a/packages/abi-coder/src/coders/u64.test.ts b/packages/abi-coder/src/coders/u64.test.ts
@@ -8,6 +8,7 @@ import { U64Coder } from './u64';
 
 /**
  * @group node
+ * @group browser
  */
 describe('U64Coder', () => {
   const coder = new U64Coder();

diff --git a/packages/abi-coder/src/utilities.test.ts b/packages/abi-coder/src/utilities.test.ts
@@ -5,6 +5,7 @@ import { unpackDynamicData, concatWithDynamicData } from './utilities';
 
 /**
  * @group node
+ * @group browser
  */
 describe('Abi Coder Utilities', () => {
   it('can concatWithVectorData [no dynamicData, should match original concat]', () => {

diff --git a/packages/address/src/address.test.ts b/packages/address/src/address.test.ts
@@ -27,6 +27,7 @@ const expectedB256Address = '0xf1e92c42b90934aa6372e30bc568a326f6e66a1a0288595e6
 
 /**
  * @group node
+ * @group browser
  */
 describe('Address utils', () => {
   test('fromBech32 (bech32 to decoded bech32)', () => {

diff --git a/packages/crypto/test/aes-ctr.test.ts b/packages/crypto/test/aes-ctr.test.ts
@@ -1,10 +1,11 @@
-import { envs } from './envs';
+import { encrypt, decrypt } from '..';
 
 /**
  * @group node
+ * @group browser
  */
 describe('Keystore', () => {
-  it.each(envs)('Encrypt and Decrypt', async ({ encrypt, decrypt }) => {
+  it('Encrypt and Decrypt', async () => {
     const password = '0b540281-f87b-49ca-be37-2264c7f260f7';
     const data = {
       name: 'test',
@@ -20,7 +21,7 @@ describe('Keystore', () => {
     expect(decryptedResult).toEqual(data);
   });
 
-  it.each(envs)('Decrypt with wrong password should throw', async ({ encrypt, decrypt }) => {
+  it('Decrypt with wrong password should throw', async () => {
     const password = '0b540281-f87b-49ca-be37-2264c7f260f7';
     const data = {
       name: 'test',
@@ -30,7 +31,7 @@ describe('Keystore', () => {
     await expect(decrypt(`${password}123`, encryptedResult)).rejects.toThrow('Invalid credentials');
   });
 
-  it.each(envs)('Decrypt Loop', async ({ decrypt }) => {
+  it('Decrypt Loop', async () => {
     const INPUTS = [
       {
         data: '07yJczBTonXWyKdJfEcx',

diff --git a/packages/crypto/test/bufferFromString.test.ts b/packages/crypto/test/bufferFromString.test.ts
@@ -1,34 +1,27 @@
-import { envs } from './envs';
+import { bufferFromString } from '..';
 
 /**
  * @group node
+ * @group browser
  */
 describe('bufferFromString', () => {
   const buffer = new Uint8Array([104, 101, 108, 108, 111]); // ASCII values for "hello"
 
-  it.each(envs)(
-    'should correctly convert string to Uint8Array with base64 encoding in %s environment',
-    ({ bufferFromString }) => {
-      const string = 'aGVsbG8='; // "hello" in Base64
-      const result = bufferFromString(string, 'base64');
-      expect(result).toStrictEqual(buffer); // ASCII values for "hello"
-    }
-  );
+  it('should correctly convert string to Uint8Array with base64 encoding in a node environment', () => {
+    const string = 'aGVsbG8='; // "hello" in Base64
+    const result = bufferFromString(string, 'base64');
+    expect(result).toStrictEqual(buffer); // ASCII values for "hello"
+  });
 
-  it.each(envs)(
-    'should correctly convert string to Uint8Array with utf-8 encoding in %s environment',
-    ({ bufferFromString }) => {
-      const string = 'hello';
-      const result = bufferFromString(string, 'utf-8');
-      expect(result).toStrictEqual(buffer); // ASCII values for "hello"
-    }
-  );
-  it.each(envs)(
-    'should correctly convert string to Uint8Array with hex encoding in %s environment',
-    ({ bufferFromString }) => {
-      const string = '68656c6c6f'; // "hello" in Hex
-      const result = bufferFromString(string, 'hex');
-      expect(result).toStrictEqual(buffer); // ASCII values for "hello"
-    }
-  );
+  it('should correctly convert string to Uint8Array with utf-8 encoding in a node environment', () => {
+    const string = 'hello';
+    const result = bufferFromString(string, 'utf-8');
+    expect(result).toStrictEqual(buffer); // ASCII values for "hello"
+  });
+
+  it('should correctly convert string to Uint8Array with hex encoding in a node environment', () => {
+    const string = '68656c6c6f'; // "hello" in Hex
+    const result = bufferFromString(string, 'hex');
+    expect(result).toStrictEqual(buffer); // ASCII values for "hello"
+  });
 });
diff --git a/packages/crypto/test/encryptJsonWalletData.test.ts b/packages/crypto/test/encryptJsonWalletData.test.ts
@@ -1,21 +1,18 @@
-import { envs } from './envs';
-
+import { encryptJsonWalletData, decryptJsonWalletData, randomBytes } from '..';
 /**
  * @group node
+ * @group browser
  */
 describe('encryptJsonWalletData', () => {
-  it.each(envs)(
-    'should encrypt and decrypt json wallet data correctly in %s environment',
-    async ({ encryptJsonWalletData, decryptJsonWalletData, randomBytes }) => {
-      const testData = new Uint8Array([104, 101, 108, 108, 111]);
-      const testKey = randomBytes(16);
-      const testIv = randomBytes(16);
+  it('should encrypt and decrypt json wallet data correctly in a node environment', async () => {
+    const testData = new Uint8Array([104, 101, 108, 108, 111]);
+    const testKey = randomBytes(16);
+    const testIv = randomBytes(16);
 
-      const encryptedData = await encryptJsonWalletData(testData, testKey, testIv);
-      expect(encryptedData).not.toEqual(testData); // ensure data was encrypted
+    const encryptedData = await encryptJsonWalletData(testData, testKey, testIv);
+    expect(encryptedData).not.toEqual(testData); // ensure data was encrypted
 
-      const decryptedData = await decryptJsonWalletData(encryptedData, testKey, testIv);
-      expect(decryptedData).toEqual(testData); // ensure data was decrypted correctly
-    }
-  );
+    const decryptedData = await decryptJsonWalletData(encryptedData, testKey, testIv);
+    expect(decryptedData).toEqual(testData); // ensure data was decrypted correctly
+  });
 });
diff --git a/packages/crypto/test/envs.ts b/packages/crypto/test/envs.ts