Skip to content

Commit 3a2a2e7

Browse files
lacolacolacolaco
committed
feat(docs): translate Karma and Vitest testing guides to Japanese
- karma.md: Karma/Jasmineテストガイドを翻訳 - migrating-to-vitest.md: KarmaからVitestへの移行ガイドを翻訳
1 parent 40ed358 commit 3a2a2e7

File tree

4 files changed

+553
-125
lines changed

4 files changed

+553
-125
lines changed

‎adev-ja/src/content/guide/testing/karma.en.md‎

Lines changed: 199 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,199 @@
1+
# Testing with Karma and Jasmine
2+
3+
While [Vitest](https://vitest.dev) is the default test runner for new Angular projects, [Karma](https://karma-runner.github.io) is still a supported and widely used test runner. This guide provides instructions for testing your Angular application using the Karma test runner with the [Jasmine](https://jasmine.github.io) testing framework.
4+
5+
## Setting Up Karma and Jasmine
6+
7+
You can set up Karma and Jasmine for a new project or add it to an existing one.
8+
9+
### For New Projects
10+
11+
To create a new project with Karma and Jasmine pre-configured, run the `ng new` command with the `--test-runner=karma` option:
12+
13+
```shell
14+
ng new my-karma-app --test-runner=karma
15+
```
16+
17+
### For Existing Projects
18+
19+
To add Karma and Jasmine to an existing project, follow these steps:
20+
21+
1. **Install the necessary packages:**
22+
23+
<docs-code-multifile>
24+
<docs-code header="npm" language="shell">
25+
npm install --save-dev karma karma-chrome-launcher karma-coverage karma-jasmine karma-jasmine-html-reporter jasmine-core @types/jasmine
26+
</docs-code>
27+
<docs-code header="yarn" language="shell">
28+
yarn add --dev karma karma-chrome-launcher karma-coverage karma-jasmine karma-jasmine-html-reporter jasmine-core @types/jasmine
29+
</docs-code>
30+
<docs-code header="pnpm" language="shell">
31+
pnpm add -D karma karma-chrome-launcher karma-coverage karma-jasmine karma-jasmine-html-reporter jasmine-core @types/jasmine
32+
</docs-code>
33+
<docs-code header="bun" language="shell">
34+
bun add --dev karma karma-chrome-launcher karma-coverage karma-jasmine karma-jasmine-html-reporter jasmine-core @types/jasmine
35+
</docs-code>
36+
</docs-code-multifile>
37+
38+
2. **Configure the test runner in `angular.json`:**
39+
40+
In your `angular.json` file, find the `test` target and set the `runner` option to `karma`:
41+
42+
```json
43+
{
44+
// ...
45+
"projects": {
46+
"your-project-name": {
47+
// ...
48+
"architect": {
49+
"test": {
50+
"builder": "@angular/build:unit-test",
51+
"options": {
52+
"runner": "karma",
53+
// ... other options
54+
}
55+
}
56+
}
57+
}
58+
}
59+
}
60+
```
61+
62+
3. **Update `tsconfig.spec.json` for Jasmine types:**
63+
64+
To ensure TypeScript recognizes global testing functions like `describe` and `it`, add `"jasmine"` to the `types` array in your `tsconfig.spec.json`:
65+
66+
```json
67+
{
68+
// ...
69+
"compilerOptions": {
70+
// ...
71+
"types": [
72+
"jasmine"
73+
]
74+
},
75+
// ...
76+
}
77+
```
78+
79+
## Running Tests
80+
81+
Once your project is configured, run the tests using the [`ng test`](cli/test) command:
82+
83+
```shell
84+
ng test
85+
```
86+
87+
The `ng test` command builds the application in _watch mode_ and launches the [Karma test runner](https://karma-runner.github.io).
88+
89+
The console output looks like below:
90+
91+
```shell
92+
93+
02 11 2022 09:08:28.605:INFO [karma-server]: Karma v6.4.1 server started at http://localhost:9876/
94+
02 11 2022 09:08:28.607:INFO [launcher]: Launching browsers Chrome with concurrency unlimited
95+
02 11 2022 09:08:28.620:INFO [launcher]: Starting browser Chrome
96+
02 11 2022 09:08:31.312:INFO [Chrome]: Connected on socket -LaEYvD2R7MdcS0-AAAB with id 31534482
97+
Chrome: Executed 3 of 3 SUCCESS (0.193 secs / 0.172 secs)
98+
TOTAL: 3 SUCCESS
99+
100+
```
101+
102+
The test output is displayed in the browser using [Karma Jasmine HTML Reporter](https://github.com/dfederm/karma-jasmine-html-reporter).
103+
104+
<img alt="Jasmine HTML Reporter in the browser" src="assets/images/guide/testing/initial-jasmine-html-reporter.png">
105+
106+
Click on a test row to re-run just that test or click on a description to re-run the tests in the selected test group ("test suite").
107+
108+
Meanwhile, the `ng test` command is watching for changes. To see this in action, make a small change to a source file and save. The tests run again, the browser refreshes, and the new test results appear.
109+
110+
## Configuration
111+
112+
The Angular CLI takes care of Jasmine and Karma configuration for you. It constructs the full configuration in memory, based on options specified in the `angular.json` file.
113+
114+
### Customizing Karma Configuration
115+
116+
If you want to customize Karma, you can create a `karma.conf.js` by running the following command:
117+
118+
```shell
119+
ng generate config karma
120+
```
121+
122+
HELPFUL: Read more about Karma configuration in the [Karma configuration guide](http://karma-runner.github.io/6.4/config/configuration-file.html).
123+
124+
### Setting the Test Runner in `angular.json`
125+
126+
To explicitly set Karma as the test runner for your project, locate the `test` target in your `angular.json` file and set the `runner` option to `karma`:
127+
128+
```json
129+
{
130+
// ...
131+
"projects": {
132+
"your-project-name": {
133+
// ...
134+
"architect": {
135+
"test": {
136+
"builder": "@angular/build:unit-test",
137+
"options": {
138+
"runner": "karma",
139+
// ... other options
140+
}
141+
}
142+
}
143+
}
144+
}
145+
}
146+
```
147+
148+
## Code coverage enforcement
149+
150+
To enforce a minimum code coverage level, you can use the `check` property in the `coverageReporter` section of your `karma.conf.js` file.
151+
152+
For example, to require a minimum of 80% coverage:
153+
154+
```javascript
155+
coverageReporter: {
156+
dir: require('path').join(__dirname, './coverage/<project-name>'),
157+
subdir: '.',
158+
reporters: [
159+
{ type: 'html' },
160+
{ type: 'text-summary' }
161+
],
162+
check: {
163+
global: {
164+
statements: 80,
165+
branches: 80,
166+
functions: 80,
167+
lines: 80
168+
}
169+
}
170+
}
171+
```
172+
173+
This will cause the test run to fail if the specified coverage thresholds are not met.
174+
175+
## Testing in continuous integration
176+
177+
To run your Karma tests in a CI environment, use the following command:
178+
179+
```shell
180+
ng test --no-watch --no-progress --browsers=ChromeHeadless
181+
```
182+
183+
NOTE: The `--no-watch` and `--no-progress` flags are crucial for Karma in CI environments to ensure tests run once and exit cleanly. The `--browsers=ChromeHeadless` flag is also essential for running tests in a browser environment without a graphical interface.
184+
185+
## Debugging tests
186+
187+
If your tests aren't working as you expect, you can inspect and debug them in the browser.
188+
189+
To debug an application with the Karma test runner:
190+
191+
1. Reveal the Karma browser window. See [Set up for testing](guide/testing/overview#set-up-for-testing) if you need help with this step.
192+
2. Click the **DEBUG** button to open a new browser tab and re-run the tests.
193+
3. Open the browser's **Developer Tools**. On Windows, press `Ctrl-Shift-I`. On macOS, press `Command-Option-I`.
194+
4. Pick the **Sources** section.
195+
5. Press `Control/Command-P`, and then start typing the name of your test file to open it.
196+
6. Set a breakpoint in the test.
197+
7. Refresh the browser, and notice how it stops at the breakpoint.
198+
199+
<img alt="Karma debugging" src="assets/images/guide/testing/karma-1st-spec-debug.png">

‎adev-ja/src/content/guide/testing/karma.md‎

Lines changed: 46 additions & 46 deletions
Original file line numberDiff line numberDiff line change
@@ -1,24 +1,24 @@
1-
# Testing with Karma and Jasmine
1+
# KarmaとJasmineを使用したテスト
22

3-
While [Vitest](https://vitest.dev) is the default test runner for new Angular projects, [Karma](https://karma-runner.github.io) is still a supported and widely used test runner. This guide provides instructions for testing your Angular application using the Karma test runner with the [Jasmine](https://jasmine.github.io) testing framework.
3+
新しいAngularプロジェクトでは[Vitest](https://vitest.dev)がデフォルトのテストランナーですが、[Karma](https://karma-runner.github.io)も引き続きサポートされており、広く使われているテストランナーです。このガイドでは、Karmaテストランナーと[Jasmine](https://jasmine.github.io)テストフレームワークを使用して、Angularアプリケーションをテストする手順を説明します。
44

5-
## Setting Up Karma and Jasmine
5+
## KarmaとJasmineのセットアップ {#setting-up-karma-and-jasmine}
66

7-
You can set up Karma and Jasmine for a new project or add it to an existing one.
7+
KarmaとJasmineは、新規プロジェクトでセットアップすることも、既存のプロジェクトに追加できます。
88

9-
### For New Projects
9+
### 新規プロジェクトの場合 {#for-new-projects}
1010

11-
To create a new project with Karma and Jasmine pre-configured, run the `ng new` command with the `--test-runner=karma` option:
11+
KarmaとJasmineが事前設定された新規プロジェクトを作成するには、`ng new`コマンドを`--test-runner=karma`オプション付きで実行します:
1212

1313
```shell
1414
ng new my-karma-app --test-runner=karma
1515
```
1616

17-
### For Existing Projects
17+
### 既存のプロジェクトの場合 {#for-existing-projects}
1818

19-
To add Karma and Jasmine to an existing project, follow these steps:
19+
既存のプロジェクトにKarmaとJasmineを追加するには、次の手順に従います:
2020

21-
1. **Install the necessary packages:**
21+
1. **必要なパッケージをインストールします:**
2222

2323
<docs-code-multifile>
2424
<docs-code header="npm" language="shell">
@@ -35,9 +35,9 @@ To add Karma and Jasmine to an existing project, follow these steps:
3535
</docs-code>
3636
</docs-code-multifile>
3737

38-
2. **Configure the test runner in `angular.json`:**
38+
2. **`angular.json`でテストランナーを設定します:**
3939

40-
In your `angular.json` file, find the `test` target and set the `runner` option to `karma`:
40+
`angular.json`ファイルで`test`ターゲットを見つけ、`runner`オプションを`karma`に設定します:
4141

4242
```json
4343
{
@@ -59,9 +59,9 @@ To add Karma and Jasmine to an existing project, follow these steps:
5959
}
6060
```
6161

62-
3. **Update `tsconfig.spec.json` for Jasmine types:**
62+
3. **Jasmineの型定義のために`tsconfig.spec.json`を更新します:**
6363

64-
To ensure TypeScript recognizes global testing functions like `describe` and `it`, add `"jasmine"` to the `types` array in your `tsconfig.spec.json`:
64+
TypeScriptが`describe`や`it`のようなグローバルなテスト関数を認識できるように、`tsconfig.spec.json`の`types`配列に`"jasmine"`を追加します:
6565

6666
```json
6767
{
@@ -76,17 +76,17 @@ To add Karma and Jasmine to an existing project, follow these steps:
7676
}
7777
```
7878

79-
## Running Tests
79+
## テストの実行 {#running-tests}
8080

81-
Once your project is configured, run the tests using the [`ng test`](cli/test) command:
81+
プロジェクトの設定が完了したら、[`ng test`](cli/test)コマンドを使用してテストを実行します:
8282

8383
```shell
8484
ng test
8585
```
8686

87-
The `ng test` command builds the application in _watch mode_ and launches the [Karma test runner](https://karma-runner.github.io).
87+
`ng test`コマンドは、アプリケーションを_ウォッチモード_でビルドし、[Karmaテストランナー](https://karma-runner.github.io)を起動します。
8888

89-
The console output looks like below:
89+
コンソールの出力は以下のようになります:
9090

9191
```shell
9292

@@ -99,31 +99,31 @@ TOTAL: 3 SUCCESS
9999

100100
```
101101

102-
The test output is displayed in the browser using [Karma Jasmine HTML Reporter](https://github.com/dfederm/karma-jasmine-html-reporter).
102+
テスト出力は[Karma Jasmine HTML Reporter](https://github.com/dfederm/karma-jasmine-html-reporter)を使用してブラウザに表示されます。
103103

104-
<img alt="Jasmine HTML Reporter in the browser" src="assets/images/guide/testing/initial-jasmine-html-reporter.png">
104+
<img alt="ブラウザに表示されたJasmine HTML Reporter" src="assets/images/guide/testing/initial-jasmine-html-reporter.png">
105105

106-
Click on a test row to re-run just that test or click on a description to re-run the tests in the selected test group ("test suite").
106+
テスト行をクリックしてそのテストだけを再実行するか、説明をクリックして選択したテストグループ（「テストスイート」）のテストを再実行します。
107107

108-
Meanwhile, the `ng test` command is watching for changes. To see this in action, make a small change to a source file and save. The tests run again, the browser refreshes, and the new test results appear.
108+
その間、`ng test`コマンドは変更を監視しています。これを実際に確認するには、ソースファイルに小さな変更を加えて保存します。テストが再実行されてブラウザが更新され、新しいテスト結果が表示されます。
109109

110-
## Configuration
110+
## 設定 {#configuration}
111111

112-
The Angular CLI takes care of Jasmine and Karma configuration for you. It constructs the full configuration in memory, based on options specified in the `angular.json` file.
112+
Angular CLIがJasmineとKarmaの設定を代行します。`angular.json`ファイルで指定されたオプションに基づいて、完全な設定をメモリ内に構築します。
113113

114-
### Customizing Karma Configuration
114+
### Karma設定のカスタマイズ {#customizing-karma-configuration}
115115

116-
If you want to customize Karma, you can create a `karma.conf.js` by running the following command:
116+
Karmaをカスタマイズしたい場合は、次のコマンドを実行して`karma.conf.js`を作成できます:
117117

118118
```shell
119119
ng generate config karma
120120
```
121121

122-
HELPFUL: Read more about Karma configuration in the [Karma configuration guide](http://karma-runner.github.io/6.4/config/configuration-file.html).
122+
HELPFUL: Karmaの設定については、[Karma設定ガイド](http://karma-runner.github.io/6.4/config/configuration-file.html)で詳しく説明されています。
123123

124-
### Setting the Test Runner in `angular.json`
124+
### `angular.json`でのテストランナーの設定 {#setting-the-test-runner-in-angularjson}
125125

126-
To explicitly set Karma as the test runner for your project, locate the `test` target in your `angular.json` file and set the `runner` option to `karma`:
126+
プロジェクトのテストランナーとしてKarmaを明示的に設定するには、`angular.json`ファイル内の`test`ターゲットを見つけ、`runner`オプションを`karma`に設定します:
127127

128128
```json
129129
{
@@ -145,11 +145,11 @@ To explicitly set Karma as the test runner for your project, locate the `test` t
145145
}
146146
```
147147

148-
## Code coverage enforcement
148+
## コードカバレッジの強制 {#code-coverage-enforcement}
149149

150-
To enforce a minimum code coverage level, you can use the `check` property in the `coverageReporter` section of your `karma.conf.js` file.
150+
最小コードカバレッジレベルを強制するには、`karma.conf.js`ファイルの`coverageReporter`セクションにある`check`プロパティを使用できます。
151151

152-
For example, to require a minimum of 80% coverage:
152+
たとえば、最小80%のカバレッジを要求するには:
153153

154154
```javascript
155155
coverageReporter: {
@@ -170,30 +170,30 @@ coverageReporter: {
170170
}
171171
```
172172

173-
This will cause the test run to fail if the specified coverage thresholds are not met.
173+
指定されたカバレッジのしきい値が満たされない場合、これによりテスト実行は失敗します。
174174

175-
## Testing in continuous integration
175+
## 継続的インテグレーションでのテスト {#testing-in-continuous-integration}
176176

177-
To run your Karma tests in a CI environment, use the following command:
177+
CI環境でKarmaテストを実行するには、次のコマンドを使用します:
178178

179179
```shell
180180
ng test --no-watch --no-progress --browsers=ChromeHeadless
181181
```
182182

183-
NOTE: The `--no-watch` and `--no-progress` flags are crucial for Karma in CI environments to ensure tests run once and exit cleanly. The `--browsers=ChromeHeadless` flag is also essential for running tests in a browser environment without a graphical interface.
183+
NOTE: CI環境において、Karmaでテストを一度だけ実行して正常に終了させるためには、`--no-watch`と`--no-progress`フラグが不可欠です。また、`--browsers=ChromeHeadless`フラグは、グラフィカルインターフェースを持たないブラウザ環境でテストを実行するために必須です。
184184

185-
## Debugging tests
185+
## テストのデバッグ {#debugging-tests}
186186

187-
If your tests aren't working as you expect, you can inspect and debug them in the browser.
187+
テストが期待どおりに動作しない場合は、ブラウザで検査およびデバッグできます。
188188

189-
To debug an application with the Karma test runner:
189+
Karmaテストランナーでアプリケーションをデバッグするには:
190190

191-
1. Reveal the Karma browser window. See [Set up for testing](guide/testing/overview#set-up-for-testing) if you need help with this step.
192-
2. Click the **DEBUG** button to open a new browser tab and re-run the tests.
193-
3. Open the browser's **Developer Tools**. On Windows, press `Ctrl-Shift-I`. On macOS, press `Command-Option-I`.
194-
4. Pick the **Sources** section.
195-
5. Press `Control/Command-P`, and then start typing the name of your test file to open it.
196-
6. Set a breakpoint in the test.
197-
7. Refresh the browser, and notice how it stops at the breakpoint.
191+
1. Karmaブラウザウィンドウを表示します。このステップでヘルプが必要な場合は、[テストのセットアップ](guide/testing/overview#set-up-for-testing)を参照してください。
192+
2. **DEBUG**ボタンをクリックして新しいブラウザタブを開き、テストを再実行します。
193+
3. ブラウザの**開発者ツール**を開きます。Windowsでは、`Ctrl-Shift-I`を押します。macOSでは、`Command-Option-I`を押します。
194+
4. **Sources**セクションを選択します。
195+
5. `Control/Command-P`を押し、テストファイルの名前を入力して開きます。
196+
6. テストにブレークポイントを設定します。
197+
7. ブラウザを更新すると、ブレークポイントで停止することがわかります。
198198

199-
<img alt="Karma debugging" src="assets/images/guide/testing/karma-1st-spec-debug.png">
199+
<img alt="Karmaのデバッグ" src="assets/images/guide/testing/karma-1st-spec-debug.png">

0 commit comments

Comments
 (0)