Polish babel-code-frame highlight test (#15499)

* resolve chalk from @babel/highlight's workspace * improve color supports stub to work with Chalk 4 * remove --color from test jobs * create a valid SupportsColor Level * also stub chalk.enabled * obtain chalk from getChalk * jest e2e test requires --color
babel · Mar 23, 2023 · 936e649 · 936e649
1 parent 032203e
commit 936e649
Show file tree

Hide file tree

Showing 6 changed files with 140 additions and 122 deletions.
diff --git a/.github/workflows/ci.yml b/.github/workflows/ci.yml
@@ -90,9 +90,7 @@ jobs:
         env:
           USE_ESM: true
       - name: Test
-        # Hack: --color has supports-color@5 returned true for GitHub CI
-        # Remove once `chalk` is bumped to 4.0.
-        run: yarn jest --ci --color
+        run: yarn jest --ci
         env:
           BABEL_ENV: test
           USE_ESM: true
@@ -231,12 +229,9 @@ jobs:
         with:
           node-version: ${{ matrix.node-version }}
       - name: Test on node.js ${{ matrix.node-version }}
-        # Hack: --color has supports-color@5 returned true for GitHub CI
-        # Remove once `chalk` is bumped to 4.0.
-
         # Todo(Babel 8): Jest execution path is hardcoded because Yarn 2 does not support node 6
         run: |
-          BABEL_ENV=test node --max-old-space-size=4096 ./node_modules/.bin/jest --ci --color
+          BABEL_ENV=test node --max-old-space-size=4096 ./node_modules/.bin/jest --ci
         env:
           TEST_FUZZ: "${{ (matrix.node-version == '6' || matrix.node-version == '8' || matrix.node-version == '10') && 'false' || 'true' }}"
       - name: Use Node.js latest # For `yarn version` in post actions of the first actions/setup-node
@@ -307,10 +302,8 @@ jobs:
       - name: Generate runtime helpers
         run: make build-plugin-transform-runtime-dist
       - name: Test
-        # Hack: --color has supports-color@5 returned true for GitHub CI
-        # Remove once `chalk` is bumped to 4.0.
         run: |
-          yarn jest --ci --color
+          yarn jest --ci
           yarn test:esm
         env:
           BABEL_ENV: test
@@ -338,9 +331,7 @@ jobs:
       - name: Extract artifacts
         run: tar -xf babel-artifact.tar; rm babel-artifact.tar
       - name: Test on Windows
-        # Hack: --color has supports-color@5 returned true for GitHub CI
-        # Remove once `chalk` is bumped to 4.0.
-        run: yarn jest --ci --color
+        run: yarn jest --ci
         env:
           BABEL_ENV: test
 

diff --git a/.github/workflows/update-windows-fixtures.yml b/.github/workflows/update-windows-fixtures.yml
@@ -60,10 +60,8 @@ jobs:
           git reset --hard HEAD
 
       - name: Regenerate fixtures
-        # Hack: --color has supports-color@5 returned true for GitHub CI
-        # Remove once `chalk` is bumped to 4.0.
         run: |
-          yarn jest -u --ci --color || true
+          yarn jest -u --ci || true
         env:
           BABEL_ENV: test
           OVERWRITE: true

diff --git a/packages/babel-code-frame/package.json b/packages/babel-code-frame/package.json
@@ -19,8 +19,6 @@
     "@babel/highlight": "workspace:^"
   },
   "devDependencies": {
-    "@types/chalk": "^2.0.0",
-    "chalk": "^2.0.0",
     "strip-ansi": "^4.0.0"
   },
   "engines": {

diff --git a/packages/babel-code-frame/test/index.js b/packages/babel-code-frame/test/index.js
@@ -1,10 +1,30 @@
-import chalk from "chalk";
 import stripAnsi from "strip-ansi";
-
+import { getChalk } from "@babel/highlight";
 import _codeFrame, { codeFrameColumns } from "../lib/index.js";
 const codeFrame = _codeFrame.default || _codeFrame;
 
+const chalk = getChalk({});
+
 describe("@babel/code-frame", function () {
+  function stubColorSupport(supported) {
+    let originalChalkLevel;
+    let originalChalkSupportsColor;
+    let originalChalkEnabled;
+    beforeEach(function () {
+      originalChalkSupportsColor = chalk.supportsColor;
+      originalChalkLevel = chalk.level;
+      originalChalkEnabled = chalk.enabled;
+      chalk.supportsColor = supported ? { level: 1 } : false;
+      chalk.level = supported ? 1 : 0;
+      chalk.enabled = supported;
+    });
+
+    afterEach(function () {
+      chalk.supportsColor = originalChalkSupportsColor;
+      chalk.level = originalChalkLevel;
+      chalk.enabled = originalChalkEnabled;
+    });
+  }
   test("basic usage", function () {
     const rawLines = ["class Foo {", "  constructor()", "};"].join("\n");
     expect(codeFrame(rawLines, 2, 16)).toEqual(
@@ -94,53 +114,109 @@ describe("@babel/code-frame", function () {
     );
   });
 
-  test("opts.highlightCode", function () {
-    const rawLines = "console.log('babel')";
-    const result = codeFrame(rawLines, 1, 9, { highlightCode: true });
-    const stripped = stripAnsi(result);
-    expect(result.length).toBeGreaterThan(stripped.length);
-    expect(stripped).toEqual(
-      ["> 1 | console.log('babel')", "    |         ^"].join("\n"),
-    );
-  });
+  describe("when colors are supported", () => {
+    stubColorSupport(true);
 
-  test("opts.highlightCode with multiple columns and lines", function () {
-    // prettier-ignore
-    const rawLines = [
-      "function a(b, c) {",
-      "  return b + c;",
-      "}"
-    ].join("\n");
+    test("opts.highlightCode", function () {
+      const rawLines = "console.log('babel')";
+      const result = codeFrame(rawLines, 1, 9, { highlightCode: true });
+      const stripped = stripAnsi(result);
+      expect(result.length).toBeGreaterThan(stripped.length);
+      expect(stripped).toEqual(
+        ["> 1 | console.log('babel')", "    |         ^"].join("\n"),
+      );
+    });
 
-    const result = codeFrameColumns(
-      rawLines,
-      {
-        start: {
-          line: 1,
-          column: 1,
+    test("opts.highlightCode with multiple columns and lines", function () {
+      // prettier-ignore
+      const rawLines = [
+        "function a(b, c) {",
+        "  return b + c;",
+        "}"
+      ].join("\n");
+
+      const result = codeFrameColumns(
+        rawLines,
+        {
+          start: {
+            line: 1,
+            column: 1,
+          },
+          end: {
+            line: 3,
+            column: 1,
+          },
         },
-        end: {
-          line: 3,
-          column: 1,
+        {
+          highlightCode: true,
+          message: "Message about things",
         },
-      },
-      {
-        highlightCode: true,
-        message: "Message about things",
-      },
-    );
-    const stripped = stripAnsi(result);
-    expect(stripped).toEqual(
-      // prettier-ignore
-      [
-        "> 1 | function a(b, c) {",
-        "    | ^^^^^^^^^^^^^^^^^^",
-        "> 2 |   return b + c;",
-        "    | ^^^^^^^^^^^^^^^",
-        "> 3 | }",
-        "    | ^ Message about things",
-      ].join('\n'),
-    );
+      );
+      const stripped = stripAnsi(result);
+      expect(result.length).toBeGreaterThan(stripped.length);
+      expect(stripped).toEqual(
+        // prettier-ignore
+        [
+          "> 1 | function a(b, c) {",
+          "    | ^^^^^^^^^^^^^^^^^^",
+          "> 2 |   return b + c;",
+          "    | ^^^^^^^^^^^^^^^",
+          "> 3 | }",
+          "    | ^ Message about things",
+        ].join('\n'),
+      );
+    });
+    test("opts.forceColor", function () {
+      const marker = chalk.red.bold;
+      const gutter = chalk.grey;
+
+      const rawLines = ["", "", "", ""].join("\n");
+      expect(
+        codeFrame(rawLines, 3, null, {
+          linesAbove: 1,
+          linesBelow: 1,
+          forceColor: true,
+        }),
+      ).toEqual(
+        chalk.reset(
+          [
+            " " + gutter(" 2 |"),
+            marker(">") + gutter(" 3 |"),
+            " " + gutter(" 4 |"),
+          ].join("\n"),
+        ),
+      );
+    });
+
+    test("jsx", function () {
+      const gutter = chalk.grey;
+      const yellow = chalk.yellow;
+
+      const rawLines = ["<div />"].join("\n");
+
+      expect(
+        JSON.stringify(
+          codeFrame(rawLines, 0, null, {
+            linesAbove: 1,
+            linesBelow: 1,
+            forceColor: true,
+          }),
+        ),
+      ).toEqual(
+        JSON.stringify(
+          chalk.reset(
+            " " +
+              gutter(" 1 |") +
+              " " +
+              yellow("<") +
+              yellow("div") +
+              " " +
+              yellow("/") +
+              yellow(">"),
+          ),
+        ),
+      );
+    });
   });
 
   test("opts.linesAbove", function () {
@@ -263,58 +339,6 @@ describe("@babel/code-frame", function () {
     ).toEqual(["> 2 |   constructor() {"].join("\n"));
   });
 
-  test("opts.forceColor", function () {
-    const marker = chalk.red.bold;
-    const gutter = chalk.grey;
-
-    const rawLines = ["", "", "", ""].join("\n");
-    expect(
-      codeFrame(rawLines, 3, null, {
-        linesAbove: 1,
-        linesBelow: 1,
-        forceColor: true,
-      }),
-    ).toEqual(
-      chalk.reset(
-        [
-          " " + gutter(" 2 |"),
-          marker(">") + gutter(" 3 |"),
-          " " + gutter(" 4 |"),
-        ].join("\n"),
-      ),
-    );
-  });
-
-  test("jsx", function () {
-    const gutter = chalk.grey;
-    const yellow = chalk.yellow;
-
-    const rawLines = ["<div />"].join("\n");
-
-    expect(
-      JSON.stringify(
-        codeFrame(rawLines, 0, null, {
-          linesAbove: 1,
-          linesBelow: 1,
-          forceColor: true,
-        }),
-      ),
-    ).toEqual(
-      JSON.stringify(
-        chalk.reset(
-          " " +
-            gutter(" 1 |") +
-            " " +
-            yellow("<") +
-            yellow("div") +
-            " " +
-            yellow("/") +
-            yellow(">"),
-        ),
-      ),
-    );
-  });
-
   test("basic usage, new API", function () {
     const rawLines = ["class Foo {", "  constructor()", "};"].join("\n");
     expect(

diff --git a/packages/babel-highlight/test/index.js b/packages/babel-highlight/test/index.js
@@ -1,19 +1,28 @@
-import chalk from "chalk";
 import stripAnsi from "strip-ansi";
 
 import _highlight, { shouldHighlight, getChalk } from "../lib/index.js";
 const highlight = _highlight.default || _highlight;
 
+const chalk = getChalk({});
+
 describe("@babel/highlight", function () {
   function stubColorSupport(supported) {
-    let originalSupportsColor;
+    let originalChalkLevel;
+    let originalChalkSupportsColor;
+    let originalChalkEnabled;
     beforeEach(function () {
-      originalSupportsColor = chalk.supportsColor;
-      chalk.supportsColor = supported;
+      originalChalkSupportsColor = chalk.supportsColor;
+      originalChalkLevel = chalk.level;
+      originalChalkEnabled = chalk.enabled;
+      chalk.supportsColor = supported ? { level: 1 } : false;
+      chalk.level = supported ? 1 : 0;
+      chalk.enabled = supported;
     });
 
     afterEach(function () {
-      chalk.supportsColor = originalSupportsColor;
+      chalk.supportsColor = originalChalkSupportsColor;
+      chalk.level = originalChalkLevel;
+      chalk.enabled = originalChalkEnabled;
     });
   }
 

diff --git a/yarn.lock b/yarn.lock
@@ -269,8 +269,6 @@ __metadata:
   resolution: "@babel/code-frame@workspace:packages/babel-code-frame"
   dependencies:
     "@babel/highlight": "workspace:^"
-    "@types/chalk": ^2.0.0
-    chalk: ^2.0.0
     strip-ansi: ^4.0.0
   languageName: unknown
   linkType: soft