e3dec58499
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]
|
||
|---|---|---|
| .. | ||
| src | ||
| api-extractor.json | ||
| api-report.md | ||
| CHANGELOG.md | ||
| editor.css | ||
| LICENSE | ||
| package.json | ||
| README.md | ||
| setupTests.js | ||
| tsconfig.json | ||
tldraw/tldraw
Benchmark
To run the benchmarks
yarn workspace @tldraw/tldraw benchmark
Or
yarn workspace @tldraw/tldraw benchmark "file_search_string"