Huge News!Announcing our $40M Series B led by Abstract Ventures.Learn More โ†’
Socket
Sign inDemoInstall
Socket

@storybook/addon-interactions

Package Overview
Dependencies
Maintainers
30
Versions
1018
Alerts
File Explorer

Advanced tools

Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

@storybook/addon-interactions

Automate, test and debug user interactions

  • 7.0.0
  • Source
  • npm
  • Socket score

Version published
Weekly downloads
3.6M
increased by6.39%
Maintainers
30
Weekly downloads
ย 
Created

What is @storybook/addon-interactions?

The @storybook/addon-interactions package is an addon for Storybook that allows developers to test and debug user interactions and play functions within their stories. It provides tools to simulate user events, debug play functions, and track the state of interactions over time.

What are @storybook/addon-interactions's main functionalities?

Simulating user interactions

This feature allows developers to simulate user events such as clicks, typing, and more within their stories. The code sample demonstrates how to simulate a click event on a button with the text 'Click me' using the `userEvent` object from '@storybook/testing-library'.

import { userEvent, within } from '@storybook/testing-library';
export const MyStory = {...};
MyStory.play = async ({ canvasElement }) => {
  const canvas = within(canvasElement);
  await userEvent.click(canvas.getByRole('button', { name: /click me/i }));
};

Debugging play functions

This feature enables developers to debug their play functions by using assertions to test the results of interactions. The code sample shows how to use `expect` from '@storybook/jest' to assert that an `onClick` handler was called during the play function execution.

import { expect } from '@storybook/jest';
export const MyStory = {...};
MyStory.play = async ({ args }) => {
  // Simulate interactions and check the results
  expect(args.onClick).toHaveBeenCalled();
};

Tracking interaction state

This feature provides a way to track the state of interactions over time. Developers can use `useAddonState` from '@storybook/addons' to get and set the state within their play functions. The code sample illustrates how to set a state indicating that an element was clicked.

import { useAddonState } from '@storybook/addons';
export const MyStory = {...};
MyStory.play = async () => {
  const [interactionsState, setInteractionsState] = useAddonState('interactions', {});
  // Update the state based on interactions
  setInteractionsState({ clicked: true });
};

Other packages similar to @storybook/addon-interactions

Keywords

FAQs

Package last updated on 31 Mar 2023

Did you know?

Socket

Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.

Install

Related posts

SocketSocket SOC 2 Logo

Product

  • Package Alerts
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap
  • Changelog

Packages

npm

Stay in touch

Get open source security insights delivered straight into your inbox.


  • Terms
  • Privacy
  • Security

Made with โšก๏ธ by Socket Inc