Storybookの「インタラクションテスト」でフロントエンドのテストをシンプルに管理する！｜SHIFT Group 技術ブログ
はじめにこんにちは。 株式会社SHIFTのブラッドフォード です。 ついに Storybook の v7.0 が正式リリースされましたね！ 早速利用していますが、設定や記法がシンプルになり使いやすくなりました。 Storybook といえば、コンポーネント管理を目的としたライブラリですが、最近はテストもこなせるようになりました。 公式では「インタラクションテスト」という名前で紹介されています。 今回はこの「インタラクションテスト」を使ったフロントエンドのテストを紹介します。 うまく活用できれば、単体テストや結合テストは「インタラクションテスト」に集約できるかもしれません。 執筆者プロフィール：ブラッドフォード 株式会社SHIFT DAAE部所属のフロントエンドエンジニアです。 最近は keyball を使って仕事しています。 おさらい｜フロントエンドのテストまずはフロントエンドのテストにつ
GitHub - storybookjs/eslint-plugin-storybook: 🎗Official ESLint plugin for Storybook
You signed in with another tab or window. Reload to refresh your session. You signed out in another tab or window. Reload to refresh your session. You switched accounts on another tab or window. Reload to refresh your session. Dismiss alert
Zero-config Storybook
Storybook’s greatest strength is also its weakness. Thousands of leading teams from Airbnb to BBC choose Storybook because it works with diverse frameworks and tech stacks. Unfortunately, the abundance of configuration options can make Storybook tough to set up. As maintainers, our goal is to get you setup quickly while preserving robust config options for advanced teams. That’s why I’m excited to
module.exports = (baseConfig, env, defaultConfig) => { //nuxt.jsの'@'や'~'の読み込み defaultConfig.resolve.alias['@'] = rootPath; defaultConfig.resolve.alias['~'] = rootPath; // addon-storysourceの設定はここから defaultConfig.module.rules.push({ test: /\.stories\.jsx?$/, loaders: [require.resolve('@storybook/addon-storysource/loader')], enforce: 'pre', }) return defaultConfig; }
How to remove preview body padding in SB 6.0? · Issue #12109 · storybookjs/storybook
You signed in with another tab or window. Reload to refresh your session. You signed out in another tab or window. Reload to refresh your session. You switched accounts on another tab or window. Reload to refresh your session. Dismiss alert
お、pullreqきてる。コンポーネント生やしたのかなるほど。storybookにも追加されてるな。 ...ちらっとでいいからstorybookの画面でも触りたいなぁ。 TL;DR webアクセスをIP制限したS3バケットを用意し、pullreqごとにgithub actionsでstorybookをビルド・S3にアップ・pullreqにURLをコメント、という仕組みを作った やりたいこと pullreqごとにstorybookの画面を見たい テスト環境にアップしてもらったり、checkoutしてビルドして、とかは面倒 プレビューはインターネットに公開したくない（アクセス制限したい） ちらっと見れればよいのです。pullreqにスッと置かれたリンクをおもむろに押して、軽く触ってみて、うんうん、と頷くくらいがよいのです。 なお成果物のリポジトリはこちら: https://github.com
これはなに pnpm workspaces で構築した monorepo プロジェクトで Storybook による UI カタログを構築するまでの手順をまとめたものです。 2023 年 4 月 3 日に Storybook v7 がリリースされました。このメジャーアップデートにより pnpm が正式にサポートされ、monorepo 構成下でも正常に動作するようになりました。 Storybook 6.5 でも pnpm + monorepo 構成にて動作させることは可能でしたが、 v6.5 は TypeScript 5.x を正式にサポートしておらず、ビルドに失敗することがあります。これを解消するには Storybook を v7 にマイグレーションする必要があります。 本稿では、必要な node モジュールをイチから手動でインストールしてセットアップする手順と、既存の Storybook
Storybookとは、一言で表すならばコンポーネント見本市。コンポーネント志向が絶賛推し進められているフロントエンド界隈にて注目度が上がり続けている（のではないかと予想）される期待の開発ツールなのである。 どんな機能を持っているのかというと、作ったコンポーネントを単体で整列表示することができる。まさに見本市。 大雑把に言ってしまえばそれだけである。しかしフロントエンド開発を一度でも経験したことがある壮年層ならもうすでにピンと来ているに違いない。 そう、画面全体を表示することなく、目的の箇所まで画面操作をすることなく、作ったコンポーネントを、好きなプロパティを代入して、単体で表示することができるのである。 公式サイトに利用イメージがあるのでそちらも参考に。 ただいくつか問題があり、一番大きなものはReactを想定して作られていること。Reactを使っているなら何も問題はないが、俺はVueを
Loading...
Storybook の Component Story Format 3.0 では新機能として play() 関数が追加されました。 play() 関数は Storybook 上でユーザーのクリックやフォーム入力のようなインタラクションな操作を表現できます。 以前は composeStories() 関数により Storybook 上で作成したストーリーを Jest で再利用する方法を書いたのですが、どうやら Storybook のみで完結してテストを実行できるようですのでこちらを試してみます。 Vite プロジェクトの作成 まずは以下コマンドで Vite プロジェクトを作成します。 $ npm init vite@latest my-vue-app -- --template vue-ts $ cd my-vue-app $ npm install Storybook のインストール 続
How to actually test UIs
Testing UIs is awkward. Users expect frequent releases packed with features. But every new feature introduces more UI and new states that you then have to test. Every testing tool promises “easy, not flaky, fast”, but has trade-offs in the fine print. How do leading front-end teams keep up? What's their testing strategy, and what methods do they use? I researched ten teams from the Storybook commu
Lost Pixel
Visual Testing for Your FrontendHolistic, fast & convenient tests that come at almost no writing and maintenance costs. Your existing Storybook, App, and Marketing Page is your testing suite.
こんにちは、エンジニアリングマネージャーの岡村です。 社員全員テレワークの環境にも慣れてきて、ワークフロー改善と共にREADYFORの開発環境も日々改善しております。 概要 StorybookをNetlifyへホスティングすることで、PR単位でデプロイされるためデザインの確認・レビューがとても楽になったので紹介です。 導入の背景 READYFORのアーキテクチャ上もっとも有効だった ざっくりREADYFORのフロントエンドアーキテクチャはReact On RailsとElements(UI Library)で構成されており、デザイン手法にAtomicDesignが採用されています。 Elements(UI Library)はDesignSystemの一部として構成され、ドメインに依存しないコンポーネントはElementsへ開発しています。 そのため、確認をする際にはElementsのコンポ
Add Storybook to your Nuxt Applications.Welcome to @nuxtjs/storybook module documentation to help you set up Storybook in your Nuxt application in seconds, with many goodies 🍬.
サイトの規模やスケジュールに応じてスタイルガイドを作成した方が効率良く進められるケースもあるかと思います。スタイルガイドを作成するメリットにはデザインの統一、テストや運用の効率化などが挙げられます。 とくにスタイルガイドを用いてプロジェクトに関わるメンバー（ディレクター、エンジニア、デザイナー）間の認識を共通化することはプロジェクト進行において非常に重要な意味を持ちます。 スタイルガイドとは、デザインする前の要素やグラフィック、デザイナーやエンジニアが従うべきルールなどを集めたものです。スタイルガイドがあれば、バラバラのWebサイトの部品に一貫性を持たせて、最終的に一体感のある体験を作り出すことができます。 引用：Webデザインのスタイルガイドの作り方 ただし、スタイルガイド導入にはメリット、デメリットがあります。導入するべきプロジェクトなのかは見極めが必要になります。 質の高いスタイルガ
Creating and maintaining a robust library of components can quickly become a tiring task. On my current project, using Storybook became a great way to make sure our components were reusable and to detect bugs faster. I will describe in this article how we integrated Storybook in our workflow. First, how to install Storybook, then how to efficiently use Knobs and Storyshots add-ons, and finally sha
Storybookとは Storybookとは保守性の高いUIコンポーネント(スタイルガイド)を素速く簡単に構築するためのツール。 オープンソースなので商用でも無料で使用することが可能。 Storybook for HTMLといってもHTMLだけではなくCSSやJavaScriptのスタイルガイドも構築できる。 昔はFractal、sc5-styleguide、kss-nodeなどがよく使用されていたが、2020年現在では新規のプロジェクトの場合はStorybookが使用されることが多い。 React、Vue.js、Angular用などがあるが、この記事で説明するのは一番需要がありそうなHTML用のStorybook for HTMLのインストール手順と基本的な使い方。 Vue.jsなどの場合は公式サイトトップの右下のMADE FORのVueのリンク先にある説明手順に従ってインストールする
Angular Advent Calendar 2020 24日目の記事です。 Angular を使ってチーム開発するときに Storybook を使うと捗るという話です。今年8月に登場した Storybook 6.0 で大幅に使い勝手が良くなっているので、そこについても紹介します。 Storybook について 開発者が複数人いて、デザイナーもいる環境だとします。昨今はデザインシステムの登場で、デザインの時点でコンポーネントが意識されていることもあります。そうなってくると、コンポーネント単位で見た目を確認したいという需要が出てきます。そこで役に立つのが Storybook です。 Storybook は公式には「UIコンポーネント開発ツール」と表現されています。言葉で説明より先に、まずは Docs の Get Started > Examples > Storybook Design S
Vue CLI 3 x Atomic Design × Storybookを使ったコンポーネント開発を試す【環境構築編】 - えんぴつぶろぐ
はじめに 先日「Atomic Design ~堅牢で使いやすいUIを効率良く設計する」を読みました。 Atomic Design ~堅牢で使いやすいUIを効率良く設計する 作者: 五藤佑典出版社/メーカー: 技術評論社発売日: 2018/04/25メディア: 単行本（ソフトカバー）この商品を含むブログ (1件) を見る こちらの本では、Atomic Designの考え方だけでなく、ReactやStorybookを使った具体的な実装方法まで詳しく解説されています。 早速試してみたい！と思い、せっかくなのでVue.jsで試してみました。 まずは環境構築から始めます。 本当はComponent作成時のTipsについてをメインに書きたかったのですが、思ってたより長くなってしまったので分割して更新していきまます…。 はじめに Atomic Designとは Vue CLI 3とは Storybook
バックエンドエンジニアがフロントエンドを書く② 〜storybookをカスタマイズ〜 - Goalist Developers Blog
現プロジェクトでバックエンドを実装しているJPです。 前回の記事の続きで、storybookの基本的な部分をカスタマイズしていきたいと思います。 筆者の経験：CLIツールなどもあまり触ったことがない、フロントエンドの初心者 環境 ：macOS Sierra 前回の記事： developers.goalist.co.jp 今回やることは以下の通りです。 前回の作業のおさらい storybookの起動 自動生成されたコンポーネント コンポーネントの追加処理をカテゴリーごとに分ける どういうこと？ なぜ？ 手順 フォルダ構成を以下のように変更する 「my-app/.storybook/config.js」を編集する まとめ 前回の作業のおさらい storybookの起動 前回作成したプロジェクトにおいて、storybookを起動します。 $ cd my-app $ yarn run stor
2018-March-30 Welcome to Storybook 3.4 with the following key improvements: Polymer 2 support #2225 Angular and Vue storyshots #2564 Add image snapshots to addon-storyshots #2413 Multiple story hierarchies #2452 Addon-storysource: story source in addon pane #2885 Read on for more improvements, fixes, 1In addition, there are hundreds of dependency upgrades in the 3.4 release, so to see the details,
# ディレクトリ構成 # Storybook の設定ファイル .storybook ├── main.js └── preview.js # Storybook のデフォルトファイル # baseUrl が src ディレクトリの場合は /stories -> /src/stories /stories ├── Button.stories.tsx ├── Button.tsx ├── Header.stories.tsx ├── Header.tsx ├── Introduction.stories.mdx ├── Page.stories.tsx ├── Page.tsx ├── assets │ ├── code-brackets.svg │ ├── colors.svg │ ├── comments.svg │ ├── direction.svg │ ├── flow.svg │
Storybook駆動開発はいいぞ - Qiita
はじめに ＊こちらはオプトテクノロジーズの社内勉強会LT資料になります LT資料ってあえて書いたのは資料が短いので許してねという前置きです Storybookとは Storybook is a development environment for UI components. It allows you to browse a component library, view the different states of each component, and interactively develop and test components. 公式doc より引用 結局なによ ReactなどのViewライブラリで作成したコンポーネントを単独で描画して、見た目をカタログちっくに見れる画面作成のためのライブラリ。 コンポーネントにわたす状態を固定値で入れたりして見た目のコントロールを自由に
Chromaticを導入しました！
はじめに 半年くらい前にプロジェクトにStorybook及びChromaticを導入したのでその知見を今更まとめたいと思います。 Chromaticは開発者１人だけではなくエンジニアチーム全体、更にはデザイナーやPM/PdMみんなで使っていくことによってその効果が何倍にもなるツールです。Chromaticがどんなツールなのか、どうやって使うことができるのか、について書きたいと思います。 Chromaticとは何か？ ChromaticはStorybookをベースとしたUIテストツールです。Storybookのチームによって開発されており、フリーミアム型のサービスです。 簡単なイメージとしては、ローカルにあるStorybookをCDNにデプロイしたもの、みたいな感じです。 https://www.chromatic.com/docs/ より デプロイすることで同じStorybookをチームみ
こんにちは森田です。 タイトル通りですが React/Vue を使わない案件でも UIコンポーネントカタログの Storybook を使いたいことがあります。 そんな時は Storybook for HTML を使えば html ファイルもStorybookで導入することが可能です。 今回はStorybook for HTML の導入について説明させていただきます。 ちなみに、UIコンポーネントカタログにつきましては、弊社茶木の書いた記事が熱いので是非お読みいただきたいです。 Storybook for HTML とはIntroduction to Storybook for HTMLその名の通りですが HTML でも Storybook を使えるようにしたものです。 基本的に stories.js などの書き方は従来のものと変わりませんが、html ファイルを import して使うこと
はじめに Storybook の公式アドオンである Addon Docs は、5.3 から Vue(や Angular や Web Components)におけるコンポーネントドキュメントの自動生成機能がサポートされるようになりました。 これは、コンポーネントを指定するだけでその Props や Events, Slots の型やコメントがドキュメントとして生成できる、というものです。 この記事では、如何にして Vue 版のドキュメントが自動生成されているのか、またその仕組みを Storybook 以外で使うことについて説明します。 コンポーネントの情報抽出 ドキュメントを自動生成するには、まずどうにかしてコンポーネントの(Props 等)を取得、またそれらに対して書かれたコメントを抽出する必要があります(メタ情報の抽出)。 この工程をまるっと行ってくれるのが、Vue Styleguidi
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Nuxt.jsのstorybookを見やすくカスタマイズする
pullreq毎にprivateなstorybook(や静的webサイト)プレビューを作る
pnpm workspaces (monorepo) 上に Storybook 7.0 を導入する
Storybook for Vueのことはじめ
Storybook 単体でインタラクションテストを実施する
Storybookをホスティングしてレビューが爆速になった話 - READYFOR Tech Blog
Storybook Integration for Nuxt
Vue CLI と Storybookでスタイルガイドを作成しよう ｜ Tips Note by TAM
How to Use Storybook in a React Project
1分でわかるStorybook for HTML(スタイルガイドツール)の使い方
チーム開発に効く Angular x Storybook 6
Release v3.4.0 · storybookjs/storybook
Next.js + Tailwind CSS に Storybook を導入する方法 | fwywd（フュード）powered by キカガク
Storybook for HTML で React/Vue 以外の案件でもUIコンポーネントカタログを使う
Storybook for VueのDocs Addonの裏側: コンポーネントの自動ドキュメント生成について