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
Safetest is a powerful UI testing library that combines Playwright, Jest/Vitest, and React for a powerful end-to-end testing solution for applications and component testing. With Safetest, you can easily test the functionality and appearance of your application, ensuring that it works as expected and looks great on all devices. Safetest provides a seamless testing experience by integrating with yo
テストコード品質を高めるために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 tha
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 やめました"という声をたまに聞くのですが「デザインシステム的に捨てていいの？」と思うこともあるので、とくに要望がなければ、筆者は「
実装例から見る React のテストの書き方 - Cybozu Inside Out | サイボウズエンジニアのブログ
こんにちは！フロントエンドエキスパートチームの@nus3_です。 kintone のフロントエンド刷新プロジェクト（フロリア）では、品質を保ったまま開発を加速させるためにフロントエンドのテストを積極的に行っています。 今回はそんなフロントエンドのテストの実装例をいくつか紹介します。この記事がフロントエンドのテストを行う上での参考になれば幸いです。 テストに使用する主なパッケージ コンポーネントのテスト 補足: Testing Library の記法をチェックしてくれるeslint-plugin-testing-library カスタムフックのテスト 補足: React v18 では @testing-library/react の renderHook を使う 参考リンク 色々なテスト事例 setTimeout を使うコンポーネントのテスト 補足: Storybook の story を使
第1回 学習用テスト ～学びを自動テストとして書く～ | gihyo.jp
こんにちは、今回からコラムを書かせていただく和田（t_wada）と申します。 現代のソフトウェア開発の対象領域は、広く複雑で不確実なものになりました。この連載では、自動テスト（Automated Test）に関わるトピックを中心に、ソフトウェア開発の荒野を生き抜いていくためのプログラミングやソフトウェアエンジニアリングの考え方を書いていきたいと考えています。 初回のテーマは、学習や調査が目的のテストコードを書くテクニック「学習用テスト」（Learning Test）です。では、よろしくお願いします。 二兎を追わない プログラミングのコツに、「一度に2つ以上のものを相手にしないこと」があります。 未知の技術を使って問題を解決するコードを書こうとするとき、私たちは2つのものと同時に戦うことになります。未知の技術そのものと、その技術を使った問題解決の2つです。2つ以上のものを同時に取り扱おう
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
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
Mailtrap
