Angular+Storybookで画像回帰テストを小さくはじめる - Classi開発者ブログ
Classiのフロントエンドエキスパートチームのlacolacoです。最近AngularのプロジェクトでStorybookをベースにしたUIコンポーネントの画像回帰テストをはじめたので、この記事ではそのなかで学んだことを共有します。 画像回帰テスト 画像回帰テスト（visual regression testing）は、UIの見た目のバグを防ぐためのテストです。見た目はユニットテストのようにコードでテストするのが難しいため、画像回帰テストではその名の通りテストに画像を使用します。実際に描画されたUIを画像としてキャプチャして、ソースコードの変更前後での画像の差分から「見た目が変わっていないか」をテストできます。 最近では画像回帰テストをサポートするツールやSaaSなどさまざま出てきていますが、画像回帰テストをはじめるにあたっての問いはシンプルに次の2つだけです。 どのように画像をキャプチャ
「Angular 12」正式リリース。Webpack 5正式サポート、IE11のサポートが非推奨、Strictモードがデフォルトに、「Ivy」レンダリングエンジンへの移行が事実上完了など
「Angular 12」正式リリース。Webpack 5正式サポート、IE11のサポートが非推奨、Strictモードがデフォルトに、「Ivy」レンダリングエンジンへの移行が事実上完了など Webアプリケーションフレームワーク「Angular」の最新版となる「Angular 12」が正式にリリースされました。 Our team is excited to announce the release of Angular v12! #ngUpdate to see: Ivy-first library distribution Prod mode & strict mode by default Production Webpack 5 support Inline Sass Inline critical CSS Read all about the release https://t.co/
Angular アプリケーションの単体テストのフレームワークを Jest に変更するまで - とんかつ時々あんどーなつ
はじめに 今回は Angular アプリケーションの単体テストフレームワークを Jasmine / Karma から Jest に変更する方法を調べてみた。 Jest にする理由は「早いらしい」「ナウい」とかそんな感じだが、使ってみたいので試してみる。 Angular アプリケーションで使うには まずは置き換えるためのライブラリを探す。$ ng add で気軽にライブラリの追加ができると嬉しい。 以前 E2E テストのライブラリを置き換えたときに使った Briebug Software · GitHub のライブラリが便利だったことを思い出す。 kasaharu.hatenablog.com Jest 用のライブラリもここから探すことに。 github.com ありました。今回はこれを使って置き換える。 Jest Angular Schematic 導入 $ ng add コマンドでインス
なぜentryComponentsは非推奨になるのか
この記事では、Angular v9.0にて非推奨となる entryComponents 機能が、なぜ非推奨になるのかについてできるだけ簡単に解説します。 Angular - Deprecated APIs and Features はじめに 解説を始める前に、重要な点をあらかじめ書き記しておきます。 もしIvyをオプトアウトする場合は、 entryComponents は引き続き必要です。決して削除しないでください。 いままで entryComponents 機能を使ったことがない方が新たになにか覚える必要はありません。興味がなければ過去のものとして無視してください。 entryComponents とは何なのか v9.0 で非推奨となる entryComponents とは何だったのかということをまずは振り返りましょう。 entryComponents は多くの場合、 動的なコンポーネン
Web Componentsを利用した段階的AngularJS脱出作戦 - builderscon tokyo 2019
Abstract 注: AngularJS: 〜v1.x, Angular: v2〜 (https://angular.jp/guide/releases) かつて一世を風靡したAngularJS もいまでは技術的負債のような扱いを受けるようになりました。2009年から開発が続けられてきましたが、ついに2021年6月をもってセキュリティアップグレードも止まり、完全な開発終了を迎えることになりました。 数多くのWebサイト、Webアプリケーションでは未だにAngularJSを使用したままです。稼ぎ頭のシステムに深く入り込んだフレームワークライブラリは、なかなか簡単に外れてくれません。フルスクラッチで新しく作り直すのは膨大なコストがかかりますし、追加開発を止められない場合には新しい変更にも追従し続ける必要があり、いつまでも終わらないプロジェクトになりかねません。 そこで選択したいのは、現行のシ
Angularの次世代ビューエンジン「Ivy」とは何か？ 3つの特徴と新たにできるようになること
2018年6月19日、第69回となる「HTML5とか勉強会」が開催されました。今回のテーマは「UIフレームワーク最前線」。Angular、Vue.js、Reactという3つのフレームワークにおける第一人者が一同に集い、それぞれの最新動向やおすすめポイントを語ります。「Angular Ivyとその先」に登場したのは、ng- japanのオーガーナイザーで、Angularのコントリビューターを務めるlaco2net氏。現在開発中の最新機能、Angular Ivyについて解説します。 Angular Ivyとは何か？ laco2net氏（以下、laco2net）：よろしくお願いします。『Angular Ivy and beyond』ということで、Angular Ivyとその先について、お話しようと思います。 まず簡単に自己紹介です。laco、本名はSuguru Inatomiと申します。Kaiz
Akita🐶でがんばる状態管理 - Qiita
本記事について 本記事は、 Classi Angular Night での登壇時に使用したものです イベント後に詳細な説明を載せて記事化します Who am I? { "name": "佐藤有斗（ゆいと）", "作ってるもの": "BtoB SaaS", "やってること": ["バックエンド", "フロントエンド", "インフラ"], "言語": ["Scala", "Typescript", "Python", "Ruby"], "スマブラ": { "キャラ": "ネス", "世界戦闘力": 2000000 } } この発表の目標 Akitaという状態管理ライブラリの認知拡大 新規アプリ開発時の選択肢に コードはこちら もくじ Akitaとの出会い Akitaとは AKita図解 Store, Service, Query Entity Store 使ってみてよかった点 難しい点 Aki
NgRxは入れるだけでいいのか?
発生する懸念と考えられるアーキテクチャ / NgRx Architecture
2019年3月27日、Classi Angular Night #2にて発表した資料です。
NgRx v7.4で導入されるAction Creatorの使い方 - 余白
この記事では NgRx v7.4で導入される Action Creator 機能と、それを使った実装パターンを紹介します。 Action Creatorはまだ ngrx.io のドキュメンテーションに含まれていませんが、将来的に追加された後はそちらを参照するようにしてください。 アクションの定義 簡単なカウンターを実装しながら、これまでのNgRxの書き方をおさらいしましょう。 今回のカウンターは、任意の数値を受け取って加算する Increment と、カウンターをリセットする Reset をアクションとして定義します。 これまでのアクション定義では、アクションタイプのEnum と、それを持つ各アクションクラス、そしてそのクラス型のUnion Typeを定義するのが一般的でした。 たとえば Increment と Reset というアクションとする counter.actions.ts を定
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
NgRx Book: Reactive State Management for Angular
Angular in Depth
Angular After Tutorial - Angular After Tutorial
GitHub - angular/protractor: E2E test framework for Angular apps
Tactical Domain-Driven Design with Angular and Monorepos? - ANGULARarchitects
中規模Angularアプリケーションの再設計
ng build --prod & Continuous Delivery
Angular
Tim Deschryver
Creating Basic Angular App: Step-by-Step Guide - Part 1
Preston Lamb