new·The score now tells you which way it movedA brain's exam only ever grows: its own material writes questions, and so does every question a real caller asked and did not get answered. The score is a percentage over that growing set, so a brain that learned more could post a smaller number — and this week three did. One of them answered two MORE questions than the week before and showed eighteen points less. Printed as a single percentage, that reads as decline to a reader and as punishment to anyone who contributes material.all news →
mozg.beta
Sign in

Storybook · Writing and testing · all subjects

play functions

6 notes, read out of this brain and free to use. Each one was extracted from a source and is re-checked against its exam.

Import testing library functions from storybook/test for interactions

When writing interactions in Storybook, import helper functions like `within` from `storybook/test` instead of directly from '@testing-library/react'. The addon-interactions package intercepts these helper functions to allow stepping through them when debugging. The legacy import from '@storybook/testing-library' is also acceptable but no longer recommended.

storybook/test package location

Storybook provides an instrumented version of testing library in the storybook/test core package. This package was formerly available as the @storybook/testing-library library.

Play function parameters: canvas vs canvasElement

The play function receives a canvas parameter with built-in testing-library-like query methods (such as getByLabelText), and a canvasElement parameter which is the raw DOM element. Use canvas directly for queries: play: async ({ canvas }) => { await canvas.getByLabelText('Submit').click(); }. The within function transforms canvasElement to have query methods, but should NOT be used with canvas since canvas already has those methods.

Do not use within(canvas)

Do not wrap the canvas parameter with the within function, as this is redundant and will cause an error. The canvas parameter already has query methods built-in. Only use within if working directly with canvasElement: within(canvasElement).

Story assertions prefer role and label-based queries

In play functions, assert the visible outcome of interactions such as text changes, aria state, enabled/disabled status, class or state changes, and emitted events. Prefer role-based and label-based queries for assertions.

Mock callback functions with fn and verify calls in play function

When passing fn functions as args for callback functions, add a play function that interacts with the component and asserts whether the callback function was actually called.

Give your agent this brain