| 1 | ## Sprout 🌱 |
| 2 | React Forget test framework that executes compiler fixtures. |
| 3 | |
| 4 | Currently, Sprout runs each fixture with a known set of inputs and annotations. Sprout compares execution outputs (i.e. return values and console logs) of original source code and the corresponding Forget-transformed version. |
| 5 | We hope to add fuzzing capabilities to Sprout, synthesizing sets of program inputs based on type and/or effect annotations. |
| 6 | |
| 7 | Sprout is now enabled for all fixtures! If Sprout cannot execute your fixture due to some technical limitations, add your fixture to [`SproutTodoFilter.ts`](./src/SproutTodoFilter.ts) with a comment explaining why. |
| 8 | |
| 9 | ### Sprout CLI |
| 10 | Sprout is now run as a part of snap, except when in filter mode. |
| 11 | |
| 12 | ### Adding fixtures to Sprout |
| 13 | |
| 14 | #### 1. Annotate fixtures. |
| 15 | Each fixture test executed by Sprout needs to export const `FIXTURE_ENTRYPOINT` object with the following type signature. |
| 16 | |
| 17 | ```js |
| 18 | type FixtureEntrypoint<T> = { |
| 19 | // function to be invoked |
| 20 | fn: ((...params: Array<T>) => any), |
| 21 | // params to pass to fn |
| 22 | // (if `fn` is a react component, this should be an array |
| 23 | // with exactly one element -- props) |
| 24 | params: Array<T>, |
| 25 | } |
| 26 | ``` |
| 27 | |
| 28 | Example: |
| 29 | ```js |
| 30 | // test.js |
| 31 | function MyComponent(props) { |
| 32 | return <div>{props.a + props.b}</div>; |
| 33 | } |
| 34 | export const FIXTURE_ENTRYPOINT = { |
| 35 | fn: MyComponent, |
| 36 | params: [{a: "hello ", b: "world"}], |
| 37 | }; |
| 38 | ``` |
| 39 | |
| 40 | #### 2. Import / define helper functions. |
| 41 | |
| 42 | - Prefer importing helper functions for readability and simplicity. |
| 43 | - Fixtures that require helper functions with specific types or mutability can define their own within the same fixture file. |
| 44 | |
| 45 | ```js |
| 46 | // test.js |
| 47 | import { addOne } from 'shared-runtime'; |
| 48 | |
| 49 | function customHelper(val1, val2) { |
| 50 | // This directive is important, as helper functions don't |
| 51 | // always follow the rules of React. |
| 52 | "use no forget"; |
| 53 | // ... |
| 54 | } |
| 55 | |
| 56 | // ... |
| 57 | ``` |
| 58 | |
| 59 | #### Notes |
| 60 | - If your fixture needs to import from an external module, we currently only support importing from `react` (see Milestones todo list). |
| 61 | |
| 62 | - Any fixture can use React hooks, but they need to be first imported. We may later enforce that only `isComponent: true` fixtures can use React hooks. |
| 63 | ```ts |
| 64 | import {useState} from 'react'; |
| 65 | ``` |
| 66 | |
| 67 | - If your fixture wants to export multiple functions to Sprout to run, please split up the fixture into multiple files (e.g. `test-case-1`, `test-case-2`, etc). |
| 68 | |
| 69 | - Sprout currently runs each fixture in an iife to prevent variable collisions, but it does not run fixtures in isolation. Please do not mutate any external state in fixtures. |
| 70 | |
| 71 | - Sprout does not run fixtures listed in [`SproutTodoFilter.ts`](./src/SproutTodoFilter.ts), even in filter mode. |
| 72 | |
| 73 | ### Milestones: |
| 74 | - [✅] Render fixtures with React runtime / `testing-library/react`. |
| 75 | - [✅] Make Sprout CLI -runnable and report results in process exit code. |
| 76 | - [✅] Enable Sprout by default and run it in the Github Actions pipeline. |
| 77 | - [🚧] Make all existing test fixtures Sprout compatible (see `SproutTodoFilter.ts`). This involves each fixture being annotated with `FIXTURE_ENTRYPOINT` and using shared functions and/or defining its own helpers. |
| 78 | - 77 done, ~410 to go |
| 79 | - [✅] *(optional)* Store Sprout output as snapshot files. i.e. each fixture could have a `fixture.js`, `fixture.snap.md`, and `fixture.sprout.md`. |
| 80 | - [✅] Add support for `fbt`. |