completely-understood-vol52

Overview / 概要

• this repository is hands on & sample for Engineers’ “Completely Understood” Talk #52
• このリポジトリは、エンジニア達の「完全に理解した」Talk #52 のハンズオン＆サンプルです。

Things necessary / 必要なもの

• （ノート）パソコン
  • OS： Windows, macOS, Linux
• フロントエンド開発に必要な環境
  • node v18.x 以上推奨
  • npm v10.x 以上推奨

サンプル用ディレクトリ作成

• 下記コマンドを実行します。

# work 配下にディレクトリ作成を想定しています
$ cd work

# completely-understood-vol52 というディレクトリを作成します
$ mkdir completely-understood-vol52

# completely-understood-vol52 に移動します
$ cd completely-understood-vol52

Angular CLI のローカルインストール

• 下記コマンドを実行します。

# completely-understood-vol52 直下のディレクトリで、実行する想定です。
# --no-save オプションを付けることで依存関係を package.json に書き込まないでインストールされます。
$　npm i @angular/cli@v18.x --no-save

added 4 packages, changed 16 packages, and audited 237 packages in 9s

44 packages are looking for funding
  run `npm fund` for details

found 0 vulnerabilities
$

Angular プロジェクトの作成

• 下記コマンドを実行します。

# completely-understood-vol52 直下のディレクトリで、実行する想定です。
# --directory オプションを付けることでこのディレクトリ配下にプロジェクトを作成します。
$　npx ng new completely-understood-vol52 --directory=./

