) {}
33 |
34 | cancel(): void {
35 | this.dialogRef.close();
36 | }
37 | }
38 |
--------------------------------------------------------------------------------
/apps/example-app/src/app/examples/16-input-getter-setter.spec.ts:
--------------------------------------------------------------------------------
1 | import { render, screen } from '@testing-library/angular';
2 | import { InputGetterSetter } from './16-input-getter-setter';
3 |
4 | test('should run logic in the input setter and getter', async () => {
5 | await render(InputGetterSetter, { componentProperties: { value: 'Angular' } });
6 | const valueControl = screen.getByTestId('value');
7 | const getterValueControl = screen.getByTestId('value-getter');
8 |
9 | expect(valueControl).toHaveTextContent('I am value from setter Angular');
10 | expect(getterValueControl).toHaveTextContent('I am value from getter Angular');
11 | });
12 |
13 | test('should run logic in the input setter and getter while re-rendering', async () => {
14 | const { rerender } = await render(InputGetterSetter, { componentProperties: { value: 'Angular' } });
15 |
16 | expect(screen.getByTestId('value')).toHaveTextContent('I am value from setter Angular');
17 | expect(screen.getByTestId('value-getter')).toHaveTextContent('I am value from getter Angular');
18 |
19 | await rerender({ componentProperties: { value: 'React' } });
20 |
21 | // note we have to re-query because the elements are not the same anymore
22 | expect(screen.getByTestId('value')).toHaveTextContent('I am value from setter React');
23 | expect(screen.getByTestId('value-getter')).toHaveTextContent('I am value from getter React');
24 | });
25 |
--------------------------------------------------------------------------------
/apps/example-app/src/app/examples/16-input-getter-setter.ts:
--------------------------------------------------------------------------------
1 | import { Component, Input } from '@angular/core';
2 |
3 | @Component({
4 | standalone: true,
5 | selector: 'atl-fixture',
6 | template: `
7 | {{ derivedValue }}
8 | {{ value }}
9 | `,
10 | })
11 | // eslint-disable-next-line @angular-eslint/component-class-suffix
12 | export class InputGetterSetter {
13 | @Input() set value(value: string) {
14 | this.originalValue = value;
15 | this.derivedValue = 'I am value from setter ' + value;
16 | }
17 |
18 | get value() {
19 | return 'I am value from getter ' + this.originalValue;
20 | }
21 |
22 | private originalValue?: string;
23 | derivedValue?: string;
24 | }
25 |
--------------------------------------------------------------------------------
/apps/example-app/src/app/examples/17-component-with-attribute-selector.spec.ts:
--------------------------------------------------------------------------------
1 | import { render, screen } from '@testing-library/angular';
2 | import { ComponentWithAttributeSelectorComponent } from './17-component-with-attribute-selector';
3 |
4 | // Note: At this stage it is not possible to use the render(ComponentWithAttributeSelectorComponent, {...}) syntax
5 | // for components with attribute selectors!
6 | test('is possible to set input of component with attribute selector through template', async () => {
7 | await render(
8 | ``,
9 | {
10 | imports: [ComponentWithAttributeSelectorComponent],
11 | },
12 | );
13 |
14 | const valueControl = screen.getByTestId('value');
15 |
16 | expect(valueControl).toHaveTextContent('42');
17 | });
18 |
--------------------------------------------------------------------------------
/apps/example-app/src/app/examples/17-component-with-attribute-selector.ts:
--------------------------------------------------------------------------------
1 | import { Component, Input } from '@angular/core';
2 |
3 | @Component({
4 | standalone: true,
5 | selector: 'atl-fixture-component-with-attribute-selector[value]',
6 | template: ` {{ value }} `,
7 | })
8 | export class ComponentWithAttributeSelectorComponent {
9 | @Input() value!: number;
10 | }
11 |
--------------------------------------------------------------------------------
/apps/example-app/src/app/examples/18-html-as-input.spec.ts:
--------------------------------------------------------------------------------
1 | import { render, screen } from '@testing-library/angular';
2 | import { Pipe, PipeTransform } from '@angular/core';
3 |
4 | @Pipe({
5 | standalone: true,
6 | name: 'stripHTML',
7 | })
8 | class StripHTMLPipe implements PipeTransform {
9 | transform(stringValueWithHTML: string): string {
10 | return stringValueWithHTML.replace(/<[^>]*>?/gm, '');
11 | }
12 | }
13 |
14 | const STRING_WITH_HTML =
15 | 'Some database field with stripped HTML
';
16 |
17 | // https://github.com/testing-library/angular-testing-library/pull/271
18 | test('passes HTML as component properties', async () => {
19 | await render(`{{ stringWithHtml | stripHTML }}
`, {
20 | componentProperties: {
21 | stringWithHtml: STRING_WITH_HTML,
22 | },
23 | imports: [StripHTMLPipe],
24 | });
25 |
26 | expect(screen.getByText('Some database field with stripped HTML')).toBeInTheDocument();
27 | });
28 |
29 | test('throws when passed HTML is passed in directly', async () => {
30 | await expect(() =>
31 | render(` {{ '${STRING_WITH_HTML}' | stripHTML }}
`, {
32 | imports: [StripHTMLPipe],
33 | }),
34 | ).rejects.toThrow();
35 | });
36 |
--------------------------------------------------------------------------------
/apps/example-app/src/app/examples/19-standalone-component.spec.ts:
--------------------------------------------------------------------------------
1 | import { render, screen } from '@testing-library/angular';
2 | import { StandaloneComponent, StandaloneWithChildComponent } from './19-standalone-component';
3 |
4 | test('can render a standalone component', async () => {
5 | await render(StandaloneComponent);
6 |
7 | const content = screen.getByTestId('standalone');
8 |
9 | expect(content).toHaveTextContent('Standalone Component');
10 | });
11 |
12 | test('can render a standalone component with a child', async () => {
13 | await render(StandaloneWithChildComponent, {
14 | componentProperties: { name: 'Bob' },
15 | });
16 |
17 | const childContent = screen.getByTestId('standalone');
18 | expect(childContent).toHaveTextContent('Standalone Component');
19 |
20 | expect(screen.getByText('Hi Bob')).toBeInTheDocument();
21 | expect(screen.getByText('This has a child')).toBeInTheDocument();
22 | });
23 |
--------------------------------------------------------------------------------
/apps/example-app/src/app/examples/19-standalone-component.ts:
--------------------------------------------------------------------------------
1 | import { Component, Input } from '@angular/core';
2 |
3 | @Component({
4 | selector: 'atl-standalone',
5 | template: `Standalone Component
`,
6 | standalone: true,
7 | })
8 | export class StandaloneComponent {}
9 |
10 | @Component({
11 | selector: 'atl-standalone-with-child',
12 | template: `Hi {{ name }}
13 | This has a child
14 | `,
15 | standalone: true,
16 | imports: [StandaloneComponent],
17 | })
18 | export class StandaloneWithChildComponent {
19 | @Input()
20 | name?: string;
21 | }
22 |
--------------------------------------------------------------------------------
/apps/example-app/src/app/examples/20-test-harness.spec.ts:
--------------------------------------------------------------------------------
1 | import { TestbedHarnessEnvironment } from '@angular/cdk/testing/testbed';
2 | import { MatButtonHarness } from '@angular/material/button/testing';
3 | import { MatSnackBarHarness } from '@angular/material/snack-bar/testing';
4 | import { render, screen } from '@testing-library/angular';
5 | import userEvent from '@testing-library/user-event';
6 |
7 | import { HarnessComponent } from './20-test-harness';
8 |
9 | test.skip('can be used with TestHarness', async () => {
10 | const view = await render(``, {
11 | imports: [HarnessComponent],
12 | });
13 | const loader = TestbedHarnessEnvironment.documentRootLoader(view.fixture);
14 |
15 | const buttonHarness = await loader.getHarness(MatButtonHarness);
16 | const button = await buttonHarness.host();
17 | button.click();
18 |
19 | const snackbarHarness = await loader.getHarness(MatSnackBarHarness);
20 | expect(await snackbarHarness.getMessage()).toMatch(/Pizza Party!!!/i);
21 | });
22 |
23 | test.skip('can be used in combination with TestHarness', async () => {
24 | const user = userEvent.setup();
25 |
26 | const view = await render(HarnessComponent);
27 | const loader = TestbedHarnessEnvironment.documentRootLoader(view.fixture);
28 |
29 | await user.click(screen.getByRole('button'));
30 |
31 | const snackbarHarness = await loader.getHarness(MatSnackBarHarness);
32 | expect(await snackbarHarness.getMessage()).toMatch(/Pizza Party!!!/i);
33 |
34 | expect(screen.getByText(/Pizza Party!!!/i)).toBeInTheDocument();
35 | });
36 |
--------------------------------------------------------------------------------
/apps/example-app/src/app/examples/20-test-harness.ts:
--------------------------------------------------------------------------------
1 | import { Component } from '@angular/core';
2 | import { MatButtonModule } from '@angular/material/button';
3 | import { MatSnackBar, MatSnackBarModule } from '@angular/material/snack-bar';
4 |
5 | @Component({
6 | selector: 'atl-harness',
7 | standalone: true,
8 | imports: [MatButtonModule, MatSnackBarModule],
9 | template: `
10 |
11 | `,
12 | })
13 | export class HarnessComponent {
14 | constructor(private snackBar: MatSnackBar) {}
15 |
16 | openSnackBar() {
17 | return this.snackBar.open('Pizza Party!!!');
18 | }
19 | }
20 |
--------------------------------------------------------------------------------
/apps/example-app/src/app/examples/21-deferable-view.component.ts:
--------------------------------------------------------------------------------
1 | import { Component } from '@angular/core';
2 |
3 | @Component({
4 | selector: 'atl-deferable-view-child',
5 | template: ` Hello from deferred child component
`,
6 | standalone: true,
7 | })
8 | export class DeferableViewChildComponent {}
9 |
10 | @Component({
11 | template: `
12 | @defer (on timer(2s)) {
13 |
14 | } @placeholder {
15 | Hello from placeholder
16 | } @loading {
17 | Hello from loading
18 | } @error {
19 | Hello from error
20 | }
21 | `,
22 | imports: [DeferableViewChildComponent],
23 | standalone: true,
24 | })
25 | export class DeferableViewComponent {}
26 |
--------------------------------------------------------------------------------
/apps/example-app/src/app/examples/21-deferable-view.spec.ts:
--------------------------------------------------------------------------------
1 | import { render, screen } from '@testing-library/angular';
2 | import { DeferBlockState } from '@angular/core/testing';
3 | import { DeferableViewComponent } from './21-deferable-view.component';
4 |
5 | test('renders deferred views based on state', async () => {
6 | const { renderDeferBlock } = await render(DeferableViewComponent);
7 |
8 | expect(screen.getByText(/Hello from placeholder/i)).toBeInTheDocument();
9 |
10 | await renderDeferBlock(DeferBlockState.Loading);
11 | expect(screen.getByText(/Hello from loading/i)).toBeInTheDocument();
12 |
13 | await renderDeferBlock(DeferBlockState.Complete);
14 | expect(screen.getByText(/Hello from deferred child component/i)).toBeInTheDocument();
15 | });
16 |
17 | test('initially renders deferred views based on given state', async () => {
18 | await render(DeferableViewComponent, {
19 | deferBlockStates: DeferBlockState.Error,
20 | });
21 |
22 | expect(screen.getByText(/Hello from error/i)).toBeInTheDocument();
23 | });
24 |
--------------------------------------------------------------------------------
/apps/example-app/src/app/examples/22-signal-inputs.component.spec.ts:
--------------------------------------------------------------------------------
1 | import { aliasedInput, render, screen, within } from '@testing-library/angular';
2 | import { SignalInputComponent } from './22-signal-inputs.component';
3 | import userEvent from '@testing-library/user-event';
4 |
5 | test('works with signal inputs', async () => {
6 | await render(SignalInputComponent, {
7 | inputs: {
8 | ...aliasedInput('greeting', 'Hello'),
9 | name: 'world',
10 | age: '45',
11 | },
12 | });
13 |
14 | const inputValue = within(screen.getByTestId('input-value'));
15 | expect(inputValue.getByText(/hello world of 45 years old/i)).toBeInTheDocument();
16 | });
17 |
18 | test('works with computed', async () => {
19 | await render(SignalInputComponent, {
20 | inputs: {
21 | ...aliasedInput('greeting', 'Hello'),
22 | name: 'world',
23 | age: '45',
24 | },
25 | });
26 |
27 | const computedValue = within(screen.getByTestId('computed-value'));
28 | expect(computedValue.getByText(/hello world of 45 years old/i)).toBeInTheDocument();
29 | });
30 |
31 | test('can update signal inputs', async () => {
32 | const { fixture } = await render(SignalInputComponent, {
33 | inputs: {
34 | ...aliasedInput('greeting', 'Hello'),
35 | name: 'world',
36 | age: '45',
37 | },
38 | });
39 |
40 | const inputValue = within(screen.getByTestId('input-value'));
41 | const computedValue = within(screen.getByTestId('computed-value'));
42 |
43 | expect(inputValue.getByText(/hello world of 45 years old/i)).toBeInTheDocument();
44 |
45 | fixture.componentInstance.name.set('updated');
46 | // set doesn't trigger change detection within the test, findBy is needed to update the template
47 | expect(await inputValue.findByText(/hello updated of 45 years old/i)).toBeInTheDocument();
48 | expect(await computedValue.findByText(/hello updated of 45 years old/i)).toBeInTheDocument();
49 |
50 | // it's not recommended to access the model directly, but it's possible
51 | expect(fixture.componentInstance.name()).toBe('updated');
52 | });
53 |
54 | test('output emits a value', async () => {
55 | const submitFn = jest.fn();
56 | await render(SignalInputComponent, {
57 | inputs: {
58 | ...aliasedInput('greeting', 'Hello'),
59 | name: 'world',
60 | age: '45',
61 | },
62 | on: {
63 | submitValue: submitFn,
64 | },
65 | });
66 |
67 | await userEvent.click(screen.getByRole('button'));
68 |
69 | expect(submitFn).toHaveBeenCalledWith('world');
70 | });
71 |
72 | test('model update also updates the template', async () => {
73 | const { fixture } = await render(SignalInputComponent, {
74 | inputs: {
75 | ...aliasedInput('greeting', 'Hello'),
76 | name: 'initial',
77 | age: '45',
78 | },
79 | });
80 |
81 | const inputValue = within(screen.getByTestId('input-value'));
82 | const computedValue = within(screen.getByTestId('computed-value'));
83 |
84 | expect(inputValue.getByText(/hello initial/i)).toBeInTheDocument();
85 | expect(computedValue.getByText(/hello initial/i)).toBeInTheDocument();
86 |
87 | await userEvent.clear(screen.getByRole('textbox'));
88 | await userEvent.type(screen.getByRole('textbox'), 'updated');
89 |
90 | expect(inputValue.getByText(/hello updated/i)).toBeInTheDocument();
91 | expect(computedValue.getByText(/hello updated/i)).toBeInTheDocument();
92 | expect(fixture.componentInstance.name()).toBe('updated');
93 |
94 | fixture.componentInstance.name.set('new value');
95 | // set doesn't trigger change detection within the test, findBy is needed to update the template
96 | expect(await inputValue.findByText(/hello new value/i)).toBeInTheDocument();
97 | expect(await computedValue.findByText(/hello new value/i)).toBeInTheDocument();
98 |
99 | // it's not recommended to access the model directly, but it's possible
100 | expect(fixture.componentInstance.name()).toBe('new value');
101 | });
102 |
103 | test('works with signal inputs, computed values, and rerenders', async () => {
104 | const view = await render(SignalInputComponent, {
105 | inputs: {
106 | ...aliasedInput('greeting', 'Hello'),
107 | name: 'world',
108 | age: '45',
109 | },
110 | });
111 |
112 | const inputValue = within(screen.getByTestId('input-value'));
113 | const computedValue = within(screen.getByTestId('computed-value'));
114 |
115 | expect(inputValue.getByText(/hello world of 45 years old/i)).toBeInTheDocument();
116 | expect(computedValue.getByText(/hello world of 45 years old/i)).toBeInTheDocument();
117 |
118 | await view.rerender({
119 | inputs: {
120 | ...aliasedInput('greeting', 'bye'),
121 | name: 'test',
122 | age: '0',
123 | },
124 | });
125 |
126 | expect(inputValue.getByText(/bye test of 0 years old/i)).toBeInTheDocument();
127 | expect(computedValue.getByText(/bye test of 0 years old/i)).toBeInTheDocument();
128 | });
129 |
--------------------------------------------------------------------------------
/apps/example-app/src/app/examples/22-signal-inputs.component.ts:
--------------------------------------------------------------------------------
1 | import { Component, computed, input, model, numberAttribute, output } from '@angular/core';
2 | import { FormsModule } from '@angular/forms';
3 |
4 | @Component({
5 | selector: 'atl-signal-input',
6 | template: `
7 | {{ greetings() }} {{ name() }} of {{ age() }} years old
8 | {{ greetingMessage() }}
9 |
10 |
11 | `,
12 | standalone: true,
13 | imports: [FormsModule],
14 | })
15 | export class SignalInputComponent {
16 | greetings = input('', {
17 | alias: 'greeting',
18 | });
19 | age = input.required({ transform: numberAttribute });
20 | name = model.required();
21 | submitValue = output();
22 |
23 | greetingMessage = computed(() => `${this.greetings()} ${this.name()} of ${this.age()} years old`);
24 |
25 | submitName() {
26 | this.submitValue.emit(this.name());
27 | }
28 | }
29 |
--------------------------------------------------------------------------------
/apps/example-app/src/app/examples/23-host-directive.spec.ts:
--------------------------------------------------------------------------------
1 | import { aliasedInput, render, screen } from '@testing-library/angular';
2 | import { HostDirectiveComponent } from './23-host-directive';
3 |
4 | test('can set input properties of host directives using aliasedInput', async () => {
5 | await render(HostDirectiveComponent, {
6 | inputs: {
7 | ...aliasedInput('atlText', 'Hello world'),
8 | },
9 | });
10 |
11 | expect(screen.getByText(/hello world/i)).toBeInTheDocument();
12 | });
13 |
14 | test('can set input properties of host directives using componentInputs', async () => {
15 | await render(HostDirectiveComponent, {
16 | componentInputs: {
17 | atlText: 'Hello world',
18 | },
19 | });
20 |
21 | expect(screen.getByText(/hello world/i)).toBeInTheDocument();
22 | });
23 |
--------------------------------------------------------------------------------
/apps/example-app/src/app/examples/23-host-directive.ts:
--------------------------------------------------------------------------------
1 | import { Component, Directive, ElementRef, input, OnInit } from '@angular/core';
2 |
3 | @Directive({
4 | selector: '[atlText]',
5 | })
6 | export class TextDirective implements OnInit {
7 | atlText = input('');
8 |
9 | constructor(private el: ElementRef) {}
10 |
11 | ngOnInit() {
12 | this.el.nativeElement.textContent = this.atlText();
13 | }
14 | }
15 |
16 | @Component({
17 | selector: 'atl-host-directive',
18 | template: ``,
19 | hostDirectives: [{ directive: TextDirective, inputs: ['atlText'] }],
20 | })
21 | export class HostDirectiveComponent {}
22 |
--------------------------------------------------------------------------------
/apps/example-app/src/app/examples/README.md:
--------------------------------------------------------------------------------
1 | # 🦔 Angular Testing Library Examples
2 |
3 | Follow these three steps to run the example tests:
4 |
5 | - clone or download the repository
6 | - move into the repository and install the needed dependencies with `npm install`
7 | - use the command `npx nx test example-app` from within the root of this repository to run the tests
8 |
9 | The tests in this repository are written with [Jest](https://jestjs.io/), but you can use the test runner of your choice.
10 |
11 | If you're looking for an example that is not in this repository, feel free to create an [issue](https://github.com/testing-library/angular-testing-library/issues/new).
12 |
--------------------------------------------------------------------------------
/apps/example-app/src/test-setup.ts:
--------------------------------------------------------------------------------
1 | import { setupZoneTestEnv } from 'jest-preset-angular/setup-env/zone';
2 | import '@testing-library/jest-dom';
3 |
4 | setupZoneTestEnv();
5 |
--------------------------------------------------------------------------------
/apps/example-app/tsconfig.app.json:
--------------------------------------------------------------------------------
1 | {
2 | "extends": "./tsconfig.json",
3 | "compilerOptions": {
4 | "outDir": "../../dist/out-tsc",
5 | "types": [],
6 | "allowJs": true,
7 | "target": "ES2022",
8 | "useDefineForClassFields": false
9 | },
10 | "files": ["src/main.ts"],
11 | "include": ["src/**/*.d.ts"],
12 | "exclude": ["**/*.test.ts", "**/*.spec.ts", "jest.config.ts"]
13 | }
14 |
--------------------------------------------------------------------------------
/apps/example-app/tsconfig.editor.json:
--------------------------------------------------------------------------------
1 | {
2 | "extends": "./tsconfig.json",
3 | "include": ["**/*.ts"],
4 | "compilerOptions": {
5 | "types": ["jest", "node"]
6 | }
7 | }
8 |
--------------------------------------------------------------------------------
/apps/example-app/tsconfig.json:
--------------------------------------------------------------------------------
1 | {
2 | "extends": "../../tsconfig.base.json",
3 | "files": [],
4 | "include": [],
5 | "compilerOptions": {
6 | "target": "es2020"
7 | },
8 | "angularCompilerOptions": {
9 | "strictInjectionParameters": true,
10 | "strictInputAccessModifiers": true,
11 | "strictTemplates": true
12 | },
13 | "references": [
14 | {
15 | "path": "./tsconfig.app.json"
16 | },
17 | {
18 | "path": "./tsconfig.spec.json"
19 | },
20 | {
21 | "path": "./tsconfig.editor.json"
22 | }
23 | ]
24 | }
25 |
--------------------------------------------------------------------------------
/apps/example-app/tsconfig.spec.json:
--------------------------------------------------------------------------------
1 | {
2 | "extends": "./tsconfig.json",
3 | "compilerOptions": {
4 | "outDir": "../../dist/out-tsc",
5 | "module": "commonjs",
6 | "types": ["jest", "node", "@testing-library/jest-dom"]
7 | },
8 | "files": ["src/test-setup.ts"],
9 | "include": ["**/*.spec.ts", "**/*.test.ts", "**/*.d.ts", "jest.config.ts"]
10 | }
11 |
--------------------------------------------------------------------------------
/eslint.config.cjs:
--------------------------------------------------------------------------------
1 | // @ts-check
2 |
3 | // TODO - https://github.com/nrwl/nx/issues/22576
4 |
5 | /** @type {import('@typescript-eslint/utils/ts-eslint').FlatConfig.ConfigPromise} */
6 | const config = (async () => (await import('./eslint.config.mjs')).default)();
7 | module.exports = config;
8 |
--------------------------------------------------------------------------------
/eslint.config.mjs:
--------------------------------------------------------------------------------
1 | // @ts-check
2 |
3 | import eslint from "@eslint/js";
4 | import tseslint from "typescript-eslint";
5 | import angular from "angular-eslint";
6 | import jestDom from 'eslint-plugin-jest-dom';
7 | import testingLibrary from 'eslint-plugin-testing-library';
8 |
9 | export default tseslint.config(
10 | {
11 | files: ["**/*.ts"],
12 | extends: [
13 | eslint.configs.recommended,
14 | ...tseslint.configs.recommended,
15 | ...tseslint.configs.stylistic,
16 | ...angular.configs.tsRecommended,
17 | ],
18 | processor: angular.processInlineTemplates,
19 | rules: {
20 | "@angular-eslint/directive-selector": [
21 | "error",
22 | {
23 | type: "attribute",
24 | prefix: "atl",
25 | style: "camelCase",
26 | },
27 | ],
28 | "@angular-eslint/component-selector": [
29 | "error",
30 | {
31 | type: "element",
32 | prefix: "atl",
33 | style: "kebab-case",
34 | },
35 | ],
36 | "@typescript-eslint/no-explicit-any": "off",
37 | "@typescript-eslint/no-unused-vars": [
38 | "error",
39 | {
40 | "argsIgnorePattern": "^_",
41 | "varsIgnorePattern": "^_",
42 | "caughtErrorsIgnorePattern": "^_"
43 | }
44 | ],
45 | // These are needed for test cases
46 | "@angular-eslint/prefer-standalone": "off",
47 | "@angular-eslint/no-input-rename": "off",
48 | "@angular-eslint/no-input-rename": "off",
49 | },
50 | },
51 | {
52 | files: ["**/*.spec.ts"],
53 | extends: [
54 | jestDom.configs["flat/recommended"],
55 | testingLibrary.configs["flat/angular"],
56 | ],
57 | },
58 | {
59 | files: ["**/*.html"],
60 | extends: [
61 | ...angular.configs.templateRecommended,
62 | ...angular.configs.templateAccessibility,
63 | ],
64 | rules: {},
65 | }
66 | );
67 |
--------------------------------------------------------------------------------
/jest.config.ts:
--------------------------------------------------------------------------------
1 | const { getJestProjectsAsync } = require('@nx/jest');
2 |
3 | export default async () => ({
4 | projects: await getJestProjectsAsync(),
5 | });
6 |
--------------------------------------------------------------------------------
/jest.preset.js:
--------------------------------------------------------------------------------
1 | const nxPreset = require('@nx/jest/preset').default;
2 |
3 | module.exports = {
4 | ...nxPreset,
5 | testMatch: ['**/+(*.)+(spec|test).+(ts|js)?(x)'],
6 | transform: {
7 | '^.+\\.(ts|mjs|js|html)$': [
8 | 'jest-preset-angular',
9 | {
10 | tsconfig: '/tsconfig.spec.json',
11 | stringifyContentPathRegex: '\\.(html|svg)$',
12 | },
13 | ],
14 | },
15 | transformIgnorePatterns: ['node_modules/(?!.*\\.mjs$)'],
16 | resolver: '@nx/jest/plugins/resolver',
17 | moduleFileExtensions: ['ts', 'js', 'html'],
18 | globals: {},
19 | snapshotSerializers: [
20 | 'jest-preset-angular/build/serializers/no-ng-attributes',
21 | 'jest-preset-angular/build/serializers/ng-snapshot',
22 | 'jest-preset-angular/build/serializers/html-comment',
23 | ],
24 | /* TODO: Update to latest Jest snapshotFormat
25 | * By default Nx has kept the older style of Jest Snapshot formats
26 | * to prevent breaking of any existing tests with snapshots.
27 | * It's recommend you update to the latest format.
28 | * You can do this by removing snapshotFormat property
29 | * and running tests with --update-snapshot flag.
30 | * Example: "nx affected --targets=test --update-snapshot"
31 | * More info: https://jestjs.io/docs/upgrading-to-jest29#snapshot-format
32 | */
33 | snapshotFormat: { escapeString: true, printBasicPrototype: true },
34 | };
35 |
--------------------------------------------------------------------------------
/lint-staged.config.js:
--------------------------------------------------------------------------------
1 | module.exports = {
2 | '*.{ts,js}': ['eslint --fix'],
3 | '*.{ts,js,json,md}': ['prettier --write'],
4 | };
5 |
--------------------------------------------------------------------------------
/nx.json:
--------------------------------------------------------------------------------
1 | {
2 | "workspaceLayout": {
3 | "appsDir": "apps",
4 | "libsDir": "projects"
5 | },
6 | "cli": {
7 | "analytics": false,
8 | "cache": {
9 | "enabled": true,
10 | "path": "./.cache/angular",
11 | "environment": "all"
12 | }
13 | },
14 | "tasksRunnerOptions": {
15 | "default": {
16 | "options": {
17 | "canTrackAnalytics": false,
18 | "showUsageWarnings": true
19 | }
20 | }
21 | },
22 | "generators": {
23 | "@nrlw/workspace:library": {
24 | "linter": "eslint",
25 | "unitTestRunner": "jest",
26 | "strict": true,
27 | "standaloneConfig": true,
28 | "buildable": true
29 | },
30 | "@nx/angular:application": {
31 | "style": "scss",
32 | "linter": "eslint",
33 | "unitTestRunner": "jest",
34 | "e2eTestRunner": "cypress",
35 | "strict": true,
36 | "standaloneConfig": true,
37 | "tags": ["type:app"]
38 | },
39 | "@nx/angular:library": {
40 | "linter": "eslint",
41 | "unitTestRunner": "jest",
42 | "strict": true,
43 | "standaloneConfig": true,
44 | "publishable": true
45 | },
46 | "@nx/angular:component": {
47 | "style": "scss",
48 | "displayBlock": true,
49 | "changeDetection": "OnPush"
50 | },
51 | "@schematics/angular": {
52 | "component": {
53 | "style": "scss",
54 | "displayBlock": true,
55 | "changeDetection": "OnPush"
56 | }
57 | }
58 | },
59 | "defaultProject": "example-app",
60 | "$schema": "./node_modules/nx/schemas/nx-schema.json",
61 | "targetDefaults": {
62 | "build": {
63 | "dependsOn": ["^build"],
64 | "inputs": ["production", "^production"],
65 | "cache": true
66 | },
67 | "test": {
68 | "inputs": ["default", "^production"],
69 | "cache": true
70 | },
71 | "@nx/jest:jest": {
72 | "inputs": ["default", "^production"],
73 | "cache": true,
74 | "options": {
75 | "passWithNoTests": true
76 | },
77 | "configurations": {
78 | "ci": {
79 | "ci": true,
80 | "codeCoverage": true
81 | }
82 | }
83 | },
84 | "@nx/eslint:lint": {
85 | "inputs": ["default", "{workspaceRoot}/eslint.config.cjs"],
86 | "cache": true
87 | }
88 | },
89 | "namedInputs": {
90 | "default": ["{projectRoot}/**/*", "sharedGlobals"],
91 | "sharedGlobals": [],
92 | "production": [
93 | "default",
94 | "!{projectRoot}/**/*.spec.[jt]s",
95 | "!{projectRoot}/tsconfig.spec.json",
96 | "!{projectRoot}/karma.conf.js",
97 | "!{projectRoot}/**/?(*.)+(spec|test).[jt]s?(x)?(.snap)",
98 | "!{projectRoot}/jest.config.[jt]s",
99 | "!{projectRoot}/eslint.config.cjs",
100 | "!{projectRoot}/src/test-setup.[jt]s"
101 | ]
102 | },
103 | "nxCloudAccessToken": "M2Q4YjlkNjMtMzY1NC00ZjkwLTk1ZjgtZjg5Y2VkMzFjM2FifHJlYWQtd3JpdGU=",
104 | "parallel": 3,
105 | "useInferencePlugins": false,
106 | "defaultBase": "main"
107 | }
108 |
--------------------------------------------------------------------------------
/other/logo.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/testing-library/angular-testing-library/e1e046c75c297fd8ab06237178d036553b1ff215/other/logo.jpg
--------------------------------------------------------------------------------
/other/logo.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/testing-library/angular-testing-library/e1e046c75c297fd8ab06237178d036553b1ff215/other/logo.png
--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "@testing-library/angular-app",
3 | "version": "0.0.0-semantically-released",
4 | "scripts": {
5 | "ng": "nx",
6 | "nx": "nx",
7 | "start": "nx serve",
8 | "prebuild": "rimraf dist",
9 | "build": "nx run-many --target=build --projects=testing-library",
10 | "build:schematics": "tsc -p ./projects/testing-library/tsconfig.schematics.json",
11 | "test": "nx run-many --target=test --all --parallel=1",
12 | "lint": "nx run-many --all --target=lint",
13 | "e2e": "nx e2e",
14 | "affected:apps": "nx affected:apps",
15 | "affected:libs": "nx affected:libs",
16 | "affected:build": "nx affected:build",
17 | "affected:e2e": "nx affected:e2e",
18 | "affected:test": "nx affected:test",
19 | "affected:lint": "nx affected:lint",
20 | "affected:dep-graph": "nx affected:dep-graph",
21 | "affected": "nx affected",
22 | "format": "nx format:write",
23 | "format:write": "nx format:write",
24 | "format:check": "nx format:check",
25 | "pre-commit": "lint-staged",
26 | "semantic-release": "semantic-release",
27 | "prepare": "git config core.hookspath .githooks"
28 | },
29 | "dependencies": {
30 | "@angular/animations": "19.0.1",
31 | "@angular/cdk": "19.0.1",
32 | "@angular/common": "19.0.1",
33 | "@angular/compiler": "19.0.1",
34 | "@angular/core": "19.0.1",
35 | "@angular/material": "19.0.1",
36 | "@angular/platform-browser": "19.0.1",
37 | "@angular/platform-browser-dynamic": "19.0.1",
38 | "@angular/router": "19.0.1",
39 | "@ngrx/store": "19.0.0",
40 | "@nx/angular": "20.3.0",
41 | "@testing-library/dom": "^10.4.0",
42 | "rxjs": "7.8.0",
43 | "tslib": "~2.8.1",
44 | "zone.js": "^0.15.0"
45 | },
46 | "devDependencies": {
47 | "@angular-devkit/build-angular": "19.0.1",
48 | "@angular-devkit/core": "19.0.1",
49 | "@angular-devkit/schematics": "19.0.1",
50 | "@angular-eslint/builder": "19.0.2",
51 | "@angular-eslint/eslint-plugin": "19.0.2",
52 | "@angular-eslint/eslint-plugin-template": "19.0.2",
53 | "@angular-eslint/schematics": "19.0.2",
54 | "@angular-eslint/template-parser": "19.0.2",
55 | "@angular/cli": "~19.0.6",
56 | "@angular/compiler-cli": "19.0.1",
57 | "@angular/forms": "19.0.1",
58 | "@angular/language-service": "19.0.1",
59 | "@eslint/eslintrc": "^2.1.1",
60 | "@nx/eslint": "20.3.0",
61 | "@nx/eslint-plugin": "20.3.0",
62 | "@nx/jest": "20.3.0",
63 | "@nx/node": "20.3.0",
64 | "@nx/plugin": "20.3.0",
65 | "@nx/workspace": "20.3.0",
66 | "@schematics/angular": "18.2.9",
67 | "@testing-library/jasmine-dom": "^1.3.3",
68 | "@testing-library/jest-dom": "^6.6.3",
69 | "@testing-library/user-event": "^14.5.2",
70 | "@types/jasmine": "4.3.1",
71 | "@types/jest": "29.5.14",
72 | "@types/node": "22.10.1",
73 | "@types/testing-library__jasmine-dom": "^1.3.4",
74 | "@typescript-eslint/types": "^8.19.0",
75 | "@typescript-eslint/utils": "^8.19.0",
76 | "angular-eslint": "^19.0.2",
77 | "autoprefixer": "^10.4.20",
78 | "cpy-cli": "^5.0.0",
79 | "eslint": "^9.8.0",
80 | "eslint-plugin-jest-dom": "~5.5.0",
81 | "eslint-plugin-testing-library": "~7.1.1",
82 | "jasmine-core": "4.2.0",
83 | "jasmine-spec-reporter": "7.0.0",
84 | "jest": "29.7.0",
85 | "jest-environment-jsdom": "29.7.0",
86 | "jest-preset-angular": "14.4.2",
87 | "karma": "6.4.0",
88 | "karma-chrome-launcher": "^3.2.0",
89 | "karma-coverage": "^2.2.1",
90 | "karma-jasmine": "5.1.0",
91 | "karma-jasmine-html-reporter": "2.0.0",
92 | "lint-staged": "^15.3.0",
93 | "ng-mocks": "^14.13.1",
94 | "ng-packagr": "19.0.1",
95 | "nx": "20.3.0",
96 | "postcss": "^8.4.49",
97 | "postcss-import": "14.1.0",
98 | "postcss-preset-env": "7.5.0",
99 | "postcss-url": "10.1.3",
100 | "prettier": "2.6.2",
101 | "rimraf": "^5.0.10",
102 | "semantic-release": "^24.2.1",
103 | "ts-jest": "29.1.0",
104 | "ts-node": "10.9.1",
105 | "typescript": "5.6.2",
106 | "typescript-eslint": "^8.19.0"
107 | }
108 | }
109 |
--------------------------------------------------------------------------------
/prettier.config.js:
--------------------------------------------------------------------------------
1 | module.exports = {
2 | printWidth: 120,
3 | tabWidth: 2,
4 | useTabs: false,
5 | semi: true,
6 | singleQuote: true,
7 | trailingComma: 'all',
8 | bracketSpacing: true,
9 | };
10 |
--------------------------------------------------------------------------------
/projects/testing-library/eslint.config.cjs:
--------------------------------------------------------------------------------
1 | // @ts-check
2 |
3 | // TODO - https://github.com/nrwl/nx/issues/22576
4 |
5 | /** @type {import('@typescript-eslint/utils/ts-eslint').FlatConfig.ConfigPromise} */
6 | const config = (async () => (await import('./eslint.config.mjs')).default)();
7 | module.exports = config;
8 |
--------------------------------------------------------------------------------
/projects/testing-library/eslint.config.mjs:
--------------------------------------------------------------------------------
1 | // @ts-check
2 |
3 | import tseslint from "typescript-eslint";
4 | import rootConfig from "../../eslint.config.mjs";
5 |
6 | export default tseslint.config(
7 | ...rootConfig,
8 | );
9 |
--------------------------------------------------------------------------------
/projects/testing-library/index.ts:
--------------------------------------------------------------------------------
1 | export * from './src/public_api';
2 |
--------------------------------------------------------------------------------
/projects/testing-library/jest-utils/index.ts:
--------------------------------------------------------------------------------
1 | export * from './src/public_api';
2 |
--------------------------------------------------------------------------------
/projects/testing-library/jest-utils/ng-package.json:
--------------------------------------------------------------------------------
1 | {}
2 |
--------------------------------------------------------------------------------
/projects/testing-library/jest-utils/src/lib/create-mock.ts:
--------------------------------------------------------------------------------
1 | import { Type, Provider } from '@angular/core';
2 |
3 | export type Mock = T & { [K in keyof T]: T[K] & jest.Mock };
4 |
5 | export function createMock(type: Type): Mock {
6 | const mock: any = {};
7 |
8 | function mockFunctions(proto: any) {
9 | if (!proto) {
10 | return;
11 | }
12 |
13 | for (const prop of Object.getOwnPropertyNames(proto)) {
14 | if (prop === 'constructor') {
15 | continue;
16 | }
17 |
18 | const descriptor = Object.getOwnPropertyDescriptor(proto, prop);
19 | if (typeof descriptor?.value === 'function') {
20 | mock[prop] = jest.fn();
21 | }
22 | }
23 |
24 | mockFunctions(Object.getPrototypeOf(proto));
25 | }
26 |
27 | mockFunctions(type.prototype);
28 |
29 | return mock;
30 | }
31 |
32 | export function createMockWithValues(type: Type, values: Partial>): Mock {
33 | const mock = createMock(type);
34 |
35 | Object.entries(values).forEach(([field, value]) => {
36 | (mock as any)[field] = value;
37 | });
38 |
39 | return mock;
40 | }
41 |
42 | export function provideMock(type: Type): Provider {
43 | return {
44 | provide: type,
45 | useValue: createMock(type),
46 | };
47 | }
48 |
49 | export function provideMockWithValues(type: Type, values: Partial>): Provider {
50 | return {
51 | provide: type,
52 | useValue: createMockWithValues(type, values),
53 | };
54 | }
55 |
--------------------------------------------------------------------------------
/projects/testing-library/jest-utils/src/lib/index.ts:
--------------------------------------------------------------------------------
1 | export * from './create-mock';
2 |
--------------------------------------------------------------------------------
/projects/testing-library/jest-utils/src/public_api.ts:
--------------------------------------------------------------------------------
1 | /*
2 | * Public API Surface of testing-library
3 | */
4 |
5 | export * from './lib';
6 |
--------------------------------------------------------------------------------
/projects/testing-library/jest-utils/tests/create-mock.spec.ts:
--------------------------------------------------------------------------------
1 | import { Component } from '@angular/core';
2 | import { TestBed } from '@angular/core/testing';
3 | import { fireEvent, render, screen } from '@testing-library/angular';
4 |
5 | import { createMock, provideMock, provideMockWithValues, Mock } from '../src/public_api';
6 |
7 | class FixtureService {
8 | constructor(private foo: string, public bar: string) {}
9 |
10 | print() {
11 | console.log(this.foo, this.bar);
12 | }
13 |
14 | concat() {
15 | return this.foo + this.bar;
16 | }
17 | }
18 |
19 | @Component({
20 | selector: 'atl-fixture',
21 | template: ` `,
22 | })
23 | class FixtureComponent {
24 | constructor(private service: FixtureService) {}
25 |
26 | print() {
27 | this.service.print();
28 | }
29 | }
30 |
31 | test('mocks all functions', () => {
32 | const mock = createMock(FixtureService);
33 | expect(mock.print.mock).toBeDefined();
34 | });
35 |
36 | test('provides a mock service', async () => {
37 | await render(FixtureComponent, {
38 | providers: [provideMock(FixtureService)],
39 | });
40 | const service = TestBed.inject(FixtureService);
41 |
42 | fireEvent.click(screen.getByText('Print'));
43 | expect(service.print).toHaveBeenCalledTimes(1);
44 | });
45 |
46 | test('provides a mock service with values', async () => {
47 | await render(FixtureComponent, {
48 | providers: [
49 | provideMockWithValues(FixtureService, {
50 | bar: 'value',
51 | concat: jest.fn(() => 'a concatenated value'),
52 | }),
53 | ],
54 | });
55 |
56 | const service = TestBed.inject(FixtureService);
57 |
58 | fireEvent.click(screen.getByText('Print'));
59 |
60 | expect(service.bar).toEqual('value');
61 | expect(service.concat()).toEqual('a concatenated value');
62 | expect(service.print).toHaveBeenCalled();
63 | });
64 |
65 | test('is possible to write a mock implementation', async () => {
66 | await render(FixtureComponent, {
67 | providers: [provideMock(FixtureService)],
68 | });
69 |
70 | const service = TestBed.inject(FixtureService) as Mock;
71 |
72 | fireEvent.click(screen.getByText('Print'));
73 | expect(service.print).toHaveBeenCalled();
74 | });
75 |
--------------------------------------------------------------------------------
/projects/testing-library/jest.config.ts:
--------------------------------------------------------------------------------
1 | export default {
2 | displayName: {
3 | name: 'ATL',
4 | color: 'magenta',
5 | },
6 | preset: '../../jest.preset.js',
7 | setupFilesAfterEnv: ['/test-setup.ts'],
8 | };
9 |
--------------------------------------------------------------------------------
/projects/testing-library/ng-package.json:
--------------------------------------------------------------------------------
1 | {
2 | "$schema": "../../node_modules/ng-packagr/ng-package.schema.json",
3 | "dest": "../../dist/@testing-library/angular",
4 | "deleteDestPath": false,
5 | "assets": ["schematics/**/*.json"],
6 | "lib": {
7 | "entryFile": "index.ts"
8 | },
9 | "allowedNonPeerDependencies": ["@testing-library/dom"]
10 | }
11 |
--------------------------------------------------------------------------------
/projects/testing-library/package.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "@testing-library/angular",
3 | "version": "0.0.0-semantically-released",
4 | "description": "Test your Angular components with the dom-testing-library",
5 | "repository": {
6 | "type": "git",
7 | "url": "git+https://github.com/testing-library/angular-testing-library.git"
8 | },
9 | "keywords": [
10 | "angular",
11 | "ngx",
12 | "ng",
13 | "typescript",
14 | "angular2",
15 | "test",
16 | "dom-testing-library"
17 | ],
18 | "author": "Tim Deschryver",
19 | "license": "MIT",
20 | "bugs": {
21 | "url": "https://github.com/testing-library/angular-testing-library/issues"
22 | },
23 | "homepage": "https://github.com/testing-library/angular-testing-library#readme",
24 | "schematics": "./schematics/collection.json",
25 | "ng-add": {
26 | "save": "devDependencies"
27 | },
28 | "ng-update": {
29 | "migrations": "./schematics/migrations/migrations.json"
30 | },
31 | "peerDependencies": {
32 | "@angular/animations": ">= 17.0.0",
33 | "@angular/common": ">= 17.0.0",
34 | "@angular/platform-browser": ">= 17.0.0",
35 | "@angular/router": ">= 17.0.0",
36 | "@angular/core": ">= 17.0.0",
37 | "@testing-library/dom": "^10.0.0"
38 | },
39 | "dependencies": {
40 | "tslib": "^2.3.1"
41 | },
42 | "publishConfig": {
43 | "access": "public"
44 | }
45 | }
46 |
--------------------------------------------------------------------------------
/projects/testing-library/project.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "testing-library",
3 | "$schema": "../../node_modules/nx/schemas/project-schema.json",
4 | "projectType": "library",
5 | "sourceRoot": "projects/testing-library/src",
6 | "prefix": "lib",
7 | "tags": [],
8 | "targets": {
9 | "build-package": {
10 | "executor": "@nx/angular:package",
11 | "outputs": ["{workspaceRoot}/dist/@testing-library/angular"],
12 | "options": {
13 | "project": "projects/testing-library/ng-package.json"
14 | },
15 | "configurations": {
16 | "production": {
17 | "tsConfig": "projects/testing-library/tsconfig.lib.prod.json"
18 | },
19 | "development": {
20 | "tsConfig": "projects/testing-library/tsconfig.lib.json"
21 | }
22 | },
23 | "defaultConfiguration": "production"
24 | },
25 | "lint": {
26 | "executor": "@nx/eslint:lint"
27 | },
28 | "build": {
29 | "executor": "nx:run-commands",
30 | "options": {
31 | "parallel": false,
32 | "commands": [
33 | {
34 | "command": "nx run testing-library:build-package"
35 | },
36 | {
37 | "command": "npm run build:schematics"
38 | },
39 | {
40 | "command": "cpy ./README.md ./dist/@testing-library/angular"
41 | }
42 | ]
43 | }
44 | },
45 | "test": {
46 | "executor": "@nx/jest:jest",
47 | "options": {
48 | "jestConfig": "projects/testing-library/jest.config.ts",
49 | "passWithNoTests": false
50 | },
51 | "outputs": ["{workspaceRoot}/coverage/projects/testing-library"]
52 | }
53 | }
54 | }
55 |
--------------------------------------------------------------------------------
/projects/testing-library/schematics/collection.json:
--------------------------------------------------------------------------------
1 | {
2 | "schematics": {
3 | "ng-add": {
4 | "aliases": ["init"],
5 | "factory": "./ng-add",
6 | "schema": "./ng-add/schema.json",
7 | "description": "Add @testing-library/angular to your application"
8 | }
9 | }
10 | }
11 |
--------------------------------------------------------------------------------
/projects/testing-library/schematics/migrations/dtl-as-dev-dependency/index.spec.ts:
--------------------------------------------------------------------------------
1 | import { SchematicTestRunner, UnitTestTree } from '@angular-devkit/schematics/testing';
2 | import * as path from 'path';
3 | import { EmptyTree } from '@angular-devkit/schematics';
4 |
5 | test('adds DTL to devDependencies', async () => {
6 | const tree = await setup({});
7 | const pkg = tree.readContent('package.json');
8 |
9 | expect(pkg).toMatchInlineSnapshot(`
10 | "{
11 | \\"devDependencies\\": {
12 | \\"@testing-library/dom\\": \\"^10.0.0\\"
13 | }
14 | }"
15 | `);
16 | });
17 |
18 | test('ignores if DTL is already listed as a dev dependency', async () => {
19 | const tree = await setup({ devDependencies: { '@testing-library/dom': '^9.0.0' } });
20 | const pkg = tree.readContent('package.json');
21 |
22 | expect(pkg).toMatchInlineSnapshot(`"{\\"devDependencies\\":{\\"@testing-library/dom\\":\\"^9.0.0\\"}}"`);
23 | });
24 |
25 | test('ignores if DTL is already listed as a dependency', async () => {
26 | const tree = await setup({ dependencies: { '@testing-library/dom': '^11.0.0' } });
27 | const pkg = tree.readContent('package.json');
28 |
29 | expect(pkg).toMatchInlineSnapshot(`"{\\"dependencies\\":{\\"@testing-library/dom\\":\\"^11.0.0\\"}}"`);
30 | });
31 |
32 | async function setup(packageJson: object) {
33 | const collectionPath = path.join(__dirname, '../migrations.json');
34 | const schematicRunner = new SchematicTestRunner('schematics', collectionPath);
35 |
36 | const tree = new UnitTestTree(new EmptyTree());
37 | tree.create('package.json', JSON.stringify(packageJson));
38 |
39 | await schematicRunner.runSchematic(`atl-add-dtl-as-dev-dependency`, {}, tree);
40 |
41 | return tree;
42 | }
43 |
--------------------------------------------------------------------------------
/projects/testing-library/schematics/migrations/dtl-as-dev-dependency/index.ts:
--------------------------------------------------------------------------------
1 | import { Rule, SchematicContext, Tree } from '@angular-devkit/schematics';
2 | import {
3 | addPackageJsonDependency,
4 | getPackageJsonDependency,
5 | NodeDependencyType,
6 | } from '@schematics/angular/utility/dependencies';
7 |
8 | const dtl = '@testing-library/dom';
9 |
10 | export default function (): Rule {
11 | return async (tree: Tree, context: SchematicContext) => {
12 | const dtlDep = getPackageJsonDependency(tree, dtl);
13 | if (dtlDep) {
14 | context.logger.info(`Skipping installation of '@testing-library/dom' because it's already installed.`);
15 | } else {
16 | context.logger.info(`Adding '@testing-library/dom' as a peer dependency.`);
17 | addPackageJsonDependency(tree, { name: dtl, type: NodeDependencyType.Dev, overwrite: false, version: '^10.0.0' });
18 | }
19 | };
20 | }
21 |
--------------------------------------------------------------------------------
/projects/testing-library/schematics/migrations/migrations.json:
--------------------------------------------------------------------------------
1 | {
2 | "$schema": "../../../../node_modules/@angular-devkit/schematics/collection-schema.json",
3 | "schematics": {
4 | "atl-add-dtl-as-dev-dependency": {
5 | "description": "Add @testing-library/dom as a dev dependency",
6 | "version": "17.0.0-beta.3",
7 | "factory": "./dtl-as-dev-dependency/index"
8 | }
9 | }
10 | }
11 |
--------------------------------------------------------------------------------
/projects/testing-library/schematics/ng-add/index.ts:
--------------------------------------------------------------------------------
1 | import { chain, noop, Rule, SchematicContext, Tree } from '@angular-devkit/schematics';
2 | import {
3 | addPackageJsonDependency,
4 | getPackageJsonDependency,
5 | NodeDependencyType,
6 | } from '@schematics/angular/utility/dependencies';
7 | import { NodePackageInstallTask } from '@angular-devkit/schematics/tasks';
8 | import { Schema } from './schema';
9 |
10 | export default function ({ installJestDom, installUserEvent }: Schema): Rule {
11 | return () => {
12 | return chain([
13 | addDependency('@testing-library/dom', '^10.0.0', NodeDependencyType.Dev),
14 | installJestDom ? addDependency('@testing-library/jest-dom', '^6.4.8', NodeDependencyType.Dev) : noop(),
15 | installUserEvent ? addDependency('@testing-library/user-event', '^14.5.2', NodeDependencyType.Dev) : noop(),
16 | installDependencies(),
17 | ]);
18 | };
19 | }
20 |
21 | function addDependency(packageName: string, version: string, dependencyType: NodeDependencyType) {
22 | return (tree: Tree, context: SchematicContext) => {
23 | const dtlDep = getPackageJsonDependency(tree, packageName);
24 | if (dtlDep) {
25 | context.logger.info(`Skipping installation of '${packageName}' because it's already installed.`);
26 | } else {
27 | context.logger.info(`Adding '${packageName}' as a dev dependency.`);
28 | addPackageJsonDependency(tree, { name: packageName, type: dependencyType, overwrite: false, version });
29 | }
30 |
31 | return tree;
32 | };
33 | }
34 |
35 | export function installDependencies() {
36 | return (_tree: Tree, context: SchematicContext) => {
37 | context.addTask(new NodePackageInstallTask());
38 |
39 | context.logger.info(
40 | `Correctly installed @testing-library/angular.
41 | See our docs at https://testing-library.com/docs/angular-testing-library/intro/ to get started.`,
42 | );
43 | };
44 | }
45 |
--------------------------------------------------------------------------------
/projects/testing-library/schematics/ng-add/schema.json:
--------------------------------------------------------------------------------
1 | {
2 | "$schema": "http://json-schema.org/schema",
3 | "$id": "SchematicsTestingLibraryAngular",
4 | "title": "testing-library-angular",
5 | "type": "object",
6 | "properties": {
7 | "installJestDom": {
8 | "type": "boolean",
9 | "description": "Install jest-dom as a dependency.",
10 | "$default": {
11 | "$source": "argv",
12 | "index": 0
13 | },
14 | "default": false,
15 | "x-prompt": "Would you like to install jest-dom?"
16 | },
17 | "installUserEvent": {
18 | "type": "boolean",
19 | "description": "Install user-event as a dependency.",
20 | "$default": {
21 | "$source": "argv",
22 | "index": 1
23 | },
24 | "default": false,
25 | "x-prompt": "Would you like to install user-event?"
26 | }
27 | },
28 | "additionalProperties": false,
29 | "required": []
30 | }
31 |
--------------------------------------------------------------------------------
/projects/testing-library/schematics/ng-add/schema.ts:
--------------------------------------------------------------------------------
1 | export interface Schema {
2 | installJestDom: boolean;
3 | installUserEvent: boolean;
4 | }
5 |
--------------------------------------------------------------------------------
/projects/testing-library/src/lib/config.ts:
--------------------------------------------------------------------------------
1 | import { Config } from './models';
2 |
3 | let config: Config = {
4 | dom: {},
5 | defaultImports: [],
6 | };
7 |
8 | export function configure(newConfig: Partial | ((config: Partial) => Partial)) {
9 | if (typeof newConfig === 'function') {
10 | // Pass the existing config out to the provided function
11 | // and accept a delta in return
12 | newConfig = newConfig(config);
13 | }
14 |
15 | // Merge the incoming config delta
16 | config = {
17 | ...config,
18 | ...newConfig,
19 | };
20 | }
21 |
22 | export function getConfig() {
23 | return config;
24 | }
25 |
--------------------------------------------------------------------------------
/projects/testing-library/src/public_api.ts:
--------------------------------------------------------------------------------
1 | /*
2 | * Public API Surface of testing-library
3 | */
4 |
5 | export * from './lib/models';
6 | export * from './lib/config';
7 | export * from './lib/testing-library';
8 |
--------------------------------------------------------------------------------
/projects/testing-library/test-setup.ts:
--------------------------------------------------------------------------------
1 | import { setupZoneTestEnv } from 'jest-preset-angular/setup-env/zone';
2 | import '@testing-library/jest-dom';
3 | import { TextEncoder, TextDecoder } from 'util';
4 |
5 | setupZoneTestEnv();
6 |
7 | Object.assign(global, { TextDecoder, TextEncoder });
8 |
--------------------------------------------------------------------------------
/projects/testing-library/tests/auto-cleanup.spec.ts:
--------------------------------------------------------------------------------
1 | import { Component, Input } from '@angular/core';
2 | import { render } from '../src/public_api';
3 |
4 | @Component({
5 | selector: 'atl-fixture',
6 | template: `Hello {{ name }}!`,
7 | })
8 | class FixtureComponent {
9 | @Input() name = '';
10 | }
11 |
12 | describe('Angular auto clean up - previous components only get cleanup up on init (based on root-id)', () => {
13 | it('first', async () => {
14 | await render(FixtureComponent, {
15 | componentProperties: {
16 | name: 'first',
17 | },
18 | });
19 | });
20 |
21 | it('second', async () => {
22 | await render(FixtureComponent, {
23 | componentProperties: {
24 | name: 'second',
25 | },
26 | });
27 | expect(document.body.innerHTML).not.toContain('first');
28 | });
29 | });
30 |
31 | describe('ATL auto clean up - after each test the containers get removed', () => {
32 | it('first', async () => {
33 | await render(FixtureComponent, {
34 | removeAngularAttributes: true,
35 | });
36 | });
37 |
38 | it('second', () => {
39 | expect(document.body).toBeEmptyDOMElement();
40 | });
41 | });
42 |
--------------------------------------------------------------------------------
/projects/testing-library/tests/config.spec.ts:
--------------------------------------------------------------------------------
1 | import { Component } from '@angular/core';
2 | import { TestBed } from '@angular/core/testing';
3 | import { render, configure, Config } from '../src/public_api';
4 | import { ReactiveFormsModule, FormBuilder } from '@angular/forms';
5 |
6 | @Component({
7 | selector: 'atl-fixture',
8 | template: `
9 |
15 | `,
16 | standalone: false,
17 | })
18 | class FormsComponent {
19 | form = this.formBuilder.group({
20 | name: [''],
21 | });
22 |
23 | constructor(private formBuilder: FormBuilder) {}
24 | }
25 |
26 | let originalConfig: Config;
27 | beforeEach(() => {
28 | // Grab the existing configuration so we can restore
29 | // it at the end of the test
30 | configure((existingConfig) => {
31 | originalConfig = existingConfig as Config;
32 | // Don't change the existing config
33 | return {};
34 | });
35 | });
36 |
37 | afterEach(() => {
38 | configure(originalConfig);
39 | });
40 |
41 | beforeEach(() => {
42 | configure({
43 | defaultImports: [ReactiveFormsModule],
44 | });
45 | });
46 |
47 | test('adds default imports to the testbed', async () => {
48 | await render(FormsComponent);
49 |
50 | const reactive = TestBed.inject(ReactiveFormsModule);
51 | expect(reactive).not.toBeNull();
52 | });
53 |
--------------------------------------------------------------------------------
/projects/testing-library/tests/debug.spec.ts:
--------------------------------------------------------------------------------
1 | import { Component } from '@angular/core';
2 | import { render, screen } from '../src/public_api';
3 |
4 | @Component({
5 | selector: 'atl-fixture',
6 | template: `
7 | rawr
8 |
9 | `,
10 | })
11 | class FixtureComponent {}
12 |
13 | test('debug', async () => {
14 | jest.spyOn(console, 'log').mockImplementation();
15 | const { debug } = await render(FixtureComponent);
16 |
17 | // eslint-disable-next-line testing-library/no-debugging-utils
18 | debug();
19 |
20 | expect(console.log).toHaveBeenCalledWith(expect.stringContaining('rawr'));
21 | (console.log as any).mockRestore();
22 | });
23 |
24 | test('debug allows to be called with an element', async () => {
25 | jest.spyOn(console, 'log').mockImplementation();
26 | const { debug } = await render(FixtureComponent);
27 | const btn = screen.getByTestId('btn');
28 |
29 | // eslint-disable-next-line testing-library/no-debugging-utils
30 | debug(btn);
31 |
32 | expect(console.log).not.toHaveBeenCalledWith(expect.stringContaining('rawr'));
33 | expect(console.log).toHaveBeenCalledWith(expect.stringContaining(`I'm a button`));
34 | (console.log as any).mockRestore();
35 | });
36 |
--------------------------------------------------------------------------------
/projects/testing-library/tests/defer-blocks.spec.ts:
--------------------------------------------------------------------------------
1 | import { Component } from '@angular/core';
2 | import { DeferBlockBehavior, DeferBlockState } from '@angular/core/testing';
3 | import { render, screen, fireEvent } from '../src/public_api';
4 |
5 | test('renders a defer block in different states using the official API', async () => {
6 | const { fixture } = await render(FixtureComponent);
7 |
8 | const deferBlockFixture = (await fixture.getDeferBlocks())[0];
9 |
10 | await deferBlockFixture.render(DeferBlockState.Loading);
11 | expect(screen.getByText(/loading/i)).toBeInTheDocument();
12 | expect(screen.queryByText(/Defer block content/i)).not.toBeInTheDocument();
13 |
14 | await deferBlockFixture.render(DeferBlockState.Complete);
15 | expect(screen.getByText(/Defer block content/i)).toBeInTheDocument();
16 | expect(screen.queryByText(/load/i)).not.toBeInTheDocument();
17 | });
18 |
19 | test('renders a defer block in different states using ATL', async () => {
20 | const { renderDeferBlock } = await render(FixtureComponent);
21 |
22 | await renderDeferBlock(DeferBlockState.Loading);
23 | expect(screen.getByText(/loading/i)).toBeInTheDocument();
24 | expect(screen.queryByText(/Defer block content/i)).not.toBeInTheDocument();
25 |
26 | await renderDeferBlock(DeferBlockState.Complete, 0);
27 | expect(screen.getByText(/Defer block content/i)).toBeInTheDocument();
28 | expect(screen.queryByText(/load/i)).not.toBeInTheDocument();
29 | });
30 |
31 | test('renders a defer block in different states using DeferBlockBehavior.Playthrough', async () => {
32 | await render(FixtureComponent, {
33 | deferBlockBehavior: DeferBlockBehavior.Playthrough,
34 | });
35 |
36 | expect(await screen.findByText(/loading/i)).toBeInTheDocument();
37 | expect(await screen.findByText(/Defer block content/i)).toBeInTheDocument();
38 | });
39 |
40 | test('renders a defer block in different states using DeferBlockBehavior.Playthrough event', async () => {
41 | await render(FixtureComponentWithEventsComponent, {
42 | deferBlockBehavior: DeferBlockBehavior.Playthrough,
43 | });
44 |
45 | const button = screen.getByRole('button', { name: /click/i });
46 | fireEvent.click(button);
47 |
48 | expect(screen.getByText(/empty defer block/i)).toBeInTheDocument();
49 | });
50 |
51 | test('renders a defer block initially in the loading state', async () => {
52 | await render(FixtureComponent, {
53 | deferBlockStates: DeferBlockState.Loading,
54 | });
55 |
56 | expect(screen.getByText(/loading/i)).toBeInTheDocument();
57 | expect(screen.queryByText(/Defer block content/i)).not.toBeInTheDocument();
58 | });
59 |
60 | test('renders a defer block initially in the complete state', async () => {
61 | await render(FixtureComponent, {
62 | deferBlockStates: DeferBlockState.Complete,
63 | });
64 |
65 | expect(screen.getByText(/Defer block content/i)).toBeInTheDocument();
66 | expect(screen.queryByText(/load/i)).not.toBeInTheDocument();
67 | });
68 |
69 | test('renders a defer block in an initial state using the array syntax', async () => {
70 | await render(FixtureComponent, {
71 | deferBlockStates: [{ deferBlockState: DeferBlockState.Complete, deferBlockIndex: 0 }],
72 | });
73 |
74 | expect(screen.getByText(/Defer block content/i)).toBeInTheDocument();
75 | expect(screen.queryByText(/load/i)).not.toBeInTheDocument();
76 | });
77 |
78 | @Component({
79 | template: `
80 | @defer {
81 | Defer block content
82 | } @loading {
83 | Loading...
84 | }
85 | `,
86 | })
87 | class FixtureComponent {}
88 |
89 | @Component({
90 | template: `
91 |
92 | @defer(on interaction(trigger)) {
93 | empty defer block
94 | }
95 | `,
96 | })
97 | class FixtureComponentWithEventsComponent {}
98 |
--------------------------------------------------------------------------------
/projects/testing-library/tests/detect-changes.spec.ts:
--------------------------------------------------------------------------------
1 | import { Component, OnInit } from '@angular/core';
2 | import { fakeAsync } from '@angular/core/testing';
3 | import { FormControl, ReactiveFormsModule } from '@angular/forms';
4 | import { delay } from 'rxjs/operators';
5 | import { render, fireEvent, screen } from '../src/public_api';
6 |
7 | @Component({
8 | selector: 'atl-fixture',
9 | template: `
10 |
11 |
12 | `,
13 | standalone: true,
14 | imports: [ReactiveFormsModule],
15 | })
16 | class FixtureComponent implements OnInit {
17 | inputControl = new FormControl();
18 | caption = 'Button';
19 |
20 | ngOnInit() {
21 | this.inputControl.valueChanges.pipe(delay(400)).subscribe(() => (this.caption = 'Button updated after 400ms'));
22 | }
23 | }
24 |
25 | describe('detectChanges', () => {
26 | it('does not recognize change if execution is delayed', async () => {
27 | await render(FixtureComponent);
28 |
29 | fireEvent.input(screen.getByTestId('input'), {
30 | target: {
31 | value: 'What a great day!',
32 | },
33 | });
34 | expect(screen.getByTestId('button').innerHTML).toBe('Button');
35 | });
36 |
37 | it('exposes detectChanges triggering a change detection cycle', fakeAsync(async () => {
38 | const { detectChanges } = await render(FixtureComponent);
39 |
40 | fireEvent.input(screen.getByTestId('input'), {
41 | target: {
42 | value: 'What a great day!',
43 | },
44 | });
45 |
46 | // TODO: The code should be running in the fakeAsync zone to call this function ?
47 | // tick(500);
48 | await new Promise((resolve) => setTimeout(resolve, 500));
49 |
50 | detectChanges();
51 |
52 | expect(screen.getByTestId('button').innerHTML).toBe('Button updated after 400ms');
53 | }));
54 |
55 | it('does not throw on a destroyed fixture', async () => {
56 | const { fixture } = await render(FixtureComponent);
57 |
58 | fixture.destroy();
59 |
60 | fireEvent.input(screen.getByTestId('input'), {
61 | target: {
62 | value: 'What a great day!',
63 | },
64 | });
65 | expect(screen.getByTestId('button').innerHTML).toBe('Button');
66 | });
67 | });
68 |
--------------------------------------------------------------------------------
/projects/testing-library/tests/find-by.spec.ts:
--------------------------------------------------------------------------------
1 | import { Component } from '@angular/core';
2 | import { timer } from 'rxjs';
3 | import { render, screen } from '../src/public_api';
4 | import { mapTo } from 'rxjs/operators';
5 | import { AsyncPipe } from '@angular/common';
6 |
7 | @Component({
8 | selector: 'atl-fixture',
9 | template: ` {{ result | async }}
`,
10 | imports: [AsyncPipe],
11 | })
12 | class FixtureComponent {
13 | result = timer(30).pipe(mapTo('I am visible'));
14 | }
15 |
16 | describe('screen', () => {
17 | it('waits for element to be added to the DOM', async () => {
18 | await render(FixtureComponent);
19 | await expect(screen.findByText('I am visible')).resolves.toBeTruthy();
20 | });
21 |
22 | it('rejects when something cannot be found', async () => {
23 | await render(FixtureComponent);
24 | await expect(screen.findByText('I am invisible', {}, { timeout: 40 })).rejects.toThrow('x');
25 | });
26 | });
27 |
28 | describe('rendered component', () => {
29 | it('waits for element to be added to the DOM', async () => {
30 | const { findByText } = await render(FixtureComponent);
31 | /// We wish to test the utility function from `render` here.
32 | // eslint-disable-next-line testing-library/prefer-screen-queries
33 | await expect(findByText('I am visible')).resolves.toBeTruthy();
34 | });
35 |
36 | it('rejects when something cannot be found', async () => {
37 | const { findByText } = await render(FixtureComponent);
38 | /// We wish to test the utility function from `render` here.
39 | // eslint-disable-next-line testing-library/prefer-screen-queries
40 | await expect(findByText('I am invisible', {}, { timeout: 40 })).rejects.toThrow('x');
41 | });
42 | });
43 |
--------------------------------------------------------------------------------
/projects/testing-library/tests/fire-event.spec.ts:
--------------------------------------------------------------------------------
1 | import { Component } from '@angular/core';
2 | import { render, fireEvent, screen } from '../src/public_api';
3 | import { FormsModule } from '@angular/forms';
4 |
5 | describe('fireEvent', () => {
6 | @Component({
7 | selector: 'atl-fixture',
8 | template: `
9 | Hello {{ name }}
`,
10 | standalone: true,
11 | imports: [FormsModule],
12 | })
13 | class FixtureComponent {
14 | name = '';
15 | }
16 |
17 | it('automatically detect changes when event is fired', async () => {
18 | await render(FixtureComponent);
19 |
20 | fireEvent.input(screen.getByTestId('input'), { target: { value: 'Tim' } });
21 |
22 | expect(screen.getByText('Hello Tim')).toBeInTheDocument();
23 | });
24 |
25 | it('can disable automatic detect changes when event is fired', async () => {
26 | const { detectChanges } = await render(FixtureComponent, {
27 | autoDetectChanges: false,
28 | });
29 |
30 | fireEvent.input(screen.getByTestId('input'), { target: { value: 'Tim' } });
31 |
32 | expect(screen.queryByText('Hello Tim')).not.toBeInTheDocument();
33 |
34 | detectChanges();
35 |
36 | expect(screen.getByText('Hello Tim')).toBeInTheDocument();
37 | });
38 |
39 | it('does not call detect changes when fixture is destroyed', async () => {
40 | const { fixture } = await render(FixtureComponent);
41 |
42 | fixture.destroy();
43 |
44 | // should otherwise throw
45 | fireEvent.input(screen.getByTestId('input'), { target: { value: 'Bonjour' } });
46 | });
47 | });
48 |
--------------------------------------------------------------------------------
/projects/testing-library/tests/integration.spec.ts:
--------------------------------------------------------------------------------
1 | import { Component, EventEmitter, Injectable, Input, Output } from '@angular/core';
2 | import { TestBed } from '@angular/core/testing';
3 | import { of, BehaviorSubject } from 'rxjs';
4 | import { debounceTime, switchMap, map, startWith } from 'rxjs/operators';
5 | import { render, screen, waitFor, waitForElementToBeRemoved, within } from '../src/lib/testing-library';
6 | import userEvent from '@testing-library/user-event';
7 | import { AsyncPipe, NgForOf } from '@angular/common';
8 |
9 | const DEBOUNCE_TIME = 1_000;
10 |
11 | @Injectable()
12 | class EntitiesService {
13 | fetchAll() {
14 | return of([]);
15 | }
16 | }
17 |
18 | @Injectable()
19 | class ModalService {
20 | open(...args: any[]) {
21 | console.log('open', ...args);
22 | }
23 | }
24 |
25 | @Component({
26 | selector: 'atl-table',
27 | template: `
28 |
29 |
30 | | {{ entity.name }} |
31 |
32 |
33 | |
34 |
35 |
36 | `,
37 | imports: [NgForOf],
38 | })
39 | class TableComponent {
40 | @Input() entities: any[] = [];
41 | @Output() edit = new EventEmitter();
42 | }
43 |
44 | @Component({
45 | template: `
46 | Entities Title
47 |
48 |
52 |
53 | `,
54 | imports: [TableComponent, AsyncPipe],
55 | })
56 | class EntitiesComponent {
57 | query = new BehaviorSubject('');
58 | readonly entities = this.query.pipe(
59 | debounceTime(DEBOUNCE_TIME),
60 | switchMap((q) =>
61 | this.entitiesService.fetchAll().pipe(map((ent: any) => ent.filter((e: any) => e.name.includes(q)))),
62 | ),
63 | startWith(entities),
64 | );
65 |
66 | constructor(private entitiesService: EntitiesService, private modalService: ModalService) {}
67 |
68 | newEntityClicked() {
69 | this.modalService.open('new entity');
70 | }
71 |
72 | editEntityClicked(entity: string) {
73 | setTimeout(() => {
74 | this.modalService.open('edit entity', entity);
75 | }, 100);
76 | }
77 | }
78 |
79 | const entities = [
80 | {
81 | id: 1,
82 | name: 'Entity 1',
83 | },
84 | {
85 | id: 2,
86 | name: 'Entity 2',
87 | },
88 | {
89 | id: 3,
90 | name: 'Entity 3',
91 | },
92 | ];
93 |
94 | async function setup() {
95 | jest.useFakeTimers();
96 | const user = userEvent.setup();
97 |
98 | await render(EntitiesComponent, {
99 | providers: [
100 | {
101 | provide: EntitiesService,
102 | useValue: {
103 | fetchAll: jest.fn().mockReturnValue(of(entities)),
104 | },
105 | },
106 | {
107 | provide: ModalService,
108 | useValue: {
109 | open: jest.fn(),
110 | },
111 | },
112 | ],
113 | });
114 |
115 | const modalMock = TestBed.inject(ModalService);
116 |
117 | return {
118 | modalMock,
119 | user,
120 | };
121 | }
122 |
123 | test('renders the heading', async () => {
124 | await setup();
125 |
126 | expect(await screen.findByRole('heading', { name: /Entities Title/i })).toBeInTheDocument();
127 | });
128 |
129 | test('renders the entities', async () => {
130 | await setup();
131 |
132 | expect(await screen.findByRole('cell', { name: /Entity 1/i })).toBeInTheDocument();
133 | expect(await screen.findByRole('cell', { name: /Entity 2/i })).toBeInTheDocument();
134 | expect(await screen.findByRole('cell', { name: /Entity 3/i })).toBeInTheDocument();
135 | });
136 |
137 | test.skip('finds the cell', async () => {
138 | const { user } = await setup();
139 |
140 | await user.type(await screen.findByRole('textbox', { name: /Search entities/i }), 'Entity 2', {});
141 |
142 | jest.advanceTimersByTime(DEBOUNCE_TIME);
143 |
144 | await waitForElementToBeRemoved(() => screen.queryByRole('cell', { name: /Entity 1/i }));
145 | expect(await screen.findByRole('cell', { name: /Entity 2/i })).toBeInTheDocument();
146 | });
147 |
148 | test.skip('opens the modal', async () => {
149 | const { modalMock, user } = await setup();
150 | await user.click(await screen.findByRole('button', { name: /New Entity/i }));
151 | expect(modalMock.open).toHaveBeenCalledWith('new entity');
152 |
153 | const row = await screen.findByRole('row', {
154 | name: /Entity 2/i,
155 | });
156 |
157 | await user.click(
158 | await within(row).findByRole('button', {
159 | name: /edit/i,
160 | }),
161 | );
162 | await waitFor(() => expect(modalMock.open).toHaveBeenCalledWith('edit entity', 'Entity 2'));
163 | });
164 |
--------------------------------------------------------------------------------
/projects/testing-library/tests/integrations/ng-mocks.spec.ts:
--------------------------------------------------------------------------------
1 | import { Component, ContentChild, EventEmitter, Input, Output, TemplateRef } from '@angular/core';
2 | import { By } from '@angular/platform-browser';
3 |
4 | import { MockComponent } from 'ng-mocks';
5 | import { render } from '../../src/public_api';
6 | import { NgIf } from '@angular/common';
7 |
8 | test('sends the correct value to the child input', async () => {
9 | const utils = await render(TargetComponent, {
10 | imports: [MockComponent(ChildComponent)],
11 | inputs: { value: 'foo' },
12 | });
13 |
14 | const children = utils.fixture.debugElement.queryAll(By.directive(ChildComponent));
15 | expect(children).toHaveLength(1);
16 |
17 | const mockComponent = children[0].componentInstance;
18 | expect(mockComponent.someInput).toBe('foo');
19 | });
20 |
21 | test('sends the correct value to the child input 2', async () => {
22 | const utils = await render(TargetComponent, {
23 | imports: [MockComponent(ChildComponent)],
24 | inputs: { value: 'bar' },
25 | });
26 |
27 | const children = utils.fixture.debugElement.queryAll(By.directive(ChildComponent));
28 | expect(children).toHaveLength(1);
29 |
30 | const mockComponent = children[0].componentInstance;
31 | expect(mockComponent.someInput).toBe('bar');
32 | });
33 |
34 | @Component({
35 | selector: 'atl-child',
36 | template: 'child',
37 | standalone: true,
38 | imports: [NgIf],
39 | })
40 | class ChildComponent {
41 | @ContentChild('something')
42 | public injectedSomething: TemplateRef | undefined;
43 |
44 | @Input()
45 | public someInput = '';
46 |
47 | @Output()
48 | public someOutput = new EventEmitter();
49 |
50 | public childMockComponent() {
51 | /* noop */
52 | }
53 | }
54 |
55 | @Component({
56 | selector: 'atl-target-mock-component',
57 | template: ` `,
58 | standalone: true,
59 | imports: [ChildComponent],
60 | })
61 | class TargetComponent {
62 | @Input() value = '';
63 | public trigger = (obj: any) => obj;
64 | }
65 |
--------------------------------------------------------------------------------
/projects/testing-library/tests/issues/issue-188.spec.ts:
--------------------------------------------------------------------------------
1 | // https://github.com/testing-library/angular-testing-library/issues/188
2 | import { Component, Input, OnChanges, SimpleChanges } from '@angular/core';
3 | import { render, screen } from '../../src/public_api';
4 |
5 | @Component({
6 | template: `Hello {{ formattedName }}
`,
7 | })
8 | class BugOnChangeComponent implements OnChanges {
9 | @Input() name?: string;
10 |
11 | formattedName?: string;
12 |
13 | ngOnChanges(changes: SimpleChanges) {
14 | if (changes.name) {
15 | this.formattedName = changes.name.currentValue.toUpperCase();
16 | }
17 | }
18 | }
19 |
20 | test('should output formatted name after rendering', async () => {
21 | await render(BugOnChangeComponent, { componentProperties: { name: 'name' } });
22 |
23 | expect(screen.getByText('Hello NAME')).toBeInTheDocument();
24 | });
25 |
--------------------------------------------------------------------------------
/projects/testing-library/tests/issues/issue-230.spec.ts:
--------------------------------------------------------------------------------
1 | import { Component } from '@angular/core';
2 | import { render, waitFor, screen } from '../../src/public_api';
3 | import { NgClass } from '@angular/common';
4 |
5 | @Component({
6 | template: ` `,
7 | imports: [NgClass],
8 | })
9 | class LoopComponent {
10 | get classes() {
11 | return {
12 | someClass: true,
13 | };
14 | }
15 | }
16 |
17 | test('wait does not end up in a loop', async () => {
18 | await render(LoopComponent);
19 |
20 | await expect(
21 | waitFor(() => {
22 | expect(true).toBe(false);
23 | }),
24 | ).rejects.toThrow();
25 | });
26 |
27 | test('find does not end up in a loop', async () => {
28 | await render(LoopComponent);
29 |
30 | await expect(screen.findByText('foo')).rejects.toThrow();
31 | });
32 |
--------------------------------------------------------------------------------
/projects/testing-library/tests/issues/issue-280.spec.ts:
--------------------------------------------------------------------------------
1 | import { Location } from '@angular/common';
2 | import { Component, NgModule } from '@angular/core';
3 | import { RouterLink, RouterModule, RouterOutlet, Routes } from '@angular/router';
4 | import { RouterTestingModule } from '@angular/router/testing';
5 | import userEvent from '@testing-library/user-event';
6 | import { render, screen } from '../../src/public_api';
7 |
8 | @Component({
9 | template: ` Navigate
10 | `,
11 | imports: [RouterOutlet],
12 | })
13 | class MainComponent {}
14 |
15 | @Component({
16 | template: ` first page
17 | go to second`,
18 | imports: [RouterLink],
19 | })
20 | class FirstComponent {}
21 |
22 | @Component({
23 | template: `second page
24 | `,
25 | })
26 | class SecondComponent {
27 | constructor(private location: Location) {}
28 | goBack() {
29 | this.location.back();
30 | }
31 | }
32 |
33 | const routes: Routes = [
34 | { path: '', redirectTo: '/first', pathMatch: 'full' },
35 | { path: 'first', component: FirstComponent },
36 | { path: 'second', component: SecondComponent },
37 | ];
38 |
39 | @NgModule({
40 | imports: [RouterModule.forRoot(routes)],
41 | exports: [RouterModule],
42 | })
43 | class AppRoutingModule {}
44 |
45 | test('navigate to second page and back', async () => {
46 | await render(MainComponent, { imports: [AppRoutingModule, RouterTestingModule] });
47 |
48 | expect(await screen.findByText('Navigate')).toBeInTheDocument();
49 | expect(await screen.findByText('first page')).toBeInTheDocument();
50 |
51 | await userEvent.click(await screen.findByText('go to second'));
52 |
53 | expect(await screen.findByText('second page')).toBeInTheDocument();
54 | expect(await screen.findByText('navigate back')).toBeInTheDocument();
55 |
56 | await userEvent.click(await screen.findByText('navigate back'));
57 |
58 | expect(await screen.findByText('first page')).toBeInTheDocument();
59 | });
60 |
--------------------------------------------------------------------------------
/projects/testing-library/tests/issues/issue-318.spec.ts:
--------------------------------------------------------------------------------
1 | import {Component, OnDestroy, OnInit} from '@angular/core';
2 | import {Router} from '@angular/router';
3 | import {RouterTestingModule} from '@angular/router/testing';
4 | import {Subject, takeUntil} from 'rxjs';
5 | import {render} from "@testing-library/angular";
6 |
7 | @Component({
8 | selector: 'atl-app-fixture',
9 | template: '',
10 | })
11 | class FixtureComponent implements OnInit, OnDestroy {
12 | unsubscribe$ = new Subject();
13 |
14 | constructor(private router: Router) {}
15 |
16 | ngOnInit(): void {
17 | this.router.events.pipe(takeUntil(this.unsubscribe$)).subscribe((evt) => {
18 | this.eventReceived(evt)
19 | });
20 | }
21 |
22 | ngOnDestroy(): void {
23 | this.unsubscribe$.next();
24 | this.unsubscribe$.complete();
25 | }
26 |
27 | eventReceived(evt: any) {
28 | console.log(evt);
29 | }
30 | }
31 |
32 |
33 | test('it does not invoke router events on init', async () => {
34 | const eventReceived = jest.fn();
35 | await render(FixtureComponent, {
36 | imports: [RouterTestingModule],
37 | componentProperties: {
38 | eventReceived
39 | }
40 | });
41 | expect(eventReceived).not.toHaveBeenCalled();
42 | });
43 |
44 |
--------------------------------------------------------------------------------
/projects/testing-library/tests/issues/issue-346.spec.ts:
--------------------------------------------------------------------------------
1 | import { Component } from '@angular/core';
2 | import { render } from '../../src/public_api';
3 |
4 | test('issue 364 detectChangesOnRender', async () => {
5 | @Component({
6 | selector: 'atl-fixture',
7 | template: `{{ myObj.myProp }}`,
8 | })
9 | class MyComponent {
10 | myObj: any = null;
11 | }
12 |
13 | // autoDetectChanges invokes change detection, which makes the test fail
14 | await render(MyComponent, {
15 | detectChangesOnRender: false,
16 | });
17 | });
18 |
--------------------------------------------------------------------------------
/projects/testing-library/tests/issues/issue-386.spec.ts:
--------------------------------------------------------------------------------
1 | import { Component } from '@angular/core';
2 | import { throwError } from 'rxjs';
3 | import { render, screen, fireEvent } from '../../src/public_api';
4 |
5 | @Component({
6 | selector: 'atl-fixture',
7 | template: ``,
8 | styles: [],
9 | })
10 | class TestComponent {
11 | onTest() {
12 | throwError(() => new Error('myerror')).subscribe();
13 | }
14 | }
15 |
16 | describe('TestComponent', () => {
17 | beforeEach(() => {
18 | jest.useFakeTimers();
19 | });
20 |
21 | afterEach(() => {
22 | jest.runAllTicks();
23 | jest.useRealTimers();
24 | });
25 |
26 | it('does not fail', async () => {
27 | await render(TestComponent);
28 | fireEvent.click(screen.getByText('Test'));
29 | });
30 |
31 | it('fails because of the previous one', async () => {
32 | await render(TestComponent);
33 | fireEvent.click(screen.getByText('Test'));
34 | });
35 | });
36 |
--------------------------------------------------------------------------------
/projects/testing-library/tests/issues/issue-389.spec.ts:
--------------------------------------------------------------------------------
1 | import { Component, Input } from '@angular/core';
2 | import { render, screen } from '../../src/public_api';
3 |
4 | @Component({
5 | selector: 'atl-fixture',
6 | template: `Hello {{ name }}`,
7 | })
8 | class TestComponent {
9 | @Input('aliasName') name = '';
10 | }
11 |
12 | test('allows you to set componentInputs using the name alias', async () => {
13 | await render(TestComponent, { componentInputs: { aliasName: 'test' } });
14 | expect(screen.getByText('Hello test')).toBeInTheDocument();
15 | });
16 |
--------------------------------------------------------------------------------
/projects/testing-library/tests/issues/issue-396-standalone-stub-child.spec.ts:
--------------------------------------------------------------------------------
1 | import { Component } from '@angular/core';
2 | import { render, screen } from '../../src/public_api';
3 |
4 | test('stub', async () => {
5 | await render(FixtureComponent, {
6 | componentImports: [StubComponent],
7 | });
8 |
9 | expect(screen.getByText('Hello from stub')).toBeInTheDocument();
10 | });
11 |
12 | test('configure', async () => {
13 | await render(FixtureComponent, {
14 | configureTestBed: (testBed) => {
15 | testBed.overrideComponent(FixtureComponent, {
16 | add: {
17 | imports: [StubComponent],
18 | },
19 | remove: {
20 | imports: [ChildComponent],
21 | },
22 | });
23 | },
24 | });
25 |
26 | expect(screen.getByText('Hello from stub')).toBeInTheDocument();
27 | });
28 |
29 | test('child', async () => {
30 | await render(FixtureComponent);
31 | expect(screen.getByText('Hello from child')).toBeInTheDocument();
32 | });
33 |
34 | @Component({
35 | selector: 'atl-child',
36 | template: `Hello from child`,
37 | standalone: true,
38 | })
39 | class ChildComponent {}
40 |
41 | @Component({
42 | selector: 'atl-child',
43 | template: `Hello from stub`,
44 | standalone: true,
45 | host: { 'collision-id': StubComponent.name },
46 | })
47 | class StubComponent {}
48 |
49 | @Component({
50 | selector: 'atl-fixture',
51 | template: ``,
52 | standalone: true,
53 | imports: [ChildComponent],
54 | })
55 | class FixtureComponent {}
56 |
--------------------------------------------------------------------------------
/projects/testing-library/tests/issues/issue-397-directive-overrides-component-input.spec.ts:
--------------------------------------------------------------------------------
1 | import { Component, Directive, Input, OnInit } from '@angular/core';
2 | import { render, screen } from '../../src/public_api';
3 |
4 | test('the value set in the directive constructor is overriden by the input binding', async () => {
5 | await render(``, {
6 | imports: [FixtureComponent, InputOverrideViaConstructorDirective],
7 | });
8 |
9 | expect(screen.getByText('set by test')).toBeInTheDocument();
10 | });
11 |
12 | test('the value set in the directive onInit is used instead of the input binding', async () => {
13 | await render(``, {
14 | imports: [FixtureComponent, InputOverrideViaOnInitDirective],
15 | });
16 |
17 | expect(screen.getByText('set by directive ngOnInit')).toBeInTheDocument();
18 | });
19 |
20 | test('the value set in the directive constructor is used instead of the input value', async () => {
21 | await render(``, {
22 | imports: [FixtureComponent, InputOverrideViaConstructorDirective],
23 | });
24 |
25 | expect(screen.getByText('set by directive constructor')).toBeInTheDocument();
26 | });
27 |
28 | test('the value set in the directive ngOnInit is used instead of the input value and the directive constructor', async () => {
29 | await render(``, {
30 | imports: [FixtureComponent, InputOverrideViaConstructorDirective, InputOverrideViaOnInitDirective],
31 | });
32 |
33 | expect(screen.getByText('set by directive ngOnInit')).toBeInTheDocument();
34 | });
35 |
36 | @Component({
37 | standalone: true,
38 | selector: 'atl-fixture',
39 | template: `{{ input }}`,
40 | })
41 | class FixtureComponent {
42 | @Input() public input = 'default value';
43 | }
44 |
45 | @Directive({
46 | // eslint-disable-next-line @angular-eslint/directive-selector
47 | selector: 'atl-fixture',
48 | standalone: true,
49 | })
50 | class InputOverrideViaConstructorDirective {
51 | constructor(private fixture: FixtureComponent) {
52 | this.fixture.input = 'set by directive constructor';
53 | }
54 | }
55 |
56 | @Directive({
57 | // eslint-disable-next-line @angular-eslint/directive-selector
58 | selector: 'atl-fixture',
59 | standalone: true,
60 | })
61 | class InputOverrideViaOnInitDirective implements OnInit {
62 | constructor(private fixture: FixtureComponent) {}
63 |
64 | ngOnInit(): void {
65 | this.fixture.input = 'set by directive ngOnInit';
66 | }
67 | }
68 |
--------------------------------------------------------------------------------
/projects/testing-library/tests/issues/issue-398-component-without-host-id.spec.ts:
--------------------------------------------------------------------------------
1 | import { Component } from '@angular/core';
2 | import { render, screen } from '../../src/public_api';
3 |
4 | test('should create the app', async () => {
5 | await render(FixtureComponent);
6 | expect(screen.getByRole('heading')).toBeInTheDocument();
7 | });
8 |
9 | test('should re-create the app', async () => {
10 | await render(FixtureComponent);
11 | expect(screen.getByRole('heading')).toBeInTheDocument();
12 | });
13 |
14 | @Component({
15 | selector: 'atl-fixture',
16 | standalone: true,
17 | template: 'My title
',
18 | host: {
19 | '[attr.id]': 'null', // this breaks the cleaning up of tests
20 | },
21 | })
22 | class FixtureComponent {}
23 |
--------------------------------------------------------------------------------
/projects/testing-library/tests/issues/issue-422-view-already-destroyed.spec.ts:
--------------------------------------------------------------------------------
1 | import { Component, ElementRef } from '@angular/core';
2 | import { NgIf } from '@angular/common';
3 | import { render } from '../../src/public_api';
4 |
5 | test('declaration specific dependencies should be available for components', async () => {
6 | @Component({
7 | selector: 'atl-test',
8 | standalone: true,
9 | template: `Test
`,
10 | })
11 | class TestComponent {
12 | // eslint-disable-next-line @typescript-eslint/no-empty-function
13 | constructor(_elementRef: ElementRef) {}
14 | }
15 |
16 | await expect(async () => await render(TestComponent)).not.toThrow();
17 | });
18 |
19 | test('standalone directives imported in standalone components', async () => {
20 | @Component({
21 | selector: 'atl-test',
22 | standalone: true,
23 | imports: [NgIf],
24 | template: `Test
`,
25 | })
26 | class TestComponent {}
27 |
28 | await render(TestComponent);
29 | });
30 |
--------------------------------------------------------------------------------
/projects/testing-library/tests/issues/issue-435.spec.ts:
--------------------------------------------------------------------------------
1 | import { CommonModule } from '@angular/common';
2 | import { BehaviorSubject } from 'rxjs';
3 | import { Component, Inject, Injectable } from '@angular/core';
4 | import { screen, render } from '../../src/public_api';
5 |
6 | // Service
7 | @Injectable()
8 | class DemoService {
9 | buttonTitle = new BehaviorSubject('Click me');
10 | }
11 |
12 | // Component
13 | @Component({
14 | selector: 'atl-issue-435',
15 | standalone: true,
16 | imports: [CommonModule],
17 | providers: [DemoService],
18 | template: `
19 |
23 | `,
24 | })
25 | class DemoComponent {
26 | constructor(@Inject(DemoService) public demoService: DemoService) {}
27 | }
28 |
29 | test('issue #435', async () => {
30 | await render(DemoComponent);
31 |
32 | const button = screen.getByRole('button', {
33 | name: /Click me/,
34 | });
35 |
36 | expect(button).toBeVisible();
37 | });
38 |
--------------------------------------------------------------------------------
/projects/testing-library/tests/issues/issue-437.spec.ts:
--------------------------------------------------------------------------------
1 | import userEvent from '@testing-library/user-event';
2 | import { screen, render } from '../../src/public_api';
3 | import { MatSidenavModule } from '@angular/material/sidenav';
4 |
5 | afterEach(() => {
6 | jest.useRealTimers();
7 | });
8 |
9 | test('issue #437', async () => {
10 | const user = userEvent.setup();
11 | await render(
12 | `
13 |
14 |
15 |
16 |
17 |
18 |
19 |
20 |
21 |
22 |
23 | `,
24 | { imports: [MatSidenavModule] },
25 | );
26 |
27 | await screen.findByTestId('test-button');
28 |
29 | await user.click(screen.getByTestId('test-button'));
30 | });
31 |
32 | test('issue #437 with fakeTimers', async () => {
33 | jest.useFakeTimers();
34 | const user = userEvent.setup({
35 | advanceTimers: jest.advanceTimersByTime,
36 | });
37 | await render(
38 | `
39 |
40 |
41 |
42 |
43 |
44 |
45 |
46 |
47 |
48 |
49 | `,
50 | { imports: [MatSidenavModule] },
51 | );
52 |
53 | await screen.findByTestId('test-button');
54 |
55 | await user.click(screen.getByTestId('test-button'));
56 | });
57 |
--------------------------------------------------------------------------------
/projects/testing-library/tests/issues/issue-492.spec.ts:
--------------------------------------------------------------------------------
1 | import { AsyncPipe } from '@angular/common';
2 | import { Component, inject, Injectable } from '@angular/core';
3 | import { render, screen } from '../../src/public_api';
4 | import { Observable, BehaviorSubject, map } from 'rxjs';
5 |
6 | test('displays username', async () => {
7 | // stubbed user service using a Subject
8 | const user = new BehaviorSubject({ name: 'username 1' });
9 | const userServiceStub: Partial = {
10 | getName: () => user.asObservable().pipe(map((u) => u.name)),
11 | };
12 |
13 | // render the component with injection of the stubbed service
14 | await render(UserComponent, {
15 | componentProviders: [
16 | {
17 | provide: UserService,
18 | useValue: userServiceStub,
19 | },
20 | ],
21 | });
22 |
23 | // assert first username emitted is rendered
24 | expect(await screen.findByRole('heading', { name: 'username 1' })).toBeInTheDocument();
25 |
26 | // emitting a second username
27 | user.next({ name: 'username 2' });
28 |
29 | // assert the second username is rendered
30 | expect(await screen.findByRole('heading', { name: 'username 2' })).toBeInTheDocument();
31 | });
32 |
33 | @Component({
34 | selector: 'atl-user',
35 | standalone: true,
36 | template: `{{ username$ | async }}
`,
37 | imports: [AsyncPipe],
38 | })
39 | class UserComponent {
40 | readonly username$: Observable = inject(UserService).getName();
41 | }
42 |
43 | @Injectable()
44 | class UserService {
45 | getName(): Observable {
46 | throw new Error('Not implemented');
47 | }
48 | }
49 |
--------------------------------------------------------------------------------
/projects/testing-library/tests/issues/issue-493.spec.ts:
--------------------------------------------------------------------------------
1 | import { HttpClient, provideHttpClient } from '@angular/common/http';
2 | import { provideHttpClientTesting } from '@angular/common/http/testing';
3 | import { Component, input } from '@angular/core';
4 | import { render, screen } from '../../src/public_api';
5 |
6 | test('succeeds', async () => {
7 | await render(DummyComponent, {
8 | inputs: {
9 | value: 'test',
10 | },
11 | providers: [provideHttpClientTesting(), provideHttpClient()],
12 | });
13 |
14 | expect(screen.getByText('test')).toBeVisible();
15 | });
16 |
17 | @Component({
18 | selector: 'atl-dummy',
19 | standalone: true,
20 | imports: [],
21 | template: '{{ value() }}
',
22 | })
23 | class DummyComponent {
24 | value = input.required();
25 | // @ts-expect-error http is unused but needed for the test
26 | constructor(private http: HttpClient) {}
27 | }
28 |
--------------------------------------------------------------------------------
/projects/testing-library/tests/issues/issue-67.spec.ts:
--------------------------------------------------------------------------------
1 | // https://github.com/testing-library/angular-testing-library/issues/67
2 | import { Component } from '@angular/core';
3 | import { render, screen } from '../../src/public_api';
4 |
5 | @Component({
6 | template: `
7 |
8 |
9 |
13 |
14 | `,
15 | })
16 | class BugGetByLabelTextComponent {}
17 |
18 | test('first step to reproduce the bug: skip this test to avoid the error or remove the for attribute of label', async () => {
19 | expect(await render(BugGetByLabelTextComponent)).toBeDefined();
20 | });
21 |
22 | test('second step: bug happens :`(', async () => {
23 | await render(BugGetByLabelTextComponent);
24 |
25 | const checkboxByTestId = screen.getByTestId('checkbox');
26 | const checkboxByLabelTest = screen.getByLabelText('TEST');
27 |
28 | expect(checkboxByTestId).toBe(checkboxByLabelTest);
29 | });
30 |
--------------------------------------------------------------------------------
/projects/testing-library/tests/navigate.spec.ts:
--------------------------------------------------------------------------------
1 | import { Component } from '@angular/core';
2 | import { TestBed } from '@angular/core/testing';
3 | import { Router } from '@angular/router';
4 | import { render } from '../src/public_api';
5 |
6 | @Component({
7 | selector: 'atl-fixture',
8 | template: ``,
9 | })
10 | class FixtureComponent {}
11 |
12 | test('should navigate correctly', async () => {
13 | const { navigate } = await render(FixtureComponent, {
14 | routes: [{ path: 'details', component: FixtureComponent }],
15 | });
16 |
17 | const router = TestBed.inject(Router);
18 | const navSpy = jest.spyOn(router, 'navigate');
19 |
20 | navigate('details');
21 |
22 | expect(navSpy).toHaveBeenCalledWith(['details']);
23 | });
24 |
25 | test('should pass queryParams if provided', async () => {
26 | const { navigate } = await render(FixtureComponent, {
27 | routes: [{ path: 'details', component: FixtureComponent }],
28 | });
29 |
30 | const router = TestBed.inject(Router);
31 | const navSpy = jest.spyOn(router, 'navigate');
32 |
33 | navigate('details?sortBy=name&sortOrder=asc');
34 |
35 | expect(navSpy).toHaveBeenCalledWith(['details'], {
36 | queryParams: {
37 | sortBy: 'name',
38 | sortOrder: 'asc',
39 | },
40 | });
41 | });
42 |
--------------------------------------------------------------------------------
/projects/testing-library/tests/providers/component-provider.spec.ts:
--------------------------------------------------------------------------------
1 | import { Injectable, Provider } from '@angular/core';
2 | import { Component } from '@angular/core';
3 | import { render, screen } from '../../src/public_api';
4 |
5 | test('shows the service value', async () => {
6 | await render(FixtureComponent);
7 |
8 | expect(screen.getByText('foo')).toBeInTheDocument();
9 | });
10 |
11 | test('shows the provided service value', async () => {
12 | await render(FixtureComponent, {
13 | componentProviders: [
14 | {
15 | provide: Service,
16 | useValue: {
17 | foo() {
18 | return 'bar';
19 | },
20 | },
21 | },
22 | ],
23 | });
24 |
25 | expect(screen.getByText('bar')).toBeInTheDocument();
26 | });
27 |
28 | test('shows the provided service value with template syntax', async () => {
29 | await render(FixtureComponent, {
30 | componentProviders: [
31 | {
32 | provide: Service,
33 | useValue: {
34 | foo() {
35 | return 'bar';
36 | },
37 | },
38 | },
39 | ],
40 | });
41 |
42 | expect(screen.getByText('bar')).toBeInTheDocument();
43 | });
44 |
45 | test('flatten the nested array of component providers', async () => {
46 | const provideService = (): Provider => [
47 | {
48 | provide: Service,
49 | useValue: {
50 | foo() {
51 | return 'bar';
52 | },
53 | },
54 | },
55 | ];
56 | await render(FixtureComponent, {
57 | componentProviders: [provideService()],
58 | });
59 |
60 | expect(screen.getByText('bar')).toBeInTheDocument();
61 | });
62 |
63 | @Injectable()
64 | class Service {
65 | foo() {
66 | return 'foo';
67 | }
68 | }
69 |
70 | @Component({
71 | selector: 'atl-fixture',
72 | template: '{{service.foo()}}',
73 | providers: [Service],
74 | })
75 | class FixtureComponent {
76 | constructor(public service: Service) {}
77 | }
78 |
--------------------------------------------------------------------------------
/projects/testing-library/tests/providers/module-provider.spec.ts:
--------------------------------------------------------------------------------
1 | import { Injectable } from '@angular/core';
2 | import { Component } from '@angular/core';
3 | import { render, screen } from '../../src/public_api';
4 |
5 | test('shows the service value', async () => {
6 | await render(FixtureComponent, {
7 | providers: [Service],
8 | });
9 |
10 | expect(screen.getByText('foo')).toBeInTheDocument();
11 | });
12 |
13 | test('shows the service value with template syntax', async () => {
14 | await render(FixtureComponent, {
15 | providers: [Service],
16 | });
17 |
18 | expect(screen.getByText('foo')).toBeInTheDocument();
19 | });
20 |
21 | test('shows the provided service value', async () => {
22 | await render(FixtureComponent, {
23 | providers: [
24 | {
25 | provide: Service,
26 | useValue: {
27 | foo() {
28 | return 'bar';
29 | },
30 | },
31 | },
32 | ],
33 | });
34 |
35 | expect(screen.getByText('bar')).toBeInTheDocument();
36 | });
37 |
38 | test('shows the provided service value with template syntax', async () => {
39 | await render(FixtureComponent, {
40 | providers: [
41 | {
42 | provide: Service,
43 | useValue: {
44 | foo() {
45 | return 'bar';
46 | },
47 | },
48 | },
49 | ],
50 | });
51 |
52 | expect(screen.getByText('bar')).toBeInTheDocument();
53 | });
54 |
55 | @Injectable()
56 | class Service {
57 | foo() {
58 | return 'foo';
59 | }
60 | }
61 |
62 | @Component({
63 | selector: 'atl-fixture',
64 | template: '{{service.foo()}}',
65 | })
66 | class FixtureComponent {
67 | constructor(public service: Service) {}
68 | }
69 |
--------------------------------------------------------------------------------
/projects/testing-library/tests/render-template.spec.ts:
--------------------------------------------------------------------------------
1 | import { Directive, HostListener, ElementRef, Input, Output, EventEmitter, Component } from '@angular/core';
2 |
3 | import { render, fireEvent, screen } from '../src/public_api';
4 |
5 | @Directive({
6 | // eslint-disable-next-line @angular-eslint/directive-selector
7 | selector: '[onOff]',
8 | })
9 | class OnOffDirective {
10 | @Input() on = 'on';
11 | @Input() off = 'off';
12 | @Output() clicked = new EventEmitter();
13 |
14 | constructor(private el: ElementRef) {
15 | this.el.nativeElement.textContent = 'init';
16 | }
17 |
18 | @HostListener('click') onClick() {
19 | this.el.nativeElement.textContent = this.el.nativeElement.textContent === this.on ? this.off : this.on;
20 | this.clicked.emit(this.el.nativeElement.textContent);
21 | }
22 | }
23 |
24 | @Directive({
25 | // eslint-disable-next-line @angular-eslint/directive-selector
26 | selector: '[update]',
27 | })
28 | class UpdateInputDirective {
29 | @Input()
30 | set update(value: any) {
31 | this.el.nativeElement.textContent = value;
32 | }
33 |
34 | constructor(private el: ElementRef) {}
35 | }
36 |
37 | @Component({
38 | // eslint-disable-next-line @angular-eslint/component-selector
39 | selector: 'greeting',
40 | template: 'Hello {{ name }}!',
41 | })
42 | class GreetingComponent {
43 | @Input() name = 'World';
44 | }
45 |
46 | test('the directive renders', async () => {
47 | const view = await render('', {
48 | imports: [OnOffDirective],
49 | });
50 |
51 | // eslint-disable-next-line testing-library/no-container
52 | expect(view.container.querySelector('[onoff]')).toBeInTheDocument();
53 | });
54 |
55 | test('the component renders', async () => {
56 | const view = await render('', {
57 | imports: [GreetingComponent],
58 | });
59 |
60 | // eslint-disable-next-line testing-library/no-container
61 | expect(view.container.querySelector('greeting')).toBeInTheDocument();
62 | expect(screen.getByText('Hello Angular!')).toBeInTheDocument();
63 | });
64 |
65 | test('uses the default props', async () => {
66 | await render('', {
67 | imports: [OnOffDirective],
68 | });
69 |
70 | fireEvent.click(screen.getByText('init'));
71 | fireEvent.click(screen.getByText('on'));
72 | fireEvent.click(screen.getByText('off'));
73 | });
74 |
75 | test('overrides input properties', async () => {
76 | await render('', {
77 | imports: [OnOffDirective],
78 | });
79 |
80 | fireEvent.click(screen.getByText('init'));
81 | fireEvent.click(screen.getByText('hello'));
82 | fireEvent.click(screen.getByText('off'));
83 | });
84 |
85 | test('overrides input properties via a wrapper', async () => {
86 | // `bar` will be set as a property on the wrapper component, the property will be used to pass to the directive
87 | await render('', {
88 | imports: [OnOffDirective],
89 | componentProperties: {
90 | bar: 'hello',
91 | },
92 | });
93 |
94 | fireEvent.click(screen.getByText('init'));
95 | fireEvent.click(screen.getByText('hello'));
96 | fireEvent.click(screen.getByText('off'));
97 | });
98 |
99 | test('overrides output properties', async () => {
100 | const clicked = jest.fn();
101 |
102 | await render('', {
103 | imports: [OnOffDirective],
104 | componentProperties: {
105 | clicked,
106 | },
107 | });
108 |
109 | fireEvent.click(screen.getByText('init'));
110 | expect(clicked).toHaveBeenCalledWith('on');
111 |
112 | fireEvent.click(screen.getByText('on'));
113 | expect(clicked).toHaveBeenCalledWith('off');
114 | });
115 |
116 | describe('removeAngularAttributes', () => {
117 | it('should remove angular attributes', async () => {
118 | await render('', {
119 | imports: [OnOffDirective],
120 | removeAngularAttributes: true,
121 | });
122 |
123 | expect(document.querySelector('[ng-version]')).toBeNull();
124 | expect(document.querySelector('[id]')).toBeNull();
125 | });
126 |
127 | it('is disabled by default', async () => {
128 | await render('', {
129 | imports: [OnOffDirective],
130 | });
131 |
132 | expect(document.querySelector('[ng-version]')).not.toBeNull();
133 | expect(document.querySelector('[id]')).not.toBeNull();
134 | });
135 | });
136 |
137 | test('updates properties and invokes change detection', async () => {
138 | const view = await render<{ value: string }>('', {
139 | imports: [UpdateInputDirective],
140 | componentProperties: {
141 | value: 'value1',
142 | },
143 | });
144 |
145 | expect(screen.getByText('value1')).toBeInTheDocument();
146 | view.fixture.componentInstance.value = 'updated value';
147 | expect(screen.getByText('updated value')).toBeInTheDocument();
148 | });
149 |
--------------------------------------------------------------------------------
/projects/testing-library/tests/rerender.spec.ts:
--------------------------------------------------------------------------------
1 | import { Component, Input, OnChanges, SimpleChanges } from '@angular/core';
2 | import { render, screen } from '../src/public_api';
3 |
4 | let ngOnChangesSpy: jest.Mock;
5 | @Component({
6 | selector: 'atl-fixture',
7 | template: ` {{ firstName }} {{ lastName }} `,
8 | })
9 | class FixtureComponent implements OnChanges {
10 | @Input() firstName = 'Sarah';
11 | @Input() lastName?: string;
12 | ngOnChanges(changes: SimpleChanges): void {
13 | ngOnChangesSpy(changes);
14 | }
15 | }
16 |
17 | beforeEach(() => {
18 | ngOnChangesSpy = jest.fn();
19 | });
20 |
21 | test('rerenders the component with updated props', async () => {
22 | const { rerender } = await render(FixtureComponent);
23 | expect(screen.getByText('Sarah')).toBeInTheDocument();
24 |
25 | const firstName = 'Mark';
26 | await rerender({ componentProperties: { firstName } });
27 |
28 | expect(screen.getByText(firstName)).toBeInTheDocument();
29 | });
30 |
31 | test('rerenders without props', async () => {
32 | const { rerender } = await render(FixtureComponent);
33 | expect(screen.getByText('Sarah')).toBeInTheDocument();
34 |
35 | await rerender();
36 |
37 | expect(screen.getByText('Sarah')).toBeInTheDocument();
38 | expect(ngOnChangesSpy).toHaveBeenCalledTimes(1); // one time initially and one time for rerender
39 | });
40 |
41 | test('rerenders the component with updated inputs', async () => {
42 | const { rerender } = await render(FixtureComponent);
43 | expect(screen.getByText('Sarah')).toBeInTheDocument();
44 |
45 | const firstName = 'Mark';
46 | await rerender({ inputs: { firstName } });
47 |
48 | expect(screen.getByText(firstName)).toBeInTheDocument();
49 | });
50 |
51 | test('rerenders the component with updated inputs and resets other props', async () => {
52 | const firstName = 'Mark';
53 | const lastName = 'Peeters';
54 | const { rerender } = await render(FixtureComponent, {
55 | inputs: {
56 | firstName,
57 | lastName,
58 | },
59 | });
60 |
61 | expect(screen.getByText(`${firstName} ${lastName}`)).toBeInTheDocument();
62 |
63 | const firstName2 = 'Chris';
64 | await rerender({ inputs: { firstName: firstName2 } });
65 |
66 | expect(screen.getByText(firstName2)).toBeInTheDocument();
67 | expect(screen.queryByText(firstName)).not.toBeInTheDocument();
68 | expect(screen.queryByText(lastName)).not.toBeInTheDocument();
69 |
70 | expect(ngOnChangesSpy).toHaveBeenCalledTimes(2); // one time initially and one time for rerender
71 | const rerenderedChanges = ngOnChangesSpy.mock.calls[1][0] as SimpleChanges;
72 | expect(rerenderedChanges).toEqual({
73 | lastName: {
74 | previousValue: 'Peeters',
75 | currentValue: undefined,
76 | firstChange: false,
77 | },
78 | firstName: {
79 | previousValue: 'Mark',
80 | currentValue: 'Chris',
81 | firstChange: false,
82 | },
83 | });
84 | });
85 |
86 | test('rerenders the component with updated inputs and keeps other props when partial is true', async () => {
87 | const firstName = 'Mark';
88 | const lastName = 'Peeters';
89 | const { rerender } = await render(FixtureComponent, {
90 | inputs: {
91 | firstName,
92 | lastName,
93 | },
94 | });
95 |
96 | expect(screen.getByText(`${firstName} ${lastName}`)).toBeInTheDocument();
97 |
98 | const firstName2 = 'Chris';
99 | await rerender({ inputs: { firstName: firstName2 }, partialUpdate: true });
100 |
101 | expect(screen.queryByText(firstName)).not.toBeInTheDocument();
102 | expect(screen.getByText(`${firstName2} ${lastName}`)).toBeInTheDocument();
103 |
104 | expect(ngOnChangesSpy).toHaveBeenCalledTimes(2); // one time initially and one time for rerender
105 | const rerenderedChanges = ngOnChangesSpy.mock.calls[1][0] as SimpleChanges;
106 | expect(rerenderedChanges).toEqual({
107 | firstName: {
108 | previousValue: 'Mark',
109 | currentValue: 'Chris',
110 | firstChange: false,
111 | },
112 | });
113 | });
114 |
115 | test('rerenders the component with updated props and resets other props with componentProperties', async () => {
116 | const firstName = 'Mark';
117 | const lastName = 'Peeters';
118 | const { rerender } = await render(FixtureComponent, {
119 | componentProperties: {
120 | firstName,
121 | lastName,
122 | },
123 | });
124 |
125 | expect(screen.getByText(`${firstName} ${lastName}`)).toBeInTheDocument();
126 |
127 | const firstName2 = 'Chris';
128 | await rerender({ componentProperties: { firstName: firstName2 } });
129 |
130 | expect(screen.getByText(firstName2)).toBeInTheDocument();
131 | expect(screen.queryByText(firstName)).not.toBeInTheDocument();
132 | expect(screen.queryByText(lastName)).not.toBeInTheDocument();
133 |
134 | expect(ngOnChangesSpy).toHaveBeenCalledTimes(2); // one time initially and one time for rerender
135 | const rerenderedChanges = ngOnChangesSpy.mock.calls[1][0] as SimpleChanges;
136 | expect(rerenderedChanges).toEqual({
137 | lastName: {
138 | previousValue: 'Peeters',
139 | currentValue: undefined,
140 | firstChange: false,
141 | },
142 | firstName: {
143 | previousValue: 'Mark',
144 | currentValue: 'Chris',
145 | firstChange: false,
146 | },
147 | });
148 | });
149 |
150 | test('rerenders the component with updated props keeps other props when partial is true', async () => {
151 | const firstName = 'Mark';
152 | const lastName = 'Peeters';
153 | const { rerender } = await render(FixtureComponent, {
154 | componentProperties: {
155 | firstName,
156 | lastName,
157 | },
158 | });
159 |
160 | expect(screen.getByText(`${firstName} ${lastName}`)).toBeInTheDocument();
161 |
162 | const firstName2 = 'Chris';
163 | await rerender({ componentProperties: { firstName: firstName2 }, partialUpdate: true });
164 |
165 | expect(screen.queryByText(firstName)).not.toBeInTheDocument();
166 | expect(screen.getByText(`${firstName2} ${lastName}`)).toBeInTheDocument();
167 |
168 | expect(ngOnChangesSpy).toHaveBeenCalledTimes(2); // one time initially and one time for rerender
169 | const rerenderedChanges = ngOnChangesSpy.mock.calls[1][0] as SimpleChanges;
170 | expect(rerenderedChanges).toEqual({
171 | firstName: {
172 | previousValue: 'Mark',
173 | currentValue: 'Chris',
174 | firstChange: false,
175 | },
176 | });
177 | });
178 |
179 | test('change detection gets not called if `detectChangesOnRender` is set to false', async () => {
180 | const { rerender } = await render(FixtureComponent);
181 | expect(screen.getByText('Sarah')).toBeInTheDocument();
182 |
183 | const firstName = 'Mark';
184 | await rerender({ inputs: { firstName }, detectChangesOnRender: false });
185 |
186 | expect(screen.getByText('Sarah')).toBeInTheDocument();
187 | expect(screen.queryByText(firstName)).not.toBeInTheDocument();
188 | });
189 |
--------------------------------------------------------------------------------
/projects/testing-library/tests/wait-for-element-to-be-removed.spec.ts:
--------------------------------------------------------------------------------
1 | import { Component, OnInit } from '@angular/core';
2 | import { render, screen, waitForElementToBeRemoved } from '../src/public_api';
3 | import { timer } from 'rxjs';
4 | import { NgIf } from '@angular/common';
5 |
6 | @Component({
7 | selector: 'atl-fixture',
8 | template: ` 👋
`,
9 | imports: [NgIf],
10 | })
11 | class FixtureComponent implements OnInit {
12 | visible = true;
13 | ngOnInit() {
14 | timer(500).subscribe(() => (this.visible = false));
15 | }
16 | }
17 |
18 | test('waits for element to be removed (callback)', async () => {
19 | await render(FixtureComponent);
20 |
21 | await waitForElementToBeRemoved(() => screen.queryByTestId('im-here'));
22 |
23 | expect(screen.queryByTestId('im-here')).not.toBeInTheDocument();
24 | });
25 |
26 | test('waits for element to be removed (element)', async () => {
27 | await render(FixtureComponent);
28 |
29 | await waitForElementToBeRemoved(screen.queryByTestId('im-here'));
30 |
31 | expect(screen.queryByTestId('im-here')).not.toBeInTheDocument();
32 | });
33 |
34 | test('allows to override options', async () => {
35 | await render(FixtureComponent);
36 |
37 | await expect(waitForElementToBeRemoved(() => screen.queryByTestId('im-here'), { timeout: 200 })).rejects.toThrow(
38 | /Timed out in waitForElementToBeRemoved/i,
39 | );
40 | });
41 |
--------------------------------------------------------------------------------
/projects/testing-library/tests/wait-for.spec.ts:
--------------------------------------------------------------------------------
1 | import { Component } from '@angular/core';
2 | import { timer } from 'rxjs';
3 | import { render, screen, waitFor, fireEvent } from '../src/public_api';
4 |
5 | @Component({
6 | selector: 'atl-fixture',
7 | template: `
8 |
9 | {{ result }}
10 | `,
11 | })
12 | class FixtureComponent {
13 | result = '';
14 |
15 | load() {
16 | timer(500).subscribe(() => (this.result = 'Success'));
17 | }
18 | }
19 |
20 | test('waits for assertion to become true', async () => {
21 | await render(FixtureComponent);
22 |
23 | expect(screen.queryByText('Success')).not.toBeInTheDocument();
24 |
25 | fireEvent.click(screen.getByTestId('button'));
26 |
27 | expect(await screen.findByText('Success')).toBeInTheDocument();
28 | });
29 |
30 | test('allows to override options', async () => {
31 | await render(FixtureComponent);
32 |
33 | fireEvent.click(screen.getByTestId('button'));
34 |
35 | await expect(waitFor(() => screen.getByText('Success'), { timeout: 200 })).rejects.toThrow(
36 | /Unable to find an element with the text: Success/i,
37 | );
38 | });
39 |
--------------------------------------------------------------------------------
/projects/testing-library/tsconfig.json:
--------------------------------------------------------------------------------
1 | {
2 | "extends": "../../tsconfig.base.json",
3 | "files": [],
4 | "include": [],
5 | "references": [
6 | {
7 | "path": "./tsconfig.lib.json"
8 | },
9 | {
10 | "path": "./tsconfig.lib.prod.json"
11 | },
12 | {
13 | "path": "./tsconfig.spec.json"
14 | }
15 | ],
16 | "compilerOptions": {
17 | "target": "es2020"
18 | },
19 | "angularCompilerOptions": {
20 | "strictInjectionParameters": true,
21 | "strictInputAccessModifiers": true,
22 | "strictTemplates": true,
23 | "flatModuleId": "AUTOGENERATED",
24 | "flatModuleOutFile": "AUTOGENERATED"
25 | }
26 | }
27 |
--------------------------------------------------------------------------------
/projects/testing-library/tsconfig.lib.json:
--------------------------------------------------------------------------------
1 | {
2 | "extends": "./tsconfig.json",
3 | "compilerOptions": {
4 | "outDir": "../../dist/out-tsc",
5 | "declaration": true,
6 | "declarationMap": true,
7 | "inlineSources": true,
8 | "types": ["node", "jest"],
9 | "target": "ES2022",
10 | "useDefineForClassFields": false
11 | },
12 | "exclude": ["src/test-setup.ts", "**/*.spec.ts", "**/*.test.ts", "jest.config.ts"],
13 | "include": ["**/*.ts"]
14 | }
15 |
--------------------------------------------------------------------------------
/projects/testing-library/tsconfig.lib.prod.json:
--------------------------------------------------------------------------------
1 | {
2 | "extends": "./tsconfig.lib.json",
3 | "compilerOptions": {
4 | "declarationMap": false,
5 | "target": "ES2022",
6 | "useDefineForClassFields": false
7 | },
8 | "angularCompilerOptions": {
9 | "compilationMode": "partial"
10 | },
11 | "exclude": ["src/test-setup.ts", "**/*.spec.ts", "**/*.test.ts", "jest.config.ts"]
12 | }
13 |
--------------------------------------------------------------------------------
/projects/testing-library/tsconfig.schematics.json:
--------------------------------------------------------------------------------
1 | {
2 | "extends": "../../tsconfig.base.json",
3 | "compilerOptions": {
4 | "strict": true,
5 | "target": "ES2020",
6 | "module": "commonjs",
7 | "moduleResolution": "node",
8 | "esModuleInterop": true,
9 | "resolveJsonModule": true,
10 | "forceConsistentCasingInFileNames": true,
11 | "outDir": "../../dist/@testing-library/angular/schematics",
12 | "removeComments": true,
13 | "skipLibCheck": true,
14 | "sourceMap": false
15 | },
16 | "include": ["schematics/**/*.ts"],
17 | "exclude": ["src/test-setup.ts", "**/*.spec.ts", "**/*.test.ts", "jest.config.ts"]
18 | }
19 |
--------------------------------------------------------------------------------
/projects/testing-library/tsconfig.spec.json:
--------------------------------------------------------------------------------
1 | {
2 | "extends": "./tsconfig.json",
3 | "compilerOptions": {
4 | "module": "commonjs",
5 | "types": ["node", "jest", "@testing-library/jest-dom"]
6 | },
7 | "files": ["test-setup.ts"],
8 | "include": ["**/*.spec.ts", "**/*.test.ts", "**/*.d.ts", "jest.config.ts"]
9 | }
10 |
--------------------------------------------------------------------------------
/projects/vscode-atl-render/.gitattributes:
--------------------------------------------------------------------------------
1 | # Set default behavior to automatically normalize line endings.
2 | * text=auto
3 |
--------------------------------------------------------------------------------
/projects/vscode-atl-render/.gitignore:
--------------------------------------------------------------------------------
1 | node_modules
2 | *.vsix
3 |
--------------------------------------------------------------------------------
/projects/vscode-atl-render/.vscode/launch.json:
--------------------------------------------------------------------------------
1 | // A launch configuration that launches the extension inside a new window
2 | // Use IntelliSense to learn about possible attributes.
3 | // Hover to view descriptions of existing attributes.
4 | // For more information, visit: https://go.microsoft.com/fwlink/?linkid=830387
5 | {
6 | "version": "0.2.0",
7 | "configurations": [
8 | {
9 | "name": "Extension",
10 | "type": "extensionHost",
11 | "request": "launch",
12 | "args": ["--extensionDevelopmentPath=${workspaceFolder}"]
13 | }
14 | ]
15 | }
16 |
--------------------------------------------------------------------------------
/projects/vscode-atl-render/.vscodeignore:
--------------------------------------------------------------------------------
1 | .vscode/**
2 | .vscode-test/**
3 | .gitignore
4 | vsc-extension-quickstart.md
5 |
--------------------------------------------------------------------------------
/projects/vscode-atl-render/CHANGELOG.md:
--------------------------------------------------------------------------------
1 | # Change Log
2 |
3 | All notable changes to the "vscode-testing-library-render" extension will be documented in this file.
4 |
5 | ## 0.0.3
6 |
7 | - docs: add logo
8 |
9 | ## 0.0.2
10 |
11 | - fix: highlight on next line
12 |
13 | ## 0.0.1
14 |
15 | - feat: initial release
16 |
--------------------------------------------------------------------------------
/projects/vscode-atl-render/README.md:
--------------------------------------------------------------------------------
1 | # vscode-atl-render
2 |
3 | This extension adds HTML highlighting to the render method of the Angular Testing Library.
4 |
--------------------------------------------------------------------------------
/projects/vscode-atl-render/language-configuration.json:
--------------------------------------------------------------------------------
1 | {
2 | "comments": {
3 | "blockComment": [""]
4 | },
5 | "brackets": [
6 | [""],
7 | ["<", ">"],
8 | ["{", "}"],
9 | ["(", ")"],
10 | ["[", "]"]
11 | ],
12 | "autoClosingPairs": [
13 | { "open": "{", "close": "}" },
14 | { "open": "[", "close": "]" },
15 | { "open": "(", "close": ")" },
16 | { "open": "'", "close": "'" },
17 | { "open": "\"", "close": "\"" },
18 | { "open": "", "notIn": ["comment", "string"] },
19 | { "open": "/**", "close": "*/", "notIn": ["string"] }
20 | ],
21 | "surroundingPairs": [
22 | { "open": "'", "close": "'" },
23 | { "open": "\"", "close": "\"" },
24 | { "open": "`", "close": "`" },
25 | { "open": "{", "close": "}" },
26 | { "open": "[", "close": "]" },
27 | { "open": "(", "close": ")" },
28 | { "open": "<", "close": ">" }
29 | ]
30 | }
31 |
--------------------------------------------------------------------------------
/projects/vscode-atl-render/other/hedgehog.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/testing-library/angular-testing-library/e1e046c75c297fd8ab06237178d036553b1ff215/projects/vscode-atl-render/other/hedgehog.png
--------------------------------------------------------------------------------
/projects/vscode-atl-render/package.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "vscode-atl-render",
3 | "displayName": "Angular Testing Library Render Highlighting",
4 | "description": "HTML highlighting in ATL the render method",
5 | "version": "0.0.3",
6 | "icon": "other/logo.png",
7 | "publisher": "timdeschryver",
8 | "license": "MIT",
9 | "repository": {
10 | "type": "git",
11 | "url": "https://github.com/testing-library/angular-testing-library.git"
12 | },
13 | "homepage": "https://github.com/testing-library/angular-testing-library/blob/main/README.md",
14 | "engines": {
15 | "vscode": "^1.57.0"
16 | },
17 | "categories": [
18 | "Programming Languages"
19 | ],
20 | "contributes": {
21 | "configuration": [
22 | {
23 | "id": "atl-render",
24 | "title": "Angular Testing Library Render",
25 | "properties": {
26 | "atl-render.format.enabled": {
27 | "type": "boolean",
28 | "description": "Enable/disable formatting of render template strings.",
29 | "default": true
30 | }
31 | }
32 | }
33 | ],
34 | "grammars": [
35 | {
36 | "scopeName": "atl.render",
37 | "path": "./syntaxes/atl-render.json",
38 | "injectTo": [
39 | "source.ts"
40 | ],
41 | "embeddedLanguages": {
42 | "text.html": "html"
43 | }
44 | }
45 | ]
46 | }
47 | }
48 |
--------------------------------------------------------------------------------
/projects/vscode-atl-render/syntaxes/atl-render.json:
--------------------------------------------------------------------------------
1 | {
2 | "$schema": "https://raw.githubusercontent.com/martinring/tmlanguage/master/tmlanguage.json",
3 | "scopeName": "atl.render",
4 | "injectionSelector": "L:source.ts -comment",
5 | "name": "atl.render",
6 | "patterns": [
7 | {
8 | "include": "#renderMethod"
9 | }
10 | ],
11 | "repository": {
12 | "renderMethod": {
13 | "name": "renderMethod",
14 | "begin": "(?x)(\\b(?:\\w+\\.)*(?:render)\\s*)(\\()",
15 | "beginCaptures": {
16 | "1": {
17 | "name": "entity.name.function.ts"
18 | },
19 | "2": {
20 | "name": "meta.brace.round.ts"
21 | }
22 | },
23 | "end": "(\\))",
24 | "endCaptures": {
25 | "0": {
26 | "name": "meta.brace.round.ts"
27 | }
28 | },
29 | "patterns": [
30 | {
31 | "include": "#renderTemplate"
32 | },
33 | {
34 | "include": "source.ts"
35 | }
36 | ]
37 | },
38 | "renderTemplate": {
39 | "contentName": "text.html",
40 | "begin": "[`|'|\"]",
41 | "beginCaptures": {
42 | "0": {
43 | "name": "string"
44 | }
45 | },
46 | "end": "\\0",
47 | "endCaptures": {
48 | "0": {
49 | "name": "string"
50 | }
51 | },
52 | "patterns": [
53 | {
54 | "include": "text.html.derivative"
55 | },
56 | {
57 | "include": "template.ng"
58 | }
59 | ]
60 | }
61 | }
62 | }
63 |
--------------------------------------------------------------------------------
/release.config.js:
--------------------------------------------------------------------------------
1 | module.exports = {
2 | pkgRoot: 'dist/@testing-library/angular',
3 | branches: ['main', { name: 'beta', prerelease: true }],
4 | };
5 |
--------------------------------------------------------------------------------
/tsconfig.base.json:
--------------------------------------------------------------------------------
1 | {
2 | "compileOnSave": false,
3 | "compilerOptions": {
4 | "baseUrl": "./",
5 | "declaration": false,
6 | "emitDecoratorMetadata": true,
7 | "experimentalDecorators": true,
8 | "importHelpers": true,
9 | "lib": ["es2018", "dom"],
10 | "module": "esnext",
11 | "moduleResolution": "node",
12 | "outDir": "./dist/out-tsc",
13 | "sourceMap": true,
14 | "target": "ES2020",
15 | "typeRoots": ["node_modules/@types"],
16 | "strict": true,
17 | "exactOptionalPropertyTypes": true,
18 | "forceConsistentCasingInFileNames": true,
19 | "noImplicitOverride": true,
20 | "noFallthroughCasesInSwitch": true,
21 | "noImplicitReturns": true,
22 | "noUnusedLocals": true,
23 | "noUnusedParameters": true,
24 | "paths": {
25 | "@testing-library/angular": ["projects/testing-library"],
26 | "@testing-library/angular/jest-utils": ["projects/testing-library/jest-utils"]
27 | }
28 | },
29 | "exclude": ["node_modules", "tmp"]
30 | }
31 |
--------------------------------------------------------------------------------