@lucidlayer/babel-plugin-traceform
Version:
Babel plugin to inject data-traceform-id attributes into React components for Traceform
160 lines • 6.15 kB
JavaScript
"use strict";
var __importDefault = (this && this.__importDefault) || function (mod) {
return (mod && mod.__esModule) ? mod : { "default": mod };
};
Object.defineProperty(exports, "__esModule", { value: true });
// SPDX-License-Identifier: MIT
const core_1 = require("@babel/core");
const index_1 = __importDefault(require("../src/index")); // Adjust path as needed
// Helper function to apply the plugin
const transformCode = (code) => {
const result = (0, core_1.transform)(code, {
plugins: [
index_1.default,
'@babel/plugin-syntax-jsx', // Needed to parse JSX
],
configFile: false, // Do not look for babel.config.js
babelrc: false, // Do not look for .babelrc
});
return result === null || result === void 0 ? void 0 : result.code;
};
describe('injectComponentIdPlugin', () => {
it('should inject data-traceform-id into a function component', () => {
var _a;
const input = `
import React from 'react';
function MyComponent() {
return <div>Hello</div>;
}
`;
const expected = `
import React from 'react';
function MyComponent() {
return <div data-traceform-id="MyComponent">Hello</div>;
}
`;
expect((_a = transformCode(input)) === null || _a === void 0 ? void 0 : _a.replace(/\s+/g, ''))
.toEqual(expected.replace(/\s+/g, ''));
});
it('should inject data-traceform-id into an arrow function component', () => {
var _a;
const input = `
import React from 'react';
const MyArrowComponent = () => {
return <span>World</span>;
};
`;
const expected = `
import React from 'react';
const MyArrowComponent = () => {
return <span data-traceform-id="MyArrowComponent">World</span>;
};
`;
expect((_a = transformCode(input)) === null || _a === void 0 ? void 0 : _a.replace(/\s+/g, ''))
.toEqual(expected.replace(/\s+/g, ''));
});
it('should inject data-traceform-id into an arrow function component with implicit return', () => {
var _a;
const input = `
import React from 'react';
const ImplicitReturn = () => <p>Implicit</p>;
`;
const expected = `
import React from 'react';
const ImplicitReturn = () => <p data-traceform-id="ImplicitReturn">Implicit</p>;
`;
expect((_a = transformCode(input)) === null || _a === void 0 ? void 0 : _a.replace(/\s+/g, ''))
.toEqual(expected.replace(/\s+/g, ''));
});
it('should inject data-traceform-id into a class component', () => {
var _a;
const input = `
import React from 'react';
class MyClassComponent extends React.Component {
render() {
return <section>Classy</section>;
}
}
`;
const expected = `
import React from 'react';
class MyClassComponent extends React.Component {
render() {
return <section data-traceform-id="MyClassComponent">Classy</section>;
}
}
`;
expect((_a = transformCode(input)) === null || _a === void 0 ? void 0 : _a.replace(/\s+/g, ''))
.toEqual(expected.replace(/\s+/g, ''));
});
it('should NOT inject data-traceform-id into a component returning a fragment', () => {
var _a;
const input = `
import React from 'react';
const FragmentComponent = () => {
return <><td>Frag</td></>;
};
`;
// Expect output to be identical to input (ignoring whitespace)
expect((_a = transformCode(input)) === null || _a === void 0 ? void 0 : _a.replace(/\s+/g, ''))
.toEqual(input.replace(/\s+/g, ''));
});
it('should NOT inject data-traceform-id into nested elements', () => {
var _a;
const input = `
import React from 'react';
function NestedComponent() {
return <div><h1>Title</h1><p>Text</p></div>;
}
`;
const expected = `
import React from 'react';
function NestedComponent() {
return <div data-traceform-id="NestedComponent"><h1>Title</h1><p>Text</p></div>;
}
`;
expect((_a = transformCode(input)) === null || _a === void 0 ? void 0 : _a.replace(/\s+/g, ''))
.toEqual(expected.replace(/\s+/g, ''));
});
it('should NOT overwrite an existing data-traceform-id attribute', () => {
var _a;
const input = `
import React from 'react';
function ExistingAttr() {
return <div data-traceform-id="ManualOverride">Manual</div>;
}
`;
// Expect output to be identical to input (ignoring whitespace)
expect((_a = transformCode(input)) === null || _a === void 0 ? void 0 : _a.replace(/\s+/g, ''))
.toEqual(input.replace(/\s+/g, ''));
});
it('should NOT inject data-traceform-id into a regular function', () => {
var _a;
const input = `
function regularFunction() {
return { jsx: <div /> }; // Returning object, not JSX directly
}
`;
// Expect output to be identical to input (ignoring whitespace)
expect((_a = transformCode(input)) === null || _a === void 0 ? void 0 : _a.replace(/\s+/g, ''))
.toEqual(input.replace(/\s+/g, ''));
});
it('should handle components wrapped in parentheses', () => {
var _a;
const input = `
import React from 'react';
const ParenComponent = () => (
<div>Parenthesized</div>
);
`;
const expected = `
import React from 'react';
const ParenComponent = () => <div data-traceform-id="ParenComponent">Parenthesized</div>;
`;
// Note: Babel often removes redundant parentheses during transformation
expect((_a = transformCode(input)) === null || _a === void 0 ? void 0 : _a.replace(/\s+/g, ''))
.toEqual(expected.replace(/\s+/g, ''));
});
// Add more tests for HOCs, complex returns, etc. if needed
});
//# sourceMappingURL=index.test.js.map