tldraw/packages/editor
alex e3dec58499
Add DSL to make writing shape-layout test cases much easier (#1413)
As part of my highlighter work, I've been writing a few test cases
around rendering with different combinations of nested frames and
groups. Writing these test cases using `createShapes` is really hard,
and reading them is even harder. I wanted to see if there was an easier
way for us to define shapes for test cases, and turns out... there is!

This diff introduces a JSX-based DSL for defining test cases. It looks
something like this:
```tsx
// create some shapes
const ids = app.createShapesFromJsx([
	<TL.geo ref="A" x={100} y={100} w={100} h={100} />,
	<TL.frame ref="B" x={200} y={200} w={300} h={300}>
		<TL.geo ref="C" x={200} y={200} w={50} h={50} />
		<TL.text ref="D" x={1000} y={1000} text="Hello, world!" align="end" />
	</TL.frame>,
])

// refer to shape IDs according to their `ref`
app.select(ids.C)
```

It's probably not worth trying to migrate everything possible to this,
but i picked a few random tests to convert over to show how it works
(and because i wanted this diff to end up red overall)

In the future, I'd like to use this with visual regression testing to
test rendering/exports on some complex combinations of shapes too.

### Change Type
- [x] `tests` — Changes to any testing-related code only (will not
publish a new version)

### Release Notes

[internal only change]
2023-05-30 13:27:26 +00:00
..
src Add DSL to make writing shape-layout test cases much easier (#1413) 2023-05-30 13:27:26 +00:00
api-extractor.json transfer-out: transfer out 2023-04-25 12:01:25 +01:00
api-report.md Feature flags rework (#1474) 2023-05-30 13:06:15 +00:00
CHANGELOG.md transfer-out: transfer out 2023-04-25 12:01:25 +01:00
editor.css [mini-feature] Following indicator (#1468) 2023-05-25 15:41:49 +00:00
LICENSE transfer-out: transfer out 2023-04-25 12:01:25 +01:00
package.json update use-gesture (#1453) 2023-05-25 09:39:47 +00:00
README.md transfer-out: transfer out 2023-04-25 12:01:25 +01:00
setupTests.js derived presence state (#1204) 2023-04-27 18:03:19 +00:00
tsconfig.json Create @tldraw/indices package (#1426) 2023-05-22 08:18:01 +00:00

tldraw/tldraw

Benchmark

To run the benchmarks

yarn workspace @tldraw/tldraw benchmark

Or

yarn workspace @tldraw/tldraw benchmark "file_search_string"