diff --git a/AGENTS.md b/AGENTS.md index d4c82793f..49f8aa9f7 100644 --- a/AGENTS.md +++ b/AGENTS.md @@ -33,3 +33,38 @@ We use project references between each of our packages and apps. - We always want to make sure that we are updating the root `tsconfig.json` file to reference any new or renamed package or app in our monorepo - We always want to make sure that if a package has a dependency on another `workspace:` package, that the dependent package is added to the `references` block of the consuming package. This ensures fast and accurate type checking without extra work across all packages. + +## Testing + +We use Bun's built-in testing framework for unit tests. Tests are located in a `test/` folder within each package, separate from the source code. + +### Running Tests + +For the precision-diffs package: + +```bash +# From the package directory +bun test + +# From the monorepo root +bun run diffs:test +``` + +### Updating Snapshots + +When test snapshots need to be updated: + +```bash +# From the package directory +bun test --update-snapshots + +# From the monorepo root +bun run diffs:update-snapshots +``` + +### Test Structure + +- Tests use Bun's native `describe`, `test`, and `expect` from `bun:test` +- Snapshot testing is supported natively via `toMatchSnapshot()` +- Shared test fixtures and mocks are located in `test/mocks.ts` +- Test files are included in TypeScript type checking via `tsconfig.json` diff --git a/README.md b/README.md index 33b1b4f0f..7b3d54b05 100644 --- a/README.md +++ b/README.md @@ -15,6 +15,18 @@ bun install bun run dev ``` +## Testing + +Run tests for the precision-diffs package: + +```bash +# Run tests +bun run diffs:test + +# Update snapshots +bun run diffs:update-snapshots +``` + ## Publishing precision diffs ```sh diff --git a/package.json b/package.json index 555154861..d85a7dd9f 100644 --- a/package.json +++ b/package.json @@ -9,6 +9,8 @@ "demo:tsc": "(cd apps/demo && bun run tsc)", "diffs:build": "(cd packages/precision-diffs && bun run build)", "diffs:dev": "(cd packages/precision-diffs && bun run dev)", + "diffs:test": "(cd packages/precision-diffs && bun run test)", + "diffs:update-snapshots": "(cd packages/precision-diffs && bun test --update-snapshots)", "diffs:tsc": "(cd packages/precision-diffs && bun run tsc)", "docs:build": "(cd apps/docs && bun run build)", "docs:dev": "(cd apps/docs && bun run dev)", diff --git a/packages/precision-diffs/README.md b/packages/precision-diffs/README.md index 938087ab6..96e069820 100644 --- a/packages/precision-diffs/README.md +++ b/packages/precision-diffs/README.md @@ -1,3 +1,26 @@ # @pierre/precision-diffs Docs at [https://pierrejs-docs.vercel.app/](https://pierrejs-docs.vercel.app/) + +## Development + +### Building + +```bash +bun run build +``` + +### Testing + +```bash +# Run tests +bun test + +# Update snapshots +bun test --update-snapshots + +# Type checking +bun run tsc +``` + +Tests are located in the `test/` folder and use Bun's native testing framework with snapshot support. diff --git a/packages/precision-diffs/package.json b/packages/precision-diffs/package.json index dfd3974a5..a9bb28045 100644 --- a/packages/precision-diffs/package.json +++ b/packages/precision-diffs/package.json @@ -6,6 +6,7 @@ "scripts": { "build": "tsdown --clean", "dev": "echo 'Watching for changes…' && tsdown --watch --log-level error", + "test": "bun test", "tsc": "tsc --noEmit --pretty", "prepublishOnly": "bun run build" }, diff --git a/packages/precision-diffs/test/FileRenderer.ast.test.ts b/packages/precision-diffs/test/FileRenderer.ast.test.ts new file mode 100644 index 000000000..c5d85206f --- /dev/null +++ b/packages/precision-diffs/test/FileRenderer.ast.test.ts @@ -0,0 +1,144 @@ +import { describe, expect, test } from 'bun:test'; +import type { Element, ElementContent } from 'hast'; + +import { FileRenderer } from '../src/FileRenderer'; +import { mockFiles } from './mocks'; + +describe('FileRenderer AST Structure', () => { + test('should generate correct AST structure for JavaScript file', async () => { + const instance = new FileRenderer(); + const result = await instance.render(mockFiles.file2); + + expect(result).toBeDefined(); + const { codeAST, totalLines } = result!; + + // Verify line count matches + const inputLines = mockFiles.file2.contents.split('\n').length; + expect(totalLines).toBe(inputLines); + expect(codeAST.length).toBe(inputLines); + + // Verify each line has the expected structure + for (let i = 0; i < codeAST.length; i++) { + const lineElement = codeAST[i] as Element; + + // Each line should be a div element + expect(lineElement.type).toBe('element'); + expect(lineElement.tagName).toBe('div'); + + // Each line should have the correct properties + expect(lineElement.properties).toBeDefined(); + expect(lineElement.properties['data-line']).toBe(i + 1); + expect(lineElement.properties['data-line-type']).toBe('context'); + expect(lineElement.properties['data-line-index']).toBe(i); + + // Each line should have two child spans: column-number and column-content + expect(lineElement.children).toBeDefined(); + expect(lineElement.children.length).toBe(2); + + const [numberColumn, contentColumn] = lineElement.children as Element[]; + + // Verify line number column + expect(numberColumn.type).toBe('element'); + expect(numberColumn.tagName).toBe('span'); + expect(numberColumn.properties['data-column-number']).toBe(''); + + // Verify content column + expect(contentColumn.type).toBe('element'); + expect(contentColumn.tagName).toBe('span'); + expect(contentColumn.properties['data-column-content']).toBe(''); + } + }); + + test('should apply syntax highlighting with CSS variables', async () => { + const instance = new FileRenderer(); + const result = await instance.render(mockFiles.file2); + + expect(result).toBeDefined(); + const { codeAST } = result!; + + // Helper to recursively find all text nodes with their parent styles + const findTextNodesWithStyles = ( + nodes: ElementContent[] + ): Array<{ text: string; style?: string }> => { + const results: Array<{ text: string; style?: string }> = []; + + const traverse = (node: ElementContent, parentStyle?: string) => { + if (node.type === 'text') { + results.push({ text: node.value, style: parentStyle }); + } else if (node.type === 'element') { + const style = + typeof node.properties?.style === 'string' + ? node.properties.style + : undefined; + node.children?.forEach((child) => + traverse(child, style ?? parentStyle) + ); + } + }; + + nodes.forEach((node) => traverse(node)); + return results; + }; + + const textNodes = findTextNodesWithStyles(codeAST); + + // Verify that at least some tokens have syntax highlighting with CSS variables + const styledTokens = textNodes.filter((node) => node.style !== undefined); + expect(styledTokens.length).toBeGreaterThan(0); + + // Verify that styled tokens have the expected CSS variable format + const tokensWithCSSVars = styledTokens.filter( + (node) => + node.style?.match( + /--pjs-dark:#[A-F0-9]{6};--pjs-light:#[A-F0-9]{6}/ + ) !== null + ); + expect(tokensWithCSSVars.length).toBeGreaterThan(0); + + // Verify specific keyword exists and is highlighted + const functionToken = textNodes.find((node) => node.text === 'function'); + expect(functionToken).toBeDefined(); + expect(functionToken!.style).toBeDefined(); + expect(functionToken!.style).toMatch( + /--pjs-dark:#[A-F0-9]{6};--pjs-light:#[A-F0-9]{6}/ + ); + }); + + test('should generate correct totalLines count', async () => { + const instance = new FileRenderer(); + + // Test file1 (TypeScript) + const result1 = await instance.render(mockFiles.file1); + expect(result1).toBeDefined(); + const file1Lines = mockFiles.file1.contents.split('\n').length; + expect(result1!.totalLines).toBe(file1Lines); + + // Test file2 (JavaScript) + const result2 = await instance.render(mockFiles.file2); + expect(result2).toBeDefined(); + const file2Lines = mockFiles.file2.contents.split('\n').length; + expect(result2!.totalLines).toBe(file2Lines); + }); + + test('should include CSS property in result', async () => { + const instance = new FileRenderer(); + const result = await instance.render(mockFiles.file2); + + expect(result).toBeDefined(); + expect(result!.css).toBeDefined(); + expect(typeof result!.css).toBe('string'); + // CSS may be empty string depending on theme configuration + }); + + test('should create preNode with correct properties', async () => { + const instance = new FileRenderer(); + const result = await instance.render(mockFiles.file2); + + expect(result).toBeDefined(); + const { preNode } = result!; + + expect(preNode.type).toBe('element'); + expect(preNode.tagName).toBe('pre'); + expect(preNode.properties).toBeDefined(); + }); +}); diff --git a/packages/precision-diffs/test/FileRenderer.test.ts b/packages/precision-diffs/test/FileRenderer.test.ts new file mode 100644 index 000000000..8574a660a --- /dev/null +++ b/packages/precision-diffs/test/FileRenderer.test.ts @@ -0,0 +1,14 @@ +import { describe, expect, test } from 'bun:test'; + +import { FileRenderer } from '../src/FileRenderer'; +import { mockFiles } from './mocks'; + +describe('FileRenderer', () => { + test('should render TypeScript code to AST matching snapshot', async () => { + const instance = new FileRenderer(); + const result = await instance.render(mockFiles.file1); + + expect(result).toBeDefined(); + expect(result?.codeAST).toMatchSnapshot(); + }); +}); diff --git a/packages/precision-diffs/test/__snapshots__/FileRenderer.test.ts.snap b/packages/precision-diffs/test/__snapshots__/FileRenderer.test.ts.snap new file mode 100644 index 000000000..995b4cd68 --- /dev/null +++ b/packages/precision-diffs/test/__snapshots__/FileRenderer.test.ts.snap @@ -0,0 +1,1558 @@ +// Bun Snapshot v1, https://bun.sh/docs/test/snapshots + +exports[`FileRenderer should render TypeScript code to AST matching snapshot 1`] = ` +[ + { + "children": [ + { + "children": [ + { + "type": "text", + "value": "1", + }, + ], + "properties": { + "data-column-number": "", + }, + "tagName": "span", + "type": "element", + }, + { + "children": [ + { + "children": [ + { + "type": "text", + "value": "import", + }, + ], + "properties": { + "style": "--pjs-dark:#FF678D;--pjs-light:#FC2B73", + }, + "tagName": "span", + "type": "element", + }, + { + "children": [ + { + "type": "text", + "value": " type", + }, + ], + "properties": { + "style": "--pjs-dark:#FF678D;--pjs-light:#FC2B73", + }, + "tagName": "span", + "type": "element", + }, + { + "children": [ + { + "type": "text", + "value": " {", + }, + ], + "properties": { + "style": "--pjs-dark:#79797F;--pjs-light:#79797F", + }, + "tagName": "span", + "type": "element", + }, + { + "children": [ + { + "type": "text", + "value": " PJSThemeNames", + }, + ], + "properties": { + "style": "--pjs-dark:#FFA359;--pjs-light:#D47628", + }, + "tagName": "span", + "type": "element", + }, + { + "children": [ + { + "type": "text", + "value": ",", + }, + ], + "properties": { + "style": "--pjs-dark:#79797F;--pjs-light:#79797F", + }, + "tagName": "span", + "type": "element", + }, + { + "children": [ + { + "type": "text", + "value": " ThemesType", + }, + ], + "properties": { + "style": "--pjs-dark:#FFA359;--pjs-light:#D47628", + }, + "tagName": "span", + "type": "element", + }, + { + "children": [ + { + "type": "text", + "value": " }", + }, + ], + "properties": { + "style": "--pjs-dark:#79797F;--pjs-light:#79797F", + }, + "tagName": "span", + "type": "element", + }, + { + "children": [ + { + "type": "text", + "value": " from", + }, + ], + "properties": { + "style": "--pjs-dark:#FF678D;--pjs-light:#FC2B73", + }, + "tagName": "span", + "type": "element", + }, + { + "children": [ + { + "type": "text", + "value": " '../types'", + }, + ], + "properties": { + "style": "--pjs-dark:#5ECC71;--pjs-light:#199F43", + }, + "tagName": "span", + "type": "element", + }, + { + "children": [ + { + "type": "text", + "value": ";", + }, + ], + "properties": { + "style": "--pjs-dark:#79797F;--pjs-light:#79797F", + }, + "tagName": "span", + "type": "element", + }, + ], + "properties": { + "data-column-content": "", + }, + "tagName": "span", + "type": "element", + }, + ], + "properties": { + "data-alt-line": undefined, + "data-line": 1, + "data-line-index": 0, + "data-line-type": "context", + }, + "tagName": "div", + "type": "element", + }, + { + "children": [ + { + "children": [ + { + "type": "text", + "value": "2", + }, + ], + "properties": { + "data-column-number": "", + }, + "tagName": "span", + "type": "element", + }, + { + "children": [ + { + "type": "text", + "value": +" +" +, + }, + ], + "properties": { + "data-column-content": "", + }, + "tagName": "span", + "type": "element", + }, + ], + "properties": { + "data-alt-line": undefined, + "data-line": 2, + "data-line-index": 1, + "data-line-type": "context", + }, + "tagName": "div", + "type": "element", + }, + { + "children": [ + { + "children": [ + { + "type": "text", + "value": "3", + }, + ], + "properties": { + "data-column-number": "", + }, + "tagName": "span", + "type": "element", + }, + { + "children": [ + { + "children": [ + { + "type": "text", + "value": "export", + }, + ], + "properties": { + "style": "--pjs-dark:#FF678D;--pjs-light:#FC2B73", + }, + "tagName": "span", + "type": "element", + }, + { + "children": [ + { + "type": "text", + "value": " function", + }, + ], + "properties": { + "style": "--pjs-dark:#D568EA;--pjs-light:#C635E4", + }, + "tagName": "span", + "type": "element", + }, + { + "children": [ + { + "type": "text", + "value": " areThemesEqual", + }, + ], + "properties": { + "style": "--pjs-dark:#9D6AFB;--pjs-light:#7B43F8", + }, + "tagName": "span", + "type": "element", + }, + { + "children": [ + { + "type": "text", + "value": "(", + }, + ], + "properties": { + "style": "--pjs-dark:#79797F;--pjs-light:#79797F", + }, + "tagName": "span", + "type": "element", + }, + ], + "properties": { + "data-column-content": "", + }, + "tagName": "span", + "type": "element", + }, + ], + "properties": { + "data-alt-line": undefined, + "data-line": 3, + "data-line-index": 2, + "data-line-type": "context", + }, + "tagName": "div", + "type": "element", + }, + { + "children": [ + { + "children": [ + { + "type": "text", + "value": "4", + }, + ], + "properties": { + "data-column-number": "", + }, + "tagName": "span", + "type": "element", + }, + { + "children": [ + { + "children": [ + { + "type": "text", + "value": " themeA", + }, + ], + "properties": { + "style": "--pjs-dark:#ADADB1;--pjs-light:#79797F", + }, + "tagName": "span", + "type": "element", + }, + { + "children": [ + { + "type": "text", + "value": ":", + }, + ], + "properties": { + "style": "--pjs-dark:#79797F;--pjs-light:#79797F", + }, + "tagName": "span", + "type": "element", + }, + { + "children": [ + { + "type": "text", + "value": " PJSThemeNames", + }, + ], + "properties": { + "style": "--pjs-dark:#D568EA;--pjs-light:#C635E4", + }, + "tagName": "span", + "type": "element", + }, + { + "children": [ + { + "type": "text", + "value": " |", + }, + ], + "properties": { + "style": "--pjs-dark:#79797F;--pjs-light:#79797F", + }, + "tagName": "span", + "type": "element", + }, + { + "children": [ + { + "type": "text", + "value": " ThemesType", + }, + ], + "properties": { + "style": "--pjs-dark:#D568EA;--pjs-light:#C635E4", + }, + "tagName": "span", + "type": "element", + }, + { + "children": [ + { + "type": "text", + "value": " |", + }, + ], + "properties": { + "style": "--pjs-dark:#79797F;--pjs-light:#79797F", + }, + "tagName": "span", + "type": "element", + }, + { + "children": [ + { + "type": "text", + "value": " undefined", + }, + ], + "properties": { + "style": "--pjs-dark:#D568EA;--pjs-light:#C635E4", + }, + "tagName": "span", + "type": "element", + }, + { + "children": [ + { + "type": "text", + "value": ",", + }, + ], + "properties": { + "style": "--pjs-dark:#79797F;--pjs-light:#79797F", + }, + "tagName": "span", + "type": "element", + }, + ], + "properties": { + "data-column-content": "", + }, + "tagName": "span", + "type": "element", + }, + ], + "properties": { + "data-alt-line": undefined, + "data-line": 4, + "data-line-index": 3, + "data-line-type": "context", + }, + "tagName": "div", + "type": "element", + }, + { + "children": [ + { + "children": [ + { + "type": "text", + "value": "5", + }, + ], + "properties": { + "data-column-number": "", + }, + "tagName": "span", + "type": "element", + }, + { + "children": [ + { + "children": [ + { + "type": "text", + "value": " themeB", + }, + ], + "properties": { + "style": "--pjs-dark:#ADADB1;--pjs-light:#79797F", + }, + "tagName": "span", + "type": "element", + }, + { + "children": [ + { + "type": "text", + "value": ":", + }, + ], + "properties": { + "style": "--pjs-dark:#79797F;--pjs-light:#79797F", + }, + "tagName": "span", + "type": "element", + }, + { + "children": [ + { + "type": "text", + "value": " PJSThemeNames", + }, + ], + "properties": { + "style": "--pjs-dark:#D568EA;--pjs-light:#C635E4", + }, + "tagName": "span", + "type": "element", + }, + { + "children": [ + { + "type": "text", + "value": " |", + }, + ], + "properties": { + "style": "--pjs-dark:#79797F;--pjs-light:#79797F", + }, + "tagName": "span", + "type": "element", + }, + { + "children": [ + { + "type": "text", + "value": " ThemesType", + }, + ], + "properties": { + "style": "--pjs-dark:#D568EA;--pjs-light:#C635E4", + }, + "tagName": "span", + "type": "element", + }, + { + "children": [ + { + "type": "text", + "value": " |", + }, + ], + "properties": { + "style": "--pjs-dark:#79797F;--pjs-light:#79797F", + }, + "tagName": "span", + "type": "element", + }, + { + "children": [ + { + "type": "text", + "value": " undefined", + }, + ], + "properties": { + "style": "--pjs-dark:#D568EA;--pjs-light:#C635E4", + }, + "tagName": "span", + "type": "element", + }, + ], + "properties": { + "data-column-content": "", + }, + "tagName": "span", + "type": "element", + }, + ], + "properties": { + "data-alt-line": undefined, + "data-line": 5, + "data-line-index": 4, + "data-line-type": "context", + }, + "tagName": "div", + "type": "element", + }, + { + "children": [ + { + "children": [ + { + "type": "text", + "value": "6", + }, + ], + "properties": { + "data-column-number": "", + }, + "tagName": "span", + "type": "element", + }, + { + "children": [ + { + "children": [ + { + "type": "text", + "value": "):", + }, + ], + "properties": { + "style": "--pjs-dark:#79797F;--pjs-light:#79797F", + }, + "tagName": "span", + "type": "element", + }, + { + "children": [ + { + "type": "text", + "value": " boolean", + }, + ], + "properties": { + "style": "--pjs-dark:#D568EA;--pjs-light:#C635E4", + }, + "tagName": "span", + "type": "element", + }, + { + "children": [ + { + "type": "text", + "value": " {", + }, + ], + "properties": { + "style": "--pjs-dark:#79797F;--pjs-light:#79797F", + }, + "tagName": "span", + "type": "element", + }, + ], + "properties": { + "data-column-content": "", + }, + "tagName": "span", + "type": "element", + }, + ], + "properties": { + "data-alt-line": undefined, + "data-line": 6, + "data-line-index": 5, + "data-line-type": "context", + }, + "tagName": "div", + "type": "element", + }, + { + "children": [ + { + "children": [ + { + "type": "text", + "value": "7", + }, + ], + "properties": { + "data-column-number": "", + }, + "tagName": "span", + "type": "element", + }, + { + "children": [ + { + "children": [ + { + "type": "text", + "value": " if", + }, + ], + "properties": { + "style": "--pjs-dark:#FF678D;--pjs-light:#FC2B73", + }, + "tagName": "span", + "type": "element", + }, + { + "children": [ + { + "type": "text", + "value": " (", + }, + ], + "properties": { + "style": "--pjs-dark:#79797F;--pjs-light:#79797F", + }, + "tagName": "span", + "type": "element", + }, + ], + "properties": { + "data-column-content": "", + }, + "tagName": "span", + "type": "element", + }, + ], + "properties": { + "data-alt-line": undefined, + "data-line": 7, + "data-line-index": 6, + "data-line-type": "context", + }, + "tagName": "div", + "type": "element", + }, + { + "children": [ + { + "children": [ + { + "type": "text", + "value": "8", + }, + ], + "properties": { + "data-column-number": "", + }, + "tagName": "span", + "type": "element", + }, + { + "children": [ + { + "children": [ + { + "type": "text", + "value": " themeA", + }, + ], + "properties": { + "style": "--pjs-dark:#FFA359;--pjs-light:#D47628", + }, + "tagName": "span", + "type": "element", + }, + { + "children": [ + { + "type": "text", + "value": " ==", + }, + ], + "properties": { + "style": "--pjs-dark:#08C0EF;--pjs-light:#08C0EF", + }, + "tagName": "span", + "type": "element", + }, + { + "children": [ + { + "type": "text", + "value": " null", + }, + ], + "properties": { + "style": "--pjs-dark:#68CDF2;--pjs-light:#1CA1C7", + }, + "tagName": "span", + "type": "element", + }, + { + "children": [ + { + "type": "text", + "value": " ||", + }, + ], + "properties": { + "style": "--pjs-dark:#08C0EF;--pjs-light:#08C0EF", + }, + "tagName": "span", + "type": "element", + }, + ], + "properties": { + "data-column-content": "", + }, + "tagName": "span", + "type": "element", + }, + ], + "properties": { + "data-alt-line": undefined, + "data-line": 8, + "data-line-index": 7, + "data-line-type": "context", + }, + "tagName": "div", + "type": "element", + }, + { + "children": [ + { + "children": [ + { + "type": "text", + "value": "9", + }, + ], + "properties": { + "data-column-number": "", + }, + "tagName": "span", + "type": "element", + }, + { + "children": [ + { + "children": [ + { + "type": "text", + "value": " themeB", + }, + ], + "properties": { + "style": "--pjs-dark:#FFA359;--pjs-light:#D47628", + }, + "tagName": "span", + "type": "element", + }, + { + "children": [ + { + "type": "text", + "value": " ==", + }, + ], + "properties": { + "style": "--pjs-dark:#08C0EF;--pjs-light:#08C0EF", + }, + "tagName": "span", + "type": "element", + }, + { + "children": [ + { + "type": "text", + "value": " null", + }, + ], + "properties": { + "style": "--pjs-dark:#68CDF2;--pjs-light:#1CA1C7", + }, + "tagName": "span", + "type": "element", + }, + { + "children": [ + { + "type": "text", + "value": " ||", + }, + ], + "properties": { + "style": "--pjs-dark:#08C0EF;--pjs-light:#08C0EF", + }, + "tagName": "span", + "type": "element", + }, + ], + "properties": { + "data-column-content": "", + }, + "tagName": "span", + "type": "element", + }, + ], + "properties": { + "data-alt-line": undefined, + "data-line": 9, + "data-line-index": 8, + "data-line-type": "context", + }, + "tagName": "div", + "type": "element", + }, + { + "children": [ + { + "children": [ + { + "type": "text", + "value": "10", + }, + ], + "properties": { + "data-column-number": "", + }, + "tagName": "span", + "type": "element", + }, + { + "children": [ + { + "children": [ + { + "type": "text", + "value": " typeof", + }, + ], + "properties": { + "style": "--pjs-dark:#FF678D;--pjs-light:#FC2B73", + }, + "tagName": "span", + "type": "element", + }, + { + "children": [ + { + "type": "text", + "value": " themeA", + }, + ], + "properties": { + "style": "--pjs-dark:#FFA359;--pjs-light:#D47628", + }, + "tagName": "span", + "type": "element", + }, + { + "children": [ + { + "type": "text", + "value": " ===", + }, + ], + "properties": { + "style": "--pjs-dark:#08C0EF;--pjs-light:#08C0EF", + }, + "tagName": "span", + "type": "element", + }, + { + "children": [ + { + "type": "text", + "value": " 'string'", + }, + ], + "properties": { + "style": "--pjs-dark:#5ECC71;--pjs-light:#199F43", + }, + "tagName": "span", + "type": "element", + }, + { + "children": [ + { + "type": "text", + "value": " ||", + }, + ], + "properties": { + "style": "--pjs-dark:#08C0EF;--pjs-light:#08C0EF", + }, + "tagName": "span", + "type": "element", + }, + ], + "properties": { + "data-column-content": "", + }, + "tagName": "span", + "type": "element", + }, + ], + "properties": { + "data-alt-line": undefined, + "data-line": 10, + "data-line-index": 9, + "data-line-type": "context", + }, + "tagName": "div", + "type": "element", + }, + { + "children": [ + { + "children": [ + { + "type": "text", + "value": "11", + }, + ], + "properties": { + "data-column-number": "", + }, + "tagName": "span", + "type": "element", + }, + { + "children": [ + { + "children": [ + { + "type": "text", + "value": " typeof", + }, + ], + "properties": { + "style": "--pjs-dark:#FF678D;--pjs-light:#FC2B73", + }, + "tagName": "span", + "type": "element", + }, + { + "children": [ + { + "type": "text", + "value": " themeB", + }, + ], + "properties": { + "style": "--pjs-dark:#FFA359;--pjs-light:#D47628", + }, + "tagName": "span", + "type": "element", + }, + { + "children": [ + { + "type": "text", + "value": " ===", + }, + ], + "properties": { + "style": "--pjs-dark:#08C0EF;--pjs-light:#08C0EF", + }, + "tagName": "span", + "type": "element", + }, + { + "children": [ + { + "type": "text", + "value": " 'string'", + }, + ], + "properties": { + "style": "--pjs-dark:#5ECC71;--pjs-light:#199F43", + }, + "tagName": "span", + "type": "element", + }, + ], + "properties": { + "data-column-content": "", + }, + "tagName": "span", + "type": "element", + }, + ], + "properties": { + "data-alt-line": undefined, + "data-line": 11, + "data-line-index": 10, + "data-line-type": "context", + }, + "tagName": "div", + "type": "element", + }, + { + "children": [ + { + "children": [ + { + "type": "text", + "value": "12", + }, + ], + "properties": { + "data-column-number": "", + }, + "tagName": "span", + "type": "element", + }, + { + "children": [ + { + "children": [ + { + "type": "text", + "value": " )", + }, + ], + "properties": { + "style": "--pjs-dark:#79797F;--pjs-light:#79797F", + }, + "tagName": "span", + "type": "element", + }, + { + "children": [ + { + "type": "text", + "value": " {", + }, + ], + "properties": { + "style": "--pjs-dark:#79797F;--pjs-light:#79797F", + }, + "tagName": "span", + "type": "element", + }, + ], + "properties": { + "data-column-content": "", + }, + "tagName": "span", + "type": "element", + }, + ], + "properties": { + "data-alt-line": undefined, + "data-line": 12, + "data-line-index": 11, + "data-line-type": "context", + }, + "tagName": "div", + "type": "element", + }, + { + "children": [ + { + "children": [ + { + "type": "text", + "value": "13", + }, + ], + "properties": { + "data-column-number": "", + }, + "tagName": "span", + "type": "element", + }, + { + "children": [ + { + "children": [ + { + "type": "text", + "value": " return", + }, + ], + "properties": { + "style": "--pjs-dark:#FF678D;--pjs-light:#FC2B73", + }, + "tagName": "span", + "type": "element", + }, + { + "children": [ + { + "type": "text", + "value": " themeA", + }, + ], + "properties": { + "style": "--pjs-dark:#FFA359;--pjs-light:#D47628", + }, + "tagName": "span", + "type": "element", + }, + { + "children": [ + { + "type": "text", + "value": " ===", + }, + ], + "properties": { + "style": "--pjs-dark:#08C0EF;--pjs-light:#08C0EF", + }, + "tagName": "span", + "type": "element", + }, + { + "children": [ + { + "type": "text", + "value": " themeB", + }, + ], + "properties": { + "style": "--pjs-dark:#FFA359;--pjs-light:#D47628", + }, + "tagName": "span", + "type": "element", + }, + { + "children": [ + { + "type": "text", + "value": ";", + }, + ], + "properties": { + "style": "--pjs-dark:#79797F;--pjs-light:#79797F", + }, + "tagName": "span", + "type": "element", + }, + ], + "properties": { + "data-column-content": "", + }, + "tagName": "span", + "type": "element", + }, + ], + "properties": { + "data-alt-line": undefined, + "data-line": 13, + "data-line-index": 12, + "data-line-type": "context", + }, + "tagName": "div", + "type": "element", + }, + { + "children": [ + { + "children": [ + { + "type": "text", + "value": "14", + }, + ], + "properties": { + "data-column-number": "", + }, + "tagName": "span", + "type": "element", + }, + { + "children": [ + { + "children": [ + { + "type": "text", + "value": " }", + }, + ], + "properties": { + "style": "--pjs-dark:#79797F;--pjs-light:#79797F", + }, + "tagName": "span", + "type": "element", + }, + ], + "properties": { + "data-column-content": "", + }, + "tagName": "span", + "type": "element", + }, + ], + "properties": { + "data-alt-line": undefined, + "data-line": 14, + "data-line-index": 13, + "data-line-type": "context", + }, + "tagName": "div", + "type": "element", + }, + { + "children": [ + { + "children": [ + { + "type": "text", + "value": "15", + }, + ], + "properties": { + "data-column-number": "", + }, + "tagName": "span", + "type": "element", + }, + { + "children": [ + { + "children": [ + { + "type": "text", + "value": " return", + }, + ], + "properties": { + "style": "--pjs-dark:#FF678D;--pjs-light:#FC2B73", + }, + "tagName": "span", + "type": "element", + }, + { + "children": [ + { + "type": "text", + "value": " themeA", + }, + ], + "properties": { + "style": "--pjs-dark:#FFA359;--pjs-light:#D47628", + }, + "tagName": "span", + "type": "element", + }, + { + "children": [ + { + "type": "text", + "value": ".", + }, + ], + "properties": { + "style": "--pjs-dark:#79797F;--pjs-light:#79797F", + }, + "tagName": "span", + "type": "element", + }, + { + "children": [ + { + "type": "text", + "value": "dark", + }, + ], + "properties": { + "style": "--pjs-dark:#FFA359;--pjs-light:#D47628", + }, + "tagName": "span", + "type": "element", + }, + { + "children": [ + { + "type": "text", + "value": " ===", + }, + ], + "properties": { + "style": "--pjs-dark:#08C0EF;--pjs-light:#08C0EF", + }, + "tagName": "span", + "type": "element", + }, + { + "children": [ + { + "type": "text", + "value": " themeB", + }, + ], + "properties": { + "style": "--pjs-dark:#FFA359;--pjs-light:#D47628", + }, + "tagName": "span", + "type": "element", + }, + { + "children": [ + { + "type": "text", + "value": ".", + }, + ], + "properties": { + "style": "--pjs-dark:#79797F;--pjs-light:#79797F", + }, + "tagName": "span", + "type": "element", + }, + { + "children": [ + { + "type": "text", + "value": "dark", + }, + ], + "properties": { + "style": "--pjs-dark:#FFA359;--pjs-light:#D47628", + }, + "tagName": "span", + "type": "element", + }, + { + "children": [ + { + "type": "text", + "value": " &&", + }, + ], + "properties": { + "style": "--pjs-dark:#08C0EF;--pjs-light:#08C0EF", + }, + "tagName": "span", + "type": "element", + }, + { + "children": [ + { + "type": "text", + "value": " themeA", + }, + ], + "properties": { + "style": "--pjs-dark:#FFA359;--pjs-light:#D47628", + }, + "tagName": "span", + "type": "element", + }, + { + "children": [ + { + "type": "text", + "value": ".", + }, + ], + "properties": { + "style": "--pjs-dark:#79797F;--pjs-light:#79797F", + }, + "tagName": "span", + "type": "element", + }, + { + "children": [ + { + "type": "text", + "value": "light", + }, + ], + "properties": { + "style": "--pjs-dark:#FFA359;--pjs-light:#D47628", + }, + "tagName": "span", + "type": "element", + }, + { + "children": [ + { + "type": "text", + "value": " ===", + }, + ], + "properties": { + "style": "--pjs-dark:#08C0EF;--pjs-light:#08C0EF", + }, + "tagName": "span", + "type": "element", + }, + { + "children": [ + { + "type": "text", + "value": " themeB", + }, + ], + "properties": { + "style": "--pjs-dark:#FFA359;--pjs-light:#D47628", + }, + "tagName": "span", + "type": "element", + }, + { + "children": [ + { + "type": "text", + "value": ".", + }, + ], + "properties": { + "style": "--pjs-dark:#79797F;--pjs-light:#79797F", + }, + "tagName": "span", + "type": "element", + }, + { + "children": [ + { + "type": "text", + "value": "light", + }, + ], + "properties": { + "style": "--pjs-dark:#FFA359;--pjs-light:#D47628", + }, + "tagName": "span", + "type": "element", + }, + { + "children": [ + { + "type": "text", + "value": ";", + }, + ], + "properties": { + "style": "--pjs-dark:#79797F;--pjs-light:#79797F", + }, + "tagName": "span", + "type": "element", + }, + ], + "properties": { + "data-column-content": "", + }, + "tagName": "span", + "type": "element", + }, + ], + "properties": { + "data-alt-line": undefined, + "data-line": 15, + "data-line-index": 14, + "data-line-type": "context", + }, + "tagName": "div", + "type": "element", + }, + { + "children": [ + { + "children": [ + { + "type": "text", + "value": "16", + }, + ], + "properties": { + "data-column-number": "", + }, + "tagName": "span", + "type": "element", + }, + { + "children": [ + { + "children": [ + { + "type": "text", + "value": "}", + }, + ], + "properties": { + "style": "--pjs-dark:#79797F;--pjs-light:#79797F", + }, + "tagName": "span", + "type": "element", + }, + ], + "properties": { + "data-column-content": "", + }, + "tagName": "span", + "type": "element", + }, + ], + "properties": { + "data-alt-line": undefined, + "data-line": 16, + "data-line-index": 15, + "data-line-type": "context", + }, + "tagName": "div", + "type": "element", + }, +] +`; diff --git a/packages/precision-diffs/test/mocks.ts b/packages/precision-diffs/test/mocks.ts new file mode 100644 index 000000000..5fb67bf49 --- /dev/null +++ b/packages/precision-diffs/test/mocks.ts @@ -0,0 +1,34 @@ +import type { FileContents } from '../src/types'; + +export const mockFiles: Record = { + file1: { + name: 'file1.ts', + contents: `import type { PJSThemeNames, ThemesType } from '../types'; + +export function areThemesEqual( + themeA: PJSThemeNames | ThemesType | undefined, + themeB: PJSThemeNames | ThemesType | undefined +): boolean { + if ( + themeA == null || + themeB == null || + typeof themeA === 'string' || + typeof themeB === 'string' + ) { + return themeA === themeB; + } + return themeA.dark === themeB.dark && themeA.light === themeB.light; +}`, + }, + file2: { + name: 'file2.js', + contents: `function calculateTotal(items) { + const total = items.reduce((sum, item) => { + return sum + item.price; + }, 0); + return total; +} + +export default calculateTotal;`, + }, +}; diff --git a/packages/precision-diffs/tsconfig.json b/packages/precision-diffs/tsconfig.json index 26738c663..cfddef9a4 100644 --- a/packages/precision-diffs/tsconfig.json +++ b/packages/precision-diffs/tsconfig.json @@ -4,6 +4,7 @@ "src/**/*.ts", "src/**/*.tsx", "src/**/*.json", + "test/**/*.ts", "tsdown.config.ts" ], "exclude": ["node_modules", "dist"],