wagmi hooks 🤝 Storybook interaction testing

Related tags

Learning resource wagmi-storybook-demo
Overview

A quick demonstration of how Storybook decorators can be combined with a mocked wagmi client to facilitate automated interaction testing for web3-enabled components.

Created with RainbowKit 🌈 🧰

tl;dr - 👀 ./storybook/decorators.tsx and ./components/SignMessage.stories.tsx

Running the demo

  • run yarn install && yarn dev, then open http://localhost:3000
  • click Connect Wallet, connect your wallet, then click Sign Typed Data
  • sign the message and you will see the signature and recovered signer address (i.e. your connected wallet)
  • terminate yarn dev, run yarn storybook, then open http://localhost:6006 and navigate to the Sign Typed Data demo story
  • open the Interactions tab, and the test framework will automatically click the button to sign the typed data
    • this happens very quickly, so it looks as though the page loads with the signature filled. You can click on each step of the interaction to see how the component appeared at that point in the test
  • the data is signed using a wallet which is created in the test and passed into the wagmi client
You might also like...

Javascript-testing-practical-approach-2021-course-v3 - Javascript Testing, a Practical Approach (v3)

Javascript-testing-practical-approach-2021-course-v3 - Javascript Testing, a Practical Approach (v3)

Javascript Testing, a Practical Approach Description This is the reference repository with all the contents and the examples of the "Javascript Testin

Nov 14, 2022

AREX: It is a “Differential Testing” and “Record and Replay Testing” Tool.

AREX: It is a “Differential Testing” and “Record and Replay Testing” Tool. Test restful API by record, replay and stub request/response. Differential

Nov 1, 2022

An implementation of Interaction Nets in JavaScript.

Interaction Nets An implementation of Interaction Nets in JavaScript. Use S-expression as overall syntax. Use Forth-like postfix stack-based syntax to

Dec 23, 2022

high performance、complex interaction table

功能描述 1、高性能、满足复杂交互的编辑表格 2、基于: antd4(https://ant.design/index-cn) ag-grid(https://www.ag-grid.com/) 3、基于原生ag-grid 的API进行封装 一、主要功能 将按下列顺序逐步迭代 1、通用编辑功能 🚧

Feb 15, 2022

Elrond blockchain CLI helper tools - interaction with APIs, smart contracts and protocol

Buildo Begins 👷 Meet Buildo. He is here to help you start creating in the Elrond blockchain ecosystem. Here is where everything begins. I'm going on

Dec 30, 2022

A simple library to view large images up close using simple mouse interaction, and the full screen.

A simple library to view large images up close using simple mouse interaction, and the full screen.

Intense Images A stand alone javascript library for viewing images on the full, full screen. Using the touch/mouse position for panning. Here's a demo

Dec 31, 2022

The Easel Javascript library provides a full, hierarchical display list, a core interaction model, and helper classes to make working with the HTML5 Canvas element much easier.

EaselJS EaselJS is a library for building high-performance interactive 2D content in HTML5. It provides a feature-rich display list to allow you to ma

Dec 29, 2022

High performance and SEO friendly lazy loader for images (responsive and normal), iframes and more, that detects any visibility changes triggered through user interaction, CSS or JavaScript without configuration.

lazysizes lazysizes is a fast (jank-free), SEO-friendly and self-initializing lazyloader for images (including responsive images picture/srcset), ifra

Jan 1, 2023

A robust, minimal-server-interaction API for peer routing in the browser

A robust, minimal-server-interaction API for peer routing in the browser

Robust, minimal-server-interaction peer routing in the browser What is this? Membrane takes signalling to the browser, creating living peer networks.

Jan 6, 2023
Comments
  • Question: Is there additional setup required for contract transactions?

    Question: Is there additional setup required for contract transactions?

    Hey! This example is super helpful. I'm able to get it working locally with my project, but hitting snags when trying to write to a contract. Is there additional set up required for mocking that out? FWIW I have the contract deployed and running locally w/ hardhat.

    When using something like useContractWrite I'm getting errors about "missing provider", but afaict it's configured correctly and I get a provider back when using useProvider.

    Error: missing provider (operation="sendTransaction", code=UNSUPPORTED_OPERATION, version=abstract-signer/5.5.0)
    opened by derekr 5
Owner
Mike Ryan
Mike Ryan
GitHub
📡Usagi-http-interaction: A library for interacting with Http Interaction API

?? - A library for interacting with Http Interaction API (API for receiving interactions.)

Rabbit House Corp 3 Oct 24, 2022
Buidling my first web3 app with solidity, wagmi!

Basic Sample Hardhat Project This project demonstrates a basic Hardhat use case. It comes with a sample contract, a test for that contract, a sample s

Rohit Mishra 3 Jun 15, 2022
A testing focused Remix Stack, that integrates E2E & Unit testing with Playwright, Vitest, MSW and Testing Library. Driven by Prisma ORM. Deploys to Fly.io

Live Demo · Twitter A testing focused Remix Stack, that integrates E2E & Unit testing with Playwright, Vitest, MSW and Testing Library. Driven by Pris

Remix Stacks 18 Oct 31, 2022
An extension of DOM-testing-library to provide hooks into the shadow dom

Why? Currently, DOM-testing-library does not support checking shadow roots for elements. This can be troublesome when you're looking for something wit

Konnor Rogers 28 Dec 13, 2022
Using Storybook for Pixi.js graphics development

Storybook for Pixi.js Using Storybook for Pixi.js graphics development This project includes: Storybook Pixi.js Pixi Viiewport Background Often conven

Jason Sturges 5 Mar 9, 2022
Storybook add-on to enable SWC builds.

storybook-addon-swc Storybook addon that improves build time by building with swc. ?? Examples webpack4 webpack5 ?? Installation $ npm install -D stor

Karibash 49 Dec 20, 2022
Use macro-based Nunjucks components with Eleventy and Storybook.

eleventy-nunjucks-storybook Use macro-based Nunjucks components with Eleventy and Storybook. Links See Using Storybook with Nunjucks components in Ele

Ashur Cabrera 11 Dec 15, 2022
A simple boilerplate using NextJS, Typescript, Tailwind, Jest, Storybook and more.

This is a Next.js boilerplate using TailwindCSS and other cool stuff. Most of this is taught in this course. What is inside? This project uses lot of

React Avançado 26 Dec 4, 2022
`raaghu-mfe` is an opensource micro front end framework built on top of `raaghu-elements`, Bootstrap 5 and Storybook offering highly customizable UI components and built-in pages

`raaghu-mfe` is an opensource micro front end framework built on top of `raaghu-elements`, Bootstrap 5 and Storybook offering highly customizable UI components and built-in pages. Raaghu mfe can be used as a base to build complex components and UI layouts whilst maintaining a high level of reusability,flexibility with ease of maintenance.

Wai Technologies 160 Dec 30, 2022
Storybook Addon Root Attributes to switch html, body or some element attributes (multiple) at runtime for you story

Storybook Addon Root Attributes What is this This project was inspired by le0pard/storybook-addon-root-attribute The existing library received only on

정현수 5 Sep 6, 2022