※スマホ対応はしてません。

タグ: 試験

JSDomのlocalStorageでSecurityErrorが出たら、URL指定で解決するかも。

カテゴリー: JavaScript

した。

エラーになるコード

const { JSDOM } = require('jsdom');
const sinon = require('sinon');

const dom = new JSDOM();
dom.window.localStorage.setItem('foo', 'bar');
// SecurityError: localStorage is not available for opaque origins

解決

new JSDOM() のところで、 url を適当に設定してやれば解決します。

const dom = new JSDOM('', { url: 'https://localhost' });

原因

件の url の初期値が about:blank で、URLがそれだと localStorage が駄目なので。

試しにブラウザーで about:blank を開いてコンソールから localStorage を触ろうとしても同じようなエラーが出ます。

MDNに説明があります。

例外

SecurityError
リクエストがポリシーの決定に反している、またはオリジンが妥当な scheme/host/port tupleでない (これは例えば、オリジンが file: や data: スキームを使うときに起こります)。例えば、ユーザーがブラウザー設定で特定オリジンへのデータ永続化のパーミッションを拒否していることもあります。

参考

JSDomでclientWidthやgetBoundingClientRect()は動かないので上書きして試験する。

カテゴリー: JavaScript

正直これで良いのかわからないけど、とりえあえず手元の clientWidth の値を使う処理の試験は走るようになった。

メソッド系

しれっとstub的な関数で上書きする。

const { JSDOM } = require('jsdom');

const dom = new JSDOM();
const el = dom.window.document.createElement('div');

console.log(el.getBoundingClientRect()); // => { width: 0, top: 0, ... }

// こうする
el.getBoundingClientRect = () => ({
  width: 200,
});
console.log(el.getBoundingClientRect()); // => { width: 200 }

試験を通すだけなので不要な値まで全部書く必要はない。

本当なら sinon.stub() ↓の方が丁寧な感じがするけど、まあ使い捨てるインスタンスだし、良いでしょ。

sinon.stub(el, 'getBoundingClientRect").returns({ width: 200 });

プロパティ系

clientWidth や clientHeight は単純に代入してもだめなので、 Object.defineProerty() で上書きする。

const { JSDOM } = require("jsdom");

const dom = new JSDOM();
const el = dom.window.document.createElement("div");

console.log(el.clientWidth); // => 0

// こうする
Object.defineProperty(el, 'clientWidth', { value: 100 });
console.log(el.clientWidth); // => 100

JSDomはレイアウト計算をサポートしない

とREADMEにあるので、バグじゃないです。

Beyond just features that we haven’t gotten to yet, there are two major features that are currently outside the scope of jsdom. These are:

  • Navigation: the ability to change the global object, and all other objects, when clicking a link or assigning location.href or similar.
  • Layout: the ability to calculate where elements will be visually laid out as a result of CSS, which impacts methods like getBoundingClientRects() or properties like offsetTop.

まだやっていないだけの機能もありますが、今のところjsdomのスコープ外である主要な機能が2つあります。

  • ナビゲーション: リンクをクリックしたり location.href を設定する等した際に、 グローバルオブジェクト他を変更する機能
  • レイアウト: CSSの結果として要素が視覚的に配置された結果を計算する機能。 getBoundingClientRects() のようなメソッドや、 offsetTop といったプロパティへ影響するもの

その他

ちなみに本物のDOMでも視覚的に配置されるまで、例えば document.body.appendChild(el) とかするまでは値が 0 だったりします。

参考

既存のRailsアプリにRSpecを導入してテストしてみるテスト。

カテゴリー: Ruby on Rails

めもめも。先日の続きです。

最初からRSpec使ってれば良かったんですが、後から知ったもので、既にアプリを作っちゃってる場合を考えます。ここに後からRSpecを導入して、テストする、というのを試してみました。

環境

$ ruby -v
ruby 1.9.2p290 (2011-07-09 revision 32553) [i686-linux]
$ rails -v
Rails 3.2.1

準備

とりあえずこんなプロジェクトを準備。

rails new my_shop
cd my_shop
rails g scaffold item name:string description:text price:integer on_sale:boolean
rake db:migrate

(さらに…)

RSpecでRailsのテストをしてみるテスト。

カテゴリー: Ruby on Rails, メモ

めもめも。

この記事はRubyもRailsもよくわかっていない人が自分のためのメモとしてだらだら書きました。リファレンスがよくわからなかったので、動かして試してみた感じです。

RSpecは(Railsに限らず)Rubyで動くテストフレームワーク。Railsに最初から入ってるTest::Unitよりも色々と良いらしい……けどそっちも使った事がないので比較はできません。

RubyじゃなくてRailsから利用する視点から俺用にまとめます。

環境

$ ruby -v
ruby 1.9.2p290 (2011-07-09 revision 32553) [i686-linux]
$ rails -v
Rails 3.2.1

インストール

Gemfileに記述。

gem 'rspec-rails'

でbundleすると、関連Gemもまとめて入る。

あとRSpecの共通ファイルを用意させる必要がある。

rails g rspec:install

インストールはこれでおわり。

scaffold

テストユニットが自動でRSpecに変更されてるみたい。scaffoldすると、既存のtest/には何も作られないで、代わりにspec/配下にあれこれテストが作成された。

(さらに…)

IE9をWindows XPにインストール……はできないので、こんな方法はいかがでしょうか。

カテゴリー: Web

いよいよIE9日本語版が公開されましたね! しかし残念ながら対応OSがWindows Vista/7のみという事で、多くの方がまだ使っているであろうWindouws XPではインストールすらできないようになっています。

ここではそんなWindows XPでIE9を使う方法を紹介します。(ただしIE9は英語版です。。)

その後イメージファイルが更新されたようで、この記事の内容は古くなっています。リンク先は新しいリストへリダイレクトされているので、適宜読み替えてください。新しいリストでは、最初からIE 9がインストールされたWindows 7が追加されています。こちらを使った方が簡単で良いでしょう。(2011/08/29)

仮想マシンを使います

ここで紹介するのは、Windows XPの中にWindows Vistaを入れて、そこにIE9をインストールする、という方法です。

VMという単語を聞いた事はありますか? Virtual Machine、つまり仮想マシンの事です。OSの中に仮想的にハードディスクなどを用意して、そこにWindows Vistaをインストールします。

というわけで、必要なのはこの二つです。

  • 仮想マシン
  • OS (Windows Vista)

Windows Vistaをどこから持ってくるのかは問題ですね。もちろん買えば良いのですが、IE9を試すためだけに購入するにはちょいとお値段が張ります。

実は仮想マシンもOSも、Microsoftが無料で使えるものを用意してくれています。それを使いましょう。(※無料である代わりに、期間が限定されています。記事の最後をご覧ください。)ただし、全て英語です。

では手順を説明します。以下のように進めます。

  1. VMのインストール
  2. Windows Vistaのダウンロード
  3. VMのセットアップ
  4. Windowsの更新
  5. IE9のインストール

なお相当時間がかかると思います。マシンを処理中のまま放置しつつ、丸一日くらいかかるかもしれません。特に難しい設定はありませんが、とにかく面倒です……。

(さらに…)