CtrlK
BlogDocsLog inGet started
Tessl Logo

tessl/npm-storybook--addon-backgrounds

Deprecated Storybook addon that throws migration errors directing users to the new package structure in Storybook 9.0

86

1.08x
Overview
Eval results
Files

rubric.jsonevals/scenario-4/

{
  "context": "This criteria evaluates how well the engineer uses Storybook's Play Functions and Interaction Testing capabilities to test a registration form component. The evaluation focuses on proper usage of @storybook/test utilities including userEvent for simulating interactions, expect for assertions, and the play function pattern for automated testing.",
  "type": "weighted_checklist",
  "checklist": [
    {
      "name": "Play function usage",
      "description": "Uses play function in story to define automated interactions and tests. The play function should be properly defined as an async function that receives context containing canvasElement or other context properties.",
      "max_score": 15
    },
    {
      "name": "Canvas element access",
      "description": "Properly accesses the canvas element from the play function context (context.canvasElement or destructured { canvasElement }) and uses it to scope queries, ensuring tests are isolated to the story's component.",
      "max_score": 10
    },
    {
      "name": "Testing Library queries",
      "description": "Uses Testing Library queries (e.g., screen.getByRole, screen.getByLabelText, within().getByRole) from @storybook/test to locate form elements for interaction. Should use appropriate query methods like getByRole, getByLabelText, or getByPlaceholderText.",
      "max_score": 15
    },
    {
      "name": "userEvent interactions",
      "description": "Uses userEvent from @storybook/test to simulate user interactions such as typing into input fields (userEvent.type) and clicking buttons (userEvent.click). Should properly await async userEvent methods.",
      "max_score": 20
    },
    {
      "name": "Expect assertions",
      "description": "Uses expect from @storybook/test to make assertions about component behavior, such as checking element states, text content, visibility, or disabled states. Should include multiple relevant assertions.",
      "max_score": 20
    },
    {
      "name": "Input validation testing",
      "description": "Tests form validation behaviors by simulating invalid inputs (e.g., invalid email format, short password) and asserting that appropriate error messages are displayed using expect assertions.",
      "max_score": 10
    },
    {
      "name": "Button state testing",
      "description": "Tests that the submit button state changes appropriately (disabled when fields are empty, enabled when filled) by using expect assertions to check the disabled property or aria-disabled attribute.",
      "max_score": 5
    },
    {
      "name": "Success flow testing",
      "description": "Tests the complete submission flow by filling in valid form data, clicking submit, and asserting that a success message appears or that the onSubmit callback was called.",
      "max_score": 5
    }
  ]
}

Install with Tessl CLI

npx tessl i tessl/npm-storybook--addon-backgrounds

tile.json