Vitest公式になったeslint-plugin-vitestを導入して、適切なVitestのお作法を学んでみる
import vitest from "@vitest/eslint-plugin"; export default [ { files: ["tests/**"], // or any other pattern plugins: { vitest }, rules: { ...vitest.configs.recommended.rules, // you can also use vitest.configs.all.rules to enable all rules + // e.g. 'vitest/no-test-return-statement': 'error', + "vitest/max-nested-describe": ["error", { "max": 1 }] // you can also modify rules' behavior using optio
Storybook 8.2
Storybook is the component workshop behind the world’s top design systems (Carbon, Polaris, Fluent, Lightning, etc.). Accordingly, it is often associated with building and documenting atomic components for reuse. But UI components come in many sizes and shapes. For teams at Faire, Yoobic, and Monday.com, Storybook is the tool of choice for “product UI” such as shopping carts, dashboards, chat widg
［動画で解説］和田卓人の“テスト駆動開発”講座：第4回 ナントカテスト ―― ユニットテスト，単体テスト，機能テスト，結合テスト，受け入れテスト｜gihyo.jp
［動画で解説］和田卓人の“テスト駆動開発”講座 第4回ナントカテスト ―― ユニットテスト、単体テスト、機能テスト、結合テスト、受け入れテスト ニコニコ動画：https://www.nicovideo.jp/watch/sm2195489 前回、テストをDeveloper Testing、Customer Testing、QA Testingの3つに分類しました。ここまでで何か質問はありませんか？ 担当からの質問 「受け入れテスト」というのはCustomer Testなんですか？ はい、そうです。 テストというと、よく「○○テスト」という言葉を聞くと思います。たとえば「受け入れテスト」以外にも、「ユニットテスト」「単体テスト」「機能テスト」「結合テスト」など、いろんな何々テストという言葉があります。質問にお答えする前に、まずテストの分類に対する視点を整理しましょう。 テストの分類に
TypeSpec、Orval、Storybook を使ってフロントエンドのモック生成を自動化する
はじめに フロントエンド開発において、効率的かつ一貫性のあるモック生成は非常に重要です。本記事では TypeSpec、Orval、Storybook の 3 つのツールを使用して自動生成でモックを実現する方法を紹介します。 TypeSpec は、大規模な API を提供するために Microsoft が開発し、使用している新しい API 記述言語です。 Orval は、OpenAPI 仕様から TypeScript のクライアントコードを生成するツールです。これにより、最新の API 仕様に基づいたクライアントコードを常に保持し、API との通信がスムーズに行えるようになります。 Storybook は、コンポーネントを独立して開発・テストするためのインタラクティブなツールです。コンポーネントの見た目や動作を個別に確認できるため、UI の一貫性を保ちながら効率的に開発を進めることができます
Poku
🐷 What's Poku?A cross-platform test runner that brings the JavaScript essence back to testing. ⚡️ Quick Tutorials
GitHub - kolodny/safetest
Playwright Integration: Run your tests on real browsers using Playwright. Safetest automatically handles browser management, so you can focus on just writing tests. Screenshot diffing via jest-image-snapshot Video recording Trace Viewer Full control over network layer Powerful overrides for complex test cases Jest Integration: Safetest leverages the Jest test runner. Write your tests using familia
テストコード品質を高めるためにJS向けMutation Testingライブラリ・Strykerを実戦導入してみた
はじめに 株式会社hitocolorのKanonとしてはお初にお目にかかります。実は2024年2月からhitocolor様に副業先としてジョインさせていただいてます。 hitocolor様ではkokoroeというeラーニングサービスの開発をお手伝いしています！ hitocolor様にjoin後、最初に着手した本格的な案件が今回の記事で書くStrykerの導入です。 Stryker自体は本業[1]の方の社内勉強会で登場したTOPICSで、その時から関心を持っていました。 本業の方ではそれよりも優先度の高いタスクがたくさんだったので導入の目処がなかったのですが、hitocolor様の方で提案したところ「いいね！」とおっしゃっていただき導入する運びになりました。 そして導入にあたっていろいろやったことを、「せっかくなので記事として公開してみよう！」とお話をいただき今に至ります。 Mutation
Storybook’s Visual Tests addon enters beta
Update, March 12: Storybook 8 and Visual Tests addon are out now! Learn more in the Storybook 8 launch announcement or Visual Tests addon’s launch announcement. Storybook 8 introduces a totally new workflow for safeguarding your UI from unexpected visual changes through Storybook’s Visual Tests addon! Learn how it works and try the beta today. Why visual testing?The challenge of testing UI is that
Property-based Testing の位置付け / Intro to Property-based Testing
2023/12/20(水) https://findy.connpass.com/event/303813/
Minesweeper spoiled by AI
🤔"I do the brain-testing part for you"🎓 🙂"You do the luck-testing part"🤞
仕様書とテストを用いた「AI駆動開発」
数年前にAIを離れ現在はフロントエンドをやっているのですが、半年くらい前に思い切り引き戻されました。画像生成AIにおけるmidjourneyとstable diffusionの登場です。noteのCTO深津さんが記事を出したと思ったのも束の間、急速に進化を果たしました。 絵柄の固定・ポーズの指定・マシンスペックなど、日々さまざまな問題を解決しながら新たな技を身につけています。 しかし、同等かそれ以上に話題になっているのは大規模言語モデル(Large Language Model)かもしれません。ChatGPTが話題になった思ったら、BingやPerplexity,You.comなど大規模言語モデルを交えたサービスが次々と登場しました。 活用方法もたくさん見つけられており、私は特に以下の二つの記事が好きです。 「感情回路」の記事に入力(プロンプト)でここまで変わるのかと感動したことを覚えてい
マイクロソフト、フルマネージドな負荷テストサービス「Azure Load Testing」正式サービスとして提供開始
マイクロソフトはクラウド上で大規模な負荷テストを行えるフルマネージドな負荷テストサービス「Azure Load Testing」を正式サービスとして提供開始したことを明らかにしました。 外部に公開する予定のあるクラウドサービスでは、想定するユーザー数に対して適切なコンピューティングリソースが割り当てられているか、挙動に問題はないか、性能上の問題がある場合にはボトルネックがどこにあるか、などを本番開始前に調査する必要があります。 そのためには、あたかも実際に多数のユーザーがアクセスしてくるのと同じような状況を作り出さなくてはなりません。 Azure Load Testingは、そうした負荷の作成を作り出し、容易にテストできるようにしたものです。 上記の図にあるように、Azure Load TestingはApache JMeterのスクリプトを実行することで負荷を作り出し、それをエンドポイン
GitHub Next | TestPilot
TestPilot takes the pain out of writing unit tests. It uses GitHub Copilot's AI technology to suggest tests based on your existing code and documentation. Unlike many other tools, TestPilot generates readable tests with meaningful assertions, and it can iteratively improve its suggestions based on your feedback.
IDEにChatGPTを統合、「この関数のテストコードはどこ？」「XXXを実装するならどう書けばいい？」など、AIでコードと対話できる「qqbot」登場
IDEにChatGPTを統合、「この関数のテストコードはどこ？」「XXXを実装するならどう書けばいい？」など、AIでコードと対話できる「qqbot」登場 テキストから高度なイラストを生成するAIや、人間と自然な対話を可能にするAIが最近話題になっています。 この人間と自然な会話をするAIチャットの代表的なサービスであるChatGPTの派生サービス（Variant of ChatGPT）をVisual Studio CodeなどのIDEに統合し、開発中のコードについて「この関数のテストコードはどこ？」などと対話できる「qqbot」が登場しました。 開発したのはDan Robinson氏。 Introducing qqbot, a variant of ChatGPT that lives in your IDE. The cool thing about qqbot is that it k
私のフロントエンドディレクトリ構成・テスト観点 2022
近日連投していた Next.js 記事のサンプルコードを公開しました。このサンプルコードを元に、私のフロントエンドディレクトリ構成・テスト観点を紹介します（あくまで執筆現在の脳内アウトプットになりますのでご了承ください） フロントエンドディレクトリ構成の事情 タイトルの「フロントエンドディレクトリ構成」をさす「Components」のディレクトリ構成は、いつも悩みのタネです。このモジュールシステムは「デザインシステム観点・アクセシビリティ観点・フロントエンド実装観点」の 3 つの観点が混在するため事情が複雑です。どうせ作るのなら「デザイナー・フロントエンド」どちらの開発基盤にもなりえる、盤石なモジュールシステムを目指したいですよね。 "AtomicDesign やめました"という声をたまに聞くのですが「デザインシステム的に捨てていいの？」と思うこともあるので、とくに要望がなければ、筆者は「
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Storybookの実力をフル活用するChromatic
BugBug.io | Intuitive and Reliable Test Automation Tool | BugBug.io
サバンナ便り〜自動テストに関する連載で得られた知見のまとめ（2023年5月版）〜 / Automated Test Knowledge from Savanna 202305 edition
Datadogを利用したE2Eテストの活用事例紹介 - DMM inside
大規模レガシーテストを 倒すための CI基盤の作り方 / #CICD2023
