Add support for running JS Spec Tests in browser context. (#1902)

Co-authored-by: Natalie Weizenbaum <[email protected]>

.github/workflows/ci.yml

@@ -159,6 +159,42 @@ jobs:
       - name: Run specs
         run: npm run js-api-spec -- --sassPackage ../dart-sass/build/npm --sassSassRepo language
 
+  js_api_dart_sass_browser:
+    name: "JS API | Pure JS | Browser"
+    runs-on: ubuntu-latest
+    if: "github.event_name != 'pull_request' || !contains(github.event.pull_request.body, 'skip dart-sass')"
+
+    steps:
+      - uses: actions/checkout@v3
+      - uses: browser-actions/setup-chrome@v1
+      - run: npm install
+      - uses: dart-lang/setup-dart@v1
+        with: {sdk: stable}
+      - uses: bufbuild/[email protected]
+        with: {github_token: "${{ github.token }}"}
+
+      - name: Install Dart Sass
+        run: |
+          git clone https://github.com/sass/dart-sass.git ../dart-sass --depth 1
+          (
+            cd ../dart-sass
+            dart pub get
+            dart pub run grinder protobuf pkg-npm-dev
+            cd build/npm
+            npm install
+          )
+
+      - name: Check out Sass specification
+        uses: sass/clone-linked-repo@v1
+        with:
+          repo: sass/sass
+          path: language
+
+      - name: Run specs
+        run: npm run js-api-spec -- --sassPackage ../dart-sass/build/npm --sassSassRepo language --browser
+        env:
+          CHROME_EXECUTABLE: chrome
+
   # The versions should be kept up-to-date with the latest LTS Node releases.
   # They next need to be rotated October 2021. See
   # https://github.com/nodejs/Release.

README.md

@@ -327,11 +327,9 @@ arguments:
 
 [Sass language specification repository]: https://github.com/sass/sass
 
-The JS API specs are run using [Jest], so you can also pass any [Jest command
-line arguments] to `npm run js-api-spec`.
+The JS API specs are run using [Jasmine].
 
-[Jest]: https://jestjs.io/
-[Jest command line arguments]: https://jestjs.io/docs/cli
+[Jasmine]: https://jasmine.github.io/
 
 #### Dart Sass
 
@@ -360,6 +358,15 @@ npm run js-api-spec -- --sassSassRepo $SASS_SASS_PATH --sassPackage $DART_SASS_P
 Whenever you modify Dart Sass, make sure to re-run `dart run grinder
 pkg-npm-dev` to rebuild the JavaScript output.
 
+##### Browser Build
+
+To run specs against [Dart Sass] compiled for a browser context, add the
+`--browser` flag to the above command:
+
+```sh
+npm run js-api-spec -- --sassSassRepo $SASS_SASS_PATH --sassPackage $DART_SASS_PATH/build/npm --browser
+```
+
 #### Embedded Host
 
 To run specs against [the Node Embedded Host], which embeds Dart Sass as a

js-api-spec.ts

@@ -1,18 +1,14 @@
 /* eslint-disable no-process-exit */
 
+import * as p from 'path';
+
 import * as del from 'del';
 import * as fs from 'fs-extra';
-import * as jest from 'jest';
-import * as p from 'path';
+import Jasmine from 'jasmine';
+import {config, Server} from 'karma';
 import * as tmp from 'tmp';
 import yargs from 'yargs/yargs';
 
-import config from './jest.config';
-
-declare module 'jest' {
-  function run(args: string[]): never;
-}
-
 const args = yargs(process.argv.slice(2))
   .parserConfiguration({'unknown-options-as-args': true})
   .help(false)
@@ -28,6 +24,10 @@ const args = yargs(process.argv.slice(2))
     description: 'The path to the npm package that exports the Sass API.',
     demand: true,
   })
+  .option('browser', {
+    type: 'boolean',
+    description: 'Run the tests in a ChromeHeadless browser context.',
+  })
   .option('help', {
     type: 'boolean',
     alias: 'h',
@@ -39,11 +39,10 @@ const argv = args.parseSync();
 if (argv.help) {
   args.showHelp();
   console.error('');
-  jest.run(['--help']);
 }
 
-// Set up a temp directory that overrides the default Jest configuration and
-// adds node_modules that depend on the given sassSassRepo and sassPackage.
+// Set up a temp directory that adds node_modules that depend on the given
+// sassSassRepo and sassPackage.
 const tmpObject = tmp.dirSync({
   template: 'js-api-spec.XXXXXX',
   unsafeCleanup: true,
@@ -54,26 +53,18 @@ del.sync(dir, {force: true});
 const sassPackagePath = p.join(dir, 'node_modules', 'sass');
 fs.mkdirSync(sassPackagePath, {recursive: true});
 
-const configPath = p.join(dir, 'jest.config.json');
-fs.writeFileSync(
-  configPath,
-  JSON.stringify({
-    ...config,
-    rootDir: p.resolve('.'),
-    roots: ['<rootDir>/js-api-spec'],
-  })
-);
-
 // We want to use the type information from --sassSassRepo even if --sassPackage
 // is written in TypeScript, because the specs may test behavior that's not yet
 // implemented in --sassPackage and we don't want that to cause a compile error.
 // We accomplish this by creating a JavaScript package named "sass" that
 // requires and re-exports --sassPackage, and using the type annotations from
 // --sassSassRepo as that package's annotations.
-const packageRequire = JSON.stringify(p.resolve(argv.sassPackage));
+const packageRequire = argv.browser
+  ? p.resolve(argv.sassPackage, 'sass.default.js')
+  : p.resolve(argv.sassPackage);
 fs.writeFileSync(
   `${sassPackagePath}/index.js`,
-  `module.exports = require(${packageRequire});`
+  `module.exports = require(${JSON.stringify(packageRequire)});`
 );
 
 // Load the APIs from the doc folder, since it uses plain .d.ts files instead of
@@ -109,4 +100,25 @@ process.on('exit', () => {
   tmpObject.removeCallback();
 });
 
-jest.run([`--config=${configPath}`, ...(argv._ as string[])]);
+if (argv.browser) {
+  const karmaConfig = config.parseConfig(
+    p.resolve(__dirname, 'karma.config.js'),
+    {port: 9876},
+    {throwErrors: true}
+  );
+  const server = new Server(karmaConfig, exitCode => {
+    console.log('Karma has exited with ' + exitCode);
+    process.exit(exitCode);
+  });
+  server.start();
+} else {
+  const jasmine = new Jasmine({
+    projectBaseDir: p.resolve('.'),
+  });
+  jasmine.loadConfig({
+    spec_dir: 'js-api-spec',
+    spec_files: ['**/*.test.ts'],
+    helpers: ['../node_modules/jasmine-expect/index.js', 'setup.ts'],
+  });
+  jasmine.execute();
+}