Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Polish babel-code-frame highlight test #15499

Merged
merged 7 commits into from Mar 23, 2023
Merged

Polish babel-code-frame highlight test #15499

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
7 commits
Select commit Hold shift + click to select a range
ad39824
resolve chalk from @babel/highlight's workspace
JLHwung Mar 15, 2023
eb1d106
improve color supports stub to work with Chalk 4
JLHwung Mar 15, 2023
077af82
remove --color from test jobs
JLHwung Mar 15, 2023
52dd862
create a valid SupportsColor Level
JLHwung Mar 15, 2023
a019ff5
also stub chalk.enabled
JLHwung Mar 15, 2023
3f37e77
obtain chalk from getChalk
JLHwung Mar 15, 2023
16ed156
jest e2e test requires --color
JLHwung Mar 15, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Jump to
Jump to file
Failed to load files.
Diff view
Diff view
17 changes: 4 additions & 13 deletions .github/workflows/ci.yml
View file
Open in desktop
Expand Up @@ -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
Expand Down Expand Up @@ -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
Expand Down Expand Up @@ -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
Expand Down Expand Up @@ -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

Expand Down
4 changes: 1 addition & 3 deletions .github/workflows/update-windows-fixtures.yml
View file
Open in desktop
Expand Up @@ -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
Expand Down
2 changes: 0 additions & 2 deletions packages/babel-code-frame/package.json
View file
Open in desktop
Expand Up @@ -19,8 +19,6 @@
"@babel/highlight": "workspace:^"
},
"devDependencies": {
"@types/chalk": "^2.0.0",
"chalk": "^2.0.0",
"strip-ansi": "^4.0.0"
},
"engines": {
Expand Down
218 changes: 121 additions & 97 deletions packages/babel-code-frame/test/index.js
View file
Open in desktop
@@ -1,10 +1,30 @@
import chalk from "chalk";
import stripAnsi from "strip-ansi";

import { getChalk } from "@babel/highlight";
Copy link
Contributor Author

@JLHwung JLHwung Mar 22, 2023 •
edited

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

The getChalk private API is also used in babel-code-frame test here so that we can manipulate the chalk instance required by babel-highlight. If we remove the getChalk API, we may have to fallback to resolving it from babel-highlight.

Previously we manipulated the chalk dev dependency. It happens to work when both chalk dependencies are hoisted to the top level n_m. It no longer works in #15505 when the top level is chalk v2 (from our own build deps) and libraries depends on chalk v4.

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(
Expand Down Expand Up @@ -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);
Copy link
Contributor Author

@JLHwung JLHwung Mar 15, 2023 •
edited

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Added a new assertion here to ensure that the result has been highlighted as it is expected from { highlightCode: true }.

The other tests are moved to the "when colors are supported" test context.

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 () {
Expand Down Expand Up @@ -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(
Expand Down
19 changes: 14 additions & 5 deletions packages/babel-highlight/test/index.js
View file
Open in desktop
@@ -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;
});
}

Expand Down
2 changes: 0 additions & 2 deletions yarn.lock
View file
Open in desktop
Expand Up @@ -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
Expand Down