Skip to content

Commit c8626f7

Browse files
timdeschryvertimdeschryver
committed
test: add karma setup
1 parent ba8fc76 commit c8626f7

23 files changed

+392
-2
lines changed

‎angular.json

Lines changed: 87 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -94,6 +94,93 @@
9494
}
9595
}
9696
},
97+
"example-app-karma": {
98+
"projectType": "application",
99+
"root": "apps/example-app-karma",
100+
"sourceRoot": "apps/example-app-karma/src",
101+
"prefix": "app",
102+
"schematics": {},
103+
"architect": {
104+
"build": {
105+
"builder": "@angular-devkit/build-angular:browser",
106+
"options": {
107+
"outputPath": "dist/apps/example-app-karma",
108+
"index": "apps/example-app-karma/src/index.html",
109+
"main": "apps/example-app-karma/src/main.ts",
110+
"polyfills": "apps/example-app-karma/src/polyfills.ts",
111+
"tsConfig": "apps/example-app-karma/tsconfig.app.json",
112+
"assets": ["apps/example-app-karma/src/favicon.ico", "apps/example-app-karma/src/assets"],
113+
"styles": ["apps/example-app-karma/src/styles.css"],
114+
"scripts": [],
115+
"vendorChunk": true,
116+
"extractLicenses": false,
117+
"buildOptimizer": false,
118+
"sourceMap": true,
119+
"optimization": false,
120+
"namedChunks": true
121+
},
122+
"configurations": {
123+
"production": {
124+
"budgets": [
125+
{
126+
"type": "anyComponentStyle",
127+
"maximumWarning": "6kb"
128+
}
129+
],
130+
"fileReplacements": [
131+
{
132+
"replace": "apps/example-app-karma/src/environments/environment.ts",
133+
"with": "apps/example-app-karma/src/environments/environment.prod.ts"
134+
}
135+
],
136+
"optimization": true,
137+
"outputHashing": "all",
138+
"sourceMap": false,
139+
"namedChunks": false,
140+
"extractLicenses": true,
141+
"vendorChunk": false,
142+
"buildOptimizer": true
143+
}
144+
},
145+
"outputs": ["{options.outputPath}"]
146+
},
147+
"serve": {
148+
"builder": "@angular-devkit/build-angular:dev-server",
149+
"options": {
150+
"browserTarget": "example-app-karma:build"
151+
},
152+
"configurations": {
153+
"production": {
154+
"browserTarget": "example-app-karma:build:production"
155+
}
156+
}
157+
},
158+
"lint": {
159+
"builder": "@nrwl/linter:eslint",
160+
"options": {
161+
"lintFilePatterns": [
162+
"apps/example-app-karma/**/*.ts",
163+
"apps/example-app-karma/**/*.html",
164+
"apps/example-app-karma/src/**/*.html",
165+
"apps/example-app-karma/src/**/*.html",
166+
"apps/example-app-karma/src/**/*.html"
167+
]
168+
}
169+
},
170+
"test": {
171+
"builder": "@angular-devkit/build-angular:karma",
172+
"options": {
173+
"main": "apps/example-app-karma/src/test.ts",
174+
"tsConfig": "apps/example-app-karma/tsconfig.spec.json",
175+
"polyfills": "apps/example-app-karma/src/polyfills.ts",
176+
"karmaConfig": "apps/example-app-karma/karma.conf.js",
177+
"styles": [],
178+
"scripts": [],
179+
"assets": []
180+
}
181+
}
182+
}
183+
},
97184
"testing-library": {
98185
"root": "projects/testing-library",
99186
"sourceRoot": "projects/testing-library/src",

‎apps/example-app-karma/.browserslistrc

Lines changed: 17 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,17 @@
1+
# This file is used by the build system to adjust CSS and JS output to support the specified browsers below.
2+
# For additional information regarding the format and rule options, please see:
3+
# https://github.com/browserslist/browserslist#queries
4+
5+
# For the full list of supported browsers by the Angular framework, please see:
6+
# https://angular.io/guide/browser-support
7+
8+
# You can see what browsers were selected by your queries by running:
9+
# npx browserslist
10+
11+
last 1 Chrome version
12+
last 1 Firefox version
13+
last 2 Edge major versions
14+
last 2 Safari major versions
15+
last 2 iOS major versions
16+
Firefox ESR
17+
not IE 11 # Angular supports IE 11 only as an opt-in. To opt-in, remove the 'not' prefix on this line.

‎apps/example-app-karma/.eslintrc.json

Lines changed: 36 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,36 @@
1+
{
2+
"extends": "../../.eslintrc.json",
3+
"ignorePatterns": ["!**/*"],
4+
"overrides": [
5+
{
6+
"files": ["*.ts"],
7+
"extends": ["plugin:@nrwl/nx/angular", "plugin:@angular-eslint/template/process-inline-templates"],
8+
"parserOptions": {
9+
"project": ["apps/example-app-karma/tsconfig.*?.json"]
10+
},
11+
"rules": {
12+
"@angular-eslint/directive-selector": [
13+
"error",
14+
{
15+
"type": "attribute",
16+
"prefix": "app",
17+
"style": "camelCase"
18+
}
19+
],
20+
"@angular-eslint/component-selector": [
21+
"error",
22+
{
23+
"type": "element",
24+
"prefix": "app",
25+
"style": "kebab-case"
26+
}
27+
]
28+
}
29+
},
30+
{
31+
"files": ["*.html"],
32+
"extends": ["plugin:@nrwl/nx/angular-template"],
33+
"rules": {}
34+
}
35+
]
36+
}

‎apps/example-app-karma/karma.conf.js

Lines changed: 33 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,33 @@
1+
// Karma configuration file, see link for more information
2+
// https://karma-runner.github.io/1.0/config/configuration-file.html
3+
module.exports = function (config) {
4+
config.set({
5+
basePath: '',
6+
frameworks: ['jasmine', '@angular-devkit/build-angular'],
7+
plugins: [
8+
require('karma-jasmine'),
9+
require('karma-chrome-launcher'),
10+
require('@angular-devkit/build-angular/plugins/karma'),
11+
],
12+
client: {
13+
jasmine: {
14+
// you can add configuration options for Jasmine here
15+
// the possible options are listed at https://jasmine.github.io/api/edge/Configuration.html
16+
// for example, you can disable the random execution with `random: false`
17+
// or set a specific seed with `seed: 4321`
18+
},
19+
clearContext: false, // leave Jasmine Spec Runner output visible in browser
20+
},
21+
jasmineHtmlReporter: {
22+
suppressAll: true, // removes the duplicated traces
23+
},
24+
reporters: ['progress'],
25+
port: 9876,
26+
colors: true,
27+
logLevel: config.LOG_INFO,
28+
autoWatch: true,
29+
browsers: ['Chrome'],
30+
singleRun: false,
31+
restartOnFileChange: true,
32+
});
33+
};

‎apps/example-app-karma/src/app/app.module.ts

Lines changed: 9 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,9 @@
1+
import { BrowserModule } from '@angular/platform-browser';
2+
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
3+
import { NgModule } from '@angular/core';
4+
5+
@NgModule({
6+
declarations: [],
7+
imports: [BrowserModule, BrowserAnimationsModule],
8+
})
9+
export class AppModule {}

‎apps/example-app-karma/src/app/issues/issue-222.spec.ts

Lines changed: 13 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,13 @@
1+
import { render, screen } from '@testing-library/angular';
2+
3+
it('https://github.com/testing-library/angular-testing-library/issues/222', async () => {
4+
const { rerender } = await render(`<div>Hello {{ name}}</div>`, {
5+
componentProperties: {
6+
name: 'Sarah',
7+
},
8+
});
9+
10+
screen.getByText('Hello Sarah');
11+
rerender({ name: 'Mark' });
12+
screen.getByText('Hello Mark');
13+
});

‎apps/example-app-karma/src/assets/.gitkeep

Whitespace-only changes.

‎apps/example-app-karma/src/environments/environment.prod.ts

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
export const environment = {
2+
production: true,
3+
};

‎apps/example-app-karma/src/environments/environment.ts

Lines changed: 15 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,15 @@
1+
// This file can be replaced during build by using the `fileReplacements` array.
2+
// `ng build ---prod` replaces `environment.ts` with `environment.prod.ts`.
3+
// The list of file replacements can be found in `angular.json`.
4+
5+
export const environment = {
6+
production: false,
7+
};
8+
9+
/*
10+
* In development mode, to ignore zone related error stack frames such as
11+
* `zone.run`, `zoneDelegate.invokeTask` for easier debugging, you can
12+
* import the following file, but please comment it out in production mode
13+
* because it will have performance impact when throw error
14+
*/
15+
// import 'zone.js/plugins/zone-error'; // Included with Angular CLI.

‎apps/example-app-karma/src/favicon.ico

5.3 KB
Binary file not shown.

‎apps/example-app-karma/src/index.html

Lines changed: 14 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,14 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="utf-8" />
5+
<title>AngularTestingLibraryApp</title>
6+
<base href="/" />
7+
8+
<meta name="viewport" content="width=device-width, initial-scale=1" />
9+
<link rel="icon" type="image/x-icon" href="favicon.ico" />
10+
</head>
11+
<body>
12+
<app-root></app-root>
13+
</body>
14+
</html>

‎apps/example-app-karma/src/main.ts

Lines changed: 13 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,13 @@
1+
import { enableProdMode } from '@angular/core';
2+
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
3+
4+
import { AppModule } from './app/app.module';
5+
import { environment } from './environments/environment';
6+
7+
if (environment.production) {
8+
enableProdMode();
9+
}
10+
11+
platformBrowserDynamic()
12+
.bootstrapModule(AppModule)
13+
.catch((err) => console.log(err));

‎apps/example-app-karma/src/polyfills.ts

Lines changed: 75 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,75 @@
1+
/**
2+
* This file includes polyfills needed by Angular and is loaded before the app.
3+
* You can add your own extra polyfills to this file.
4+
*
5+
* This file is divided into 2 sections:
6+
* 1. Browser polyfills. These are applied before loading ZoneJS and are sorted by browsers.
7+
* 2. Application imports. Files imported after ZoneJS that should be loaded before your main
8+
* file.
9+
*
10+
* The current setup is for so-called "evergreen" browsers; the last versions of browsers that
11+
* automatically update themselves. This includes Safari >= 10, Chrome >= 55 (including Opera),
12+
* Edge >= 13 on the desktop, and iOS 10 and Chrome on mobile.
13+
*
14+
* Learn more in https://angular.io/docs/ts/latest/guide/browser-support.html
15+
*/
16+
17+
/** *************************************************************************************************
18+
* BROWSER POLYFILLS
19+
*/
20+
21+
/** IE9, IE10 and IE11 requires all of the following polyfills. **/
22+
// import 'core-js/es6/symbol';
23+
// import 'core-js/es6/object';
24+
// import 'core-js/es6/function';
25+
// import 'core-js/es6/parse-int';
26+
// import 'core-js/es6/parse-float';
27+
// import 'core-js/es6/number';
28+
// import 'core-js/es6/math';
29+
// import 'core-js/es6/string';
30+
// import 'core-js/es6/date';
31+
// import 'core-js/es6/array';
32+
// import 'core-js/es6/regexp';
33+
// import 'core-js/es6/map';
34+
// import 'core-js/es6/weak-map';
35+
// import 'core-js/es6/set';
36+
37+
/** IE10 and IE11 requires the following for NgClass support on SVG elements */
38+
// import 'classlist.js'; // Run `npm install --save classlist.js`.
39+
40+
/** IE10 and IE11 requires the following for the Reflect API. */
41+
// import 'core-js/es6/reflect';
42+
43+
/** Evergreen browsers require these. **/
44+
// Used for reflect-metadata in JIT. If you use AOT (and only Angular decorators), you can remove.
45+
46+
/**
47+
* Web Animations `@angular/platform-browser/animations`
48+
* Only required if AnimationBuilder is used within the application and using IE/Edge or Safari.
49+
* Standard animation support in Angular DOES NOT require any polyfills (as of Angular 6.0).
50+
**/
51+
// import 'web-animations-js'; // Run `npm install --save web-animations-js`.
52+
53+
/**
54+
* By default, zone.js will patch all possible macroTask and DomEvents
55+
* user can disable parts of macroTask/DomEvents patch by setting following flags
56+
*/
57+
58+
// (window as any).__Zone_disable_requestAnimationFrame = true; // disable patch requestAnimationFrame
59+
// (window as any).__Zone_disable_on_property = true; // disable patch onProperty such as onclick
60+
// (window as any).__zone_symbol__BLACK_LISTED_EVENTS = ['scroll', 'mousemove']; // disable patch specified eventNames
61+
62+
/*
63+
* in IE/Edge developer tools, the addEventListener will also be wrapped by zone.js
64+
* with the following flag, it will bypass `zone.js` patch for IE/Edge
65+
*/
66+
// (window as any).__Zone_enable_cross_context_check = true;
67+
68+
/** *************************************************************************************************
69+
* Zone JS is required by default for Angular itself.
70+
*/
71+
import 'zone.js'; // Included with Angular CLI.
72+
73+
/** *************************************************************************************************
74+
* APPLICATION IMPORTS
75+
*/

‎apps/example-app-karma/src/styles.css

Whitespace-only changes.

‎apps/example-app-karma/src/test.ts

Lines changed: 13 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,13 @@
1+
// This file is required by karma.conf.js and loads recursively all the .spec and framework files
2+
import 'zone.js/dist/zone-testing';
3+
import { getTestBed } from '@angular/core/testing';
4+
import { BrowserDynamicTestingModule, platformBrowserDynamicTesting } from '@angular/platform-browser-dynamic/testing';
5+
6+
declare const require: any;
7+
8+
// First, initialize the Angular testing environment.
9+
getTestBed().initTestEnvironment(BrowserDynamicTestingModule, platformBrowserDynamicTesting());
10+
// Then we find all the tests.
11+
const context = require.context('./', true, /\.spec\.ts$/);
12+
// And load the modules.
13+
context.keys().map(context);

‎apps/example-app-karma/tsconfig.app.json

Lines changed: 9 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,9 @@
1+
{
2+
"extends": "./tsconfig.json",
3+
"compilerOptions": {
4+
"outDir": "../../dist/out-tsc",
5+
"types": [],
6+
"allowJs": true
7+
},
8+
"files": ["src/main.ts", "src/polyfills.ts"]
9+
}

‎apps/example-app-karma/tsconfig.editor.json

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,7 @@
1+
{
2+
"extends": "./tsconfig.json",
3+
"include": ["**/*.ts"],
4+
"compilerOptions": {
5+
"types": ["jest", "node"]
6+
}
7+
}

‎apps/example-app-karma/tsconfig.json

Lines changed: 22 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,22 @@
1+
{
2+
"extends": "../../tsconfig.json",
3+
"files": [],
4+
"include": [],
5+
"compilerOptions": {},
6+
"angularCompilerOptions": {
7+
"strictInjectionParameters": true,
8+
"strictInputAccessModifiers": true,
9+
"strictTemplates": true
10+
},
11+
"references": [
12+
{
13+
"path": "./tsconfig.app.json"
14+
},
15+
{
16+
"path": "./tsconfig.spec.json"
17+
},
18+
{
19+
"path": "./tsconfig.editor.json"
20+
}
21+
]
22+
}

‎apps/example-app-karma/tsconfig.spec.json

Lines changed: 9 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,9 @@
1+
{
2+
"extends": "./tsconfig.json",
3+
"compilerOptions": {
4+
"outDir": "./out-tsc/spec",
5+
"types": ["jasmine", "node"]
6+
},
7+
"files": ["src/test.ts", "src/polyfills.ts"],
8+
"include": ["src/**/*.spec.ts", "src/**/*.d.ts"]
9+
}

0 commit comments

Comments
 (0)