Skip to content

Commit

Permalink
Visualize source maps in tests (#15931)
Browse files Browse the repository at this point in the history 
* Add option to visualize source maps in tests

* Visualize ranges

* Do not rely on name for merging original ranges

* Node.js 6

* Automatically generate source maps visualization

* Generate all visualizations

* Node 6

* Update packages/babel-helper-fixtures/src/index.ts
  • Loading branch information
@nicolo-ribaudo
nicolo-ribaudo committed Sep 9, 2023
1 parent 575904f commit 0effd92
Show file tree
Hide file tree
Showing 15 changed files with 1,147 additions and 2 deletions.
41 changes: 41 additions & 0 deletions .../babel-core/test/fixtures/transformation/source-maps/arrow-function/source-map-visual.txt
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,41 @@
(1:0-4) var t = <-- (1:0-4) var t =
^^^^ ^^^^

(1:4-5) var t = x <-- (1:4-5) var t = f
^ ^

(1:5-8) ar t = x => <-- (1:5-8) ar t = func
^^^ ^^^

(1:8-8) t = x => <-- (1:8-17) t = function t(x)
>< ^^^^^^^^^

(1:4-5) var t = x <-- (1:17-18) ion t(x)
^ ^

(1:5-8) ar t = x => <-- (1:18-19) on t(x) {
^^^ ^

(1:8-9) t = x => <-- (1:19-20) n t(x) {
^ ^

(1:9-13) = x => x * <-- (1:20-23) t(x) {
^^^^ ^^^

(1:9-13) = x => x * <-- (2:2-9) return x *
^^^^ ^^^^^^^

(1:13-14) => x * x <-- (2:9-10) urn x * x
^ ^

(1:14-17) => x * x; <-- (2:10-13) rn x * x;
^^^ ^^^

(1:17-18) x * x; <-- (2:13-14) x * x;
^ ^

(1:18-19) * x; <-- (2:14-15) * x;
^ ^

(1:18-19) * x; <-- (3:0-2) };
^ ^^
155 changes: 155 additions & 0 deletions packages/babel-core/test/fixtures/transformation/source-maps/class/source-map-visual.txt
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,155 @@
(1:6-10) ass Test { <-- (1:4-8) var Test = /
^^^^ ^^^^

(1:10-12) Test { <-- (1:8-37) Test = /*#__PURE__*/function () {
^^ ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^

(1:10-12) Test { <-- (2:2-15) "use strict";
^^ ^^^^^^^^^^^^^

(1:10-12) Test { <-- (4:2-11) function Test
^^ ^^^^^^^^^

(1:10-12) Test { <-- (4:11-16) ion Test() {
^^ ^^^^^

(1:10-12) Test { <-- (4:16-19) est() {
^^ ^^^

(1:10-12) Test { <-- (5:4-16) babelHelpers.cla
^^ ^^^^^^^^^^^^

(1:10-12) Test { <-- (5:16-17) pers.clas
^^ ^

(1:10-12) Test { <-- (5:17-31) ers.classCallCheck(thi
^^ ^^^^^^^^^^^^^^

(1:10-12) Test { <-- (5:31-38) heck(this, Test
^^ ^^^^^^^

(1:10-12) Test { <-- (5:38-42) is, Test);
^^ ^^^^

(1:10-12) Test { <-- (5:42-44) Test);
^^ ^^

(1:10-12) Test { <-- (6:2-3) }
^^ ^

(1:10-12) Test { <-- (7:2-14) babelHelpers.cre
^^ ^^^^^^^^^^^^

(1:10-12) Test { <-- (7:14-15) pers.crea
^^ ^

(1:10-12) Test { <-- (7:15-26) ers.createClass(Tes
^^ ^^^^^^^^^^^

(1:10-12) Test { <-- (7:26-27) lass(Test
^^ ^

(1:10-12) Test { <-- (7:27-31) ass(Test, [{
^^ ^^^^

(1:10-12) Test { <-- (7:31-35) Test, [{
^^ ^^^^

(1:10-12) Test { <-- (8:4-7) key: "b
^^ ^^^

(1:10-12) Test { <-- (8:7-15) key: "bar",
^^ ^^^^^^^^

(1:10-12) Test { <-- (9:4-7) get: fu
^^ ^^^

(1:10-12) Test { <-- (9:7-9) get: func
^^ ^^

(2:2-12) get bar() { <-- (9:9-18) et: function () {
^^^^^^^^^^ ^^^^^^^^^

(2:2-12) get bar() { <-- (9:18-19) ion () {
^^^^^^^^^^ ^

(2:2-12) get bar() { <-- (9:19-21) on () {
^^^^^^^^^^ ^^

(2:12-13) r() { <-- (9:21-22) () {
^ ^

(3:4-10) throw new <-- (10:6-12) throw new
^^^^^^ ^^^^^^

(3:10-14) row new Erro <-- (10:12-16) row new Erro
^^^^ ^^^^

(3:14-19) new Error("wo <-- (10:16-21) new Error("wo
^^^^^ ^^^^^

(3:19-20) rror("wow <-- (10:21-22) rror("wow
^ ^

(3:20-25) ror("wow"); <-- (10:22-27) ror("wow");
^^^^^ ^^^^^

(3:25-26) wow"); <-- (10:27-28) wow");
^ ^

(3:26-27) ow"); <-- (10:28-29) ow");
^ ^

(4:2-3) } <-- (11:4-5) }
^ ^

(4:3-3) } <-- (12:2-6) }]);
>< ^^^^

(4:3-3) } <-- (13:2-9) return Test
>< ^^^^^^^

(4:3-3) } <-- (13:9-13) urn Test;
>< ^^^^

(4:3-3) } <-- (13:13-14) Test;
>< ^

(4:3-3) } <-- (14:0-4) }();
>< ^^^^

(7:0-4) var test <-- (15:0-4) var test
^^^^ ^^^^

(7:4-8) var test = n <-- (15:4-8) var test = n
^^^^ ^^^^

(7:8-11) test = new <-- (15:8-11) test = new
^^^ ^^^

(7:11-15) t = new Test <-- (15:11-15) t = new Test
^^^^ ^^^^

(7:15-19) new Test; <-- (15:15-19) new Test();
^^^^ ^^^^

(7:19-19) Test; <-- (15:19-20) Test();
>< ^

(7:18-19) Test; <-- (15:20-21) est();
^ ^

(7:19-20) Test; <-- (15:21-22) st();
^ ^

(8:0-4) test.bar <-- (16:0-4) test.bar
^^^^ ^^^^

(8:4-5) test.bar; <-- (16:4-5) test.bar;
^ ^

(8:5-8) est.bar; <-- (16:5-8) est.bar;
^^^ ^^^

(8:8-9) .bar; <-- (16:8-9) .bar;
^ ^
32 changes: 32 additions & 0 deletions ...e/test/fixtures/transformation/source-maps/input-source-map-complex/source-map-visual.txt
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,32 @@
(87:0-16) export default { <-- (92:15-16) t = {
^^^^^^^^^^^^^^^^ ^

(88:0-21) name: 'HelloWorld', <-- (93:2-6) name: 'H
^^^^^^^^^^^^^^^^^^^^^ ^^^^

(88:0-21) name: 'HelloWorld', <-- (93:6-21) name: 'HelloWorld',
^^^^^^^^^^^^^^^^^^^^^ ^^^^^^^^^^^^^^^

(89:0-11) data () { <-- (94:2-7) data() {
^^^^^^^^^^^ ^^^^^

(89:0-11) data () { <-- (94:7-10) ata() {
^^^^^^^^^^^ ^^^

(90:0-12) return { <-- (95:4-12) return {
^^^^^^^^^^^^ ^^^^^^^^

(91:0-39) msg: 'Welcome to Your Vue.js App' <-- (96:6-9) msg: 'W
^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ ^^^

(91:0-39) msg: 'Welcome to Your Vue.js App' <-- (96:9-39) msg: 'Welcome to Your Vue.js App'
^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^

(92:0-5) } <-- (97:4-6) };
^^^^^ ^^

(93:0-3) } <-- (98:2-3) }
^^^ ^

(94:0-1) } <-- (99:0-3) }; //
^ ^^^
23 changes: 23 additions & 0 deletions ...st/fixtures/transformation/source-maps/interpreter-directive-prefix/source-map-visual.txt
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,23 @@
(1:0-10) #!env node <-- (1:0-10) #!env node
^^^^^^^^^^ ^^^^^^^^^^

(3:0-7) console.log <-- (2:0-7) console.log
^^^^^^^ ^^^^^^^

(3:7-8) sole.log( <-- (2:7-8) sole.log(
^ ^

(3:8-11) ole.log("He <-- (2:8-11) ole.log("He
^^^ ^^^

(3:11-12) .log("Hel <-- (2:11-12) .log("Hel
^ ^

(3:12-27) log("Hello, world!"); <-- (2:12-27) log("Hello, world!");
^^^^^^^^^^^^^^^ ^^^^^^^^^^^^^^^

(3:27-28) ld!"); <-- (2:27-28) ld!");
^ ^

(3:28-29) d!"); <-- (2:28-29) d!");
^ ^
12 changes: 10 additions & 2 deletions packages/babel-helper-fixtures/src/index.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -41,6 +41,8 @@ export interface Test {
inputSourceMap?: EncodedSourceMap;
sourceMap: string;
sourceMapFile: TestFile;
sourceMapVisual: TestFile;
validateSourceMapVisual: boolean;
validateLogs: boolean;
}

Expand Down Expand Up @@ -129,6 +131,7 @@ function pushTask(
stdoutLoc,
stderrLoc,
sourceMapLoc,
sourceMapVisualLoc,
inputSourceMap;

const taskOpts: TaskOptions = JSON.parse(JSON.stringify(suite.options));
Expand All @@ -155,10 +158,12 @@ function pushTask(
taskOptsLoc = loc;
Object.assign(taskOpts, require(taskOptsLoc));
break;
case "source-map": {
case "source-map":
sourceMapLoc = loc;
break;
}
case "source-map-visual":
sourceMapVisualLoc = loc;
break;
case "input-source-map":
inputSourceMap = JSON.parse(readFile(loc));
break;
Expand Down Expand Up @@ -230,6 +235,9 @@ function pushTask(
expect: buildTestFile(expectLoc, true),
sourceMap: sourceMapFile.code,
sourceMapFile,
sourceMapVisual: buildTestFile(sourceMapVisualLoc),
validateSourceMapVisual:
taskOpts.sourceMaps === true || taskOpts.sourceMaps === "both",
inputSourceMap,
};

Expand Down
1 change: 1 addition & 0 deletions packages/babel-helper-transform-fixture-test-runner/package.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -19,6 +19,7 @@
"@babel/core": "workspace:^",
"@babel/helper-check-duplicate-nodes": "workspace:^",
"@babel/helper-fixtures": "workspace:^",
"@jridgewell/trace-mapping": "^0.3.17",
"lru-cache": "condition:BABEL_8_BREAKING ? ^7.14.1 : ^5.1.1"
},
"engines": {
Expand Down
16 changes: 16 additions & 0 deletions packages/babel-helper-transform-fixture-test-runner/src/index.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -14,6 +14,7 @@ import {
} from "@babel/helper-fixtures";
import { codeFrameColumns } from "@babel/code-frame";
import * as helpers from "./helpers.ts";
import visualizeSourceMap from "./source-map-visualizer.ts";
import assert from "assert";
import fs from "fs";
import path from "path";
Expand Down Expand Up @@ -385,6 +386,21 @@ async function run(task: Test) {
}
}

if (task.validateSourceMapVisual === true) {
const visual = visualizeSourceMap(result.code, result.map);
try {
expect(visual).toEqual(task.sourceMapVisual.code);
} catch (e) {
if (!process.env.OVERWRITE && task.sourceMapVisual.code) throw e;

console.log(`Updated test file: ${task.sourceMapVisual.loc}`);
fs.writeFileSync(
task.sourceMapVisual.loc ?? task.taskDir + "/source-map-visual.txt",
visual + "\n",
);
}
}

if (opts.sourceMaps === true) {
try {
expect(result.map).toEqual(task.sourceMap);
Expand Down

0 comments on commit 0effd92

Please sign in to comment.