実行環境依存のコードに対してテストを書く考え方
社内用の啓発記事ですが、閉じる理由がないのでここに投げます。 ブラウザにべったりなコードを書いてると、ブラウザや node.js 固有の環境をインラインで記述してしまうことが多々あると思います。 あえてダメダメなブラウザ向けのエントリポイントの例を書きます。 // main.ts let id = localStorage.get('id'); if (!id) { id = `${navigator.userAgent}-${Math.random()}`; localStorage.set('id', id); fetch('/auth', { method: 'POST', credentials: 'include', body: JSON.stringify({ id, at: Date.now(), }), headers: {'Content-Type': 'applicat
フロントエンドのテストは皆のためのもの | POSTD
テストとは人によって反応が分かれるものの1つであり、大喜びする人もいれば、見ないようにして去ろうとする人もいます。あなたがどちらの側であるにせよ、ここではフロントエンドのテストは皆のためのものであるということを説明します。実際、テストには多くの種類があり、それがテストに対して初めに恐れや混乱を感じる一因なのかもしれません。 この記事では、特に有名で広く利用されている種類のテストを扱います。なかには目新しいものはないと感じる読者の方もいらっしゃるかもしれませんが、少なくとも復習にはなるでしょう。どちらにせよ、筆者の目標は、この記事を通じて世の中のさまざまな種類のテストについて理解を深めてもらうことです。ここではユニットテスト、統合テスト、アクセシビリティテスト、ビジュアルリグレッションテストなどを一緒に見ていきます。 さらに、Mocha、Jest、Puppeteer、Cypressなど、各種
JavaScriptユニットテストの理想と現実
Talk at 関西Node学園 梅田キャンパス 1時限目 https://nodejs.connpass.com/event/82614/
Making your JavaScript Pure
Once your website or application goes past a small number of lines, it will inevitably contain bugs of some sort. This isn’t specific to JavaScript but is shared by nearly all languages—it’s very tricky, if not impossible, to thoroughly rule out the chance of any bugs in your application. However, that doesn’t mean we can’t take precautions by coding in a way that lessens our vulnerability to bugs
テストできないコードをE2Eテストを使ってリファクタリングしよう
ユニットテストがしにくい状態となってるコードをTestiumを使ったE2Eテストを書いてリファクタリングしてみる話です。 例えば、以下のようなjQueryで書いたコードは外(テストコード)から取り出すポイントがないので、ユニットテストを書くのは難しいと思います。(そもそもViewのコードなので) 特定のバージョンでの変更点を簡単に確認できるよう、 「Aの列のラジオボタンを選ぶと同じ行より一つ下にあるBの列のラジオボタンを自動で選ぶ」 という補助機能 $(document).ready(function () { // seq: シーケンス番号 $.each(["new_version", "old_version"], function () { $("input[name='" + this + "']").each(function (idx, elem) { if (idx == 0
A Journey Through Client-Side Testing with JavaScript - Telerik Blogs
Having tests is important. They allow us to extend and refactor our code with ease. Many developers follow test driven development as a workflow. I believe that writing tests makes software development much more interesting and generally leads to better code. Well-designed and tested systems are easier to maintain. Over the last few years, developers have begun to put a lot of application logic in
ライブラリをES2015(ES6)で書いて公開する所から始めよう
この記事はECMAScript 2015の事始めとして、ライブラリをECMAScript 2015で書いて公開するというところから始めるのがいいのではという内容です。 ECMAScript 2015(ES2015)はES6とも呼ばれていてどちらも同じものを指しますが、この記事ではES2015に統一します。 ECMAScriptのバージョンについては次のページを参照してください。 ECMAScript · JavaScriptの入門書 #jsprimer 2018-12-27: 追記 textlint/textlint-rule-helperのmasterはTypeScriptの実装へ変換されています。 Babelの実装はhttps://github.com/textlint/textlint-rule-helper/tree/2.0.1から参照できます Babel から TypeScrip
EcmaScript6 + power-assert でテストを書く - from scratch
この記事はJavaScript Advent Calendar 2014の15日目の記事です。 さてさて、EcmaScript6に対する機運が高まっている中で、ES6の新機能の紹介記事が出てきておりますが、ES6が使えるブラウザはまだ浸透しておらず、使おうとするならばTraceur Compilerや6to5といったトランスパイラを利用せざるを得ないというのが現状です。 これらのトランスパイラも実際のプロダクトで使おうとするとまだそこまで実績がないし、いきなり本番で使うという訳にいかない人達が多いかと思っています。 ただし、ES6には慣れておきたい、、、ES6の新機能(let, template-string, arrow function, generator, promise, etc...)を使ってみたい、、、 ならばせめてテストだけでもES6で書こうじゃないか、いずれES6が来た時
testling-ciとtravis-ciでクライアントサイドもサーバサイドもテストを実行する - from scratch
まえがき NHK番組表APIのjavascript版を作りました。 NHKの番組表APIが発表されてて、皆思い思いに好きな言語で実装されていくのを見てました。 Golang : https://github.com/mattn/go-nhk Scala : https://github.com/seratch/nhk4s Perl : https://github.com/moznion/WWW-NHKProgram-API Python : https://github.com/drillbits/nhk-api Ruby : https://github.com/mitukiii/nhk_program-for-ruby Emacs : https://github.com/gongo/emacs-nhk-program Titanium : https://github.com/h5
JavaScriptでカバレッジを取得する
本連載は、テストコードをこれから書こうと考えているJavaScript技術者を対象に、テストコードの意義からテスト駆動開発、JavaScriptでのテストコードの書き方、継続的インテグレーションなど、テスト全般にわたって解説します。また、原理原則だけでなくWhyから説明し、チームメンバーを巻き込みながら開発現場に活かせる考え方を総合的に解説します。第6回目の本稿は、JavaScriptでテストを動かし、JSCoverでカバレッジを取得する方法を説明します。 対象読者 JavaScriptの基本をある程度理解している方 テストコードをこれから書こうと考えている方 カバレッジとは ソフトウェアをテストする際の重要な基準の一つに、カバレッジというものがあります。カバレッジとは、テスト対象のコードの中で、テストが行われた割合のことをいい、パーセントで表現します。カバレッジ率は、いくつかの基準で取得
JavaScript Test-Driven Development with Jasmine 2.0 and Karma
This document discusses JavaScript test-driven development using Jasmine 2.0 and Karma. It introduces test-driven development principles and benefits, then covers the Karma test runner, PhantomJS browser, and features of the Jasmine testing framework including describe blocks, expectations, matchers, spies, and custom matchers. It also provides an example of mapping earthquakes and testing color-c
片手間のJavaScriptでもテストがしたい！ - aike’s blog
テストしたくないでござる。テストしたくないでござる。 いやまあきちんと環境が整ってたらテスト書くのもわりと楽だし、プログラム本体書いているときの安心感が全然違うので、それなりの規模のプログラムを書く時は良いんだけど。でも、2〜3日で書くようなちょっとしたブラウザ側だけのJavaScriptプログラムとか、開発環境がインストールされていないPCでも気軽にテストできないかなあというのが今回のテーマ。 これだけメジャーなJavaScriptなんだからテストも簡単だろうと思って調べると、ブログとかのサンプルを見てもNode.js前提だったり、Mochaが良さそうだと使おうとしたらアサーションライブラリは別だとか、UIはbrowserifyいるの？いらないの？とか、もじゃもじゃしたヤクの毛にからまって必死で刈り進める感じ。テスト初心者の人にテストコードの書き方を説明するときなんか、たどりつくまでがす
Prefilling Forms with a Custom Bookmarklet | CSS-Tricks
The following is a guest post by Adam Lichtenstein. Adam works at Wufoo, a web app for building web forms, so you can imagine the need for testing forms is at least double what the rest of us need. Adam took a different road than I took, so I’ll let him share. Like most devs, I spend a lot of time manually testing the user experience on the site I work on. Unit and integration tests are great, but
Karma for JavaScript test runner
今まではなんとなくtestemを使っていたのですが、Karmaを検討する必要があったので試してみました。 サンプルの設定などは↓で見ることが出来ます。 https://github.com/koba04/backbone-boilerplate testem to karma これまでは業務でもtestemを使っていて、テストの数が少ないうち(1000以下)は問題なかったのですが、 段々テストが増えてくるとCPU100%になってテストが走るブラウザが固まることが増えてきて辛い感じになってきました。 そんなときに下記の記事を見て同じような現象だなと思いKarmaを試してみることにしました。 http://developer.cybozu.co.jp/tech/?p=7089 Installation インストールはnpm install karmaするだけです。 globalでkarmaのコ
DalekJS - Automated cross browser testing with JavaScript
DalekJS is an open source UI testing tool written in JavaScript, it will: launch & automate your browserfill & submit formsclick & follow linkscapture screenshotsrun your functional tests… and it works on Windows, Linux & Mac QuickstartCreate a package.jsonInstall DalekJSWrite your first testRun this beast!
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
GitHub - krasimir/atomus: A small utility library for running client-side tests in Node.js environment
ペパボのフロントエンドスタンダード に関する記事一覧 - ペパボテックブログ
I want to use
Registered & Protected by MarkMonitor
Prefill Your Own Forms in Dev | CSS-Tricks