概要 初Atomic Designを導入して開発をしてて、どこにどうやってテスト書けばいいんだっけ? という旨の備忘録です。 仕様言語とかツールとか TypeScript React+Redux redux-saga Jest AtomicDesign ※Atomic Designの説明はしません(Atomic Designの説明はこちらが分かりやすいです) ※超初歩&限定的な内容な気がするので、書いてないメソッドやパターンについては適宜調べていただけると嬉しいです 概要 Jestを使います。 やること インタラクションテスト ロジックテスト テスト対象 AtomicDesignにより分類された各コンポーネント 本記事での例題はatomsのButton インタラクションテストする Reducer ロジックテストする 対象外 middleware 別途書く予定です Jestって? 公式HP
import React from 'react'; class App extends React.Component { getWidthFromDiv() { const computedStyle = window.getComputedStyle(this.refDiv); const widthInString = computedStyle.getPropertyValue('width'); const widthInInt = parseInt(widthInString); console.log("div.width:", widthInInt); console.log("window.getComputedStyle(div):", computedStyle); return widthInInt; } getRFromCircle() { const comp
テストを書くときにprotected,privateなプロパティを書き換えたいときがあります。 でも、なかなかそらで書けないのです。僕は。 だから、自分への戒めとして書いておきます。 (そもそもアクセスできないテストってどうなの、、、ってのはありますが、、、) リフレクションはこう!こう書く!!覚えろ!自分!! $reflection = new \ReflectionClass($Mailer); $property = $reflection->getProperty('oauth'); $property->setAccessible(true); $property->setValue($Mailer, true); $this->assertTrue($Mailer->getOAuth());
今回は技術Tipsではなく、個人的に試していて壁にぶち当たったのでアドバイスを 誰かから貰えればいいなと思い、記事にしています。 はじめに 環境 ・一般共有不可、SSOを挟んでログインする必要のあるG Suite ・Google ドライブのドライブFileStreamなどインストール不可 ・GASにて、doPost()で受け取ったデータをドライブに保存するウェブアプリ つまり、未ログインの状態から何をするにもログインが求められるという環境だ。 やっていること PCで生成したデータ(JSONなり、CSVなり)を上記G Suiteの環境のドライブにアップロードするべく、GAS製のウェブアプリへpostで通信。 また、これを自動化。 経緯 元々はPhantomJSを使って上記を実現していたのだが、Chromeが正式にヘッドレスモードを実装したこと、それにともないPhantomJSが開発終了したこ
やりたい事 前回の、単体テストで開始時にモックサーバを起動し、終了時に停止する - Qiita では json-server をライブラリとして使ってサーバを起動・終了する手順を書きました。 json-server はコマンドラインからの実行もできるので、そちらを利用した書き方です。 前回の記事は、mocha 単体では実行できたのですが mocha-webpack を使った時に、うまく動かなかったので、そういう場合の回避策として調べました。 どうやるか child_process.spawn を使ってコマンドを (background で) 起動し、標準出力への出力内容から起動したかどうかを確認します。 終了は、起動時の PID を記録しておき、それを kill することで実現します。 実装例 import * as child_process from "child_process";
やりたい事 JavaScript の単体テストで、テスト対象のコードがサーバと通信して JSON 形式で受信を受け取る場合、サーバと通信する部分を置き換えてテストコード内部で完結するようにしたい。 しかし、通信する部分をモックで置き換えるのはしたくないので、テスト用に JSON を返すサーバを立てたい、そしてサーバは開始時に起動、終了時に停止させたい。 どうやるか json-server は こんな感じに サーバの実装をすればできる。 json-server は、パスと返る JSON の内容をコードから指定できるので、テストケースに合わせてテストコード内で修正できる。 実装例 var jsonServer = require("json-server"); var assert = require("assert"); var http = require("http"); describ
概要 Vue.js+Vuexを利用したカウンターアプリのテストクラスを作成します。テストツールはJestを使用。 この記事では、カウンターアプリのテストとして適切であるかという点よりも、Vue.js+Vuexのテストのサンプルとなるように意識して書いています。 これからテストを書こうと思っている方の参考になれば幸いです。 テスト対象 今回のテストの対象となるコンポーネントとカウンターモジュールです。 Counterコンポーネント カウントされる数値とincrement!と decrement!ボタンが表示されています。 <template> <div> <p>{{ counter }}</p> <button @click="increment">increment!</button> <button @click="decrement">decrement!</button> </div
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く