# スタイルファイルをどの形式か選択できます。（今回は、CSS を選択しました。
? Which stylesheet format would you like to use? CSS             [ https://developer.mozilla.org/docs/Web/CSS                     ]
? Do you want to enable Server-Side Rendering (SSR) and Static Site Generation (SSG/Prerendering)? No
CREATE README.md (1086 bytes)
CREATE .gitignore (587 bytes)
CREATE angular.json (2674 bytes)
CREATE package.json (1058 bytes)
CREATE tsconfig.json (860 bytes)
CREATE .vscode/extensions.json (130 bytes)
CREATE .vscode/launch.json (470 bytes)
CREATE .vscode/tasks.json (938 bytes)
CREATE src/app/app.component.css (0 bytes)
CREATE src/app/app.component.html (19903 bytes)
CREATE src/app/app.component.spec.ts (979 bytes)
CREATE src/app/app.component.ts (323 bytes)
CREATE src/main.ts (250 bytes)
CREATE src/app/app.config.ts (310 bytes)
CREATE src/app/app.routes.ts (77 bytes)
CREATE tsconfig.app.json (263 bytes)
CREATE tsconfig.spec.json (273 bytes)
CREATE public/favicon.ico (15086 bytes)
CREATE src/index.html (311 bytes)
CREATE src/styles.css (80 bytes)
✔ Packages installed successfully.
    Directory is already under version control. Skipping initialization of git.

$

Angular プロジェクトの構造

• プロジェクト作成に成功すると下記ディレクトリ構造になります。

completely-understood-vol52 # angular プロジェクトルートディレクトリ
├── README.md
├── angular.json # angular プロジェクト情報
├── package-lock.json
├── package.json
├── src
│   ├── app
│   │   ├── app.component.css # ブラウザ表示用スタイルファイル
│   │   ├── app.component.html # ブラウザ表示用ファイル
│   │   ├── app.component.spec.ts # ユニットテストファイル
│   │   ├── app.component.ts # 画面制御ファイル
│   │   ├── app.config.ts # Angular アプリケーション設定ファイル
│   │   └── app.routes.ts # Angular アプリケーション画面ナビゲーションファイル
│   ├── assets
│   ├── favicon.ico
│   ├── index.html
│   ├── main.ts
│   └── styles.css
├── tree.txt
├── tsconfig.app.json
├── tsconfig.json
└── tsconfig.spec.json

Angular プロジェクトのローカル起動

• 下記コマンドを実行します。

# completely-understood-vol52 直下のディレクトリで、実行する想定です。
# --open オプションを付けることで、デフォルトブラウザでローカル起動します。
$ npx ng serve --open
Initial chunk files | Names         |  Raw size
polyfills.js        | polyfills     |  83.60 kB |
main.js             | main          |  21.94 kB |
styles.css          | styles        |  95 bytes |

                    | Initial total | 105.63 kB

Application bundle generation complete. [0.760 seconds]

Watch mode enabled. Watching for file changes...
  $ Local:   http://localhost:4200/
  $ press h + enter to show help


# ctrl+c で、終了します。
$

Angular プロジェクトのユニットテスト実行

• 下記コマンドを実行します。
• テストは、Karma と Jasmine を使います。
• ※デフォルトテストツール

# completely-understood-vol52 直下のディレクトリで、実行する想定です。
$ npx ng test
✔ Browser application bundle generation complete.
14 04 2024 17:49:27.053:WARN [karma]: No captured browser, open http://localhost:9876/
14 04 2024 17:49:27.059:INFO [karma-server]: Karma v6.4.3 server started at http://localhost:9876/
14 04 2024 17:49:27.060:INFO [launcher]: Launching browsers Chrome with concurrency unlimited
14 04 2024 17:49:27.064:INFO [launcher]: Starting browser Chrome
14 04 2024 17:49:28.221:INFO [Chrome 123.0.0.0 (Mac OS 10.15.7)]: Connected on socket xmKi2hSp8e7YZeOqAAAB with id 87644554
Chrome 123.0.0.0 (Mac OS 10.15.7): Executed 3 of 3 SUCCESS (0.047 secs / 0.044 secs)
TOTAL: 3 SUCCESS

# ctrl+c で、終了します。
$

Angular プロジェクトの E2E テスト実行

• 下記コマンドを実行すると下記メッセージが聞かれます。

Google のプライバシーポリシー の確認

# completely-understood-vol52 直下のディレクトリで、実行する想定です。
$ npx ng e2e

# ? このプロジェクトに関する仮名の使用状況データを Angular チームと共有しますか?
# Google のプライバシー ポリシー (https://policies.google.com/privacy) に基づいて Google に問い合わせます。 多くのための
# この設定の詳細と変更方法については、https://angular.io/analytics を参照してください。 (y/N)

? Would you like to share pseudonymous usage data about this project with the Angular Team
at Google under Google's Privacy Policy at https://policies.google.com/privacy. For more
details and how to change this setting, see https://angular.io/analytics. No

# No を選択

E2E テストツールの選択

# 続き
Global setting: enabled
Local setting: disabled
Effective status: disabled
Cannot find "e2e" target for the specified project.
You can add a package that implements these capabilities.

# E2E テストツールをどれを選択するか？
# Cypress を選択します。
# デフォルトの E2E テストツール Protoractor は、deprecated（非推奨）の為
For example:
  Cypress: ng add @cypress/schematic
  Nightwatch: ng add @nightwatch/schematics
  WebdriverIO: ng add @wdio/schematics
  Puppeteer: ng add @puppeteer/ng-schematics

E2E テストの変換（Cypress）

# E2E テストツールをCypress 変換するか聞かれます

Would you like to add a package with "e2e" capabilities now? Cypress
ℹ Using package manager: npm
✔ Found compatible package version: @cypress/schematic@2.5.1.
✔ Package information loaded.

The package @cypress/schematic@2.5.1 will be installed and executed.
# Yes を選択します。
Would you like to proceed? Yes


? Would you like the default `ng e2e` command to use Cypress? [ Protractor to Cypress Migration Guide:
https://on.cypress.io/protractor-to-cypress?cli=true ] Yes
? Would you like to add Cypress component testing?  This will add all files needed for Cypress component
testing. Yes
CREATE cypress.config.ts (264 bytes)
CREATE cypress/tsconfig.json (139 bytes)
CREATE cypress/e2e/spec.cy.ts (143 bytes)
CREATE cypress/fixtures/example.json (85 bytes)
CREATE cypress/support/commands.ts (1377 bytes)
CREATE cypress/support/e2e.ts (649 bytes)
CREATE cypress/support/component-index.html (290 bytes)
CREATE cypress/support/component.ts (1123 bytes)
UPDATE package.json (1210 bytes)
UPDATE angular.json (4211 bytes)
✔ Packages installed successfully.
$

E2E テストの実行（Cypress の E2E コード）

# completely-understood-vol52 直下のディレクトリで、実行する想定です。
# Cypress のE2E コードで、実行されます。
$ npx ng e2e
Passing watch mode to DevServer - watch mode is true
Initial chunk files | Names         |  Raw size
polyfills.js        | polyfills     |  88.10 kB |
main.js             | main          |  22.59 kB |
styles.css          | styles        |  95 bytes |

                    | Initial total | 110.78 kB

Application bundle generation complete. [0.949 seconds]

Watch mode enabled. Watching for file changes...
NOTE: Raw file sizes do not reflect development server per-request transformations.
Re-optimizing dependencies because lockfile has changed
  ➜  Local:   http://localhost:4200/
  ➜  press h + enter to show help
It looks like this is your first time using Cypress: 13.10.0

✔  Verified Cypress! /Users/akihiko.kigure/Library/Caches/Cypress/13.10.0/Cypress.app

Opening Cypress...

DevTools listening on ws://127.0.0.1:63240/devtools/browser/9996a624-490b-4720-8577-f5522c33f3ab
GraphQL server is running at http://localhost:63241/__launchpad/graphql
Missing baseUrl in compilerOptions. tsconfig-paths will be skipped
2024-05-28 23:46:37.313 Cypress[56751:10098037] WARNING: Secure coding is not enabled for restorable state! Enable secure coding by implementing NSApplicationDelegate.applicationSupportsSecureRestorableState: and returning YES.

# ctrl+c で、終了します。
$