TypeSpec、Orval、Storybook を使ってフロントエンドのモック生成を自動化する
はじめに フロントエンド開発において、効率的かつ一貫性のあるモック生成は非常に重要です。本記事では TypeSpec、Orval、Storybook の 3 つのツールを使用して自動生成でモックを実現する方法を紹介します。 TypeSpec は、大規模な API を提供するために Microsoft が開発し、使用している新しい API 記述言語です。 Orval は、OpenAPI 仕様から TypeScript のクライアントコードを生成するツールです。これにより、最新の API 仕様に基づいたクライアントコードを常に保持し、API との通信がスムーズに行えるようになります。 Storybook は、コンポーネントを独立して開発・テストするためのインタラクティブなツールです。コンポーネントの見た目や動作を個別に確認できるため、UI の一貫性を保ちながら効率的に開発を進めることができます
Vitest Browser Modeがアツい
Background これまでVitestでコンポーネントのテストを行う時は、jsdom や happy-dom を使ってブラウザ環境を偽装していました。しかし、偽のブラウザ環境を使うことは多くの問題があり、また開発者はテスト以外でどこにも存在しない環境を作り上げるという不毛な作業が必要でした。 この問題を解決するために、Playwright や Cypress などのテストフレームワークは Component Test をサポートしています。しかし、UnitテストでPlaywrightやCypressを使うのは少々Fatであり、Reactのhooksなどのテストをすることができません。 Vitest Browser Modeを使用することで、Vitest上でComponent Testが可能となり、これらの問題を解決できます。 Installation Browser ModeのSetu
Automated Test-Case Reduction
Last time, we saw how deleting stuff from a test case can be an easy and fun route to the root cause of a bug. It’s less easy and less fun when the test cases get big. The inner loop of test-case reduction can get old quickly: delete stuff, run the special command, check the output to decide whether to backtrack or proceed. It’s rote, mechanical, and annoyingly error prone. Let’s make the computer
プロパティベーステストライブラリを作ってみた（ステートフルテスト編）
前回の 「プロパティベーステストライブラリを作ってみた」 の続きです。先日ステートフルテストを実装したので、その過程で得られた知見などを紹介したいと思います。 なお、本記事ではステートフルテストの学習を目的としません。ステートフルテストについて学びたい方は 実践プロパティベーステスト をぜひ読んでください。 おことわり この記事の説明は拙作のkiri-checkをベースにしています。kiri-checkのステートフルテストはScalaCheckなどのメジャーなライブラリを参考にしており、他のライブラリと大きな違いは少ないはずです。 kiri-check独自の要素はできるだけ作らないようにしていますが、開発言語(Dart)の違いもあって他のライブラリを完全に模倣するのは難しい面があります。ステートフルテストを試す際は、お使いのライブラリのドキュメントを優先してください。 ステートフルテストと
テストコード品質を高めるためにJS向けMutation Testingライブラリ・Strykerを実戦導入してみた
はじめに 株式会社hitocolorのKanonとしてはお初にお目にかかります。実は2024年2月からhitocolor様に副業先としてジョインさせていただいてます。 hitocolor様ではkokoroeというeラーニングサービスの開発をお手伝いしています！ hitocolor様にjoin後、最初に着手した本格的な案件が今回の記事で書くStrykerの導入です。 Stryker自体は本業[1]の方の社内勉強会で登場したTOPICSで、その時から関心を持っていました。 本業の方ではそれよりも優先度の高いタスクがたくさんだったので導入の目処がなかったのですが、hitocolor様の方で提案したところ「いいね！」とおっしゃっていただき導入する運びになりました。 そして導入にあたっていろいろやったことを、「せっかくなので記事として公開してみよう！」とお話をいただき今に至ります。 Mutation
第804回 mininetでお手軽ネットワークテスト環境を構築する | gihyo.jp
3月も半ばになり、暖かい日も増えてきました。これだけ暖かくなってくると、ちょっとしたアプリで少し特殊なネットワークフレームを流したり、普段使わないネットワークプロトコルを試したくなりますよね。でも本番環境でそれをやってしまうと、変質者としてしかるべき場所に通報されてしまいます。そこで今回は他人に迷惑をかけずに隔離されたネットワークテスト環境を構築できる「mininet」を使って、お縄にかからないようにしてみましょう。 Open vSwitchとネットワーク名前空間で気軽にテスト環境を構築する Linuxカーネルには「ネットワーク名前空間（netns）」という機能があります。これはホストや他のコンテナから隔離された環境でネットワークインターフェースを作成し、操作できるようになる仕組みで、特にLinuxのコンテナ系ツールで使っている基礎技術のひとつです。 Ubuntuだと「ip netns」コ
APIクライアント「Insomnia」で始める、チーム開発効率化 - JX通信社エンジニアブログ
JX通信社の CTO の小笠原(@yamitzky)です。本日は、最近社内で検証している API クライアントの「Insomnia」や、Insomnia を活用したチームでの API 開発の効率化についてご紹介します。 Insomnia とは Insomnia は、オープンソースの API クライアントです。API 通信を GUI で直感的に検証・保存できる、というのが最も基本的な機能です。似たようなツールだと Postman などが有名だと思います。 insomnia.rest Insomnia は一般的な REST API だけでなく、GraphQL や gRPC の API にも対応したツールです。JX通信社では、NewsDigest や FASTALERT などのサービスで GraphQL を活用しているため、GraphQL にネイティブ対応しているのは非常に便利です。 Insom
PostmanがいらなくなるかもしれないVSCodeの拡張機能Thunder Clientがすごい
VSCodeの拡張機能でGUIベースのHTTPクライアントThunder Clientを試してみたらすごかったので紹介します。 Postmanのコレクションをインポートして使える Thunder ClientはPostmanのコレクションをエクスポートしたJSONをインポートすることができます。 Thunder ClientにインポートしたいコレクションをPostmanの"Collections"で選択します。 メニューから"Export"を選択し、コレクションを保存します。 VSCodeのアクティビティーバーから"Thunder Client"を選択します。 サイドバーにThunder Clientが表示されるので"Collections"をクリックします。 "filter collections"の横のメニューをクリックします。 "Import"をクリックして先程Postmanでエクス
ネットワークが劣悪な環境を再現する方法
目的 アプリケーションが通信に失敗した際のテストを行いたい 例. 「通信に失敗した場合に再取得ボタンが表示されること」など 方法1. Chrome DevTools を使う https://developer.chrome.com/docs/devtools/network/reference?hl=ja#throttling 任意の設定を追加して使用することができる メリット PCとモバイルデバイスの両方で使用可能 新規にアプリケーションをインストールする必要が無い デメリット パケロス率などを設定できない Android, iOS のネイティブアプリでは使用できない 方法2. Network Link Conditioner を使用する Network Link Conditioner は Apple が提供しているネットワークユーティリティツール 使用手順等は以下のサイトが分かりやす
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
GitHub - growthbook/growthbook: Open Source Feature Flagging and A/B Testing Platform
GitHub - grandizzy/foundry-rari-hack
GitHub - GitbookIO/gitbook: 📝 Modern documentation format and toolchain using Git and Markdown
https://twitter.com/optimizoor/status/1771428371123368396
googletest - Google C++ Testing Framework - Google Project Hosting
GitHub - tc39/test262: Official ECMAScript Conformance Test Suite
teleporter-starter-kit/src/x-erc721-bridge at main · ava-labs/teleporter-starter-kit
GitHub - usebruno/bruno: Opensource IDE For Exploring and Testing Api's (lightweight alternative to postman/insomnia)
https://twitter.com/hackthedefi?utm_source=substack&utm_medium=email
GitHub - coinbase/smart-wallet
GitHub - wevm/frog: Framework for Farcaster Frames 🐸