Karma browser-based code with rules unit testing

[weilinzung]

[REQUIRED] Describe your environment

• Operating System version: _MacOS Monterey
• Browser version: Chrome Version 103.0.5060.53 (Official Build) (x86_64)_
• Firebase SDK version: @firebase/rules-unit-testing 2.0.3_
• Firebase Product: database___ (auth, database, storage, etc)

Steps to reproduce:

• We are using Angular Material and AngularFire Compat which with Jasmine & Karma
• First of all, we can't use fs to read the rule.json while initializing the test because Karma is only for testing browser-based code
• And, we couldn't do a plain string way because the below error which is the problem of browser-based webApp won’t be able to use ‘node-fetch’ => const resp = await fetch(url, {

Relevant Code:

    this.testEnv = await initializeTestEnvironment({
      projectId: environment.firebase.projectId,
      hub: {
        host: 'localhost',
        port: 4400
      },
      database: {
        rules: '{ "rules": {} }',
      }
    });

TypeError: Failed to execute 'fetch' on 'Window': Illegal invocation

    at http://localhost:9876/_karma_webpack_/webpack:/node_modules/zone.js/fesm2015/zone.js:1465:1
    at Object.proto.<computed> [as default] (http://localhost:9876/_karma_webpack_/webpack:/node_modules/zone.js/fesm2015/zone.js:975:1)
    at http://localhost:9876/_karma_webpack_/webpack:/node_modules/@firebase/rules-unit-testing/dist/index.cjs.js:507:1
    at step (http://localhost:9876/_karma_webpack_/webpack:/node_modules/@firebase/rules-unit-testing/dist/index.cjs.js:74:1)
    at Object.next (http://localhost:9876/_karma_webpack_/webpack:/node_modules/@firebase/rules-unit-testing/dist/index.cjs.js:55:46)
    at http://localhost:9876/_karma_webpack_/webpack:/node_modules/@firebase/rules-unit-testing/dist/index.cjs.js:48:1
    at new ZoneAwarePromise (http://localhost:9876/_karma_webpack_/webpack:/node_modules/zone.js/fesm2015/zone.js:1387:1)
    at __awaiter (http://localhost:9876/_karma_webpack_/webpack:/node_modules/@firebase/rules-unit-testing/dist/index.cjs.js:44:1)
    at loadDatabaseRules (http://localhost:9876/_karma_webpack_/webpack:/node_modules/@firebase/rules-unit-testing/dist/index.cjs.js:500:1)
    at http://localhost:9876/_karma_webpack_/webpack:/node_modules/@firebase/rules-unit-testing/dist/index.cjs.js:655:1

Is any better way to support "webApp" for @firebase/rules-unit-testing? Also, is "js-sdk" should be "plain" JS without NodeJs?

[google-oss-bot]

I couldn't figure out how to label this issue, so I've labeled it for a human to triage. Hang tight.

[staugaard]

I'm running into the same issue here. I was trying to run storybook via firebase emulators:exec and then set up an authenticated text context for my stories to run in. It looks like @firebase/rules-unit-testing is only compatible with a nodejs environment.