diff --git a/.browserslistrc b/.browserslistrc deleted file mode 100644 index 8e09ab49..00000000 --- a/.browserslistrc +++ /dev/null @@ -1,9 +0,0 @@ -# This file is currently used by autoprefixer to adjust CSS to support the below specified browsers -# For additional information regarding the format and rule options, please see: -# https://github.com/browserslist/browserslist#queries -# For IE 9-11 support, please uncomment the last line of the file and adjust as needed -> 0.5% -last 2 versions -Firefox ESR -not dead -# IE 9-11 \ No newline at end of file diff --git a/.github/workflows/ci.yml b/.github/workflows/ci.yml index b35c5abb..7d54d5b1 100644 --- a/.github/workflows/ci.yml +++ b/.github/workflows/ci.yml @@ -17,33 +17,57 @@ concurrency: jobs: build_test_release: permissions: - actions: write - contents: write + id-token: write # to enable use of OIDC (npm trusted publishing and provenance) + actions: write # to cancel/stop running workflows (styfle/cancel-workflow-action) + contents: write # to create release tags (cycjimmy/semantic-release-action) + issues: write # to post release that resolves an issue (cycjimmy/semantic-release-action) + pull-requests: write # to be able to comment on released pull requests strategy: matrix: - node-version: ${{ fromJSON((github.ref == 'refs/heads/main' || github.ref == 'refs/heads/beta') && '[22]' || '[20, 22, 24]') }} + node-version: ${{ fromJSON((github.ref == 'refs/heads/main' || github.ref == 'refs/heads/beta') && '[24]' || '[20, 22, 24]') }} os: ${{ fromJSON((github.ref == 'refs/heads/main' || github.ref == 'refs/heads/beta') && '["ubuntu-latest"]' || '["ubuntu-latest", "windows-latest"]') }} runs-on: ${{ matrix.os }} steps: - - uses: actions/checkout@v4 + - uses: actions/checkout@v6 - name: use Node.js ${{ matrix.node-version }} on ${{ matrix.os }} - uses: actions/setup-node@v4 + uses: actions/setup-node@v5 with: node-version: ${{ matrix.node-version }} + registry-url: 'https://registry.npmjs.org' + - name: Update npm + run: npm install -g npm@latest - name: install run: npm install --force - name: build - run: npm run build -- --skip-nx-cache - - name: test - run: npm run test + run: npm run build + timeout-minutes: 5 + - name: test-library + run: npm run test:testing-library + timeout-minutes: 5 + - name: test-examples + run: npm run test:example-app + timeout-minutes: 5 + - name: test-examples-jest + run: npm run test:jest-app + timeout-minutes: 5 + - name: test-karma-examples + run: npm run test:karma-app -- --watch=false --no-progress + timeout-minutes: 5 - name: lint run: npm run lint - - name: Release + timeout-minutes: 5 + - name: 🚀 Release if: github.repository == 'testing-library/angular-testing-library' && (github.ref == 'refs/heads/main' || github.ref == 'refs/heads/beta') - run: npx semantic-release + uses: cycjimmy/semantic-release-action@v6 + with: + semantic_version: 25 + working_directory: './dist/@testing-library/angular' + branches: | + [ + 'main', + {name: 'beta', prerelease: true}, + ] env: GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }} - NPM_TOKEN: ${{ secrets.NPM_TOKEN }} - CI: true diff --git a/.gitignore b/.gitignore index 22faaca8..2da4091c 100644 --- a/.gitignore +++ b/.gitignore @@ -28,8 +28,6 @@ # misc /.angular/cache .angular -.nx -migrations.json .cache /.sass-cache /connect.lock diff --git a/.node-version b/.node-version index 8fdd954d..a45fd52c 100644 --- a/.node-version +++ b/.node-version @@ -1 +1 @@ -22 \ No newline at end of file +24 diff --git a/angular.json b/angular.json new file mode 100644 index 00000000..0035220a --- /dev/null +++ b/angular.json @@ -0,0 +1,248 @@ +{ + "$schema": "./node_modules/@angular/cli/lib/config/schema.json", + "version": 1, + "cli": { + "analytics": false, + "cache": { + "enabled": true, + "path": "./.cache/angular", + "environment": "all" + } + }, + "newProjectRoot": "projects", + "projects": { + "testing-library": { + "projectType": "library", + "root": "projects/testing-library", + "sourceRoot": "projects/testing-library/src", + "prefix": "lib", + "architect": { + "build": { + "builder": "@angular/build:ng-packagr", + "options": { + "project": "projects/testing-library/ng-package.json" + }, + "configurations": { + "production": { + "tsConfig": "projects/testing-library/tsconfig.lib.prod.json" + }, + "development": { + "tsConfig": "projects/testing-library/tsconfig.lib.json" + } + }, + "defaultConfiguration": "production" + }, + "test": { + "builder": "@angular/build:unit-test", + "options": { + "setupFiles": ["projects/testing-library/test-setup.ts"] + } + }, + "lint": { + "builder": "@angular-eslint/builder:lint", + "options": { + "lintFilePatterns": ["projects/testing-library/**/*.ts", "projects/testing-library/**/*.html"] + } + } + } + }, + "example-app": { + "projectType": "application", + "root": "apps/example-app", + "sourceRoot": "apps/example-app/src", + "prefix": "app", + "architect": { + "build": { + "builder": "@angular/build:application", + "options": { + "outputPath": { + "base": "dist/apps/example-app" + }, + "index": "apps/example-app/src/index.html", + "tsConfig": "apps/example-app/tsconfig.app.json", + "assets": ["apps/example-app/src/favicon.ico", "apps/example-app/src/assets"], + "styles": [], + "scripts": [], + "browser": "apps/example-app/src/main.ts" + }, + "configurations": { + "production": { + "budgets": [ + { + "type": "anyComponentStyle", + "maximumWarning": "6kb" + } + ], + "outputHashing": "all" + }, + "development": { + "optimization": false, + "extractLicenses": false, + "sourceMap": true, + "namedChunks": true + } + }, + "defaultConfiguration": "production" + }, + "serve": { + "builder": "@angular/build:dev-server", + "configurations": { + "production": { + "buildTarget": "example-app:build:production" + }, + "development": { + "buildTarget": "example-app:build:development" + } + }, + "defaultConfiguration": "development" + }, + "test": { + "builder": "@angular/build:unit-test", + "options": { + "setupFiles": ["apps/example-app/test-setup.ts"] + } + }, + "lint": { + "builder": "@angular-eslint/builder:lint", + "options": { + "lintFilePatterns": ["apps/example-app/**/*.ts", "apps/example-app/**/*.html"] + } + } + } + }, + "example-app-jest": { + "projectType": "application", + "root": "apps/example-app-jest", + "sourceRoot": "apps/example-app-jest/src", + "prefix": "app", + "architect": { + "build": { + "builder": "@angular/build:application", + "options": { + "outputPath": { + "base": "dist/apps/example-app-jest" + }, + "index": "apps/example-app-jest/src/index.html", + "tsConfig": "apps/example-app-jest/tsconfig.app.json", + "assets": ["apps/example-app-jest/src/favicon.ico", "apps/example-app-jest/src/assets"], + "styles": [], + "scripts": [], + "browser": "apps/example-app-jest/src/main.ts" + }, + "configurations": { + "production": { + "budgets": [ + { + "type": "anyComponentStyle", + "maximumWarning": "6kb" + } + ], + "outputHashing": "all" + }, + "development": { + "optimization": false, + "extractLicenses": false, + "sourceMap": true, + "namedChunks": true + } + }, + "defaultConfiguration": "production" + }, + "serve": { + "builder": "@angular/build:dev-server", + "configurations": { + "production": { + "buildTarget": "example-app-jest:build:production" + }, + "development": { + "buildTarget": "example-app-jest:build:development" + } + }, + "defaultConfiguration": "development" + }, + "test": { + "builder": "@angular-builders/jest:run" + }, + "lint": { + "builder": "@angular-eslint/builder:lint", + "options": { + "lintFilePatterns": ["apps/example-app-jest/**/*.ts", "apps/example-app-jest/**/*.html"] + } + } + } + }, + "example-app-karma": { + "projectType": "application", + "root": "apps/example-app-karma", + "sourceRoot": "apps/example-app-karma/src", + "prefix": "app", + "architect": { + "build": { + "builder": "@angular/build:application", + "options": { + "outputPath": { + "base": "dist/apps/example-app-karma" + }, + "index": "apps/example-app-karma/src/index.html", + "tsConfig": "apps/example-app-karma/tsconfig.app.json", + "assets": ["apps/example-app-karma/src/favicon.ico", "apps/example-app-karma/src/assets"], + "styles": [], + "scripts": [], + "browser": "apps/example-app-karma/src/main.ts" + }, + "configurations": { + "production": { + "budgets": [ + { + "type": "anyComponentStyle", + "maximumWarning": "6kb" + } + ], + "outputHashing": "all" + }, + "development": { + "optimization": false, + "extractLicenses": false, + "sourceMap": true, + "namedChunks": true + } + }, + "defaultConfiguration": "production" + }, + "serve": { + "builder": "@angular/build:dev-server", + "configurations": { + "production": { + "buildTarget": "example-app-karma:build:production" + }, + "development": { + "buildTarget": "example-app-karma:build:development" + } + }, + "defaultConfiguration": "development" + }, + "test": { + "builder": "@angular/build:karma", + "options": { + "main": "apps/example-app-karma/src/test.ts", + "tsConfig": "apps/example-app-karma/tsconfig.spec.json", + "karmaConfig": "apps/example-app-karma/karma.conf.js" + } + }, + "lint": { + "builder": "@angular-eslint/builder:lint", + "options": { + "lintFilePatterns": ["apps/example-app-karma/**/*.ts", "apps/example-app-karma/**/*.html"] + } + } + } + } + }, + "schematics": { + "@schematics/angular:component": { + "style": "scss", + "displayBlock": true, + "changeDetection": "OnPush" + } + } +} diff --git a/apps/example-app-jest/eslint.config.cjs b/apps/example-app-jest/eslint.config.cjs new file mode 100644 index 00000000..9e951e7a --- /dev/null +++ b/apps/example-app-jest/eslint.config.cjs @@ -0,0 +1,7 @@ +// @ts-check + +// TODO - https://github.com/nrwl/nx/issues/22576 + +/** @type {import('@typescript-eslint/utils/ts-eslint').FlatConfig.ConfigPromise} */ +const config = (async () => (await import('./eslint.config.mjs')).default)(); +module.exports = config; diff --git a/apps/example-app-jest/eslint.config.mjs b/apps/example-app-jest/eslint.config.mjs new file mode 100644 index 00000000..bd9b42bf --- /dev/null +++ b/apps/example-app-jest/eslint.config.mjs @@ -0,0 +1,6 @@ +// @ts-check + +import tseslint from 'typescript-eslint'; +import rootConfig from '../../eslint.config.mjs'; + +export default tseslint.config(...rootConfig); diff --git a/apps/example-app-jest/jest.config.js b/apps/example-app-jest/jest.config.js new file mode 100644 index 00000000..eccad9fa --- /dev/null +++ b/apps/example-app-jest/jest.config.js @@ -0,0 +1,21 @@ +module.exports = { + preset: 'jest-preset-angular', + setupFilesAfterEnv: ['/apps/example-app-jest/src/test-setup.ts'], + modulePathIgnorePatterns: ['/dist'], + testPathIgnorePatterns: ['/node_modules/', '/dist/'], + transform: { + '^.+.ts?$': [ + 'ts-jest', + { + tsconfig: '/apps/example-app-jest/tsconfig.spec.json', + stringifyContentPathRegex: '\\.(html|svg)$', + }, + ], + }, + coverageDirectory: 'coverage/apps/example-app-jest', + transformIgnorePatterns: ['node_modules/(?!.*\\.mjs$)'], + moduleNameMapper: { + '@testing-library/angular/jest-utils': '/projects/testing-library/jest-utils/index.ts', + '@testing-library/angular': '/projects/testing-library', + }, +}; diff --git a/apps/example-app-jest/src/app/examples/00-single-component.spec.ts b/apps/example-app-jest/src/app/examples/00-single-component.spec.ts new file mode 100644 index 00000000..87ba6db9 --- /dev/null +++ b/apps/example-app-jest/src/app/examples/00-single-component.spec.ts @@ -0,0 +1,25 @@ +import { provideZoneChangeDetection } from '@angular/core'; +import { render, screen } from '@testing-library/angular'; +import userEvent from '@testing-library/user-event'; + +import { SingleComponent } from './00-single-component'; + +test('renders the current value and can increment and decrement', async () => { + const user = userEvent.setup(); + await render(SingleComponent, { + providers: [provideZoneChangeDetection()], + }); + + const incrementControl = screen.getByRole('button', { name: /increment/i }); + const decrementControl = screen.getByRole('button', { name: /decrement/i }); + const valueControl = screen.getByTestId('value'); + + expect(valueControl).toHaveTextContent('0'); + + await user.click(incrementControl); + await user.click(incrementControl); + expect(valueControl).toHaveTextContent('2'); + + await user.click(decrementControl); + expect(valueControl).toHaveTextContent('1'); +}); diff --git a/apps/example-app-jest/src/app/examples/00-single-component.ts b/apps/example-app-jest/src/app/examples/00-single-component.ts new file mode 100644 index 00000000..4a092390 --- /dev/null +++ b/apps/example-app-jest/src/app/examples/00-single-component.ts @@ -0,0 +1,14 @@ +import { Component } from '@angular/core'; + +@Component({ + selector: 'atl-fixture', + standalone: true, + template: ` + + {{ value }} + + `, +}) +export class SingleComponent { + value = 0; +} diff --git a/apps/example-app-jest/src/app/examples/01-nested-component.spec.ts b/apps/example-app-jest/src/app/examples/01-nested-component.spec.ts new file mode 100644 index 00000000..24023924 --- /dev/null +++ b/apps/example-app-jest/src/app/examples/01-nested-component.spec.ts @@ -0,0 +1,25 @@ +import { provideZoneChangeDetection } from '@angular/core'; +import { render, screen } from '@testing-library/angular'; +import userEvent from '@testing-library/user-event'; + +import { NestedContainerComponent } from './01-nested-component'; + +test('renders the current value and can increment and decrement', async () => { + const user = userEvent.setup(); + await render(NestedContainerComponent, { + providers: [provideZoneChangeDetection()], + }); + + const incrementControl = screen.getByRole('button', { name: /increment/i }); + const decrementControl = screen.getByRole('button', { name: /decrement/i }); + const valueControl = screen.getByTestId('value'); + + expect(valueControl).toHaveTextContent('0'); + + await user.click(incrementControl); + await user.click(incrementControl); + expect(valueControl).toHaveTextContent('2'); + + await user.click(decrementControl); + expect(valueControl).toHaveTextContent('1'); +}); diff --git a/apps/example-app-jest/src/app/examples/01-nested-component.ts b/apps/example-app-jest/src/app/examples/01-nested-component.ts new file mode 100644 index 00000000..fd0d0c0e --- /dev/null +++ b/apps/example-app-jest/src/app/examples/01-nested-component.ts @@ -0,0 +1,34 @@ +import { Component, Input, Output, EventEmitter } from '@angular/core'; + +@Component({ + standalone: true, + selector: 'atl-button', + template: ' ', +}) +export class NestedButtonComponent { + @Input() name = ''; + @Output() raise = new EventEmitter(); +} + +@Component({ + standalone: true, + selector: 'atl-value', + template: ' {{ value }} ', +}) +export class NestedValueComponent { + @Input() value?: number; +} + +@Component({ + standalone: true, + selector: 'atl-fixture', + template: ` + + + + `, + imports: [NestedButtonComponent, NestedValueComponent], +}) +export class NestedContainerComponent { + value = 0; +} diff --git a/apps/example-app-jest/src/app/examples/02-input-output.spec.ts b/apps/example-app-jest/src/app/examples/02-input-output.spec.ts new file mode 100644 index 00000000..96b58ba6 --- /dev/null +++ b/apps/example-app-jest/src/app/examples/02-input-output.spec.ts @@ -0,0 +1,123 @@ +import { provideZoneChangeDetection } from '@angular/core'; +import { render, screen } from '@testing-library/angular'; +import userEvent from '@testing-library/user-event'; + +import { InputOutputComponent } from './02-input-output'; + +test('is possible to set input and listen for output', async () => { + const user = userEvent.setup(); + const sendValue = jest.fn(); + + await render(InputOutputComponent, { + inputs: { + value: 47, + }, + on: { + sendValue, + }, + providers: [provideZoneChangeDetection()], + }); + + const incrementControl = screen.getByRole('button', { name: /increment/i }); + const sendControl = screen.getByRole('button', { name: /send/i }); + const valueControl = screen.getByTestId('value'); + + expect(valueControl).toHaveTextContent('47'); + + await user.click(incrementControl); + await user.click(incrementControl); + await user.click(incrementControl); + expect(valueControl).toHaveTextContent('50'); + + await user.click(sendControl); + expect(sendValue).toHaveBeenCalledTimes(1); + expect(sendValue).toHaveBeenCalledWith(50); +}); + +test('is possible to set input and listen for output (deprecated)', async () => { + const user = userEvent.setup(); + const sendValue = jest.fn(); + + await render(InputOutputComponent, { + inputs: { + value: 47, + }, + componentOutputs: { + sendValue: { + emit: sendValue, + } as any, + }, + providers: [provideZoneChangeDetection()], + }); + + const incrementControl = screen.getByRole('button', { name: /increment/i }); + const sendControl = screen.getByRole('button', { name: /send/i }); + const valueControl = screen.getByTestId('value'); + + expect(valueControl).toHaveTextContent('47'); + + await user.click(incrementControl); + await user.click(incrementControl); + await user.click(incrementControl); + expect(valueControl).toHaveTextContent('50'); + + await user.click(sendControl); + expect(sendValue).toHaveBeenCalledTimes(1); + expect(sendValue).toHaveBeenCalledWith(50); +}); + +test('is possible to set input and listen for output with the template syntax', async () => { + const user = userEvent.setup(); + const sendSpy = jest.fn(); + + await render('', { + imports: [InputOutputComponent], + componentProperties: { + sendValue: sendSpy, + }, + providers: [provideZoneChangeDetection()], + }); + + const incrementControl = screen.getByRole('button', { name: /increment/i }); + const sendControl = screen.getByRole('button', { name: /send/i }); + const valueControl = screen.getByTestId('value'); + + expect(valueControl).toHaveTextContent('47'); + + await user.click(incrementControl); + await user.click(incrementControl); + await user.click(incrementControl); + expect(valueControl).toHaveTextContent('50'); + + await user.click(sendControl); + expect(sendSpy).toHaveBeenCalledTimes(1); + expect(sendSpy).toHaveBeenCalledWith(50); +}); + +test('is possible to set input and listen for output with the template syntax (deprecated)', async () => { + const user = userEvent.setup(); + const sendSpy = jest.fn(); + + await render('', { + imports: [InputOutputComponent], + componentProperties: { + sendValue: sendSpy, + }, + providers: [provideZoneChangeDetection()], + }); + + const incrementControl = screen.getByRole('button', { name: /increment/i }); + const sendControl = screen.getByRole('button', { name: /send/i }); + const valueControl = screen.getByTestId('value'); + + expect(valueControl).toHaveTextContent('47'); + + await user.click(incrementControl); + await user.click(incrementControl); + await user.click(incrementControl); + expect(valueControl).toHaveTextContent('50'); + + await user.click(sendControl); + expect(sendSpy).toHaveBeenCalledTimes(1); + expect(sendSpy).toHaveBeenCalledWith(50); +}); diff --git a/apps/example-app-jest/src/app/examples/02-input-output.ts b/apps/example-app-jest/src/app/examples/02-input-output.ts new file mode 100644 index 00000000..3d7f9796 --- /dev/null +++ b/apps/example-app-jest/src/app/examples/02-input-output.ts @@ -0,0 +1,17 @@ +import { Component, EventEmitter, Input, Output } from '@angular/core'; + +@Component({ + standalone: true, + selector: 'atl-fixture', + template: ` + + {{ value }} + + + + `, +}) +export class InputOutputComponent { + @Input() value = 0; + @Output() sendValue = new EventEmitter(); +} diff --git a/apps/example-app-jest/src/app/examples/03-forms.spec.ts b/apps/example-app-jest/src/app/examples/03-forms.spec.ts new file mode 100644 index 00000000..a5ca7555 --- /dev/null +++ b/apps/example-app-jest/src/app/examples/03-forms.spec.ts @@ -0,0 +1,51 @@ +import { provideZoneChangeDetection } from '@angular/core'; +import { render, screen, fireEvent } from '@testing-library/angular'; +import userEvent from '@testing-library/user-event'; + +import { FormsComponent } from './03-forms'; + +test('is possible to fill in a form and verify error messages (with the help of jest-dom https://testing-library.com/docs/ecosystem-jest-dom)', async () => { + const user = userEvent.setup(); + await render(FormsComponent, { + providers: [provideZoneChangeDetection()], + }); + + const nameControl = screen.getByRole('textbox', { name: /name/i }); + const scoreControl = screen.getByRole('spinbutton', { name: /score/i }); + const colorControl = screen.getByRole('combobox', { name: /color/i }); + const errors = screen.getByRole('alert'); + + expect(errors).toContainElement(screen.queryByText('name is required')); + expect(errors).toContainElement(screen.queryByText('score must be greater than 1')); + expect(errors).toContainElement(screen.queryByText('color is required')); + + expect(nameControl).toBeInvalid(); + await user.type(nameControl, 'Tim'); + await user.clear(scoreControl); + await user.type(scoreControl, '12'); + fireEvent.blur(scoreControl); + await user.selectOptions(colorControl, 'G'); + + expect(screen.queryByText('name is required')).not.toBeInTheDocument(); + expect(screen.getByText('score must be lesser than 10')).toBeInTheDocument(); + expect(screen.queryByText('color is required')).not.toBeInTheDocument(); + + expect(scoreControl).toBeInvalid(); + await user.clear(scoreControl); + await user.type(scoreControl, '7'); + fireEvent.blur(scoreControl); + expect(scoreControl).toBeValid(); + + expect(errors).not.toBeInTheDocument(); + + expect(nameControl).toHaveValue('Tim'); + expect(scoreControl).toHaveValue(7); + expect(colorControl).toHaveValue('G'); + + const form = screen.getByRole('form'); + expect(form).toHaveFormValues({ + name: 'Tim', + score: 7, + color: 'G', + }); +}); diff --git a/apps/example-app-jest/src/app/examples/03-forms.ts b/apps/example-app-jest/src/app/examples/03-forms.ts new file mode 100644 index 00000000..c1e48c23 --- /dev/null +++ b/apps/example-app-jest/src/app/examples/03-forms.ts @@ -0,0 +1,74 @@ +import { NgForOf, NgIf } from '@angular/common'; +import { Component, inject } from '@angular/core'; +import { FormBuilder, ReactiveFormsModule, Validators } from '@angular/forms'; + +@Component({ + standalone: true, + selector: 'atl-fixture', + imports: [ReactiveFormsModule, NgForOf, NgIf], + template: ` +
+
+ + +
+ +
+ + +
+ +
+ + +
+ +
+

{{ error }}

+
+
+ `, +}) +export class FormsComponent { + private formBuilder = inject(FormBuilder); + + colors = [ + { id: 'R', value: 'Red' }, + { id: 'B', value: 'Blue' }, + { id: 'G', value: 'Green' }, + ]; + + form = this.formBuilder.group({ + name: ['', [Validators.required]], + score: [0, { validators: [Validators.min(1), Validators.max(10)], updateOn: 'blur' }], + color: [null as string | null, Validators.required], + }); + + get formErrors() { + return Object.keys(this.form.controls) + .map((formKey) => { + const controlErrors = this.form.get(formKey)?.errors; + if (controlErrors) { + return Object.keys(controlErrors).map((keyError) => { + const error = controlErrors[keyError]; + switch (keyError) { + case 'required': + return `${formKey} is required`; + case 'min': + return `${formKey} must be greater than ${error.min}`; + case 'max': + return `${formKey} must be lesser than ${error.max}`; + default: + return `${formKey} is invalid`; + } + }); + } + return []; + }) + .reduce((errors, value) => errors.concat(value), []) + .filter(Boolean); + } +} diff --git a/apps/example-app-jest/src/app/examples/04-forms-with-material.spec.ts b/apps/example-app-jest/src/app/examples/04-forms-with-material.spec.ts new file mode 100644 index 00000000..5eabe2cc --- /dev/null +++ b/apps/example-app-jest/src/app/examples/04-forms-with-material.spec.ts @@ -0,0 +1,106 @@ +import { provideZoneChangeDetection } from '@angular/core'; +import { render, screen } from '@testing-library/angular'; +import userEvent from '@testing-library/user-event'; + +import { MaterialFormsComponent } from './04-forms-with-material'; + +test('is possible to fill in a form and verify error messages (with the help of jest-dom https://testing-library.com/docs/ecosystem-jest-dom)', async () => { + const user = userEvent.setup(); + + const { fixture } = await render(MaterialFormsComponent, { + providers: [provideZoneChangeDetection()], + }); + + const nameControl = screen.getByLabelText(/name/i); + const scoreControl = screen.getByRole('spinbutton', { name: /score/i }); + const colorControl = screen.getByPlaceholderText(/color/i); + const dateControl = screen.getByRole('textbox', { name: /Choose a date/i }); + const checkboxControl = screen.getByRole('checkbox', { name: /agree/i }); + + const errors = screen.getByRole('alert'); + + expect(errors).toContainElement(screen.queryByText('name is required')); + expect(errors).toContainElement(screen.queryByText('score must be greater than 1')); + expect(errors).toContainElement(screen.queryByText('color is required')); + expect(errors).toContainElement(screen.queryByText('agree is required')); + + await user.type(nameControl, 'Tim'); + await user.clear(scoreControl); + await user.type(scoreControl, '12'); + await user.click(colorControl); + await user.click(screen.getByText(/green/i)); + + expect(checkboxControl).not.toBeChecked(); + await user.click(checkboxControl); + expect(checkboxControl).toBeChecked(); + expect(checkboxControl).toBeValid(); + + expect(screen.queryByText('name is required')).not.toBeInTheDocument(); + expect(screen.getByText('score must be lesser than 10')).toBeInTheDocument(); + expect(screen.queryByText('color is required')).not.toBeInTheDocument(); + expect(screen.queryByText('agree is required')).not.toBeInTheDocument(); + + expect(scoreControl).toBeInvalid(); + await user.clear(scoreControl); + await user.type(scoreControl, '7'); + expect(scoreControl).toBeValid(); + + await user.type(dateControl, '08/11/2022'); + + expect(errors).not.toBeInTheDocument(); + + expect(nameControl).toHaveValue('Tim'); + expect(scoreControl).toHaveValue(7); + expect(colorControl).toHaveTextContent('Green'); + expect(checkboxControl).toBeChecked(); + + const form = screen.getByRole('form'); + expect(form).toHaveFormValues({ + name: 'Tim', + score: 7, + }); + + // material doesn't add these to the form + expect((fixture.componentInstance as MaterialFormsComponent).form?.get('agree')?.value).toBe(true); + expect((fixture.componentInstance as MaterialFormsComponent).form?.get('color')?.value).toBe('G'); + expect((fixture.componentInstance as MaterialFormsComponent).form?.get('date')?.value).toEqual(new Date(2022, 7, 11)); +}); + +test('set and show pre-set form values', async () => { + const user = userEvent.setup(); + + const { fixture, detectChanges } = await render(MaterialFormsComponent, { + providers: [provideZoneChangeDetection()], + }); + + fixture.componentInstance.form.setValue({ + name: 'Max', + score: 4, + color: 'B', + date: new Date(2022, 7, 11), + agree: true, + }); + detectChanges(); + + const nameControl = screen.getByLabelText(/name/i); + const scoreControl = screen.getByRole('spinbutton', { name: /score/i }); + const colorControl = screen.getByPlaceholderText(/color/i); + const checkboxControl = screen.getByRole('checkbox', { name: /agree/i }); + + expect(nameControl).toHaveValue('Max'); + expect(scoreControl).toHaveValue(4); + expect(colorControl).toHaveTextContent('Blue'); + expect(checkboxControl).toBeChecked(); + await user.click(checkboxControl); + + const form = screen.getByRole('form'); + expect(form).toHaveFormValues({ + name: 'Max', + score: 4, + }); + + // material doesn't add these to the form + expect((fixture.componentInstance as MaterialFormsComponent).form?.get('agree')?.value).toBe(false); + expect((fixture.componentInstance as MaterialFormsComponent).form?.get('color')?.value).toBe('B'); + expect((fixture.componentInstance as MaterialFormsComponent).form?.get('date')?.value).toEqual(new Date(2022, 7, 11)); +}); diff --git a/apps/example-app-jest/src/app/examples/04-forms-with-material.ts b/apps/example-app-jest/src/app/examples/04-forms-with-material.ts new file mode 100644 index 00000000..2376c725 --- /dev/null +++ b/apps/example-app-jest/src/app/examples/04-forms-with-material.ts @@ -0,0 +1,131 @@ +import { Component, inject } from '@angular/core'; +import { FormBuilder, ReactiveFormsModule, Validators } from '@angular/forms'; +import { NgForOf, NgIf } from '@angular/common'; +import { MatCheckboxModule } from '@angular/material/checkbox'; +import { MatInputModule } from '@angular/material/input'; +import { MatSelectModule } from '@angular/material/select'; +import { MatDatepickerModule } from '@angular/material/datepicker'; +import { MatNativeDateModule } from '@angular/material/core'; +@Component({ + standalone: true, + imports: [ + MatInputModule, + MatSelectModule, + MatDatepickerModule, + MatNativeDateModule, + MatCheckboxModule, + ReactiveFormsModule, + NgForOf, + NgIf, + ], + selector: 'atl-fixture', + template: ` +
+ + Name + + + + I Agree + + + Score + + + + + Color + + + {{ colorControlDisplayValue }} + + --- + {{ color.value }} + + + + + Choose a date + + MM/DD/YYYY + + + + +
+

{{ error }}

+
+
+ `, + styles: [ + ` + form { + display: flex; + flex-direction: column; + } + + form > * { + width: 100%; + } + + [role='alert'] { + color: red; + } + `, + ], +}) +export class MaterialFormsComponent { + private formBuilder = inject(FormBuilder); + + colors = [ + { id: 'R', value: 'Red' }, + { id: 'B', value: 'Blue' }, + { id: 'G', value: 'Green' }, + ]; + form = this.formBuilder.group({ + name: ['', [Validators.required]], + score: [0, [Validators.min(1), Validators.max(10)]], + color: [null as string | null, Validators.required], + date: [null as Date | null, Validators.required], + agree: [false, Validators.requiredTrue], + }); + + get colorControlDisplayValue(): string | undefined { + const selectedId = this.form.get('color')?.value; + return this.colors.filter((color) => color.id === selectedId)[0]?.value; + } + + get formErrors() { + return Object.keys(this.form.controls) + .map((formKey) => { + const controlErrors = this.form.get(formKey)?.errors; + if (controlErrors) { + return Object.keys(controlErrors).map((keyError) => { + const error = controlErrors[keyError]; + switch (keyError) { + case 'required': + return `${formKey} is required`; + case 'min': + return `${formKey} must be greater than ${error.min}`; + case 'max': + return `${formKey} must be lesser than ${error.max}`; + default: + return `${formKey} is invalid`; + } + }); + } + return []; + }) + .reduce((errors, value) => errors.concat(value), []) + .filter(Boolean); + } +} diff --git a/apps/example-app-jest/src/app/examples/05-component-provider.spec.ts b/apps/example-app-jest/src/app/examples/05-component-provider.spec.ts new file mode 100644 index 00000000..2421b23c --- /dev/null +++ b/apps/example-app-jest/src/app/examples/05-component-provider.spec.ts @@ -0,0 +1,87 @@ +import { provideZoneChangeDetection } from '@angular/core'; +import { TestBed } from '@angular/core/testing'; +import { render, screen } from '@testing-library/angular'; +import { provideMock, Mock, createMock } from '@testing-library/angular/jest-utils'; +import userEvent from '@testing-library/user-event'; + +import { ComponentWithProviderComponent, CounterService } from './05-component-provider'; + +test('renders the current value and can increment and decrement', async () => { + const user = userEvent.setup(); + + await render(ComponentWithProviderComponent, { + componentProviders: [ + { + provide: CounterService, + useValue: new CounterService(), + }, + ], + providers: [provideZoneChangeDetection()], + }); + + const incrementControl = screen.getByRole('button', { name: /increment/i }); + const decrementControl = screen.getByRole('button', { name: /decrement/i }); + const valueControl = screen.getByTestId('value'); + + expect(valueControl).toHaveTextContent('0'); + + await user.click(incrementControl); + await user.click(incrementControl); + expect(valueControl).toHaveTextContent('2'); + + await user.click(decrementControl); + expect(valueControl).toHaveTextContent('1'); +}); + +test('renders the current value and can increment and decrement with a mocked jest-utils service', async () => { + const user = userEvent.setup(); + + const counter = createMock(CounterService); + let fakeCounterValue = 50; + counter.increment.mockImplementation(() => (fakeCounterValue += 10)); + counter.decrement.mockImplementation(() => (fakeCounterValue -= 10)); + counter.value.mockImplementation(() => fakeCounterValue); + + await render(ComponentWithProviderComponent, { + componentProviders: [ + { + provide: CounterService, + useValue: counter, + }, + ], + providers: [provideZoneChangeDetection()], + }); + + const incrementControl = screen.getByRole('button', { name: /increment/i }); + const decrementControl = screen.getByRole('button', { name: /decrement/i }); + const valueControl = screen.getByTestId('value'); + + expect(valueControl).toHaveTextContent('50'); + + await user.click(incrementControl); + await user.click(incrementControl); + expect(valueControl).toHaveTextContent('70'); + + await user.click(decrementControl); + expect(valueControl).toHaveTextContent('60'); +}); + +test('renders the current value and can increment and decrement with provideMocked from jest-utils', async () => { + const user = userEvent.setup(); + + await render(ComponentWithProviderComponent, { + componentProviders: [provideMock(CounterService)], + providers: [provideZoneChangeDetection()], + }); + + const incrementControl = screen.getByRole('button', { name: /increment/i }); + const decrementControl = screen.getByRole('button', { name: /decrement/i }); + + await user.click(incrementControl); + await user.click(incrementControl); + await user.click(decrementControl); + + const counterService = TestBed.inject(CounterService) as Mock; + expect(counterService.increment).toHaveBeenCalledTimes(2); + expect(counterService.decrement).toHaveBeenCalledTimes(1); +}); diff --git a/apps/example-app-jest/src/app/examples/05-component-provider.ts b/apps/example-app-jest/src/app/examples/05-component-provider.ts new file mode 100644 index 00000000..c6162e0b --- /dev/null +++ b/apps/example-app-jest/src/app/examples/05-component-provider.ts @@ -0,0 +1,34 @@ +import { Component, inject, Injectable } from '@angular/core'; + +@Injectable({ + providedIn: 'root', +}) +export class CounterService { + private _value = 0; + + increment() { + this._value += 1; + } + + decrement() { + this._value -= 1; + } + + value() { + return this._value; + } +} + +@Component({ + standalone: true, + selector: 'atl-fixture', + template: ` + + {{ counter.value() }} + + `, + providers: [CounterService], +}) +export class ComponentWithProviderComponent { + protected counter = inject(CounterService); +} diff --git a/apps/example-app-jest/src/app/examples/06-with-ngrx-store.spec.ts b/apps/example-app-jest/src/app/examples/06-with-ngrx-store.spec.ts new file mode 100644 index 00000000..c3ecb371 --- /dev/null +++ b/apps/example-app-jest/src/app/examples/06-with-ngrx-store.spec.ts @@ -0,0 +1,37 @@ +import { render, screen } from '@testing-library/angular'; +import { StoreModule } from '@ngrx/store'; +import userEvent from '@testing-library/user-event'; + +import { WithNgRxStoreComponent, reducer } from './06-with-ngrx-store'; +import { provideZoneChangeDetection } from '@angular/core'; + +test('works with ngrx store', async () => { + const user = userEvent.setup(); + + await render(WithNgRxStoreComponent, { + imports: [ + StoreModule.forRoot( + { + value: reducer, + }, + { + runtimeChecks: {}, + }, + ), + ], + providers: [provideZoneChangeDetection()], + }); + + const incrementControl = screen.getByRole('button', { name: /increment/i }); + const decrementControl = screen.getByRole('button', { name: /decrement/i }); + const valueControl = screen.getByTestId('value'); + + expect(valueControl).toHaveTextContent('0'); + + await user.click(incrementControl); + await user.click(incrementControl); + expect(valueControl).toHaveTextContent('20'); + + await user.click(decrementControl); + expect(valueControl).toHaveTextContent('10'); +}); diff --git a/apps/example-app-jest/src/app/examples/06-with-ngrx-store.ts b/apps/example-app-jest/src/app/examples/06-with-ngrx-store.ts new file mode 100644 index 00000000..f478e528 --- /dev/null +++ b/apps/example-app-jest/src/app/examples/06-with-ngrx-store.ts @@ -0,0 +1,40 @@ +import { AsyncPipe } from '@angular/common'; +import { Component, inject } from '@angular/core'; +import { createSelector, Store, createAction, createReducer, on, select } from '@ngrx/store'; + +const increment = createAction('increment'); +const decrement = createAction('decrement'); +export const reducer = createReducer( + 0, + on(increment, (state) => state + 1), + on(decrement, (state) => state - 1), +); + +const selectValue = createSelector( + (state: any) => state.value, + (value) => value * 10, +); + +@Component({ + standalone: true, + imports: [AsyncPipe], + selector: 'atl-fixture', + template: ` + + {{ value | async }} + + `, +}) +export class WithNgRxStoreComponent { + private store = inject(Store); + + value = this.store.pipe(select(selectValue)); + + increment() { + this.store.dispatch(increment()); + } + + decrement() { + this.store.dispatch(decrement()); + } +} diff --git a/apps/example-app-jest/src/app/examples/07-with-ngrx-mock-store.spec.ts b/apps/example-app-jest/src/app/examples/07-with-ngrx-mock-store.spec.ts new file mode 100644 index 00000000..2b7f6d21 --- /dev/null +++ b/apps/example-app-jest/src/app/examples/07-with-ngrx-mock-store.spec.ts @@ -0,0 +1,32 @@ +import { TestBed } from '@angular/core/testing'; +import { provideMockStore, MockStore } from '@ngrx/store/testing'; +import { render, screen } from '@testing-library/angular'; +import userEvent from '@testing-library/user-event'; + +import { WithNgRxMockStoreComponent, selectItems } from './07-with-ngrx-mock-store'; +import { provideZoneChangeDetection } from '@angular/core'; + +test('works with provideMockStore', async () => { + const user = userEvent.setup(); + + await render(WithNgRxMockStoreComponent, { + providers: [ + provideMockStore({ + selectors: [ + { + selector: selectItems, + value: ['Four', 'Seven'], + }, + ], + }), + provideZoneChangeDetection(), + ], + }); + + const store = TestBed.inject(MockStore); + store.dispatch = jest.fn(); + + await user.click(screen.getByText(/seven/i)); + + expect(store.dispatch).toHaveBeenCalledWith({ type: '[Item List] send', item: 'Seven' }); +}); diff --git a/apps/example-app-jest/src/app/examples/07-with-ngrx-mock-store.ts b/apps/example-app-jest/src/app/examples/07-with-ngrx-mock-store.ts new file mode 100644 index 00000000..0bd5d864 --- /dev/null +++ b/apps/example-app-jest/src/app/examples/07-with-ngrx-mock-store.ts @@ -0,0 +1,30 @@ +import { AsyncPipe, NgForOf } from '@angular/common'; +import { Component, inject } from '@angular/core'; +import { createSelector, Store, select } from '@ngrx/store'; + +export const selectItems = createSelector( + (state: any) => state.items, + (items) => items, +); + +@Component({ + standalone: true, + imports: [AsyncPipe, NgForOf], + selector: 'atl-fixture', + template: ` +
    +
  • + +
    • +
+ `, +}) +export class WithNgRxMockStoreComponent { + private store = inject(Store); + + items = this.store.pipe(select(selectItems)); + + send(item: string) { + this.store.dispatch({ type: '[Item List] send', item }); + } +} diff --git a/apps/example-app-jest/src/app/examples/08-directive.spec.ts b/apps/example-app-jest/src/app/examples/08-directive.spec.ts new file mode 100644 index 00000000..2cf42d73 --- /dev/null +++ b/apps/example-app-jest/src/app/examples/08-directive.spec.ts @@ -0,0 +1,100 @@ +import { Component, provideZoneChangeDetection } from '@angular/core'; +import { render, screen } from '@testing-library/angular'; +import userEvent from '@testing-library/user-event'; + +import { SpoilerDirective } from './08-directive'; + +test('it is possible to test directives with container component', async () => { + @Component({ + template: `
`, + imports: [SpoilerDirective], + standalone: true, + }) + class FixtureComponent {} + + const user = userEvent.setup(); + await render(FixtureComponent); + + const directive = screen.getByTestId('dir'); + + expect(screen.queryByText('I am visible now...')).not.toBeInTheDocument(); + expect(screen.getByText('SPOILER')).toBeInTheDocument(); + + await user.hover(directive); + expect(screen.queryByText('SPOILER')).not.toBeInTheDocument(); + expect(screen.getByText('I am visible now...')).toBeInTheDocument(); + + await user.unhover(directive); + expect(screen.getByText('SPOILER')).toBeInTheDocument(); + expect(screen.queryByText('I am visible now...')).not.toBeInTheDocument(); +}); + +test('it is possible to test directives', async () => { + const user = userEvent.setup(); + + await render('
', { + imports: [SpoilerDirective], + providers: [provideZoneChangeDetection()], + }); + + const directive = screen.getByTestId('dir'); + + expect(screen.queryByText('I am visible now...')).not.toBeInTheDocument(); + expect(screen.getByText('SPOILER')).toBeInTheDocument(); + + await user.hover(directive); + expect(screen.queryByText('SPOILER')).not.toBeInTheDocument(); + expect(screen.getByText('I am visible now...')).toBeInTheDocument(); + + await user.unhover(directive); + expect(screen.getByText('SPOILER')).toBeInTheDocument(); + expect(screen.queryByText('I am visible now...')).not.toBeInTheDocument(); +}); + +test('it is possible to test directives with props', async () => { + const user = userEvent.setup(); + const hidden = 'SPOILER ALERT'; + const visible = 'There is nothing to see here ...'; + + await render('
', { + imports: [SpoilerDirective], + componentProperties: { + hidden, + visible, + }, + providers: [provideZoneChangeDetection()], + }); + + expect(screen.queryByText(visible)).not.toBeInTheDocument(); + expect(screen.getByText(hidden)).toBeInTheDocument(); + + await user.hover(screen.getByText(hidden)); + expect(screen.queryByText(hidden)).not.toBeInTheDocument(); + expect(screen.getByText(visible)).toBeInTheDocument(); + + await user.unhover(screen.getByText(visible)); + expect(screen.getByText(hidden)).toBeInTheDocument(); + expect(screen.queryByText(visible)).not.toBeInTheDocument(); +}); + +test('it is possible to test directives with props in template', async () => { + const user = userEvent.setup(); + const hidden = 'SPOILER ALERT'; + const visible = 'There is nothing to see here ...'; + + await render(``, { + imports: [SpoilerDirective], + providers: [provideZoneChangeDetection()], + }); + + expect(screen.queryByText(visible)).not.toBeInTheDocument(); + expect(screen.getByText(hidden)).toBeInTheDocument(); + + await user.hover(screen.getByText(hidden)); + expect(screen.queryByText(hidden)).not.toBeInTheDocument(); + expect(screen.getByText(visible)).toBeInTheDocument(); + + await user.unhover(screen.getByText(visible)); + expect(screen.getByText(hidden)).toBeInTheDocument(); + expect(screen.queryByText(visible)).not.toBeInTheDocument(); +}); diff --git a/apps/example-app-jest/src/app/examples/08-directive.ts b/apps/example-app-jest/src/app/examples/08-directive.ts new file mode 100644 index 00000000..d6cd631c --- /dev/null +++ b/apps/example-app-jest/src/app/examples/08-directive.ts @@ -0,0 +1,26 @@ +import { Directive, HostListener, ElementRef, Input, OnInit, inject } from '@angular/core'; + +@Directive({ + standalone: true, + selector: '[atlSpoiler]', +}) +export class SpoilerDirective implements OnInit { + private el = inject(ElementRef); + + @Input() hidden = 'SPOILER'; + @Input() visible = 'I am visible now...'; + + ngOnInit() { + this.el.nativeElement.textContent = this.hidden; + } + + @HostListener('mouseover') + onMouseOver() { + this.el.nativeElement.textContent = this.visible; + } + + @HostListener('mouseleave') + onMouseLeave() { + this.el.nativeElement.textContent = this.hidden; + } +} diff --git a/apps/example-app-jest/src/app/examples/09-router.spec.ts b/apps/example-app-jest/src/app/examples/09-router.spec.ts new file mode 100644 index 00000000..a5d63da5 --- /dev/null +++ b/apps/example-app-jest/src/app/examples/09-router.spec.ts @@ -0,0 +1,125 @@ +import { provideZoneChangeDetection } from '@angular/core'; +import { render, screen } from '@testing-library/angular'; +import userEvent from '@testing-library/user-event'; + +import { DetailComponent, RootComponent, HiddenDetailComponent } from './09-router'; + +test('it can navigate to routes', async () => { + const user = userEvent.setup(); + await render(RootComponent, { + routes: [ + { + path: '', + children: [ + { + path: 'detail/:id', + component: DetailComponent, + }, + { + path: 'hidden-detail', + component: HiddenDetailComponent, + }, + ], + }, + ], + providers: [provideZoneChangeDetection()], + }); + + expect(screen.queryByText(/Detail one/i)).not.toBeInTheDocument(); + + await user.click(screen.getByRole('link', { name: /load one/i })); + expect(await screen.findByRole('heading', { name: /Detail one/i })).toBeInTheDocument(); + + await user.click(screen.getByRole('link', { name: /load three/i })); + expect(screen.queryByRole('heading', { name: /Detail one/i })).not.toBeInTheDocument(); + expect(await screen.findByRole('heading', { name: /Detail three/i })).toBeInTheDocument(); + + await user.click(screen.getByRole('link', { name: /back to parent/i })); + expect(screen.queryByRole('heading', { name: /Detail three/i })).not.toBeInTheDocument(); + + await user.click(screen.getByRole('link', { name: /load two/i })); + expect(await screen.findByRole('heading', { name: /Detail two/i })).toBeInTheDocument(); + + await user.click(screen.getByRole('link', { name: /hidden x/i })); + expect(await screen.findByText(/You found the treasure!/i)).toBeInTheDocument(); +}); + +test('it can navigate to routes - workaround', async () => { + const { navigate } = await render(RootComponent, { + routes: [ + { + path: '', + children: [ + { + path: 'detail/:id', + component: DetailComponent, + }, + { + path: 'hidden-detail', + component: HiddenDetailComponent, + }, + ], + }, + ], + providers: [provideZoneChangeDetection()], + }); + + expect(screen.queryByText(/Detail one/i)).not.toBeInTheDocument(); + + await navigate(screen.getByRole('link', { name: /load one/i })); + expect(screen.getByRole('heading', { name: /Detail one/i })).toBeInTheDocument(); + + await navigate(screen.getByRole('link', { name: /load three/i })); + expect(screen.queryByRole('heading', { name: /Detail one/i })).not.toBeInTheDocument(); + expect(screen.getByRole('heading', { name: /Detail three/i })).toBeInTheDocument(); + + await navigate(screen.getByRole('link', { name: /back to parent/i })); + expect(screen.queryByRole('heading', { name: /Detail three/i })).not.toBeInTheDocument(); + + await navigate(screen.getByRole('link', { name: /load two/i })); + expect(screen.getByRole('heading', { name: /Detail two/i })).toBeInTheDocument(); + await navigate(screen.getByRole('link', { name: /hidden x/i })); + expect(screen.getByText(/You found the treasure!/i)).toBeInTheDocument(); +}); + +test('it can navigate to routes with a base path', async () => { + const basePath = 'base'; + const { navigate } = await render(RootComponent, { + routes: [ + { + path: basePath, + children: [ + { + path: 'detail/:id', + component: DetailComponent, + }, + { + path: 'hidden-detail', + component: HiddenDetailComponent, + }, + ], + }, + ], + providers: [provideZoneChangeDetection()], + }); + + expect(screen.queryByRole('heading', { name: /Detail one/i })).not.toBeInTheDocument(); + + await navigate(screen.getByRole('link', { name: /load one/i }), basePath); + expect(screen.getByRole('heading', { name: /Detail one/i })).toBeInTheDocument(); + + await navigate(screen.getByRole('link', { name: /load three/i }), basePath); + expect(screen.queryByRole('heading', { name: /Detail one/i })).not.toBeInTheDocument(); + expect(screen.getByRole('heading', { name: /Detail three/i })).toBeInTheDocument(); + + await navigate(screen.getByRole('link', { name: /back to parent/i })); + expect(screen.queryByRole('heading', { name: /Detail three/i })).not.toBeInTheDocument(); + + // It's possible to just use strings + await navigate('base/detail/two?text=Hello&subtext=World'); + expect(screen.getByRole('heading', { name: /Detail two/i })).toBeInTheDocument(); + expect(screen.getByText(/Hello World/i)).toBeInTheDocument(); + + await navigate('/hidden-detail', basePath); + expect(screen.getByText(/You found the treasure!/i)).toBeInTheDocument(); +}); diff --git a/apps/example-app-jest/src/app/examples/09-router.ts b/apps/example-app-jest/src/app/examples/09-router.ts new file mode 100644 index 00000000..f29a4efe --- /dev/null +++ b/apps/example-app-jest/src/app/examples/09-router.ts @@ -0,0 +1,46 @@ +import { AsyncPipe } from '@angular/common'; +import { Component, inject } from '@angular/core'; +import { ActivatedRoute, RouterLink, RouterOutlet } from '@angular/router'; +import { map } from 'rxjs/operators'; + +@Component({ + standalone: true, + imports: [RouterLink, RouterOutlet], + selector: 'atl-main', + template: ` + Load one | Load two | + Load three | + +
+ + + `, +}) +export class RootComponent {} + +@Component({ + standalone: true, + imports: [RouterLink, AsyncPipe], + selector: 'atl-detail', + template: ` +

Detail {{ id | async }}

+ +

{{ text | async }} {{ subtext | async }}

+ + Back to parent + hidden x + `, +}) +export class DetailComponent { + private route = inject(ActivatedRoute); + id = this.route.paramMap.pipe(map((params) => params.get('id'))); + text = this.route.queryParams.pipe(map((params) => params['text'])); + subtext = this.route.queryParams.pipe(map((params) => params['subtext'])); +} + +@Component({ + standalone: true, + selector: 'atl-detail-hidden', + template: ' You found the treasure! ', +}) +export class HiddenDetailComponent {} diff --git a/apps/example-app-jest/src/app/examples/10-inject-token-dependency.spec.ts b/apps/example-app-jest/src/app/examples/10-inject-token-dependency.spec.ts new file mode 100644 index 00000000..3102fa27 --- /dev/null +++ b/apps/example-app-jest/src/app/examples/10-inject-token-dependency.spec.ts @@ -0,0 +1,18 @@ +import { provideZoneChangeDetection } from '@angular/core'; +import { render, screen } from '@testing-library/angular'; + +import { DataInjectedComponent, DATA } from './10-inject-token-dependency'; + +test('injects data into the component', async () => { + await render(DataInjectedComponent, { + providers: [ + { + provide: DATA, + useValue: { text: 'Hello boys and girls' }, + }, + provideZoneChangeDetection(), + ], + }); + + expect(screen.getByText(/Hello boys and girls/i)).toBeInTheDocument(); +}); diff --git a/apps/example-app-jest/src/app/examples/10-inject-token-dependency.ts b/apps/example-app-jest/src/app/examples/10-inject-token-dependency.ts new file mode 100644 index 00000000..5cd60498 --- /dev/null +++ b/apps/example-app-jest/src/app/examples/10-inject-token-dependency.ts @@ -0,0 +1,12 @@ +import { Component, InjectionToken, inject } from '@angular/core'; + +export const DATA = new InjectionToken<{ text: string }>('Components Data'); + +@Component({ + standalone: true, + selector: 'atl-fixture', + template: ' {{ data.text }} ', +}) +export class DataInjectedComponent { + protected data = inject(DATA); +} diff --git a/apps/example-app-jest/src/app/examples/11-ng-content.spec.ts b/apps/example-app-jest/src/app/examples/11-ng-content.spec.ts new file mode 100644 index 00000000..7e78627c --- /dev/null +++ b/apps/example-app-jest/src/app/examples/11-ng-content.spec.ts @@ -0,0 +1,16 @@ +import { provideZoneChangeDetection } from '@angular/core'; +import { render, screen } from '@testing-library/angular'; + +import { CellComponent } from './11-ng-content'; + +test('it is possible to test ng-content without selector', async () => { + const projection = 'it should be showed into a p element!'; + + await render(`${projection}`, { + imports: [CellComponent], + providers: [provideZoneChangeDetection()], + }); + + expect(screen.getByText(projection)).toBeInTheDocument(); + expect(screen.getByTestId('one-cell-with-ng-content')).toContainHTML(`

${projection}

`); +}); diff --git a/apps/example-app-jest/src/app/examples/11-ng-content.ts b/apps/example-app-jest/src/app/examples/11-ng-content.ts new file mode 100644 index 00000000..0dd668bc --- /dev/null +++ b/apps/example-app-jest/src/app/examples/11-ng-content.ts @@ -0,0 +1,13 @@ +import { Component, ChangeDetectionStrategy } from '@angular/core'; + +@Component({ + standalone: true, + selector: 'atl-fixture', + template: ` +

+ +

+ `, + changeDetection: ChangeDetectionStrategy.OnPush, +}) +export class CellComponent {} diff --git a/apps/example-app-jest/src/app/examples/12-service-component.spec.ts b/apps/example-app-jest/src/app/examples/12-service-component.spec.ts new file mode 100644 index 00000000..4cf184ec --- /dev/null +++ b/apps/example-app-jest/src/app/examples/12-service-component.spec.ts @@ -0,0 +1,68 @@ +import { of } from 'rxjs'; +import { render, screen } from '@testing-library/angular'; +import { createMock } from '@testing-library/angular/jest-utils'; + +import { Customer, CustomersComponent, CustomersService } from './12-service-component'; +import { provideZoneChangeDetection } from '@angular/core'; + +test('renders the provided customers with manual mock', async () => { + const customers: Customer[] = [ + { + id: '1', + name: 'sarah', + }, + { + id: '2', + name: 'charlotte', + }, + ]; + await render(CustomersComponent, { + componentProviders: [ + { + provide: CustomersService, + useValue: { + load() { + return of(customers); + }, + }, + }, + ], + providers: [provideZoneChangeDetection()], + }); + + const listItems = screen.getAllByRole('listitem'); + expect(listItems).toHaveLength(customers.length); + + customers.forEach((customer) => screen.getByText(new RegExp(customer.name, 'i'))); +}); + +test('renders the provided customers with createMock', async () => { + const customers: Customer[] = [ + { + id: '1', + name: 'sarah', + }, + { + id: '2', + name: 'charlotte', + }, + ]; + + const customersService = createMock(CustomersService); + customersService.load = jest.fn(() => of(customers)); + + await render(CustomersComponent, { + componentProviders: [ + { + provide: CustomersService, + useValue: customersService, + }, + ], + providers: [provideZoneChangeDetection()], + }); + + const listItems = screen.getAllByRole('listitem'); + expect(listItems).toHaveLength(customers.length); + + customers.forEach((customer) => screen.getByText(new RegExp(customer.name, 'i'))); +}); diff --git a/apps/example-app-jest/src/app/examples/12-service-component.ts b/apps/example-app-jest/src/app/examples/12-service-component.ts new file mode 100644 index 00000000..f1b848ba --- /dev/null +++ b/apps/example-app-jest/src/app/examples/12-service-component.ts @@ -0,0 +1,34 @@ +import { AsyncPipe, NgForOf } from '@angular/common'; +import { Component, inject, Injectable } from '@angular/core'; +import { Observable, of } from 'rxjs'; + +export class Customer { + id!: string; + name!: string; +} + +@Injectable({ + providedIn: 'root', +}) +export class CustomersService { + load(): Observable { + return of([]); + } +} + +@Component({ + standalone: true, + imports: [AsyncPipe, NgForOf], + selector: 'atl-fixture', + template: ` +
    +
  • + {{ customer.name }} +
    • +
+ `, +}) +export class CustomersComponent { + private service = inject(CustomersService); + customers$ = this.service.load(); +} diff --git a/apps/example-app-jest/src/app/examples/13-scrolling.component.spec.ts b/apps/example-app-jest/src/app/examples/13-scrolling.component.spec.ts new file mode 100644 index 00000000..61513b0c --- /dev/null +++ b/apps/example-app-jest/src/app/examples/13-scrolling.component.spec.ts @@ -0,0 +1,19 @@ +import { provideZoneChangeDetection } from '@angular/core'; +import { render, screen, waitForElementToBeRemoved } from '@testing-library/angular'; + +import { CdkVirtualScrollOverviewExampleComponent } from './13-scrolling.component'; + +test('should scroll to load more items', async () => { + await render(CdkVirtualScrollOverviewExampleComponent, { + providers: [provideZoneChangeDetection()], + }); + + const item0 = await screen.findByText(/Item #0/i); + expect(item0).toBeVisible(); + + screen.getByTestId('scroll-viewport').scrollTop = 500; + await waitForElementToBeRemoved(() => screen.queryByText(/Item #0/i)); + + const item12 = await screen.findByText(/Item #12/i); + expect(item12).toBeVisible(); +}); diff --git a/apps/example-app-jest/src/app/examples/13-scrolling.component.ts b/apps/example-app-jest/src/app/examples/13-scrolling.component.ts new file mode 100644 index 00000000..6a36ed8f --- /dev/null +++ b/apps/example-app-jest/src/app/examples/13-scrolling.component.ts @@ -0,0 +1,30 @@ +import { ChangeDetectionStrategy, Component } from '@angular/core'; +import { ScrollingModule } from '@angular/cdk/scrolling'; + +@Component({ + standalone: true, + imports: [ScrollingModule], + selector: 'atl-cdk-virtual-scroll-overview-example', + template: ` + +
{{ item }}
+ + `, + styles: [ + ` + .example-viewport { + height: 200px; + width: 200px; + border: 1px solid black; + } + + .example-item { + height: 50px; + } + `, + ], + changeDetection: ChangeDetectionStrategy.OnPush, +}) +export class CdkVirtualScrollOverviewExampleComponent { + items = Array.from({ length: 100 }).map((_, i) => `Item #${i}`); +} diff --git a/apps/example-app-jest/src/app/examples/14-async-component.spec.ts b/apps/example-app-jest/src/app/examples/14-async-component.spec.ts new file mode 100644 index 00000000..0f664d1a --- /dev/null +++ b/apps/example-app-jest/src/app/examples/14-async-component.spec.ts @@ -0,0 +1,36 @@ +import { provideZoneChangeDetection } from '@angular/core'; +import { fakeAsync, tick } from '@angular/core/testing'; +import { render, screen, fireEvent } from '@testing-library/angular'; +import { AsyncComponent } from './14-async-component'; + +test.skip('can use fakeAsync utilities', fakeAsync(async () => { + await render(AsyncComponent, { + providers: [provideZoneChangeDetection()], + }); + + const load = await screen.findByRole('button', { name: /load/i }); + fireEvent.click(load); + + // Error: The code should be running in the fakeAsync zone to call this function + tick(10_000); + + const hello = await screen.findByText('Hello world'); + expect(hello).toBeInTheDocument(); +})); + +test('can use fakeTimer utilities', async () => { + jest.useFakeTimers(); + await render(AsyncComponent, { + providers: [provideZoneChangeDetection()], + }); + + const load = await screen.findByRole('button', { name: /load/i }); + + // userEvent not working with fake timers + fireEvent.click(load); + + jest.advanceTimersByTime(10_000); + + const hello = await screen.findByText('Hello world'); + expect(hello).toBeInTheDocument(); +}); diff --git a/apps/example-app-jest/src/app/examples/14-async-component.ts b/apps/example-app-jest/src/app/examples/14-async-component.ts new file mode 100644 index 00000000..64d7aaa2 --- /dev/null +++ b/apps/example-app-jest/src/app/examples/14-async-component.ts @@ -0,0 +1,30 @@ +import { AsyncPipe, NgIf } from '@angular/common'; +import { Component, OnDestroy } from '@angular/core'; +import { Subject } from 'rxjs'; +import { delay, filter, mapTo } from 'rxjs/operators'; + +@Component({ + standalone: true, + imports: [AsyncPipe, NgIf], + selector: 'atl-fixture', + template: ` + +
{{ data }}
+ `, +}) +export class AsyncComponent implements OnDestroy { + actions = new Subject(); + data$ = this.actions.pipe( + filter((x) => x === 'LOAD'), + mapTo('Hello world'), + delay(10_000), + ); + + load() { + this.actions.next('LOAD'); + } + + ngOnDestroy() { + this.actions.complete(); + } +} diff --git a/apps/example-app-jest/src/app/examples/15-dialog.component.spec.ts b/apps/example-app-jest/src/app/examples/15-dialog.component.spec.ts new file mode 100644 index 00000000..97d2111b --- /dev/null +++ b/apps/example-app-jest/src/app/examples/15-dialog.component.spec.ts @@ -0,0 +1,78 @@ +import { provideZoneChangeDetection } from '@angular/core'; +import { MatDialogRef } from '@angular/material/dialog'; +import { provideNoopAnimations } from '@angular/platform-browser/animations'; +import { render, screen } from '@testing-library/angular'; +import userEvent from '@testing-library/user-event'; + +import { DialogComponent, DialogContentComponent } from './15-dialog.component'; + +test('dialog closes', async () => { + const user = userEvent.setup(); + + const closeFn = jest.fn(); + await render(DialogContentComponent, { + providers: [ + provideNoopAnimations(), + { + provide: MatDialogRef, + useValue: { + close: closeFn, + }, + }, + provideZoneChangeDetection(), + ], + }); + + const cancelButton = await screen.findByRole('button', { name: /cancel/i }); + await user.click(cancelButton); + + expect(closeFn).toHaveBeenCalledTimes(1); +}); + +test('closes the dialog via the backdrop', async () => { + const user = userEvent.setup(); + + await render(DialogComponent, { + providers: [provideNoopAnimations()], + }); + + const openDialogButton = await screen.findByRole('button', { name: /open dialog/i }); + await user.click(openDialogButton); + + const dialogControl = await screen.findByRole('dialog'); + expect(dialogControl).toBeInTheDocument(); + const dialogTitleControl = await screen.findByRole('heading', { name: /dialog title/i }); + expect(dialogTitleControl).toBeInTheDocument(); + + // eslint-disable-next-line testing-library/no-node-access + await user.click(document.querySelector('.cdk-overlay-backdrop')!); + + expect(screen.queryByRole('dialog')).not.toBeInTheDocument(); + + const dialogTitle = screen.queryByRole('heading', { name: /dialog title/i }); + expect(dialogTitle).not.toBeInTheDocument(); +}); + +test('opens and closes the dialog with buttons', async () => { + const user = userEvent.setup(); + + await render(DialogComponent, { + providers: [provideNoopAnimations(), provideZoneChangeDetection()], + }); + + const openDialogButton = await screen.findByRole('button', { name: /open dialog/i }); + await user.click(openDialogButton); + + const dialogControl = await screen.findByRole('dialog'); + expect(dialogControl).toBeInTheDocument(); + const dialogTitleControl = await screen.findByRole('heading', { name: /dialog title/i }); + expect(dialogTitleControl).toBeInTheDocument(); + + const cancelButton = await screen.findByRole('button', { name: /cancel/i }); + await user.click(cancelButton); + + expect(screen.queryByRole('dialog')).not.toBeInTheDocument(); + + const dialogTitle = screen.queryByRole('heading', { name: /dialog title/i }); + expect(dialogTitle).not.toBeInTheDocument(); +}); diff --git a/apps/example-app-jest/src/app/examples/15-dialog.component.ts b/apps/example-app-jest/src/app/examples/15-dialog.component.ts new file mode 100644 index 00000000..ce951f23 --- /dev/null +++ b/apps/example-app-jest/src/app/examples/15-dialog.component.ts @@ -0,0 +1,37 @@ +import { Component, inject } from '@angular/core'; +import { MatDialog, MatDialogModule, MatDialogRef } from '@angular/material/dialog'; + +@Component({ + standalone: true, + imports: [MatDialogModule], + selector: 'atl-dialog-overview-example', + template: '', +}) +export class DialogComponent { + private dialog = inject(MatDialog); + + openDialog(): void { + this.dialog.open(DialogContentComponent); + } +} + +@Component({ + standalone: true, + imports: [MatDialogModule], + selector: 'atl-dialog-overview-example-dialog', + template: ` +

Dialog Title

+
Dialog content
+
+ + +
+ `, +}) +export class DialogContentComponent { + private dialogRef = inject>(MatDialogRef); + + cancel(): void { + this.dialogRef.close(); + } +} diff --git a/apps/example-app-jest/src/app/examples/16-input-getter-setter.spec.ts b/apps/example-app-jest/src/app/examples/16-input-getter-setter.spec.ts new file mode 100644 index 00000000..d5ef00d7 --- /dev/null +++ b/apps/example-app-jest/src/app/examples/16-input-getter-setter.spec.ts @@ -0,0 +1,31 @@ +import { provideZoneChangeDetection } from '@angular/core'; +import { render, screen } from '@testing-library/angular'; +import { InputGetterSetter } from './16-input-getter-setter'; + +test('should run logic in the input setter and getter', async () => { + await render(InputGetterSetter, { + componentProperties: { value: 'Angular' }, + providers: [provideZoneChangeDetection()], + }); + const valueControl = screen.getByTestId('value'); + const getterValueControl = screen.getByTestId('value-getter'); + + expect(valueControl).toHaveTextContent('I am value from setter Angular'); + expect(getterValueControl).toHaveTextContent('I am value from getter Angular'); +}); + +test('should run logic in the input setter and getter while re-rendering', async () => { + const { rerender } = await render(InputGetterSetter, { + componentProperties: { value: 'Angular' }, + providers: [provideZoneChangeDetection()], + }); + + expect(screen.getByTestId('value')).toHaveTextContent('I am value from setter Angular'); + expect(screen.getByTestId('value-getter')).toHaveTextContent('I am value from getter Angular'); + + await rerender({ componentProperties: { value: 'React' } }); + + // note we have to re-query because the elements are not the same anymore + expect(screen.getByTestId('value')).toHaveTextContent('I am value from setter React'); + expect(screen.getByTestId('value-getter')).toHaveTextContent('I am value from getter React'); +}); diff --git a/apps/example-app-jest/src/app/examples/16-input-getter-setter.ts b/apps/example-app-jest/src/app/examples/16-input-getter-setter.ts new file mode 100644 index 00000000..9d0654d3 --- /dev/null +++ b/apps/example-app-jest/src/app/examples/16-input-getter-setter.ts @@ -0,0 +1,23 @@ +import { Component, Input } from '@angular/core'; + +@Component({ + standalone: true, + selector: 'atl-fixture', + template: ` + {{ derivedValue }} + {{ value }} + `, +}) +export class InputGetterSetter { + @Input() set value(value: string) { + this.originalValue = value; + this.derivedValue = 'I am value from setter ' + value; + } + + get value() { + return 'I am value from getter ' + this.originalValue; + } + + private originalValue?: string; + derivedValue?: string; +} diff --git a/apps/example-app-jest/src/app/examples/17-component-with-attribute-selector.spec.ts b/apps/example-app-jest/src/app/examples/17-component-with-attribute-selector.spec.ts new file mode 100644 index 00000000..5c4a21ef --- /dev/null +++ b/apps/example-app-jest/src/app/examples/17-component-with-attribute-selector.spec.ts @@ -0,0 +1,19 @@ +import { provideZoneChangeDetection } from '@angular/core'; +import { render, screen } from '@testing-library/angular'; +import { ComponentWithAttributeSelectorComponent } from './17-component-with-attribute-selector'; + +// Note: At this stage it is not possible to use the render(ComponentWithAttributeSelectorComponent, {...}) syntax +// for components with attribute selectors! +test('is possible to set input of component with attribute selector through template', async () => { + await render( + ``, + { + imports: [ComponentWithAttributeSelectorComponent], + providers: [provideZoneChangeDetection()], + }, + ); + + const valueControl = screen.getByTestId('value'); + + expect(valueControl).toHaveTextContent('42'); +}); diff --git a/apps/example-app-jest/src/app/examples/17-component-with-attribute-selector.ts b/apps/example-app-jest/src/app/examples/17-component-with-attribute-selector.ts new file mode 100644 index 00000000..930032c4 --- /dev/null +++ b/apps/example-app-jest/src/app/examples/17-component-with-attribute-selector.ts @@ -0,0 +1,10 @@ +import { Component, Input } from '@angular/core'; + +@Component({ + standalone: true, + selector: 'atl-fixture-component-with-attribute-selector[value]', + template: ` {{ value }} `, +}) +export class ComponentWithAttributeSelectorComponent { + @Input() value!: number; +} diff --git a/apps/example-app-jest/src/app/examples/18-html-as-input.spec.ts b/apps/example-app-jest/src/app/examples/18-html-as-input.spec.ts new file mode 100644 index 00000000..89a483f9 --- /dev/null +++ b/apps/example-app-jest/src/app/examples/18-html-as-input.spec.ts @@ -0,0 +1,37 @@ +import { render, screen } from '@testing-library/angular'; +import { Pipe, PipeTransform, provideZoneChangeDetection } from '@angular/core'; + +@Pipe({ + standalone: true, + name: 'stripHTML', +}) +class StripHTMLPipe implements PipeTransform { + transform(stringValueWithHTML: string): string { + return stringValueWithHTML.replace(/<[^>]*>?/gm, ''); + } +} + +const STRING_WITH_HTML = + 'Some database field
with stripped HTML
'; + +// https://github.com/testing-library/angular-testing-library/pull/271 +test('passes HTML as component properties', async () => { + await render(`

{{ stringWithHtml | stripHTML }}

`, { + componentProperties: { + stringWithHtml: STRING_WITH_HTML, + }, + imports: [StripHTMLPipe], + providers: [provideZoneChangeDetection()], + }); + + expect(screen.getByText('Some database field with stripped HTML')).toBeInTheDocument(); +}); + +test('throws when passed HTML is passed in directly', async () => { + await expect(() => + render(`

{{ '${STRING_WITH_HTML}' | stripHTML }}

`, { + imports: [StripHTMLPipe], + providers: [provideZoneChangeDetection()], + }), + ).rejects.toThrow(); +}); diff --git a/apps/example-app-jest/src/app/examples/19-standalone-component.spec.ts b/apps/example-app-jest/src/app/examples/19-standalone-component.spec.ts new file mode 100644 index 00000000..701a1b59 --- /dev/null +++ b/apps/example-app-jest/src/app/examples/19-standalone-component.spec.ts @@ -0,0 +1,26 @@ +import { render, screen } from '@testing-library/angular'; +import { StandaloneComponent, StandaloneWithChildComponent } from './19-standalone-component'; +import { provideZoneChangeDetection } from '@angular/core'; + +test('can render a standalone component', async () => { + await render(StandaloneComponent, { + providers: [provideZoneChangeDetection()], + }); + + const content = screen.getByTestId('standalone'); + + expect(content).toHaveTextContent('Standalone Component'); +}); + +test('can render a standalone component with a child', async () => { + await render(StandaloneWithChildComponent, { + componentProperties: { name: 'Bob' }, + providers: [provideZoneChangeDetection()], + }); + + const childContent = screen.getByTestId('standalone'); + expect(childContent).toHaveTextContent('Standalone Component'); + + expect(screen.getByText('Hi Bob')).toBeInTheDocument(); + expect(screen.getByText('This has a child')).toBeInTheDocument(); +}); diff --git a/apps/example-app-jest/src/app/examples/19-standalone-component.ts b/apps/example-app-jest/src/app/examples/19-standalone-component.ts new file mode 100644 index 00000000..95eae3d5 --- /dev/null +++ b/apps/example-app-jest/src/app/examples/19-standalone-component.ts @@ -0,0 +1,21 @@ +import { Component, Input } from '@angular/core'; + +@Component({ + selector: 'atl-standalone', + template: `
Standalone Component
`, + standalone: true, +}) +export class StandaloneComponent {} + +@Component({ + selector: 'atl-standalone-with-child', + template: `

Hi {{ name }}

+

This has a child

+ `, + standalone: true, + imports: [StandaloneComponent], +}) +export class StandaloneWithChildComponent { + @Input() + name?: string; +} diff --git a/apps/example-app-jest/src/app/examples/20-test-harness.spec.ts b/apps/example-app-jest/src/app/examples/20-test-harness.spec.ts new file mode 100644 index 00000000..a2ddd747 --- /dev/null +++ b/apps/example-app-jest/src/app/examples/20-test-harness.spec.ts @@ -0,0 +1,39 @@ +import { provideZoneChangeDetection } from '@angular/core'; +import { TestbedHarnessEnvironment } from '@angular/cdk/testing/testbed'; +import { MatButtonHarness } from '@angular/material/button/testing'; +import { MatSnackBarHarness } from '@angular/material/snack-bar/testing'; +import { render, screen } from '@testing-library/angular'; +import userEvent from '@testing-library/user-event'; + +import { HarnessComponent } from './20-test-harness'; + +test.skip('can be used with TestHarness', async () => { + const view = await render(``, { + imports: [HarnessComponent], + providers: [provideZoneChangeDetection()], + }); + const loader = TestbedHarnessEnvironment.documentRootLoader(view.fixture); + + const buttonHarness = await loader.getHarness(MatButtonHarness); + const button = await buttonHarness.host(); + button.click(); + + const snackbarHarness = await loader.getHarness(MatSnackBarHarness); + expect(await snackbarHarness.getMessage()).toMatch(/Pizza Party!!!/i); +}); + +test.skip('can be used in combination with TestHarness', async () => { + const user = userEvent.setup(); + + const view = await render(HarnessComponent, { + providers: [provideZoneChangeDetection()], + }); + const loader = TestbedHarnessEnvironment.documentRootLoader(view.fixture); + + await user.click(screen.getByRole('button')); + + const snackbarHarness = await loader.getHarness(MatSnackBarHarness); + expect(await snackbarHarness.getMessage()).toMatch(/Pizza Party!!!/i); + + expect(screen.getByText(/Pizza Party!!!/i)).toBeInTheDocument(); +}); diff --git a/apps/example-app-jest/src/app/examples/20-test-harness.ts b/apps/example-app-jest/src/app/examples/20-test-harness.ts new file mode 100644 index 00000000..0ecb7b35 --- /dev/null +++ b/apps/example-app-jest/src/app/examples/20-test-harness.ts @@ -0,0 +1,19 @@ +import { Component, inject } from '@angular/core'; +import { MatButtonModule } from '@angular/material/button'; +import { MatSnackBar, MatSnackBarModule } from '@angular/material/snack-bar'; + +@Component({ + selector: 'atl-harness', + standalone: true, + imports: [MatButtonModule, MatSnackBarModule], + template: ` + + `, +}) +export class HarnessComponent { + private snackBar = inject(MatSnackBar); + + openSnackBar() { + return this.snackBar.open('Pizza Party!!!'); + } +} diff --git a/apps/example-app-jest/src/app/examples/21-deferable-view.component.ts b/apps/example-app-jest/src/app/examples/21-deferable-view.component.ts new file mode 100644 index 00000000..7b66d85a --- /dev/null +++ b/apps/example-app-jest/src/app/examples/21-deferable-view.component.ts @@ -0,0 +1,25 @@ +import { Component } from '@angular/core'; + +@Component({ + selector: 'atl-deferable-view-child', + template: `

Hello from deferred child component

`, + standalone: true, +}) +export class DeferableViewChildComponent {} + +@Component({ + template: ` + @defer (on timer(2s)) { + + } @placeholder { +

Hello from placeholder

+ } @loading { +

Hello from loading

+ } @error { +

Hello from error

+ } + `, + imports: [DeferableViewChildComponent], + standalone: true, +}) +export class DeferableViewComponent {} diff --git a/apps/example-app-jest/src/app/examples/21-deferable-view.spec.ts b/apps/example-app-jest/src/app/examples/21-deferable-view.spec.ts new file mode 100644 index 00000000..ba0b25a9 --- /dev/null +++ b/apps/example-app-jest/src/app/examples/21-deferable-view.spec.ts @@ -0,0 +1,27 @@ +import { provideZoneChangeDetection } from '@angular/core'; +import { render, screen } from '@testing-library/angular'; +import { DeferBlockState } from '@angular/core/testing'; +import { DeferableViewComponent } from './21-deferable-view.component'; + +test('renders deferred views based on state', async () => { + const { renderDeferBlock } = await render(DeferableViewComponent, { + providers: [provideZoneChangeDetection()], + }); + + expect(screen.getByText(/Hello from placeholder/i)).toBeInTheDocument(); + + await renderDeferBlock(DeferBlockState.Loading); + expect(screen.getByText(/Hello from loading/i)).toBeInTheDocument(); + + await renderDeferBlock(DeferBlockState.Complete); + expect(screen.getByText(/Hello from deferred child component/i)).toBeInTheDocument(); +}); + +test('initially renders deferred views based on given state', async () => { + await render(DeferableViewComponent, { + deferBlockStates: DeferBlockState.Error, + providers: [provideZoneChangeDetection()], + }); + + expect(screen.getByText(/Hello from error/i)).toBeInTheDocument(); +}); diff --git a/apps/example-app-jest/src/app/examples/22-signal-inputs.component.spec.ts b/apps/example-app-jest/src/app/examples/22-signal-inputs.component.spec.ts new file mode 100644 index 00000000..9aa22970 --- /dev/null +++ b/apps/example-app-jest/src/app/examples/22-signal-inputs.component.spec.ts @@ -0,0 +1,135 @@ +import { provideZoneChangeDetection } from '@angular/core'; +import { aliasedInput, render, screen, within } from '@testing-library/angular'; +import { SignalInputComponent } from './22-signal-inputs.component'; +import userEvent from '@testing-library/user-event'; + +test('works with signal inputs', async () => { + await render(SignalInputComponent, { + inputs: { + ...aliasedInput('greeting', 'Hello'), + name: 'world', + age: '45', + }, + providers: [provideZoneChangeDetection()], + }); + + const inputValue = within(screen.getByTestId('input-value')); + expect(inputValue.getByText(/hello world of 45 years old/i)).toBeInTheDocument(); +}); + +test('works with computed', async () => { + await render(SignalInputComponent, { + inputs: { + ...aliasedInput('greeting', 'Hello'), + name: 'world', + age: '45', + }, + providers: [provideZoneChangeDetection()], + }); + + const computedValue = within(screen.getByTestId('computed-value')); + expect(computedValue.getByText(/hello world of 45 years old/i)).toBeInTheDocument(); +}); + +test('can update signal inputs', async () => { + const { fixture } = await render(SignalInputComponent, { + inputs: { + ...aliasedInput('greeting', 'Hello'), + name: 'world', + age: '45', + }, + providers: [provideZoneChangeDetection()], + }); + + const inputValue = within(screen.getByTestId('input-value')); + const computedValue = within(screen.getByTestId('computed-value')); + + expect(inputValue.getByText(/hello world of 45 years old/i)).toBeInTheDocument(); + + fixture.componentInstance.name.set('updated'); + // set doesn't trigger change detection within the test, findBy is needed to update the template + expect(await inputValue.findByText(/hello updated of 45 years old/i)).toBeInTheDocument(); + expect(await computedValue.findByText(/hello updated of 45 years old/i)).toBeInTheDocument(); + + // it's not recommended to access the model directly, but it's possible + expect(fixture.componentInstance.name()).toBe('updated'); +}); + +test('output emits a value', async () => { + const submitFn = jest.fn(); + await render(SignalInputComponent, { + inputs: { + ...aliasedInput('greeting', 'Hello'), + name: 'world', + age: '45', + }, + on: { + submitValue: submitFn, + }, + providers: [provideZoneChangeDetection()], + }); + + await userEvent.click(screen.getByRole('button')); + + expect(submitFn).toHaveBeenCalledWith('world'); +}); + +test('model update also updates the template', async () => { + const { fixture } = await render(SignalInputComponent, { + inputs: { + ...aliasedInput('greeting', 'Hello'), + name: 'initial', + age: '45', + }, + providers: [provideZoneChangeDetection()], + }); + + const inputValue = within(screen.getByTestId('input-value')); + const computedValue = within(screen.getByTestId('computed-value')); + + expect(inputValue.getByText(/hello initial/i)).toBeInTheDocument(); + expect(computedValue.getByText(/hello initial/i)).toBeInTheDocument(); + + await userEvent.clear(screen.getByRole('textbox')); + await userEvent.type(screen.getByRole('textbox'), 'updated'); + + expect(inputValue.getByText(/hello updated/i)).toBeInTheDocument(); + expect(computedValue.getByText(/hello updated/i)).toBeInTheDocument(); + expect(fixture.componentInstance.name()).toBe('updated'); + + fixture.componentInstance.name.set('new value'); + // set doesn't trigger change detection within the test, findBy is needed to update the template + expect(await inputValue.findByText(/hello new value/i)).toBeInTheDocument(); + expect(await computedValue.findByText(/hello new value/i)).toBeInTheDocument(); + + // it's not recommended to access the model directly, but it's possible + expect(fixture.componentInstance.name()).toBe('new value'); +}); + +test('works with signal inputs, computed values, and rerenders', async () => { + const view = await render(SignalInputComponent, { + inputs: { + ...aliasedInput('greeting', 'Hello'), + name: 'world', + age: '45', + }, + providers: [provideZoneChangeDetection()], + }); + + const inputValue = within(screen.getByTestId('input-value')); + const computedValue = within(screen.getByTestId('computed-value')); + + expect(inputValue.getByText(/hello world of 45 years old/i)).toBeInTheDocument(); + expect(computedValue.getByText(/hello world of 45 years old/i)).toBeInTheDocument(); + + await view.rerender({ + inputs: { + ...aliasedInput('greeting', 'bye'), + name: 'test', + age: '0', + }, + }); + + expect(inputValue.getByText(/bye test of 0 years old/i)).toBeInTheDocument(); + expect(computedValue.getByText(/bye test of 0 years old/i)).toBeInTheDocument(); +}); diff --git a/apps/example-app-jest/src/app/examples/22-signal-inputs.component.ts b/apps/example-app-jest/src/app/examples/22-signal-inputs.component.ts new file mode 100644 index 00000000..27ed23b7 --- /dev/null +++ b/apps/example-app-jest/src/app/examples/22-signal-inputs.component.ts @@ -0,0 +1,28 @@ +import { Component, computed, input, model, numberAttribute, output } from '@angular/core'; +import { FormsModule } from '@angular/forms'; + +@Component({ + selector: 'atl-signal-input', + template: ` +
{{ greetings() }} {{ name() }} of {{ age() }} years old
+
{{ greetingMessage() }}
+ + + `, + standalone: true, + imports: [FormsModule], +}) +export class SignalInputComponent { + greetings = input('', { + alias: 'greeting', + }); + age = input.required({ transform: numberAttribute }); + name = model.required(); + submitValue = output(); + + greetingMessage = computed(() => `${this.greetings()} ${this.name()} of ${this.age()} years old`); + + submitName() { + this.submitValue.emit(this.name()); + } +} diff --git a/apps/example-app-jest/src/app/examples/23-host-directive.spec.ts b/apps/example-app-jest/src/app/examples/23-host-directive.spec.ts new file mode 100644 index 00000000..6c874613 --- /dev/null +++ b/apps/example-app-jest/src/app/examples/23-host-directive.spec.ts @@ -0,0 +1,25 @@ +import { provideZoneChangeDetection } from '@angular/core'; +import { aliasedInput, render, screen } from '@testing-library/angular'; +import { HostDirectiveComponent } from './23-host-directive'; + +test('can set input properties of host directives using aliasedInput', async () => { + await render(HostDirectiveComponent, { + inputs: { + ...aliasedInput('atlText', 'Hello world'), + }, + providers: [provideZoneChangeDetection()], + }); + + expect(screen.getByText(/hello world/i)).toBeInTheDocument(); +}); + +test('can set input properties of host directives using componentInputs', async () => { + await render(HostDirectiveComponent, { + componentInputs: { + atlText: 'Hello world', + }, + providers: [provideZoneChangeDetection()], + }); + + expect(screen.getByText(/hello world/i)).toBeInTheDocument(); +}); diff --git a/apps/example-app-jest/src/app/examples/23-host-directive.ts b/apps/example-app-jest/src/app/examples/23-host-directive.ts new file mode 100644 index 00000000..3d27f788 --- /dev/null +++ b/apps/example-app-jest/src/app/examples/23-host-directive.ts @@ -0,0 +1,20 @@ +import { Component, Directive, ElementRef, inject, input, OnInit } from '@angular/core'; + +@Directive({ + selector: '[atlText]', +}) +export class TextDirective implements OnInit { + private el = inject(ElementRef); + atlText = input(''); + + ngOnInit() { + this.el.nativeElement.textContent = this.atlText(); + } +} + +@Component({ + selector: 'atl-host-directive', + template: ``, + hostDirectives: [{ directive: TextDirective, inputs: ['atlText'] }], +}) +export class HostDirectiveComponent {} diff --git a/apps/example-app-jest/src/app/examples/24-bindings-api.component.spec.ts b/apps/example-app-jest/src/app/examples/24-bindings-api.component.spec.ts new file mode 100644 index 00000000..8759c81b --- /dev/null +++ b/apps/example-app-jest/src/app/examples/24-bindings-api.component.spec.ts @@ -0,0 +1,153 @@ +import { signal, inputBinding, outputBinding, twoWayBinding, provideZoneChangeDetection } from '@angular/core'; +import { render, screen } from '@testing-library/angular'; +import { BindingsApiExampleComponent } from './24-bindings-api.component'; + +test('displays computed greeting message with input values', async () => { + await render(BindingsApiExampleComponent, { + bindings: [ + inputBinding('greeting', () => 'Hello'), + inputBinding('age', () => 25), + twoWayBinding('name', signal('John')), + ], + providers: [provideZoneChangeDetection()], + }); + + expect(screen.getByTestId('input-value')).toHaveTextContent('Hello John of 25 years old'); + expect(screen.getByTestId('computed-value')).toHaveTextContent('Hello John of 25 years old'); + expect(screen.getByTestId('current-age')).toHaveTextContent('Current age: 25'); +}); + +test('emits submitValue output when submit button is clicked', async () => { + const submitHandler = jest.fn(); + const nameSignal = signal('Alice'); + + await render(BindingsApiExampleComponent, { + bindings: [ + inputBinding('greeting', () => 'Good morning'), + inputBinding('age', () => 28), + twoWayBinding('name', nameSignal), + outputBinding('submitValue', submitHandler), + ], + providers: [provideZoneChangeDetection()], + }); + + const submitButton = screen.getByTestId('submit-button'); + submitButton.click(); + expect(submitHandler).toHaveBeenCalledWith('Alice'); +}); + +test('emits ageChanged output when increment button is clicked', async () => { + const ageChangedHandler = jest.fn(); + + await render(BindingsApiExampleComponent, { + bindings: [ + inputBinding('greeting', () => 'Hi'), + inputBinding('age', () => 20), + twoWayBinding('name', signal('Charlie')), + outputBinding('ageChanged', ageChangedHandler), + ], + providers: [provideZoneChangeDetection()], + }); + + const incrementButton = screen.getByTestId('increment-button'); + incrementButton.click(); + + expect(ageChangedHandler).toHaveBeenCalledWith(21); +}); + +test('updates name through two-way binding when input changes', async () => { + const nameSignal = signal('Initial Name'); + + await render(BindingsApiExampleComponent, { + bindings: [ + inputBinding('greeting', () => 'Hello'), + inputBinding('age', () => 25), + twoWayBinding('name', nameSignal), + ], + providers: [provideZoneChangeDetection()], + }); + + const nameInput = screen.getByTestId('name-input') as HTMLInputElement; + + // Verify initial value + expect(nameInput.value).toBe('Initial Name'); + expect(screen.getByTestId('input-value')).toHaveTextContent('Hello Initial Name of 25 years old'); + + // Update the signal externally + nameSignal.set('Updated Name'); + + // Verify the input and display update + expect(await screen.findByDisplayValue('Updated Name')).toBeInTheDocument(); + expect(screen.getByTestId('input-value')).toHaveTextContent('Hello Updated Name of 25 years old'); + expect(screen.getByTestId('computed-value')).toHaveTextContent('Hello Updated Name of 25 years old'); +}); + +test('updates computed value when inputs change', async () => { + const greetingSignal = signal('Good day'); + const nameSignal = signal('David'); + const ageSignal = signal(35); + + const { fixture } = await render(BindingsApiExampleComponent, { + bindings: [ + inputBinding('greeting', greetingSignal), + inputBinding('age', ageSignal), + twoWayBinding('name', nameSignal), + ], + providers: [provideZoneChangeDetection()], + }); + + // Initial state + expect(screen.getByTestId('computed-value')).toHaveTextContent('Good day David of 35 years old'); + + // Update greeting + greetingSignal.set('Good evening'); + fixture.detectChanges(); + expect(screen.getByTestId('computed-value')).toHaveTextContent('Good evening David of 35 years old'); + + // Update age + ageSignal.set(36); + fixture.detectChanges(); + expect(screen.getByTestId('computed-value')).toHaveTextContent('Good evening David of 36 years old'); + + // Update name + nameSignal.set('Daniel'); + fixture.detectChanges(); + expect(screen.getByTestId('computed-value')).toHaveTextContent('Good evening Daniel of 36 years old'); +}); + +test('handles multiple output emissions correctly', async () => { + const submitHandler = jest.fn(); + const ageChangedHandler = jest.fn(); + const nameSignal = signal('Emma'); + + await render(BindingsApiExampleComponent, { + bindings: [ + inputBinding('greeting', () => 'Hey'), + inputBinding('age', () => 22), + twoWayBinding('name', nameSignal), + outputBinding('submitValue', submitHandler), + outputBinding('ageChanged', ageChangedHandler), + ], + providers: [provideZoneChangeDetection()], + }); + + // Click submit button multiple times + const submitButton = screen.getByTestId('submit-button'); + submitButton.click(); + submitButton.click(); + + expect(submitHandler).toHaveBeenCalledTimes(2); + expect(submitHandler).toHaveBeenNthCalledWith(1, 'Emma'); + expect(submitHandler).toHaveBeenNthCalledWith(2, 'Emma'); + + // Click increment button multiple times + const incrementButton = screen.getByTestId('increment-button'); + incrementButton.click(); + incrementButton.click(); + incrementButton.click(); + + expect(ageChangedHandler).toHaveBeenCalledTimes(3); + expect(ageChangedHandler).toHaveBeenNthCalledWith(1, 23); + expect(ageChangedHandler).toHaveBeenNthCalledWith(2, 23); // Still 23 because age input doesn't change + expect(ageChangedHandler).toHaveBeenNthCalledWith(3, 23); +}); diff --git a/apps/example-app-jest/src/app/examples/24-bindings-api.component.ts b/apps/example-app-jest/src/app/examples/24-bindings-api.component.ts new file mode 100644 index 00000000..eb61ebeb --- /dev/null +++ b/apps/example-app-jest/src/app/examples/24-bindings-api.component.ts @@ -0,0 +1,36 @@ +import { Component, computed, input, model, numberAttribute, output } from '@angular/core'; +import { FormsModule } from '@angular/forms'; + +@Component({ + selector: 'atl-bindings-api-example', + template: ` +
{{ greetings() }} {{ name() }} of {{ age() }} years old
+
{{ greetingMessage() }}
+ + + +
Current age: {{ age() }}
+ `, + standalone: true, + imports: [FormsModule], +}) +export class BindingsApiExampleComponent { + greetings = input('', { + alias: 'greeting', + }); + age = input.required({ transform: numberAttribute }); + name = model.required(); + submitValue = output(); + ageChanged = output(); + + greetingMessage = computed(() => `${this.greetings()} ${this.name()} of ${this.age()} years old`); + + submitName() { + this.submitValue.emit(this.name()); + } + + incrementAge() { + const newAge = this.age() + 1; + this.ageChanged.emit(newAge); + } +} diff --git a/apps/example-app-jest/src/app/examples/README.md b/apps/example-app-jest/src/app/examples/README.md new file mode 100644 index 00000000..3c4c5a64 --- /dev/null +++ b/apps/example-app-jest/src/app/examples/README.md @@ -0,0 +1,11 @@ +# 🦔 Angular Testing Library Examples + +Follow these three steps to run the example tests: + +- clone or download the repository +- move into the repository and install the needed dependencies with `npm install` +- use the command `npx nx test example-app` from within the root of this repository to run the tests + +The tests in this repository are written with [Jest](https://jestjs.io/), but you can use the test runner of your choice. + +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). diff --git a/apps/example-app-jest/src/test-setup.ts b/apps/example-app-jest/src/test-setup.ts new file mode 100644 index 00000000..257c8698 --- /dev/null +++ b/apps/example-app-jest/src/test-setup.ts @@ -0,0 +1,8 @@ +import '@testing-library/jest-dom'; + +const originalConsoleError = console.error; +console.error = function (...data) { + if (typeof data[0]?.toString === 'function' && data[0].toString().includes('Error: Could not parse CSS stylesheet')) + return; + originalConsoleError(...data); +}; diff --git a/apps/example-app-jest/tsconfig.app.json b/apps/example-app-jest/tsconfig.app.json new file mode 100644 index 00000000..b0e22e14 --- /dev/null +++ b/apps/example-app-jest/tsconfig.app.json @@ -0,0 +1,13 @@ +{ + "extends": "./tsconfig.json", + "compilerOptions": { + "outDir": "../../dist/out-tsc", + "types": [], + "allowJs": true, + "target": "ES2022", + "useDefineForClassFields": false + }, + "files": ["src/main.ts"], + "include": ["src/**/*.d.ts"], + "exclude": ["**/*.test.ts", "**/*.spec.ts", "jest.config.ts"] +} diff --git a/apps/example-app-jest/tsconfig.json b/apps/example-app-jest/tsconfig.json new file mode 100644 index 00000000..01919bcd --- /dev/null +++ b/apps/example-app-jest/tsconfig.json @@ -0,0 +1,25 @@ +{ + "extends": "../../tsconfig.json", + "files": [], + "include": [], + "compilerOptions": { + "target": "es2020", + "paths": { + "@testing-library/angular": ["projects/testing-library"], + "@testing-library/angular/jest-utils": ["projects/testing-library/jest-utils"] + } + }, + "angularCompilerOptions": { + "strictInjectionParameters": true, + "strictInputAccessModifiers": true, + "strictTemplates": true + }, + "references": [ + { + "path": "./tsconfig.app.json" + }, + { + "path": "./tsconfig.spec.json" + } + ] +} diff --git a/apps/example-app-jest/tsconfig.spec.json b/apps/example-app-jest/tsconfig.spec.json new file mode 100644 index 00000000..f30bc5d2 --- /dev/null +++ b/apps/example-app-jest/tsconfig.spec.json @@ -0,0 +1,12 @@ +{ + "extends": "./tsconfig.json", + "compilerOptions": { + "outDir": "../../dist/out-tsc", + "module": "Node16", + "moduleResolution": "node16", + "isolatedModules": true, + "types": ["jest", "node", "@testing-library/jest-dom"] + }, + "files": ["src/test-setup.ts"], + "include": ["**/*.spec.ts", "**/*.test.ts", "**/*.d.ts", "jest.config.ts"] +} diff --git a/apps/example-app-karma/karma.conf.js b/apps/example-app-karma/karma.conf.js index 304517cd..185b0883 100644 --- a/apps/example-app-karma/karma.conf.js +++ b/apps/example-app-karma/karma.conf.js @@ -5,11 +5,7 @@ module.exports = function (config) { config.set({ basePath: '', frameworks: ['jasmine', '@angular-devkit/build-angular'], - plugins: [ - require('karma-jasmine'), - require('karma-chrome-launcher'), - require('@angular-devkit/build-angular/plugins/karma'), - ], + plugins: [require('karma-jasmine'), require('karma-chrome-launcher')], client: { jasmine: { // you can add configuration options for Jasmine here diff --git a/apps/example-app-karma/project.json b/apps/example-app-karma/project.json deleted file mode 100644 index 27c4cbd4..00000000 --- a/apps/example-app-karma/project.json +++ /dev/null @@ -1,68 +0,0 @@ -{ - "name": "example-app-karma", - "$schema": "../../node_modules/nx/schemas/project-schema.json", - "projectType": "application", - "sourceRoot": "apps/example-app-karma/src", - "prefix": "app", - "tags": [], - "generators": {}, - "targets": { - "build": { - "executor": "@angular-devkit/build-angular:browser", - "outputs": ["{options.outputPath}"], - "options": { - "outputPath": "dist/apps/example-app-karma", - "index": "apps/example-app-karma/src/index.html", - "main": "apps/example-app-karma/src/main.ts", - "tsConfig": "apps/example-app-karma/tsconfig.app.json", - "assets": ["apps/example-app-karma/src/favicon.ico", "apps/example-app-karma/src/assets"], - "styles": [], - "scripts": [] - }, - "configurations": { - "production": { - "budgets": [ - { - "type": "anyComponentStyle", - "maximumWarning": "6kb" - } - ], - "outputHashing": "all" - }, - "development": { - "buildOptimizer": false, - "optimization": false, - "vendorChunk": true, - "extractLicenses": false, - "sourceMap": true, - "namedChunks": true - } - }, - "defaultConfiguration": "production" - }, - "serve": { - "executor": "@angular-devkit/build-angular:dev-server", - "configurations": { - "production": { - "buildTarget": "example-app-karma:build:production" - }, - "development": { - "buildTarget": "example-app-karma:build:development" - } - }, - "defaultConfiguration": "development", - "continuous": true - }, - "lint": { - "executor": "@nx/eslint:lint" - }, - "test": { - "executor": "@angular-devkit/build-angular:karma", - "options": { - "main": "apps/example-app-karma/src/test.ts", - "tsConfig": "apps/example-app-karma/tsconfig.spec.json", - "karmaConfig": "apps/example-app-karma/karma.conf.js" - } - } - } -} diff --git a/apps/example-app-karma/src/app/examples/login-form.spec.ts b/apps/example-app-karma/src/app/examples/login-form.spec.ts index d019e069..20d7e12a 100644 --- a/apps/example-app-karma/src/app/examples/login-form.spec.ts +++ b/apps/example-app-karma/src/app/examples/login-form.spec.ts @@ -2,7 +2,6 @@ import { Component, inject } from '@angular/core'; import { FormBuilder, FormControl, FormGroup, Validators, ReactiveFormsModule } from '@angular/forms'; import userEvent from '@testing-library/user-event'; import { render, screen } from '@testing-library/angular'; -import { NgIf } from '@angular/common'; it('should create a component with inputs and a button to submit', async () => { await render(LoginComponent); @@ -31,15 +30,19 @@ it('should display invalid message and submit button must be disabled', async () @Component({ selector: 'atl-login', standalone: true, - imports: [ReactiveFormsModule, NgIf], + imports: [ReactiveFormsModule], template: `

Login

-
Email is invalid
+ @if (email.invalid && (email.dirty || email.touched)) { +
Email is invalid
+ } -
Password is invalid
+ @if (password.invalid && (password.dirty || password.touched)) { +
Password is invalid
+ }
`, diff --git a/apps/example-app-karma/tsconfig.editor.json b/apps/example-app-karma/tsconfig.editor.json deleted file mode 100644 index 26575d80..00000000 --- a/apps/example-app-karma/tsconfig.editor.json +++ /dev/null @@ -1,7 +0,0 @@ -{ - "extends": "./tsconfig.json", - "include": ["**/*.ts"], - "compilerOptions": { - "types": ["jasmine", "node", "@testing-library/jasmine-dom"] - } -} diff --git a/apps/example-app-karma/tsconfig.json b/apps/example-app-karma/tsconfig.json index 9453a196..4e95c1b3 100644 --- a/apps/example-app-karma/tsconfig.json +++ b/apps/example-app-karma/tsconfig.json @@ -1,9 +1,12 @@ { - "extends": "../../tsconfig.base.json", + "extends": "../../tsconfig.json", "files": [], "include": [], "compilerOptions": { - "target": "es2020" + "target": "es2020", + "paths": { + "@testing-library/angular": ["projects/testing-library"] + } }, "angularCompilerOptions": { "strictInjectionParameters": true, diff --git a/apps/example-app-karma/tsconfig.spec.json b/apps/example-app-karma/tsconfig.spec.json index 0f4baec3..56f3f539 100644 --- a/apps/example-app-karma/tsconfig.spec.json +++ b/apps/example-app-karma/tsconfig.spec.json @@ -2,7 +2,7 @@ "extends": "./tsconfig.json", "compilerOptions": { "outDir": "./out-tsc/spec", - "types": ["jasmine", "node", "@testing-library/jasmine-dom"], + "types": ["node", "@testing-library/jasmine-dom"], "target": "ES2022", "useDefineForClassFields": false }, diff --git a/apps/example-app/jest.config.ts b/apps/example-app/jest.config.ts deleted file mode 100644 index e0ea9c2d..00000000 --- a/apps/example-app/jest.config.ts +++ /dev/null @@ -1,8 +0,0 @@ -export default { - displayName: { - name: 'Example App', - color: 'blue', - }, - preset: '../../jest.preset.js', - setupFilesAfterEnv: ['/src/test-setup.ts'], -}; diff --git a/apps/example-app/project.json b/apps/example-app/project.json deleted file mode 100644 index 1cf90ac4..00000000 --- a/apps/example-app/project.json +++ /dev/null @@ -1,75 +0,0 @@ -{ - "name": "example-app", - "$schema": "../../node_modules/nx/schemas/project-schema.json", - "projectType": "application", - "sourceRoot": "apps/example-app/src", - "prefix": "app", - "tags": [], - "generators": {}, - "targets": { - "build": { - "executor": "@angular-devkit/build-angular:browser", - "outputs": ["{options.outputPath}"], - "options": { - "outputPath": "dist/apps/example-app", - "index": "apps/example-app/src/index.html", - "main": "apps/example-app/src/main.ts", - "polyfills": "apps/example-app/src/polyfills.ts", - "tsConfig": "apps/example-app/tsconfig.app.json", - "assets": ["apps/example-app/src/favicon.ico", "apps/example-app/src/assets"], - "styles": ["apps/example-app/src/styles.css"], - "scripts": [] - }, - "configurations": { - "production": { - "budgets": [ - { - "type": "anyComponentStyle", - "maximumWarning": "6kb" - } - ], - "outputHashing": "all" - }, - "development": { - "buildOptimizer": false, - "optimization": false, - "vendorChunk": true, - "extractLicenses": false, - "sourceMap": true, - "namedChunks": true - } - }, - "defaultConfiguration": "production" - }, - "serve": { - "executor": "@angular-devkit/build-angular:dev-server", - "configurations": { - "production": { - "buildTarget": "example-app:build:production" - }, - "development": { - "buildTarget": "example-app:build:development" - } - }, - "defaultConfiguration": "development", - "continuous": true - }, - "extract-i18n": { - "executor": "@angular-devkit/build-angular:extract-i18n", - "options": { - "buildTarget": "example-app:build" - } - }, - "lint": { - "executor": "@nx/eslint:lint" - }, - "test": { - "executor": "@nx/jest:jest", - "options": { - "jestConfig": "apps/example-app/jest.config.ts", - "passWithNoTests": false - }, - "outputs": ["{workspaceRoot}/coverage/"] - } - } -} diff --git a/apps/example-app/src/app/examples/00-single-component.spec.ts b/apps/example-app/src/app/examples/00-single-component.spec.ts index 44ad2500..ca30109a 100644 --- a/apps/example-app/src/app/examples/00-single-component.spec.ts +++ b/apps/example-app/src/app/examples/00-single-component.spec.ts @@ -1,3 +1,4 @@ +import { test, expect } from 'vitest'; import { render, screen } from '@testing-library/angular'; import userEvent from '@testing-library/user-event'; diff --git a/apps/example-app/src/app/examples/01-nested-component.spec.ts b/apps/example-app/src/app/examples/01-nested-component.spec.ts index dfa3fe3f..76b0cba3 100644 --- a/apps/example-app/src/app/examples/01-nested-component.spec.ts +++ b/apps/example-app/src/app/examples/01-nested-component.spec.ts @@ -1,3 +1,4 @@ +import { test, expect } from 'vitest'; import { render, screen } from '@testing-library/angular'; import userEvent from '@testing-library/user-event'; diff --git a/apps/example-app/src/app/examples/02-input-output.spec.ts b/apps/example-app/src/app/examples/02-input-output.spec.ts index 5a55bd57..b554f1f0 100644 --- a/apps/example-app/src/app/examples/02-input-output.spec.ts +++ b/apps/example-app/src/app/examples/02-input-output.spec.ts @@ -1,3 +1,4 @@ +import { test, expect, vi } from 'vitest'; import { render, screen } from '@testing-library/angular'; import userEvent from '@testing-library/user-event'; @@ -5,7 +6,7 @@ import { InputOutputComponent } from './02-input-output'; test('is possible to set input and listen for output', async () => { const user = userEvent.setup(); - const sendValue = jest.fn(); + const sendValue = vi.fn(); await render(InputOutputComponent, { inputs: { @@ -32,13 +33,13 @@ test('is possible to set input and listen for output', async () => { expect(sendValue).toHaveBeenCalledWith(50); }); -test.skip('is possible to set input and listen for output with the template syntax', async () => { +test('is possible to set input and listen for output with the template syntax', async () => { const user = userEvent.setup(); - const sendSpy = jest.fn(); + const sendSpy = vi.fn(); await render('', { imports: [InputOutputComponent], - on: { + componentProperties: { sendValue: sendSpy, }, }); @@ -61,7 +62,7 @@ test.skip('is possible to set input and listen for output with the template synt test('is possible to set input and listen for output (deprecated)', async () => { const user = userEvent.setup(); - const sendValue = jest.fn(); + const sendValue = vi.fn(); await render(InputOutputComponent, { inputs: { @@ -92,7 +93,7 @@ test('is possible to set input and listen for output (deprecated)', async () => test('is possible to set input and listen for output with the template syntax (deprecated)', async () => { const user = userEvent.setup(); - const sendSpy = jest.fn(); + const sendSpy = vi.fn(); await render('', { imports: [InputOutputComponent], diff --git a/apps/example-app/src/app/examples/03-forms.spec.ts b/apps/example-app/src/app/examples/03-forms.spec.ts index 0e475834..780c6418 100644 --- a/apps/example-app/src/app/examples/03-forms.spec.ts +++ b/apps/example-app/src/app/examples/03-forms.spec.ts @@ -1,3 +1,4 @@ +import { test, expect } from 'vitest'; import { render, screen, fireEvent } from '@testing-library/angular'; import userEvent from '@testing-library/user-event'; diff --git a/apps/example-app/src/app/examples/04-forms-with-material.spec.ts b/apps/example-app/src/app/examples/04-forms-with-material.spec.ts index 638d76ff..bd782155 100644 --- a/apps/example-app/src/app/examples/04-forms-with-material.spec.ts +++ b/apps/example-app/src/app/examples/04-forms-with-material.spec.ts @@ -1,3 +1,4 @@ +import { test, expect } from 'vitest'; import { render, screen } from '@testing-library/angular'; import userEvent from '@testing-library/user-event'; diff --git a/apps/example-app/src/app/examples/05-component-provider.spec.ts b/apps/example-app/src/app/examples/05-component-provider.spec.ts index d23e849d..41153e05 100644 --- a/apps/example-app/src/app/examples/05-component-provider.spec.ts +++ b/apps/example-app/src/app/examples/05-component-provider.spec.ts @@ -1,6 +1,7 @@ +import { test, expect } from 'vitest'; import { TestBed } from '@angular/core/testing'; import { render, screen } from '@testing-library/angular'; -import { provideMock, Mock, createMock } from '@testing-library/angular/jest-utils'; +import { provideMock, Mock, createMock } from '@testing-library/angular/vitest-utils'; import userEvent from '@testing-library/user-event'; import { ComponentWithProviderComponent, CounterService } from './05-component-provider'; @@ -31,7 +32,7 @@ test('renders the current value and can increment and decrement', async () => { expect(valueControl).toHaveTextContent('1'); }); -test('renders the current value and can increment and decrement with a mocked jest-utils service', async () => { +test('renders the current value and can increment and decrement with a mocked vitest-utils service', async () => { const user = userEvent.setup(); const counter = createMock(CounterService); @@ -63,7 +64,7 @@ test('renders the current value and can increment and decrement with a mocked je expect(valueControl).toHaveTextContent('60'); }); -test('renders the current value and can increment and decrement with provideMocked from jest-utils', async () => { +test('renders the current value and can increment and decrement with provideMocked from vitest-utils', async () => { const user = userEvent.setup(); await render(ComponentWithProviderComponent, { diff --git a/apps/example-app/src/app/examples/06-with-ngrx-store.spec.ts b/apps/example-app/src/app/examples/06-with-ngrx-store.spec.ts index 0f080658..30db2eae 100644 --- a/apps/example-app/src/app/examples/06-with-ngrx-store.spec.ts +++ b/apps/example-app/src/app/examples/06-with-ngrx-store.spec.ts @@ -1,3 +1,4 @@ +import { test, expect } from 'vitest'; import { render, screen } from '@testing-library/angular'; import { StoreModule } from '@ngrx/store'; import userEvent from '@testing-library/user-event'; diff --git a/apps/example-app/src/app/examples/07-with-ngrx-mock-store.spec.ts b/apps/example-app/src/app/examples/07-with-ngrx-mock-store.spec.ts index eb51dbbc..c34662ce 100644 --- a/apps/example-app/src/app/examples/07-with-ngrx-mock-store.spec.ts +++ b/apps/example-app/src/app/examples/07-with-ngrx-mock-store.spec.ts @@ -1,5 +1,6 @@ import { TestBed } from '@angular/core/testing'; import { provideMockStore, MockStore } from '@ngrx/store/testing'; +import { test, expect, vi } from 'vitest'; import { render, screen } from '@testing-library/angular'; import userEvent from '@testing-library/user-event'; @@ -22,7 +23,7 @@ test('works with provideMockStore', async () => { }); const store = TestBed.inject(MockStore); - store.dispatch = jest.fn(); + store.dispatch = vi.fn(); await user.click(screen.getByText(/seven/i)); diff --git a/apps/example-app/src/app/examples/08-directive.spec.ts b/apps/example-app/src/app/examples/08-directive.spec.ts index 28a41e98..997ad225 100644 --- a/apps/example-app/src/app/examples/08-directive.spec.ts +++ b/apps/example-app/src/app/examples/08-directive.spec.ts @@ -1,3 +1,4 @@ +import { test, expect } from 'vitest'; import { Component } from '@angular/core'; import { render, screen } from '@testing-library/angular'; import userEvent from '@testing-library/user-event'; diff --git a/apps/example-app/src/app/examples/09-router.spec.ts b/apps/example-app/src/app/examples/09-router.spec.ts index f1da85d2..b4b2d85b 100644 --- a/apps/example-app/src/app/examples/09-router.spec.ts +++ b/apps/example-app/src/app/examples/09-router.spec.ts @@ -1,3 +1,4 @@ +import { test, expect } from 'vitest'; import { render, screen } from '@testing-library/angular'; import userEvent from '@testing-library/user-event'; diff --git a/apps/example-app/src/app/examples/10-inject-token-dependency.spec.ts b/apps/example-app/src/app/examples/10-inject-token-dependency.spec.ts index 4993133a..362a20ce 100644 --- a/apps/example-app/src/app/examples/10-inject-token-dependency.spec.ts +++ b/apps/example-app/src/app/examples/10-inject-token-dependency.spec.ts @@ -1,3 +1,4 @@ +import { test, expect } from 'vitest'; import { render, screen } from '@testing-library/angular'; import { DataInjectedComponent, DATA } from './10-inject-token-dependency'; diff --git a/apps/example-app/src/app/examples/11-ng-content.spec.ts b/apps/example-app/src/app/examples/11-ng-content.spec.ts index 468a3f29..b19b7226 100644 --- a/apps/example-app/src/app/examples/11-ng-content.spec.ts +++ b/apps/example-app/src/app/examples/11-ng-content.spec.ts @@ -1,3 +1,4 @@ +import { test, expect } from 'vitest'; import { render, screen } from '@testing-library/angular'; import { CellComponent } from './11-ng-content'; diff --git a/apps/example-app/src/app/examples/12-service-component.spec.ts b/apps/example-app/src/app/examples/12-service-component.spec.ts index a80de740..9e4ec89f 100644 --- a/apps/example-app/src/app/examples/12-service-component.spec.ts +++ b/apps/example-app/src/app/examples/12-service-component.spec.ts @@ -1,6 +1,7 @@ import { of } from 'rxjs'; +import { test, expect, vi } from 'vitest'; import { render, screen } from '@testing-library/angular'; -import { createMock } from '@testing-library/angular/jest-utils'; +import { createMock } from '@testing-library/angular/vitest-utils'; import { Customer, CustomersComponent, CustomersService } from './12-service-component'; @@ -47,7 +48,7 @@ test('renders the provided customers with createMock', async () => { ]; const customersService = createMock(CustomersService); - customersService.load = jest.fn(() => of(customers)); + customersService.load = vi.fn(() => of(customers)) as any; await render(CustomersComponent, { componentProviders: [ diff --git a/apps/example-app/src/app/examples/13-scrolling.component.spec.ts b/apps/example-app/src/app/examples/13-scrolling.component.spec.ts index cb1ad11b..4fb02b86 100644 --- a/apps/example-app/src/app/examples/13-scrolling.component.spec.ts +++ b/apps/example-app/src/app/examples/13-scrolling.component.spec.ts @@ -1,3 +1,4 @@ +import { test, expect } from 'vitest'; import { render, screen, waitForElementToBeRemoved } from '@testing-library/angular'; import { CdkVirtualScrollOverviewExampleComponent } from './13-scrolling.component'; diff --git a/apps/example-app/src/app/examples/14-async-component.spec.ts b/apps/example-app/src/app/examples/14-async-component.spec.ts index 5cfd3e0e..1d36b6e2 100644 --- a/apps/example-app/src/app/examples/14-async-component.spec.ts +++ b/apps/example-app/src/app/examples/14-async-component.spec.ts @@ -1,31 +1,43 @@ -import { fakeAsync, tick } from '@angular/core/testing'; -import { render, screen, fireEvent } from '@testing-library/angular'; +import { test } from 'vitest'; +// import 'zone.js'; +// import 'zone.js/testing'; -import { AsyncComponent } from './14-async-component'; +// From v21: +// Error: zone-testing.js is needed for the fakeAsync() test helper but could not be found. +// Please make sure that your environment includes zone.js/testing +// test.fails('can use fakeAsync utilities', fakeAsync(async () => { +// await render(AsyncComponent, { +// configureTestBed: (testBed) => { +// testBed.configureTestingModule({ +// providers: [provideZoneChangeDetection()], +// }); +// }, +// }); -test.skip('can use fakeAsync utilities', fakeAsync(async () => { - await render(AsyncComponent); +// const load = await screen.findByRole('button', { name: /load/i }); +// fireEvent.click(load); - const load = await screen.findByRole('button', { name: /load/i }); - fireEvent.click(load); +// tick(10_000); - tick(10_000); +// const hello = await screen.findByText('Hello world'); +// expect(hello).toBeInTheDocument(); +// })); - const hello = await screen.findByText('Hello world'); - expect(hello).toBeInTheDocument(); -})); +// test('can use fakeTimer utilities', async () => { +// vi.useFakeTimers(); +// await render(AsyncComponent); -test('can use fakeTimer utilities', async () => { - jest.useFakeTimers(); - await render(AsyncComponent); +// const load = await screen.findByRole('button', { name: /load/i }); - const load = await screen.findByRole('button', { name: /load/i }); +// // userEvent not working with fake timers +// fireEvent.click(load); - // userEvent not working with fake timers - fireEvent.click(load); +// vi.advanceTimersByTime(10_000); - jest.advanceTimersByTime(10_000); +// const hello = await screen.findByText('Hello world'); +// expect(hello).toBeInTheDocument(); +// }); - const hello = await screen.findByText('Hello world'); - expect(hello).toBeInTheDocument(); +test('placeholder test to avoid empty test file error', () => { + expect(true).toBe(true); }); diff --git a/apps/example-app/src/app/examples/15-dialog.component.spec.ts b/apps/example-app/src/app/examples/15-dialog.component.spec.ts index 51f8fb04..baf83ab5 100644 --- a/apps/example-app/src/app/examples/15-dialog.component.spec.ts +++ b/apps/example-app/src/app/examples/15-dialog.component.spec.ts @@ -1,5 +1,6 @@ import { MatDialogRef } from '@angular/material/dialog'; import { provideNoopAnimations } from '@angular/platform-browser/animations'; +import { test, expect, vi } from 'vitest'; import { render, screen } from '@testing-library/angular'; import userEvent from '@testing-library/user-event'; @@ -8,7 +9,7 @@ import { DialogComponent, DialogContentComponent } from './15-dialog.component'; test('dialog closes', async () => { const user = userEvent.setup(); - const closeFn = jest.fn(); + const closeFn = vi.fn(); await render(DialogContentComponent, { providers: [ provideNoopAnimations(), diff --git a/apps/example-app/src/app/examples/16-input-getter-setter.spec.ts b/apps/example-app/src/app/examples/16-input-getter-setter.spec.ts index 4382d851..400f77b0 100644 --- a/apps/example-app/src/app/examples/16-input-getter-setter.spec.ts +++ b/apps/example-app/src/app/examples/16-input-getter-setter.spec.ts @@ -1,3 +1,4 @@ +import { test, expect } from 'vitest'; import { render, screen } from '@testing-library/angular'; import { InputGetterSetter } from './16-input-getter-setter'; diff --git a/apps/example-app/src/app/examples/17-component-with-attribute-selector.spec.ts b/apps/example-app/src/app/examples/17-component-with-attribute-selector.spec.ts index f33dee3e..a4d28681 100644 --- a/apps/example-app/src/app/examples/17-component-with-attribute-selector.spec.ts +++ b/apps/example-app/src/app/examples/17-component-with-attribute-selector.spec.ts @@ -1,3 +1,4 @@ +import { test, expect } from 'vitest'; import { render, screen } from '@testing-library/angular'; import { ComponentWithAttributeSelectorComponent } from './17-component-with-attribute-selector'; diff --git a/apps/example-app/src/app/examples/18-html-as-input.spec.ts b/apps/example-app/src/app/examples/18-html-as-input.spec.ts index 068a8c09..499fb343 100644 --- a/apps/example-app/src/app/examples/18-html-as-input.spec.ts +++ b/apps/example-app/src/app/examples/18-html-as-input.spec.ts @@ -1,3 +1,4 @@ +import { test, expect } from 'vitest'; import { render, screen } from '@testing-library/angular'; import { Pipe, PipeTransform } from '@angular/core'; diff --git a/apps/example-app/src/app/examples/19-standalone-component.spec.ts b/apps/example-app/src/app/examples/19-standalone-component.spec.ts index d1d1e0ba..fd98fde6 100644 --- a/apps/example-app/src/app/examples/19-standalone-component.spec.ts +++ b/apps/example-app/src/app/examples/19-standalone-component.spec.ts @@ -1,3 +1,4 @@ +import { test, expect } from 'vitest'; import { render, screen } from '@testing-library/angular'; import { StandaloneComponent, StandaloneWithChildComponent } from './19-standalone-component'; diff --git a/apps/example-app/src/app/examples/20-test-harness.spec.ts b/apps/example-app/src/app/examples/20-test-harness.spec.ts index 4a88a580..ff45cdb0 100644 --- a/apps/example-app/src/app/examples/20-test-harness.spec.ts +++ b/apps/example-app/src/app/examples/20-test-harness.spec.ts @@ -1,12 +1,13 @@ import { TestbedHarnessEnvironment } from '@angular/cdk/testing/testbed'; import { MatButtonHarness } from '@angular/material/button/testing'; import { MatSnackBarHarness } from '@angular/material/snack-bar/testing'; +import { test, expect } from 'vitest'; import { render, screen } from '@testing-library/angular'; import userEvent from '@testing-library/user-event'; import { HarnessComponent } from './20-test-harness'; -test.skip('can be used with TestHarness', async () => { +test('can be used with TestHarness', async () => { const view = await render(``, { imports: [HarnessComponent], }); @@ -20,7 +21,7 @@ test.skip('can be used with TestHarness', async () => { expect(await snackbarHarness.getMessage()).toMatch(/Pizza Party!!!/i); }); -test.skip('can be used in combination with TestHarness', async () => { +test('can be used in combination with TestHarness', async () => { const user = userEvent.setup(); const view = await render(HarnessComponent); diff --git a/apps/example-app/src/app/examples/21-deferable-view.spec.ts b/apps/example-app/src/app/examples/21-deferable-view.spec.ts index 84953876..d08e7535 100644 --- a/apps/example-app/src/app/examples/21-deferable-view.spec.ts +++ b/apps/example-app/src/app/examples/21-deferable-view.spec.ts @@ -1,3 +1,4 @@ +import { test, expect } from 'vitest'; import { render, screen } from '@testing-library/angular'; import { DeferBlockState } from '@angular/core/testing'; import { DeferableViewComponent } from './21-deferable-view.component'; diff --git a/apps/example-app/src/app/examples/22-signal-inputs.component.spec.ts b/apps/example-app/src/app/examples/22-signal-inputs.component.spec.ts index 355e8ae4..ffcee5d0 100644 --- a/apps/example-app/src/app/examples/22-signal-inputs.component.spec.ts +++ b/apps/example-app/src/app/examples/22-signal-inputs.component.spec.ts @@ -1,3 +1,4 @@ +import { test, expect, vi } from 'vitest'; import { aliasedInput, render, screen, within } from '@testing-library/angular'; import { SignalInputComponent } from './22-signal-inputs.component'; import userEvent from '@testing-library/user-event'; @@ -52,7 +53,7 @@ test('can update signal inputs', async () => { }); test('output emits a value', async () => { - const submitFn = jest.fn(); + const submitFn = vi.fn(); await render(SignalInputComponent, { inputs: { ...aliasedInput('greeting', 'Hello'), diff --git a/apps/example-app/src/app/examples/23-host-directive.spec.ts b/apps/example-app/src/app/examples/23-host-directive.spec.ts index 32892992..fc70d989 100644 --- a/apps/example-app/src/app/examples/23-host-directive.spec.ts +++ b/apps/example-app/src/app/examples/23-host-directive.spec.ts @@ -1,3 +1,4 @@ +import { test, expect } from 'vitest'; import { aliasedInput, render, screen } from '@testing-library/angular'; import { HostDirectiveComponent } from './23-host-directive'; diff --git a/apps/example-app/src/app/examples/24-bindings-api.component.spec.ts b/apps/example-app/src/app/examples/24-bindings-api.component.spec.ts index 6c0a0e32..6e0e62c3 100644 --- a/apps/example-app/src/app/examples/24-bindings-api.component.spec.ts +++ b/apps/example-app/src/app/examples/24-bindings-api.component.spec.ts @@ -1,4 +1,5 @@ import { signal, inputBinding, outputBinding, twoWayBinding } from '@angular/core'; +import { test, expect, vi } from 'vitest'; import { render, screen } from '@testing-library/angular'; import { BindingsApiExampleComponent } from './24-bindings-api.component'; @@ -17,7 +18,7 @@ test('displays computed greeting message with input values', async () => { }); test('emits submitValue output when submit button is clicked', async () => { - const submitHandler = jest.fn(); + const submitHandler = vi.fn(); const nameSignal = signal('Alice'); await render(BindingsApiExampleComponent, { @@ -35,7 +36,7 @@ test('emits submitValue output when submit button is clicked', async () => { }); test('emits ageChanged output when increment button is clicked', async () => { - const ageChangedHandler = jest.fn(); + const ageChangedHandler = vi.fn(); await render(BindingsApiExampleComponent, { bindings: [ @@ -111,8 +112,8 @@ test('updates computed value when inputs change', async () => { }); test('handles multiple output emissions correctly', async () => { - const submitHandler = jest.fn(); - const ageChangedHandler = jest.fn(); + const submitHandler = vi.fn(); + const ageChangedHandler = vi.fn(); const nameSignal = signal('Emma'); await render(BindingsApiExampleComponent, { diff --git a/apps/example-app/src/app/examples/README.md b/apps/example-app/src/app/examples/README.md index 3c4c5a64..ce43f10b 100644 --- a/apps/example-app/src/app/examples/README.md +++ b/apps/example-app/src/app/examples/README.md @@ -4,8 +4,8 @@ Follow these three steps to run the example tests: - clone or download the repository - move into the repository and install the needed dependencies with `npm install` -- use the command `npx nx test example-app` from within the root of this repository to run the tests +- use the command `npm run test:example-app` from within the root of this repository to run the tests -The tests in this repository are written with [Jest](https://jestjs.io/), but you can use the test runner of your choice. +The tests in this repository are written with [Vitest](https://vitest.dev/), but you can use the test runner of your choice. 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). diff --git a/apps/example-app/src/test-setup.ts b/apps/example-app/src/test-setup.ts deleted file mode 100644 index 96bfd347..00000000 --- a/apps/example-app/src/test-setup.ts +++ /dev/null @@ -1,4 +0,0 @@ -import { setupZoneTestEnv } from 'jest-preset-angular/setup-env/zone'; -import '@testing-library/jest-dom'; - -setupZoneTestEnv(); diff --git a/apps/example-app/test-setup.ts b/apps/example-app/test-setup.ts new file mode 100644 index 00000000..7b0828bf --- /dev/null +++ b/apps/example-app/test-setup.ts @@ -0,0 +1 @@ +import '@testing-library/jest-dom'; diff --git a/apps/example-app/tsconfig.app.json b/apps/example-app/tsconfig.app.json index b0e22e14..46150c25 100644 --- a/apps/example-app/tsconfig.app.json +++ b/apps/example-app/tsconfig.app.json @@ -9,5 +9,5 @@ }, "files": ["src/main.ts"], "include": ["src/**/*.d.ts"], - "exclude": ["**/*.test.ts", "**/*.spec.ts", "jest.config.ts"] + "exclude": ["**/*.test.ts", "**/*.spec.ts"] } diff --git a/apps/example-app/tsconfig.editor.json b/apps/example-app/tsconfig.editor.json deleted file mode 100644 index 20c4afdb..00000000 --- a/apps/example-app/tsconfig.editor.json +++ /dev/null @@ -1,7 +0,0 @@ -{ - "extends": "./tsconfig.json", - "include": ["**/*.ts"], - "compilerOptions": { - "types": ["jest", "node"] - } -} diff --git a/apps/example-app/tsconfig.json b/apps/example-app/tsconfig.json index c0e57dc9..15bc9b95 100644 --- a/apps/example-app/tsconfig.json +++ b/apps/example-app/tsconfig.json @@ -1,9 +1,13 @@ { - "extends": "../../tsconfig.base.json", + "extends": "../../tsconfig.json", "files": [], "include": [], "compilerOptions": { - "target": "es2020" + "target": "es2020", + "paths": { + "@testing-library/angular": ["projects/testing-library"], + "@testing-library/angular/vitest-utils": ["projects/testing-library/vitest-utils"] + } }, "angularCompilerOptions": { "strictInjectionParameters": true, @@ -16,9 +20,6 @@ }, { "path": "./tsconfig.spec.json" - }, - { - "path": "./tsconfig.editor.json" } ] } diff --git a/apps/example-app/tsconfig.spec.json b/apps/example-app/tsconfig.spec.json index 83f36dfd..a49526f6 100644 --- a/apps/example-app/tsconfig.spec.json +++ b/apps/example-app/tsconfig.spec.json @@ -2,9 +2,9 @@ "extends": "./tsconfig.json", "compilerOptions": { "outDir": "../../dist/out-tsc", - "module": "commonjs", - "types": ["jest", "node", "@testing-library/jest-dom"] + "target": "ES2022", + "useDefineForClassFields": false, + "types": ["node"] }, - "files": ["src/test-setup.ts"], - "include": ["**/*.spec.ts", "**/*.test.ts", "**/*.d.ts", "jest.config.ts"] + "include": ["**/*.ts"] } diff --git a/eslint.config.mjs b/eslint.config.mjs index 18ef575e..421c2e45 100644 --- a/eslint.config.mjs +++ b/eslint.config.mjs @@ -53,6 +53,8 @@ export default tseslint.config( { files: ['**/*.html'], extends: [...angular.configs.templateRecommended, ...angular.configs.templateAccessibility], - rules: {}, + rules: { + "@angular-eslint/template/prefer-control-flow": "off", + }, }, ); diff --git a/jest.config.ts b/jest.config.ts deleted file mode 100644 index f5c10f47..00000000 --- a/jest.config.ts +++ /dev/null @@ -1,5 +0,0 @@ -const { getJestProjectsAsync } = require('@nx/jest'); - -export default async () => ({ - projects: await getJestProjectsAsync(), -}); diff --git a/jest.preset.js b/jest.preset.js deleted file mode 100644 index e0cb70c9..00000000 --- a/jest.preset.js +++ /dev/null @@ -1,34 +0,0 @@ -const nxPreset = require('@nx/jest/preset').default; - -module.exports = { - ...nxPreset, - testMatch: ['**/+(*.)+(spec|test).+(ts|js)?(x)'], - transform: { - '^.+\\.(ts|mjs|js|html)$': [ - 'jest-preset-angular', - { - tsconfig: '/tsconfig.spec.json', - stringifyContentPathRegex: '\\.(html|svg)$', - }, - ], - }, - transformIgnorePatterns: ['node_modules/(?!.*\\.mjs$)'], - resolver: '@nx/jest/plugins/resolver', - moduleFileExtensions: ['ts', 'js', 'html'], - globals: {}, - snapshotSerializers: [ - 'jest-preset-angular/build/serializers/no-ng-attributes', - 'jest-preset-angular/build/serializers/ng-snapshot', - 'jest-preset-angular/build/serializers/html-comment', - ], - /* TODO: Update to latest Jest snapshotFormat - * By default Nx has kept the older style of Jest Snapshot formats - * to prevent breaking of any existing tests with snapshots. - * It's recommend you update to the latest format. - * You can do this by removing snapshotFormat property - * and running tests with --update-snapshot flag. - * Example: "nx affected --targets=test --update-snapshot" - * More info: https://jestjs.io/docs/upgrading-to-jest29#snapshot-format - */ - snapshotFormat: { escapeString: true, printBasicPrototype: true }, -}; diff --git a/nx.json b/nx.json deleted file mode 100644 index a308e678..00000000 --- a/nx.json +++ /dev/null @@ -1,107 +0,0 @@ -{ - "workspaceLayout": { - "appsDir": "apps", - "libsDir": "projects" - }, - "cli": { - "analytics": false, - "cache": { - "enabled": true, - "path": "./.cache/angular", - "environment": "all" - } - }, - "tasksRunnerOptions": { - "default": { - "options": { - "canTrackAnalytics": false, - "showUsageWarnings": true - } - } - }, - "generators": { - "@nrlw/workspace:library": { - "linter": "eslint", - "unitTestRunner": "jest", - "strict": true, - "standaloneConfig": true, - "buildable": true - }, - "@nx/angular:application": { - "style": "scss", - "linter": "eslint", - "unitTestRunner": "jest", - "e2eTestRunner": "cypress", - "strict": true, - "standaloneConfig": true, - "tags": ["type:app"] - }, - "@nx/angular:library": { - "linter": "eslint", - "unitTestRunner": "jest", - "strict": true, - "standaloneConfig": true, - "publishable": true - }, - "@nx/angular:component": { - "style": "scss", - "displayBlock": true, - "changeDetection": "OnPush" - }, - "@schematics/angular": { - "component": { - "style": "scss", - "displayBlock": true, - "changeDetection": "OnPush" - } - } - }, - "defaultProject": "example-app", - "$schema": "./node_modules/nx/schemas/nx-schema.json", - "targetDefaults": { - "build": { - "dependsOn": ["^build"], - "inputs": ["production", "^production"], - "cache": true - }, - "test": { - "inputs": ["default", "^production"], - "cache": true - }, - "@nx/jest:jest": { - "inputs": ["default", "^production"], - "cache": true, - "options": { - "passWithNoTests": true - }, - "configurations": { - "ci": { - "ci": true, - "codeCoverage": true - } - } - }, - "@nx/eslint:lint": { - "inputs": ["default", "{workspaceRoot}/eslint.config.cjs"], - "cache": true - } - }, - "namedInputs": { - "default": ["{projectRoot}/**/*", "sharedGlobals"], - "sharedGlobals": [], - "production": [ - "default", - "!{projectRoot}/**/*.spec.[jt]s", - "!{projectRoot}/tsconfig.spec.json", - "!{projectRoot}/karma.conf.js", - "!{projectRoot}/**/?(*.)+(spec|test).[jt]s?(x)?(.snap)", - "!{projectRoot}/jest.config.[jt]s", - "!{projectRoot}/eslint.config.cjs", - "!{projectRoot}/src/test-setup.[jt]s" - ] - }, - "nxCloudAccessToken": "M2Q4YjlkNjMtMzY1NC00ZjkwLTk1ZjgtZjg5Y2VkMzFjM2FifHJlYWQtd3JpdGU=", - "parallel": 3, - "useInferencePlugins": false, - "defaultBase": "main" -} diff --git a/package.json b/package.json index 14b0bdaf..af153f77 100644 --- a/package.json +++ b/package.json @@ -2,68 +2,55 @@ "name": "@testing-library/angular-app", "version": "0.0.0-semantically-released", "scripts": { - "ng": "nx", - "nx": "nx", - "start": "nx serve", + "ng": "ng", "prebuild": "rimraf dist", - "build": "nx run-many --target=build --projects=testing-library", + "build": "ng build testing-library && npm run build:schematics && cpy ./README.md ./dist/@testing-library/angular", "build:schematics": "tsc -p ./projects/testing-library/tsconfig.schematics.json", - "test": "nx run-many --target=test --all --parallel=1", - "lint": "nx run-many --all --target=lint", - "e2e": "nx e2e", - "affected:apps": "nx affected:apps", - "affected:libs": "nx affected:libs", - "affected:build": "nx affected:build", - "affected:e2e": "nx affected:e2e", - "affected:test": "nx affected:test", - "affected:lint": "nx affected:lint", - "affected:dep-graph": "nx affected:dep-graph", - "affected": "nx affected", - "format": "nx format:write", - "format:write": "nx format:write", - "format:check": "nx format:check", + "test": "ng test", + "test:testing-library": "ng test testing-library", + "test:example-app": "ng test example-app", + "test:jest-app": "ng test example-app-jest", + "test:karma-app": "ng test example-app-karma", + "lint": "ng lint", + "lint:all": "ng lint testing-library && ng lint example-app && ng lint example-app-karma", + "format": "prettier --write .", + "format:check": "prettier --check .", "pre-commit": "lint-staged", "semantic-release": "semantic-release", "prepare": "git config core.hookspath .githooks" }, "dependencies": { - "@angular/animations": "20.3.10", - "@angular/cdk": "20.2.12", - "@angular/common": "20.3.10", - "@angular/compiler": "20.3.10", - "@angular/core": "20.3.10", - "@angular/material": "20.2.12", - "@angular/platform-browser": "20.3.10", - "@angular/platform-browser-dynamic": "20.3.10", - "@angular/router": "20.3.10", + "@angular/animations": "21.0.5", + "@angular/cdk": "21.0.3", + "@angular/common": "21.0.5", + "@angular/compiler": "21.0.5", + "@angular/core": "21.0.5", + "@angular/material": "21.0.3", + "@angular/platform-browser": "21.0.5", + "@angular/platform-browser-dynamic": "21.0.5", + "@angular/router": "21.0.5", "@ngrx/store": "20.0.0", - "@nx/angular": "22.0.2", "@testing-library/dom": "^10.4.1", "rxjs": "7.8.0", "tslib": "~2.8.1", "zone.js": "^0.15.1" }, "devDependencies": { - "@angular-devkit/build-angular": "20.3.9", - "@angular-devkit/core": "20.3.9", - "@angular-devkit/schematics": "20.3.9", - "@angular-eslint/builder": "20.3.0", - "@angular-eslint/eslint-plugin": "20.3.0", - "@angular-eslint/eslint-plugin-template": "20.3.0", - "@angular-eslint/schematics": "20.3.0", - "@angular-eslint/template-parser": "20.3.0", - "@angular/cli": "~20.3.9", - "@angular/compiler-cli": "20.3.10", - "@angular/forms": "20.3.10", - "@angular/language-service": "20.3.10", + "@angular-builders/jest": "^20.0.0", + "@angular-devkit/core": "21.0.3", + "@angular-devkit/schematics": "21.0.3", + "@angular-eslint/builder": "21.1.0", + "@angular-eslint/eslint-plugin": "21.1.0", + "@angular-eslint/eslint-plugin-template": "21.1.0", + "@angular-eslint/schematics": "21.1.0", + "@angular-eslint/template-parser": "21.1.0", + "@angular/build": "^21.0.3", + "@angular/cli": "~21.0.3", + "@angular/compiler-cli": "21.0.5", + "@angular/forms": "21.0.5", + "@angular/language-service": "21.0.5", "@eslint/eslintrc": "^3.3.1", - "@nx/eslint": "22.0.2", - "@nx/eslint-plugin": "22.0.2", - "@nx/jest": "22.0.2", - "@nx/node": "22.0.2", - "@nx/plugin": "22.0.2", - "@nx/workspace": "22.0.2", - "@schematics/angular": "20.3.9", + "@schematics/angular": "21.0.3", "@testing-library/jasmine-dom": "^1.3.3", "@testing-library/jest-dom": "^6.9.1", "@testing-library/user-event": "^14.6.1", @@ -73,7 +60,7 @@ "@types/testing-library__jasmine-dom": "^1.3.4", "@typescript-eslint/types": "^8.46.3", "@typescript-eslint/utils": "^8.46.3", - "angular-eslint": "20.3.0", + "angular-eslint": "21.1.0", "autoprefixer": "^10.4.21", "cpy-cli": "^6.0.0", "eslint": "^9.39.1", @@ -82,9 +69,8 @@ "jasmine-core": "4.2.0", "jasmine-spec-reporter": "7.0.0", "jest": "30.2.0", - "jest-environment-jsdom": "30.2.0", - "jest-preset-angular": "15.0.3", - "jest-util": "30.2.0", + "jest-preset-angular": "^16.0.0", + "jsdom": "^27.3.0", "karma": "6.4.0", "karma-chrome-launcher": "^3.2.0", "karma-coverage": "^2.2.1", @@ -92,18 +78,11 @@ "karma-jasmine-html-reporter": "2.0.0", "lint-staged": "^16.2.6", "ng-mocks": "^14.14.0", - "ng-packagr": "20.3.0", - "nx": "22.0.2", - "postcss": "^8.5.6", - "postcss-import": "14.1.0", - "postcss-preset-env": "7.5.0", - "postcss-url": "10.1.3", + "ng-packagr": "21.0.0", "prettier": "2.6.2", "rimraf": "^6.1.0", - "semantic-release": "^25.0.1", - "ts-jest": "29.4.1", - "ts-node": "10.9.1", "typescript": "5.9.3", - "typescript-eslint": "^8.46.3" + "typescript-eslint": "^8.46.3", + "vitest": "4.0.15" } } diff --git a/projects/testing-library/jest.config.ts b/projects/testing-library/jest.config.ts deleted file mode 100644 index bc5a665d..00000000 --- a/projects/testing-library/jest.config.ts +++ /dev/null @@ -1,8 +0,0 @@ -export default { - displayName: { - name: 'ATL', - color: 'magenta', - }, - preset: '../../jest.preset.js', - setupFilesAfterEnv: ['/test-setup.ts'], -}; diff --git a/projects/testing-library/package.json b/projects/testing-library/package.json index 6ea1a38c..9310b7a5 100644 --- a/projects/testing-library/package.json +++ b/projects/testing-library/package.json @@ -29,10 +29,10 @@ "migrations": "./schematics/migrations/migrations.json" }, "peerDependencies": { - "@angular/common": ">= 20.0.0", - "@angular/platform-browser": ">= 20.0.0", - "@angular/router": ">= 20.0.0", - "@angular/core": ">= 20.0.0", + "@angular/common": ">= 21.0.0", + "@angular/platform-browser": ">= 21.0.0", + "@angular/router": ">= 21.0.0", + "@angular/core": ">= 21.0.0", "@testing-library/dom": "^10.0.0" }, "dependencies": { diff --git a/projects/testing-library/project.json b/projects/testing-library/project.json deleted file mode 100644 index 1deb065a..00000000 --- a/projects/testing-library/project.json +++ /dev/null @@ -1,54 +0,0 @@ -{ - "name": "testing-library", - "$schema": "../../node_modules/nx/schemas/project-schema.json", - "projectType": "library", - "sourceRoot": "projects/testing-library/src", - "prefix": "lib", - "tags": [], - "targets": { - "build-package": { - "executor": "@nx/angular:package", - "outputs": ["{workspaceRoot}/dist/@testing-library/angular"], - "options": { - "project": "projects/testing-library/ng-package.json" - }, - "configurations": { - "production": { - "tsConfig": "projects/testing-library/tsconfig.lib.prod.json" - }, - "development": { - "tsConfig": "projects/testing-library/tsconfig.lib.json" - } - }, - "defaultConfiguration": "production" - }, - "lint": { - "executor": "@nx/eslint:lint" - }, - "build": { - "executor": "nx:run-commands", - "options": { - "parallel": false, - "commands": [ - { - "command": "nx run testing-library:build-package" - }, - { - "command": "npm run build:schematics" - }, - { - "command": "cpy ./README.md ./dist/@testing-library/angular" - } - ] - } - }, - "test": { - "executor": "@nx/jest:jest", - "options": { - "jestConfig": "projects/testing-library/jest.config.ts", - "passWithNoTests": false - }, - "outputs": ["{workspaceRoot}/coverage/projects/testing-library"] - } - } -} diff --git a/projects/testing-library/schematics/migrations/dtl-as-dev-dependency/index.spec.ts b/projects/testing-library/schematics/migrations/dtl-as-dev-dependency/index.spec.ts index ebc3922a..98b7acc6 100644 --- a/projects/testing-library/schematics/migrations/dtl-as-dev-dependency/index.spec.ts +++ b/projects/testing-library/schematics/migrations/dtl-as-dev-dependency/index.spec.ts @@ -8,8 +8,8 @@ test('adds DTL to devDependencies', async () => { expect(pkg).toMatchInlineSnapshot(` "{ - \\"devDependencies\\": { - \\"@testing-library/dom\\": \\"^10.0.0\\" + "devDependencies": { + "@testing-library/dom": "^10.0.0" } }" `); @@ -19,14 +19,14 @@ test('ignores if DTL is already listed as a dev dependency', async () => { const tree = await setup({ devDependencies: { '@testing-library/dom': '^9.0.0' } }); const pkg = tree.readContent('package.json'); - expect(pkg).toMatchInlineSnapshot(`"{\\"devDependencies\\":{\\"@testing-library/dom\\":\\"^9.0.0\\"}}"`); + expect(pkg).toMatchInlineSnapshot(`"{"devDependencies":{"@testing-library/dom":"^9.0.0"}}"`); }); test('ignores if DTL is already listed as a dependency', async () => { const tree = await setup({ dependencies: { '@testing-library/dom': '^11.0.0' } }); const pkg = tree.readContent('package.json'); - expect(pkg).toMatchInlineSnapshot(`"{\\"dependencies\\":{\\"@testing-library/dom\\":\\"^11.0.0\\"}}"`); + expect(pkg).toMatchInlineSnapshot(`"{"dependencies":{"@testing-library/dom":"^11.0.0"}}"`); }); async function setup(packageJson: object) { diff --git a/projects/testing-library/schematics/ng-add/index.ts b/projects/testing-library/schematics/ng-add/index.ts index 868d2031..737c9dbb 100644 --- a/projects/testing-library/schematics/ng-add/index.ts +++ b/projects/testing-library/schematics/ng-add/index.ts @@ -10,9 +10,9 @@ import { Schema } from './schema'; export default function ({ installJestDom, installUserEvent }: Schema): Rule { return () => { return chain([ - addDependency('@testing-library/dom', '^10.0.0', NodeDependencyType.Dev), - installJestDom ? addDependency('@testing-library/jest-dom', '^6.4.8', NodeDependencyType.Dev) : noop(), - installUserEvent ? addDependency('@testing-library/user-event', '^14.5.2', NodeDependencyType.Dev) : noop(), + addDependency('@testing-library/dom', '^10.4.1', NodeDependencyType.Dev), + installJestDom ? addDependency('@testing-library/jest-dom', '^6.9.1', NodeDependencyType.Dev) : noop(), + installUserEvent ? addDependency('@testing-library/user-event', '^14.6.1', NodeDependencyType.Dev) : noop(), installDependencies(), ]); }; diff --git a/projects/testing-library/src/lib/testing-library.ts b/projects/testing-library/src/lib/testing-library.ts index a8bc1ea3..9e135e1b 100644 --- a/projects/testing-library/src/lib/testing-library.ts +++ b/projects/testing-library/src/lib/testing-library.ts @@ -12,6 +12,7 @@ import { Type, isStandalone, Binding, + ApplicationRef, } from '@angular/core'; import { ComponentFixture, DeferBlockBehavior, DeferBlockState, TestBed, tick } from '@angular/core/testing'; import { NavigationExtras, Router } from '@angular/router'; @@ -236,20 +237,13 @@ export async function render( mountedFixtures.add(createdFixture); - let isAlive = true; - createdFixture.componentRef.onDestroy(() => { - isAlive = false; - }); - if (hasOnChangesHook(createdFixture.componentInstance) && Object.keys(properties).length > 0) { const changes = getChangesObj(null, componentProperties); createdFixture.componentInstance.ngOnChanges(changes); } detectChanges = () => { - if (isAlive) { - createdFixture.detectChanges(); - } + safeDetectChanges(createdFixture); }; if (detectChangesOnRender) { @@ -400,7 +394,7 @@ function setComponentProperties( const extendedSetter = (value: any) => { _value = value; descriptor?.set?.call(fixture.componentInstance, _value); - fixture.detectChanges(); + fixture.changeDetectorRef.detectChanges(); }; Object.defineProperty(fixture.componentInstance, key, { @@ -653,7 +647,7 @@ function cleanupAtFixture(fixture: ComponentFixture) { // then we'll automatically run cleanup afterEach test // this ensures that tests run in isolation from each other // if you don't like this, set the ATL_SKIP_AUTO_CLEANUP env variable to 'true' -if (typeof process === 'undefined' || !process.env?.ATL_SKIP_AUTO_CLEANUP) { +if (typeof process === 'undefined' || !process?.env?.['ATL_SKIP_AUTO_CLEANUP']) { if (typeof afterEach === 'function') { afterEach(() => { cleanup(); @@ -689,12 +683,20 @@ function replaceFindWithFindAndDetectChanges>(orig */ function detectChangesForMountedFixtures() { for (const fixture of mountedFixtures) { - try { + safeDetectChanges(fixture); + } +} + +function safeDetectChanges(fixture: ComponentFixture) { + try { + const appRef = fixture.componentRef.injector.get(ApplicationRef); + if (!appRef.destroyed) { + fixture.changeDetectorRef.markForCheck(); fixture.detectChanges(); - } catch (err: any) { - if (!err.message.startsWith('ViewDestroyedError')) { - throw err; - } + } + } catch (err: any) { + if (!err.message.startsWith('ViewDestroyedError') && !err.message.startsWith('NG0205')) { + throw err; } } } diff --git a/projects/testing-library/tests/auto-cleanup.spec.ts b/projects/testing-library/src/tests/auto-cleanup.spec.ts similarity index 55% rename from projects/testing-library/tests/auto-cleanup.spec.ts rename to projects/testing-library/src/tests/auto-cleanup.spec.ts index 1e37f242..92dfb1fd 100644 --- a/projects/testing-library/tests/auto-cleanup.spec.ts +++ b/projects/testing-library/src/tests/auto-cleanup.spec.ts @@ -1,5 +1,6 @@ import { Component, Input } from '@angular/core'; -import { render } from '../src/public_api'; +import { describe, test, expect } from 'vitest'; +import { render } from '../public_api'; @Component({ selector: 'atl-fixture', @@ -9,8 +10,8 @@ class FixtureComponent { @Input() name = ''; } -describe('Angular auto clean up - previous components only get cleanup up on init (based on root-id)', () => { - it('first', async () => { +describe('Angular auto clean up - previous components only get cleanup up on init', () => { + test('first', async () => { await render(FixtureComponent, { componentProperties: { name: 'first', @@ -18,7 +19,7 @@ describe('Angular auto clean up - previous components only get cleanup up on ini }); }); - it('second', async () => { + test('second', async () => { await render(FixtureComponent, { componentProperties: { name: 'second', @@ -27,15 +28,3 @@ describe('Angular auto clean up - previous components only get cleanup up on ini expect(document.body.innerHTML).not.toContain('first'); }); }); - -describe('ATL auto clean up - after each test the containers get removed', () => { - it('first', async () => { - await render(FixtureComponent, { - removeAngularAttributes: true, - }); - }); - - it('second', () => { - expect(document.body).toBeEmptyDOMElement(); - }); -}); diff --git a/projects/testing-library/tests/bindings.spec.ts b/projects/testing-library/src/tests/bindings.spec.ts similarity index 94% rename from projects/testing-library/tests/bindings.spec.ts rename to projects/testing-library/src/tests/bindings.spec.ts index 50718f96..9ab796b2 100644 --- a/projects/testing-library/tests/bindings.spec.ts +++ b/projects/testing-library/src/tests/bindings.spec.ts @@ -1,5 +1,6 @@ import { Component, input, output, inputBinding, outputBinding, twoWayBinding, signal, model } from '@angular/core'; -import { render, screen, aliasedInput } from '../src/public_api'; +import { vi, describe, test, expect } from 'vitest'; +import { render, screen, aliasedInput } from '../public_api'; describe('Bindings API Support', () => { @Component({ @@ -44,7 +45,7 @@ describe('Bindings API Support', () => { }); test('supports outputBinding for outputs', async () => { - const clickHandler = jest.fn(); + const clickHandler = vi.fn(); await render(BindingsTestComponent, { bindings: [inputBinding('value', () => 'bound-value'), outputBinding('clicked', clickHandler)], @@ -100,9 +101,9 @@ describe('Bindings API Support', () => { }); test('warns when mixing bindings with traditional inputs but still works', async () => { - const consoleSpy = jest.spyOn(console, 'warn').mockImplementation(); - const clickHandler = jest.fn(); - const bindingClickHandler = jest.fn(); + const consoleSpy = vi.spyOn(console, 'warn').mockImplementation(() => void 0); + const clickHandler = vi.fn(); + const bindingClickHandler = vi.fn(); await render(BindingsTestComponent, { bindings: [inputBinding('value', () => 'binding-value'), outputBinding('clicked', bindingClickHandler)], diff --git a/projects/testing-library/src/tests/config.spec.ts b/projects/testing-library/src/tests/config.spec.ts new file mode 100644 index 00000000..8a302ebc --- /dev/null +++ b/projects/testing-library/src/tests/config.spec.ts @@ -0,0 +1,41 @@ +import { Component, InjectionToken, NgModule } from '@angular/core'; +import { TestBed } from '@angular/core/testing'; +import { test, afterEach, beforeEach } from 'vitest'; +import { render, configure, Config } from '../public_api'; + +const TEST_TOKEN = new InjectionToken('TEST_TOKEN'); + +@NgModule({ + providers: [{ provide: TEST_TOKEN, useValue: 'test-value' }], +}) +class TestModule {} + +@Component({ + selector: 'atl-fixture', + template: `
Test Component
`, + standalone: false, +}) +class TestComponent {} + +let originalConfig: Config; +beforeEach(() => { + // Grab the existing configuration so we can restore + // it at the end of the test + configure((existingConfig) => { + originalConfig = existingConfig as Config; + return { + defaultImports: [TestModule], + }; + }); +}); + +afterEach(() => { + configure(originalConfig); +}); + +test('adds default imports to the testbed', async () => { + await render(TestComponent); + + const tokenValue = TestBed.inject(TEST_TOKEN); + expect(tokenValue).toBe('test-value'); +}); diff --git a/projects/testing-library/tests/debug.spec.ts b/projects/testing-library/src/tests/debug.spec.ts similarity index 81% rename from projects/testing-library/tests/debug.spec.ts rename to projects/testing-library/src/tests/debug.spec.ts index 63ab7e67..778eccba 100644 --- a/projects/testing-library/tests/debug.spec.ts +++ b/projects/testing-library/src/tests/debug.spec.ts @@ -1,5 +1,6 @@ import { Component } from '@angular/core'; -import { render, screen } from '../src/public_api'; +import { vi, test } from 'vitest'; +import { render, screen } from '../public_api'; @Component({ selector: 'atl-fixture', @@ -11,7 +12,7 @@ import { render, screen } from '../src/public_api'; class FixtureComponent {} test('debug', async () => { - jest.spyOn(console, 'log').mockImplementation(); + vi.spyOn(console, 'log').mockImplementation(() => void 0); const { debug } = await render(FixtureComponent); // eslint-disable-next-line testing-library/no-debugging-utils @@ -22,7 +23,7 @@ test('debug', async () => { }); test('debug allows to be called with an element', async () => { - jest.spyOn(console, 'log').mockImplementation(); + vi.spyOn(console, 'log').mockImplementation(() => void 0); const { debug } = await render(FixtureComponent); const btn = screen.getByTestId('btn'); diff --git a/projects/testing-library/tests/defer-blocks.spec.ts b/projects/testing-library/src/tests/defer-blocks.spec.ts similarity index 94% rename from projects/testing-library/tests/defer-blocks.spec.ts rename to projects/testing-library/src/tests/defer-blocks.spec.ts index ffd5e95b..d4325346 100644 --- a/projects/testing-library/tests/defer-blocks.spec.ts +++ b/projects/testing-library/src/tests/defer-blocks.spec.ts @@ -1,6 +1,7 @@ import { Component } from '@angular/core'; import { DeferBlockBehavior, DeferBlockState } from '@angular/core/testing'; -import { render, screen, fireEvent } from '../src/public_api'; +import { test, expect } from 'vitest'; +import { render, screen, fireEvent } from '../public_api'; test('renders a defer block in different states using the official API', async () => { const { fixture } = await render(FixtureComponent); @@ -44,7 +45,7 @@ test('renders a defer block in different states using DeferBlockBehavior.Playthr const button = screen.getByRole('button', { name: /click/i }); fireEvent.click(button); - expect(screen.getByText(/empty defer block/i)).toBeInTheDocument(); + expect(await screen.findByText(/empty defer block/i)).toBeInTheDocument(); }); test('renders a defer block initially in the loading state', async () => { diff --git a/projects/testing-library/tests/detect-changes.spec.ts b/projects/testing-library/src/tests/detect-changes.spec.ts similarity index 59% rename from projects/testing-library/tests/detect-changes.spec.ts rename to projects/testing-library/src/tests/detect-changes.spec.ts index 363cb402..2ec9c1b4 100644 --- a/projects/testing-library/tests/detect-changes.spec.ts +++ b/projects/testing-library/src/tests/detect-changes.spec.ts @@ -1,8 +1,8 @@ import { Component, OnInit } from '@angular/core'; -import { fakeAsync } from '@angular/core/testing'; import { FormControl, ReactiveFormsModule } from '@angular/forms'; import { delay } from 'rxjs/operators'; -import { render, fireEvent, screen } from '../src/public_api'; +import { describe, test, expect } from 'vitest'; +import { render, fireEvent, screen } from '../public_api'; @Component({ selector: 'atl-fixture', @@ -23,7 +23,7 @@ class FixtureComponent implements OnInit { } describe('detectChanges', () => { - it('does not recognize change if execution is delayed', async () => { + test('does not recognize change if execution is delayed', async () => { await render(FixtureComponent); fireEvent.input(screen.getByTestId('input'), { @@ -34,25 +34,7 @@ describe('detectChanges', () => { expect(screen.getByTestId('button').innerHTML).toBe('Button'); }); - it('exposes detectChanges triggering a change detection cycle', fakeAsync(async () => { - const { detectChanges } = await render(FixtureComponent); - - fireEvent.input(screen.getByTestId('input'), { - target: { - value: 'What a great day!', - }, - }); - - // TODO: The code should be running in the fakeAsync zone to call this function ? - // tick(500); - await new Promise((resolve) => setTimeout(resolve, 500)); - - detectChanges(); - - expect(screen.getByTestId('button').innerHTML).toBe('Button updated after 400ms'); - })); - - it('does not throw on a destroyed fixture', async () => { + test('does not throw on a destroyed fixture', async () => { const { fixture } = await render(FixtureComponent); fixture.destroy(); diff --git a/projects/testing-library/tests/find-by.spec.ts b/projects/testing-library/src/tests/find-by.spec.ts similarity index 77% rename from projects/testing-library/tests/find-by.spec.ts rename to projects/testing-library/src/tests/find-by.spec.ts index 30f11ee3..637db7f6 100644 --- a/projects/testing-library/tests/find-by.spec.ts +++ b/projects/testing-library/src/tests/find-by.spec.ts @@ -1,6 +1,7 @@ import { Component } from '@angular/core'; import { timer } from 'rxjs'; -import { render, screen } from '../src/public_api'; +import { render, screen } from '../public_api'; +import { describe, test, expect } from 'vitest'; import { mapTo } from 'rxjs/operators'; import { AsyncPipe } from '@angular/common'; @@ -14,26 +15,26 @@ class FixtureComponent { } describe('screen', () => { - it('waits for element to be added to the DOM', async () => { + test('waits for element to be added to the DOM', async () => { await render(FixtureComponent); await expect(screen.findByText('I am visible')).resolves.toBeTruthy(); }); - it('rejects when something cannot be found', async () => { + test('rejects when something cannot be found', async () => { await render(FixtureComponent); await expect(screen.findByText('I am invisible', {}, { timeout: 40 })).rejects.toThrow('x'); }); }); describe('rendered component', () => { - it('waits for element to be added to the DOM', async () => { + test('waits for element to be added to the DOM', async () => { const { findByText } = await render(FixtureComponent); /// We wish to test the utility function from `render` here. // eslint-disable-next-line testing-library/prefer-screen-queries await expect(findByText('I am visible')).resolves.toBeTruthy(); }); - it('rejects when something cannot be found', async () => { + test('rejects when something cannot be found', async () => { const { findByText } = await render(FixtureComponent); /// We wish to test the utility function from `render` here. // eslint-disable-next-line testing-library/prefer-screen-queries diff --git a/projects/testing-library/tests/fire-event.spec.ts b/projects/testing-library/src/tests/fire-event.spec.ts similarity index 77% rename from projects/testing-library/tests/fire-event.spec.ts rename to projects/testing-library/src/tests/fire-event.spec.ts index 7b4a90bb..11bcfcd8 100644 --- a/projects/testing-library/tests/fire-event.spec.ts +++ b/projects/testing-library/src/tests/fire-event.spec.ts @@ -1,5 +1,6 @@ import { Component } from '@angular/core'; -import { render, fireEvent, screen } from '../src/public_api'; +import { render, fireEvent, screen } from '../public_api'; +import { describe, test, expect } from 'vitest'; import { FormsModule } from '@angular/forms'; describe('fireEvent', () => { @@ -14,7 +15,7 @@ describe('fireEvent', () => { name = ''; } - it('automatically detect changes when event is fired', async () => { + test('automatically detect changes when event is fired', async () => { await render(FixtureComponent); fireEvent.input(screen.getByTestId('input'), { target: { value: 'Tim' } }); @@ -22,7 +23,7 @@ describe('fireEvent', () => { expect(screen.getByText('Hello Tim')).toBeInTheDocument(); }); - it('can disable automatic detect changes when event is fired', async () => { + test('can disable automatic detect changes when event is fired', async () => { const { detectChanges } = await render(FixtureComponent, { autoDetectChanges: false, }); @@ -36,7 +37,7 @@ describe('fireEvent', () => { expect(screen.getByText('Hello Tim')).toBeInTheDocument(); }); - it('does not call detect changes when fixture is destroyed', async () => { + test('does not call detect changes when fixture is destroyed', async () => { const { fixture } = await render(FixtureComponent); fixture.destroy(); diff --git a/projects/testing-library/tests/integration.spec.ts b/projects/testing-library/src/tests/integration.spec.ts similarity index 83% rename from projects/testing-library/tests/integration.spec.ts rename to projects/testing-library/src/tests/integration.spec.ts index 70d0169c..b39dec29 100644 --- a/projects/testing-library/tests/integration.spec.ts +++ b/projects/testing-library/src/tests/integration.spec.ts @@ -1,8 +1,9 @@ import { Component, EventEmitter, inject, Injectable, Input, Output } from '@angular/core'; import { TestBed } from '@angular/core/testing'; +import { vi, test, expect, afterEach } from 'vitest'; import { of, BehaviorSubject } from 'rxjs'; import { debounceTime, switchMap, map, startWith } from 'rxjs/operators'; -import { render, screen, waitFor, waitForElementToBeRemoved, within } from '../src/lib/testing-library'; +import { render, screen, waitForElementToBeRemoved, within } from '../lib/testing-library'; import userEvent from '@testing-library/user-event'; import { AsyncPipe, NgForOf } from '@angular/common'; @@ -91,22 +92,28 @@ const entities = [ }, ]; +afterEach(() => { + vi.useRealTimers(); +}); + async function setup() { - jest.useFakeTimers(); - const user = userEvent.setup(); + vi.useFakeTimers(); + const user = userEvent.setup({ + advanceTimers: vi.advanceTimersByTime, + }); await render(EntitiesComponent, { providers: [ { provide: EntitiesService, useValue: { - fetchAll: jest.fn().mockReturnValue(of(entities)), + fetchAll: vi.fn().mockReturnValue(of(entities)), }, }, { provide: ModalService, useValue: { - open: jest.fn(), + open: vi.fn(), }, }, ], @@ -134,20 +141,21 @@ test('renders the entities', async () => { expect(await screen.findByRole('cell', { name: /Entity 3/i })).toBeInTheDocument(); }); -test.skip('finds the cell', async () => { +test('finds the cell', async () => { const { user } = await setup(); await user.type(await screen.findByRole('textbox', { name: /Search entities/i }), 'Entity 2', {}); - jest.advanceTimersByTime(DEBOUNCE_TIME); + vi.advanceTimersByTime(DEBOUNCE_TIME); await waitForElementToBeRemoved(() => screen.queryByRole('cell', { name: /Entity 1/i })); expect(await screen.findByRole('cell', { name: /Entity 2/i })).toBeInTheDocument(); }); -test.skip('opens the modal', async () => { +test('opens the modal', async () => { const { modalMock, user } = await setup(); - await user.click(await screen.findByRole('button', { name: /New Entity/i })); + + await user.click(await screen.findByRole('button', { name: /Create New Entity/i })); expect(modalMock.open).toHaveBeenCalledWith('new entity'); const row = await screen.findByRole('row', { @@ -159,5 +167,6 @@ test.skip('opens the modal', async () => { name: /edit/i, }), ); - await waitFor(() => expect(modalMock.open).toHaveBeenCalledWith('edit entity', 'Entity 2')); + + await vi.waitFor(() => expect(modalMock.open).toHaveBeenCalledWith('edit entity', 'Entity 2')); }); diff --git a/projects/testing-library/tests/integrations/ng-mocks.spec.ts b/projects/testing-library/src/tests/integrations/ng-mocks.spec.ts similarity index 94% rename from projects/testing-library/tests/integrations/ng-mocks.spec.ts rename to projects/testing-library/src/tests/integrations/ng-mocks.spec.ts index 8886fb3f..616e28f0 100644 --- a/projects/testing-library/tests/integrations/ng-mocks.spec.ts +++ b/projects/testing-library/src/tests/integrations/ng-mocks.spec.ts @@ -1,9 +1,9 @@ import { Component, ContentChild, EventEmitter, Input, Output, TemplateRef } from '@angular/core'; import { By } from '@angular/platform-browser'; +import { test, expect } from 'vitest'; import { MockComponent } from 'ng-mocks'; -import { render } from '../../src/public_api'; -import { NgIf } from '@angular/common'; +import { render } from '../../public_api'; test('sends the correct value to the child input', async () => { const utils = await render(TargetComponent, { @@ -35,7 +35,6 @@ test('sends the correct value to the child input 2', async () => { selector: 'atl-child', template: 'child', standalone: true, - imports: [NgIf], }) class ChildComponent { @ContentChild('something') diff --git a/projects/testing-library/tests/issues/issue-188.spec.ts b/projects/testing-library/src/tests/issues/issue-188.spec.ts similarity index 75% rename from projects/testing-library/tests/issues/issue-188.spec.ts rename to projects/testing-library/src/tests/issues/issue-188.spec.ts index b150dacc..1523d0f9 100644 --- a/projects/testing-library/tests/issues/issue-188.spec.ts +++ b/projects/testing-library/src/tests/issues/issue-188.spec.ts @@ -1,6 +1,7 @@ // https://github.com/testing-library/angular-testing-library/issues/188 import { Component, Input, OnChanges, SimpleChanges } from '@angular/core'; -import { render, screen } from '../../src/public_api'; +import { test, expect } from 'vitest'; +import { render, screen } from '../../public_api'; @Component({ template: `

Hello {{ formattedName }}

`, @@ -11,8 +12,8 @@ class BugOnChangeComponent implements OnChanges { formattedName?: string; ngOnChanges(changes: SimpleChanges) { - if (changes.name) { - this.formattedName = changes.name.currentValue.toUpperCase(); + if (changes['name']) { + this.formattedName = changes['name'].currentValue.toUpperCase(); } } } diff --git a/projects/testing-library/tests/issues/issue-230.spec.ts b/projects/testing-library/src/tests/issues/issue-230.spec.ts similarity index 86% rename from projects/testing-library/tests/issues/issue-230.spec.ts rename to projects/testing-library/src/tests/issues/issue-230.spec.ts index 8df58f66..929c265a 100644 --- a/projects/testing-library/tests/issues/issue-230.spec.ts +++ b/projects/testing-library/src/tests/issues/issue-230.spec.ts @@ -1,6 +1,7 @@ import { Component } from '@angular/core'; -import { render, waitFor, screen } from '../../src/public_api'; import { NgClass } from '@angular/common'; +import { test, expect } from 'vitest'; +import { render, waitFor, screen } from '../../public_api'; @Component({ template: ` `, diff --git a/projects/testing-library/tests/issues/issue-280.spec.ts b/projects/testing-library/src/tests/issues/issue-280.spec.ts similarity index 95% rename from projects/testing-library/tests/issues/issue-280.spec.ts rename to projects/testing-library/src/tests/issues/issue-280.spec.ts index ea230e78..48f09297 100644 --- a/projects/testing-library/tests/issues/issue-280.spec.ts +++ b/projects/testing-library/src/tests/issues/issue-280.spec.ts @@ -2,8 +2,9 @@ import { Location } from '@angular/common'; import { Component, inject, NgModule } from '@angular/core'; import { RouterLink, RouterModule, RouterOutlet, Routes } from '@angular/router'; import { RouterTestingModule } from '@angular/router/testing'; +import { test, expect } from 'vitest'; import userEvent from '@testing-library/user-event'; -import { render, screen } from '../../src/public_api'; +import { render, screen } from '../../public_api'; @Component({ template: `
Navigate
diff --git a/projects/testing-library/tests/issues/issue-318.spec.ts b/projects/testing-library/src/tests/issues/issue-318.spec.ts similarity index 88% rename from projects/testing-library/tests/issues/issue-318.spec.ts rename to projects/testing-library/src/tests/issues/issue-318.spec.ts index 1cfe5b85..884c3ffb 100644 --- a/projects/testing-library/tests/issues/issue-318.spec.ts +++ b/projects/testing-library/src/tests/issues/issue-318.spec.ts @@ -1,8 +1,9 @@ import { Component, inject, OnDestroy, OnInit } from '@angular/core'; import { Router } from '@angular/router'; import { RouterTestingModule } from '@angular/router/testing'; +import { vi, test, expect } from 'vitest'; import { Subject, takeUntil } from 'rxjs'; -import { render } from '@testing-library/angular'; +import { render } from '../../public_api'; @Component({ selector: 'atl-app-fixture', @@ -29,7 +30,7 @@ class FixtureComponent implements OnInit, OnDestroy { } test('it does not invoke router events on init', async () => { - const eventReceived = jest.fn(); + const eventReceived = vi.fn(); await render(FixtureComponent, { imports: [RouterTestingModule], componentProperties: { diff --git a/projects/testing-library/tests/issues/issue-346.spec.ts b/projects/testing-library/src/tests/issues/issue-346.spec.ts similarity index 83% rename from projects/testing-library/tests/issues/issue-346.spec.ts rename to projects/testing-library/src/tests/issues/issue-346.spec.ts index ef1b7a38..9c00b652 100644 --- a/projects/testing-library/tests/issues/issue-346.spec.ts +++ b/projects/testing-library/src/tests/issues/issue-346.spec.ts @@ -1,5 +1,6 @@ import { Component } from '@angular/core'; -import { render } from '../../src/public_api'; +import { test } from 'vitest'; +import { render } from '../../public_api'; test('issue 364 detectChangesOnRender', async () => { @Component({ diff --git a/projects/testing-library/tests/issues/issue-386.spec.ts b/projects/testing-library/src/tests/issues/issue-386.spec.ts similarity index 65% rename from projects/testing-library/tests/issues/issue-386.spec.ts rename to projects/testing-library/src/tests/issues/issue-386.spec.ts index b0c5613d..a416d38d 100644 --- a/projects/testing-library/tests/issues/issue-386.spec.ts +++ b/projects/testing-library/src/tests/issues/issue-386.spec.ts @@ -1,6 +1,7 @@ import { Component } from '@angular/core'; +import { vi, describe, test, afterEach, beforeEach } from 'vitest'; import { throwError } from 'rxjs'; -import { render, screen, fireEvent } from '../../src/public_api'; +import { render, screen, fireEvent } from '../../public_api'; @Component({ selector: 'atl-fixture', @@ -15,20 +16,20 @@ class TestComponent { describe('TestComponent', () => { beforeEach(() => { - jest.useFakeTimers(); + vi.useFakeTimers(); }); afterEach(() => { - jest.runAllTicks(); - jest.useRealTimers(); + vi.runAllTicks(); + vi.useRealTimers(); }); - it('does not fail', async () => { + test('does not fail', async () => { await render(TestComponent); fireEvent.click(screen.getByText('Test')); }); - it('fails because of the previous one', async () => { + test('fails because of the previous one', async () => { await render(TestComponent); fireEvent.click(screen.getByText('Test')); }); diff --git a/projects/testing-library/tests/issues/issue-389.spec.ts b/projects/testing-library/src/tests/issues/issue-389.spec.ts similarity index 81% rename from projects/testing-library/tests/issues/issue-389.spec.ts rename to projects/testing-library/src/tests/issues/issue-389.spec.ts index 626d3889..465b90ff 100644 --- a/projects/testing-library/tests/issues/issue-389.spec.ts +++ b/projects/testing-library/src/tests/issues/issue-389.spec.ts @@ -1,5 +1,6 @@ import { Component, Input } from '@angular/core'; -import { render, screen } from '../../src/public_api'; +import { test, expect } from 'vitest'; +import { render, screen } from '../../public_api'; @Component({ selector: 'atl-fixture', diff --git a/projects/testing-library/tests/issues/issue-396-standalone-stub-child.spec.ts b/projects/testing-library/src/tests/issues/issue-396-standalone-stub-child.spec.ts similarity index 89% rename from projects/testing-library/tests/issues/issue-396-standalone-stub-child.spec.ts rename to projects/testing-library/src/tests/issues/issue-396-standalone-stub-child.spec.ts index 7be9913e..d44d3324 100644 --- a/projects/testing-library/tests/issues/issue-396-standalone-stub-child.spec.ts +++ b/projects/testing-library/src/tests/issues/issue-396-standalone-stub-child.spec.ts @@ -1,5 +1,6 @@ import { Component } from '@angular/core'; -import { render, screen } from '../../src/public_api'; +import { test, expect } from 'vitest'; +import { render, screen } from '../../public_api'; test('stub', async () => { await render(FixtureComponent, { @@ -42,7 +43,7 @@ class ChildComponent {} selector: 'atl-child', template: `Hello from stub`, standalone: true, - host: { 'collision-id': StubComponent.name }, + host: { 'collision-id': 'StubComponent' }, }) class StubComponent {} diff --git a/projects/testing-library/tests/issues/issue-397-directive-overrides-component-input.spec.ts b/projects/testing-library/src/tests/issues/issue-397-directive-overrides-component-input.spec.ts similarity index 96% rename from projects/testing-library/tests/issues/issue-397-directive-overrides-component-input.spec.ts rename to projects/testing-library/src/tests/issues/issue-397-directive-overrides-component-input.spec.ts index c34e1304..90023d03 100644 --- a/projects/testing-library/tests/issues/issue-397-directive-overrides-component-input.spec.ts +++ b/projects/testing-library/src/tests/issues/issue-397-directive-overrides-component-input.spec.ts @@ -1,5 +1,6 @@ import { Component, Directive, inject, Input, OnInit } from '@angular/core'; -import { render, screen } from '../../src/public_api'; +import { test, expect } from 'vitest'; +import { render, screen } from '../../public_api'; test('the value set in the directive constructor is overriden by the input binding', async () => { await render(``, { diff --git a/projects/testing-library/src/tests/issues/issue-398-component-without-host-id.spec.ts b/projects/testing-library/src/tests/issues/issue-398-component-without-host-id.spec.ts new file mode 100644 index 00000000..ad9500a0 --- /dev/null +++ b/projects/testing-library/src/tests/issues/issue-398-component-without-host-id.spec.ts @@ -0,0 +1,24 @@ +import { Component } from '@angular/core'; +import { describe, test, expect } from 'vitest'; +import { render, screen } from '../../public_api'; + +describe.concurrent('Issue #398 - Component with host id attribute', () => { + test('should create the app', async () => { + await render(FixtureComponent); + expect(screen.getByRole('heading')).toBeInTheDocument(); + }); + + test('should re-create the app', async () => { + await render(FixtureComponent); + expect(screen.getByRole('heading')).toBeInTheDocument(); + }); +}); +@Component({ + selector: 'atl-fixture-398', + standalone: true, + template: '

My title

', + host: { + '[attr.id]': 'null', // this breaks the cleaning up of tests + }, +}) +class FixtureComponent {} diff --git a/projects/testing-library/tests/issues/issue-422-view-already-destroyed.spec.ts b/projects/testing-library/src/tests/issues/issue-422-view-already-destroyed.spec.ts similarity index 90% rename from projects/testing-library/tests/issues/issue-422-view-already-destroyed.spec.ts rename to projects/testing-library/src/tests/issues/issue-422-view-already-destroyed.spec.ts index 6dd5bc0c..ccfc90b9 100644 --- a/projects/testing-library/tests/issues/issue-422-view-already-destroyed.spec.ts +++ b/projects/testing-library/src/tests/issues/issue-422-view-already-destroyed.spec.ts @@ -1,6 +1,7 @@ import { Component, ElementRef, inject } from '@angular/core'; import { NgIf } from '@angular/common'; -import { render } from '../../src/public_api'; +import { test, expect } from 'vitest'; +import { render } from '../../public_api'; test('declaration specific dependencies should be available for components', async () => { @Component({ diff --git a/projects/testing-library/tests/issues/issue-435.spec.ts b/projects/testing-library/src/tests/issues/issue-435.spec.ts similarity index 90% rename from projects/testing-library/tests/issues/issue-435.spec.ts rename to projects/testing-library/src/tests/issues/issue-435.spec.ts index 2982319b..e6122df4 100644 --- a/projects/testing-library/tests/issues/issue-435.spec.ts +++ b/projects/testing-library/src/tests/issues/issue-435.spec.ts @@ -1,7 +1,8 @@ import { CommonModule } from '@angular/common'; import { BehaviorSubject } from 'rxjs'; import { Component, inject, Injectable } from '@angular/core'; -import { screen, render } from '../../src/public_api'; +import { screen, render } from '../../public_api'; +import { expect, test } from 'vitest'; // Service @Injectable() diff --git a/projects/testing-library/tests/issues/issue-437.spec.ts b/projects/testing-library/src/tests/issues/issue-437.spec.ts similarity index 87% rename from projects/testing-library/tests/issues/issue-437.spec.ts rename to projects/testing-library/src/tests/issues/issue-437.spec.ts index dbf2506b..ef1fbc5b 100644 --- a/projects/testing-library/tests/issues/issue-437.spec.ts +++ b/projects/testing-library/src/tests/issues/issue-437.spec.ts @@ -1,9 +1,10 @@ import userEvent from '@testing-library/user-event'; -import { screen, render } from '../../src/public_api'; import { MatSidenavModule } from '@angular/material/sidenav'; +import { vi, test, afterEach } from 'vitest'; +import { screen, render } from '../../public_api'; afterEach(() => { - jest.useRealTimers(); + vi.useRealTimers(); }); test('issue #437', async () => { @@ -30,9 +31,9 @@ test('issue #437', async () => { }); test('issue #437 with fakeTimers', async () => { - jest.useFakeTimers(); + vi.useFakeTimers(); const user = userEvent.setup({ - advanceTimers: jest.advanceTimersByTime, + advanceTimers: vi.advanceTimersByTime, }); await render( ` @@ -53,4 +54,5 @@ test('issue #437 with fakeTimers', async () => { await screen.findByTestId('test-button'); await user.click(screen.getByTestId('test-button')); + vi.useRealTimers(); }); diff --git a/projects/testing-library/tests/issues/issue-492.spec.ts b/projects/testing-library/src/tests/issues/issue-492.spec.ts similarity index 93% rename from projects/testing-library/tests/issues/issue-492.spec.ts rename to projects/testing-library/src/tests/issues/issue-492.spec.ts index a1e44b09..c0830d81 100644 --- a/projects/testing-library/tests/issues/issue-492.spec.ts +++ b/projects/testing-library/src/tests/issues/issue-492.spec.ts @@ -1,6 +1,7 @@ import { AsyncPipe } from '@angular/common'; import { Component, inject, Injectable } from '@angular/core'; -import { render, screen } from '../../src/public_api'; +import { test, expect } from 'vitest'; +import { render, screen } from '../../public_api'; import { Observable, BehaviorSubject, map } from 'rxjs'; test('displays username', async () => { diff --git a/projects/testing-library/tests/issues/issue-493.spec.ts b/projects/testing-library/src/tests/issues/issue-493.spec.ts similarity index 88% rename from projects/testing-library/tests/issues/issue-493.spec.ts rename to projects/testing-library/src/tests/issues/issue-493.spec.ts index 00a39b37..e65cc5a9 100644 --- a/projects/testing-library/tests/issues/issue-493.spec.ts +++ b/projects/testing-library/src/tests/issues/issue-493.spec.ts @@ -1,7 +1,8 @@ import { HttpClient, provideHttpClient } from '@angular/common/http'; import { provideHttpClientTesting } from '@angular/common/http/testing'; import { Component, inject, input } from '@angular/core'; -import { render, screen } from '../../src/public_api'; +import { test, expect } from 'vitest'; +import { render, screen } from '../../public_api'; test('succeeds', async () => { await render(DummyComponent, { diff --git a/projects/testing-library/tests/issues/issue-67.spec.ts b/projects/testing-library/src/tests/issues/issue-67.spec.ts similarity index 90% rename from projects/testing-library/tests/issues/issue-67.spec.ts rename to projects/testing-library/src/tests/issues/issue-67.spec.ts index 4f1a2b21..dca0d393 100644 --- a/projects/testing-library/tests/issues/issue-67.spec.ts +++ b/projects/testing-library/src/tests/issues/issue-67.spec.ts @@ -1,6 +1,7 @@ // https://github.com/testing-library/angular-testing-library/issues/67 import { Component } from '@angular/core'; -import { render, screen } from '../../src/public_api'; +import { test, expect } from 'vitest'; +import { render, screen } from '../../public_api'; @Component({ template: ` diff --git a/projects/testing-library/tests/navigate.spec.ts b/projects/testing-library/src/tests/navigate.spec.ts similarity index 84% rename from projects/testing-library/tests/navigate.spec.ts rename to projects/testing-library/src/tests/navigate.spec.ts index 74c2b13d..caec61ae 100644 --- a/projects/testing-library/tests/navigate.spec.ts +++ b/projects/testing-library/src/tests/navigate.spec.ts @@ -1,7 +1,8 @@ import { Component } from '@angular/core'; import { TestBed } from '@angular/core/testing'; import { Router } from '@angular/router'; -import { render } from '../src/public_api'; +import { vi, test, expect } from 'vitest'; +import { render } from '../public_api'; @Component({ selector: 'atl-fixture', @@ -15,7 +16,7 @@ test('should navigate correctly', async () => { }); const router = TestBed.inject(Router); - const navSpy = jest.spyOn(router, 'navigate'); + const navSpy = vi.spyOn(router, 'navigate'); navigate('details'); @@ -28,7 +29,7 @@ test('should pass queryParams if provided', async () => { }); const router = TestBed.inject(Router); - const navSpy = jest.spyOn(router, 'navigate'); + const navSpy = vi.spyOn(router, 'navigate'); navigate('details?sortBy=name&sortOrder=asc'); diff --git a/projects/testing-library/tests/providers/component-provider.spec.ts b/projects/testing-library/src/tests/providers/component-provider.spec.ts similarity index 94% rename from projects/testing-library/tests/providers/component-provider.spec.ts rename to projects/testing-library/src/tests/providers/component-provider.spec.ts index b774064e..f130fadb 100644 --- a/projects/testing-library/tests/providers/component-provider.spec.ts +++ b/projects/testing-library/src/tests/providers/component-provider.spec.ts @@ -1,6 +1,7 @@ import { inject, Injectable, Provider } from '@angular/core'; import { Component } from '@angular/core'; -import { render, screen } from '../../src/public_api'; +import { test, expect } from 'vitest'; +import { render, screen } from '../../public_api'; test('shows the service value', async () => { await render(FixtureComponent); diff --git a/projects/testing-library/tests/providers/module-provider.spec.ts b/projects/testing-library/src/tests/providers/module-provider.spec.ts similarity index 93% rename from projects/testing-library/tests/providers/module-provider.spec.ts rename to projects/testing-library/src/tests/providers/module-provider.spec.ts index 80710291..3699a531 100644 --- a/projects/testing-library/tests/providers/module-provider.spec.ts +++ b/projects/testing-library/src/tests/providers/module-provider.spec.ts @@ -1,6 +1,7 @@ import { inject, Injectable } from '@angular/core'; import { Component } from '@angular/core'; -import { render, screen } from '../../src/public_api'; +import { test, expect } from 'vitest'; +import { render, screen } from '../../public_api'; test('shows the service value', async () => { await render(FixtureComponent, { diff --git a/projects/testing-library/tests/render-template.spec.ts b/projects/testing-library/src/tests/render-template.spec.ts similarity index 97% rename from projects/testing-library/tests/render-template.spec.ts rename to projects/testing-library/src/tests/render-template.spec.ts index cddc28a1..52ae9d87 100644 --- a/projects/testing-library/tests/render-template.spec.ts +++ b/projects/testing-library/src/tests/render-template.spec.ts @@ -1,6 +1,7 @@ import { Directive, HostListener, ElementRef, Input, Output, EventEmitter, Component, inject } from '@angular/core'; +import { vi, test, expect } from 'vitest'; -import { render, fireEvent, screen } from '../src/public_api'; +import { render, fireEvent, screen } from '../public_api'; @Directive({ // eslint-disable-next-line @angular-eslint/directive-selector @@ -97,7 +98,7 @@ test('overrides input properties via a wrapper', async () => { }); test('overrides output properties', async () => { - const clicked = jest.fn(); + const clicked = vi.fn(); await render('
', { imports: [OnOffDirective], diff --git a/projects/testing-library/tests/render.spec.ts b/projects/testing-library/src/tests/render.spec.ts similarity index 82% rename from projects/testing-library/tests/render.spec.ts rename to projects/testing-library/src/tests/render.spec.ts index 243a5e81..31a4d071 100644 --- a/projects/testing-library/tests/render.spec.ts +++ b/projects/testing-library/src/tests/render.spec.ts @@ -18,10 +18,11 @@ import { } from '@angular/core'; import { outputFromObservable } from '@angular/core/rxjs-interop'; import { TestBed } from '@angular/core/testing'; -import { render, fireEvent, screen, OutputRefKeysWithCallback, aliasedInput } from '../src/public_api'; +import { vi, describe, test } from 'vitest'; +import { render, fireEvent, screen, OutputRefKeysWithCallback, aliasedInput } from '../public_api'; import { ActivatedRoute, Resolve, RouterModule } from '@angular/router'; import { fromEvent, map } from 'rxjs'; -import { AsyncPipe, NgIf } from '@angular/common'; +import { AsyncPipe } from '@angular/common'; @Component({ selector: 'atl-fixture', @@ -33,7 +34,7 @@ import { AsyncPipe, NgIf } from '@angular/common'; class FixtureComponent {} describe('DTL functionality', () => { - it('creates queries and events', async () => { + test('creates queries and events', async () => { const view = await render(FixtureComponent); // We wish to test the utility function from `render` here. @@ -55,7 +56,7 @@ describe('components', () => { @Input() name = ''; } - it('renders component', async () => { + test('renders component', async () => { await render(FixtureWithInputComponent, { componentProperties: { name: 'Bob' } }); expect(screen.getByText('Bob')).toBeInTheDocument(); }); @@ -71,7 +72,7 @@ describe('component with child', () => { @Component({ selector: 'atl-child-fixture', template: `A mock child fixture`, - host: { 'collision-id': MockChildFixtureComponent.name }, + host: { 'collision-id': 'MockChildFixtureComponent' }, }) class MockChildFixtureComponent {} @@ -83,19 +84,19 @@ describe('component with child', () => { }) class ParentFixtureComponent {} - it('renders the component with a mocked child', async () => { + test('renders the component with a mocked child', async () => { await render(ParentFixtureComponent, { componentImports: [MockChildFixtureComponent] }); expect(screen.getByText('Parent fixture')).toBeInTheDocument(); expect(screen.getByText('A mock child fixture')).toBeInTheDocument(); }); - it('renders the component with child', async () => { + test('renders the component with child', async () => { await render(ParentFixtureComponent); expect(screen.getByText('Parent fixture')).toBeInTheDocument(); expect(screen.getByText('A child fixture')).toBeInTheDocument(); }); - it('rejects render of template with componentImports set', () => { + test('rejects render of template with componentImports set', () => { const view = render(`
`, { imports: [ParentFixtureComponent], componentImports: [MockChildFixtureComponent], @@ -126,7 +127,7 @@ describe('childComponentOverrides', () => { }) class ParentFixtureComponent {} - it('renders with overridden child service when specified', async () => { + test('renders with overridden child service when specified', async () => { await render(ParentFixtureComponent, { childComponentOverrides: [ { @@ -161,7 +162,7 @@ describe('removeAngularAttributes', () => { }); describe('componentOutputs', () => { - it('should set passed event emitter to the component', async () => { + test('should set passed event emitter to the component', async () => { @Component({ template: `` }) class TestFixtureComponent { @Output() event = new EventEmitter(); @@ -171,7 +172,7 @@ describe('componentOutputs', () => { } const mockEmitter = new EventEmitter(); - const spy = jest.spyOn(mockEmitter, 'emit'); + const spy = vi.spyOn(mockEmitter, 'emit'); const { fixture } = await render(TestFixtureComponent, { componentOutputs: { event: mockEmitter }, }); @@ -183,35 +184,35 @@ describe('componentOutputs', () => { }); describe('on', () => { - @Component({ template: `` }) + @Component({ selector: 'atl-test-fixture-with-event-emitter', template: `` }) class TestFixtureWithEventEmitterComponent { @Output() readonly event = new EventEmitter(); } - @Component({ template: `` }) + @Component({ selector: 'atl-test-fixture-with-derived-event', template: `` }) class TestFixtureWithDerivedEventComponent { @Output() readonly event = fromEvent(inject(ElementRef).nativeElement, 'click'); } - @Component({ template: `` }) + @Component({ selector: 'atl-test-fixture-with-functional-output', template: `` }) class TestFixtureWithFunctionalOutputComponent { readonly event = output(); } - @Component({ template: `` }) + @Component({ selector: 'atl-test-fixture-with-functional-derived-event', template: `` }) class TestFixtureWithFunctionalDerivedEventComponent { readonly event = outputFromObservable(fromEvent(inject(ElementRef).nativeElement, 'click')); } - it('should subscribe passed listener to the component EventEmitter', async () => { - const spy = jest.fn(); + test('should subscribe passed listener to the component EventEmitter', async () => { + const spy = vi.fn(); const { fixture } = await render(TestFixtureWithEventEmitterComponent, { on: { event: spy } }); fixture.componentInstance.event.emit(); expect(spy).toHaveBeenCalled(); }); - it('should unsubscribe on rerender without listener', async () => { - const spy = jest.fn(); + test('should unsubscribe on rerender without listener', async () => { + const spy = vi.fn(); const { fixture, rerender } = await render(TestFixtureWithEventEmitterComponent, { on: { event: spy }, }); @@ -222,8 +223,8 @@ describe('on', () => { expect(spy).not.toHaveBeenCalled(); }); - it('should not unsubscribe when same listener function is used on rerender', async () => { - const spy = jest.fn(); + test('should not unsubscribe when same listener function is used on rerender', async () => { + const spy = vi.fn(); const { fixture, rerender } = await render(TestFixtureWithEventEmitterComponent, { on: { event: spy }, }); @@ -234,13 +235,13 @@ describe('on', () => { expect(spy).toHaveBeenCalled(); }); - it('should unsubscribe old and subscribe new listener function on rerender', async () => { - const firstSpy = jest.fn(); + test('should unsubscribe old and subscribe new listener function on rerender', async () => { + const firstSpy = vi.fn(); const { fixture, rerender } = await render(TestFixtureWithEventEmitterComponent, { on: { event: firstSpy }, }); - const newSpy = jest.fn(); + const newSpy = vi.fn(); await rerender({ on: { event: newSpy } }); fixture.componentInstance.event.emit(); @@ -249,8 +250,8 @@ describe('on', () => { expect(newSpy).toHaveBeenCalled(); }); - it('should subscribe passed listener to a derived component output', async () => { - const spy = jest.fn(); + test('should subscribe passed listener to a derived component output', async () => { + const spy = vi.fn(); const { fixture } = await render(TestFixtureWithDerivedEventComponent, { on: { event: spy }, }); @@ -258,8 +259,8 @@ describe('on', () => { expect(spy).toHaveBeenCalled(); }); - it('should subscribe passed listener to a functional component output', async () => { - const spy = jest.fn(); + test('should subscribe passed listener to a functional component output', async () => { + const spy = vi.fn(); const { fixture } = await render(TestFixtureWithFunctionalOutputComponent, { on: { event: spy }, }); @@ -267,8 +268,8 @@ describe('on', () => { expect(spy).toHaveBeenCalledWith('test'); }); - it('should subscribe passed listener to a functional derived component output', async () => { - const spy = jest.fn(); + test('should subscribe passed listener to a functional derived component output', async () => { + const spy = vi.fn(); const { fixture } = await render(TestFixtureWithFunctionalDerivedEventComponent, { on: { event: spy }, }); @@ -276,7 +277,7 @@ describe('on', () => { expect(spy).toHaveBeenCalled(); }); - it('OutputRefKeysWithCallback is correctly typed', () => { + test('OutputRefKeysWithCallback is correctly typed', () => { const fnWithVoidArg = (_: void) => void 0; const fnWithNumberArg = (_: number) => void 0; const fnWithStringArg = (_: string) => void 0; @@ -322,7 +323,7 @@ describe('excludeComponentDeclaration', () => { }) class FixtureModule {} - it('does not throw if component is declared in an imported module', async () => { + test('does not throw if component is declared in an imported module', async () => { await render(NotStandaloneFixtureComponent, { imports: [FixtureModule], excludeComponentDeclaration: true, @@ -348,13 +349,13 @@ describe('Angular component life-cycle hooks', () => { ngOnChanges(changes: SimpleChanges) { if (this.nameChanged) { - this.nameChanged(changes.name?.currentValue, changes.name?.isFirstChange()); + this.nameChanged(changes['name']?.currentValue, changes['name']?.isFirstChange()); } } } - it('invokes ngOnInit on initial render', async () => { - const nameInitialized = jest.fn(); + test('invokes ngOnInit on initial render', async () => { + const nameInitialized = vi.fn(); const componentProperties = { nameInitialized }; const view = await render(FixtureWithNgOnChangesComponent, { componentProperties }); @@ -364,9 +365,9 @@ describe('Angular component life-cycle hooks', () => { expect(nameInitialized).toHaveBeenCalledWith('Initial'); }); - it('invokes ngOnChanges with componentProperties on initial render before ngOnInit', async () => { - const nameInitialized = jest.fn(); - const nameChanged = jest.fn(); + test('invokes ngOnChanges with componentProperties on initial render before ngOnInit', async () => { + const nameInitialized = vi.fn(); + const nameChanged = vi.fn(); const componentProperties = { nameInitialized, nameChanged, name: 'Sarah' }; const view = await render(FixtureWithNgOnChangesComponent, { componentProperties }); @@ -380,9 +381,9 @@ describe('Angular component life-cycle hooks', () => { expect(nameChanged).toHaveBeenCalledTimes(1); }); - it('invokes ngOnChanges with componentInputs on initial render before ngOnInit', async () => { - const nameInitialized = jest.fn(); - const nameChanged = jest.fn(); + test('invokes ngOnChanges with componentInputs on initial render before ngOnInit', async () => { + const nameInitialized = vi.fn(); + const nameChanged = vi.fn(); const componentInput = { nameInitialized, nameChanged, name: 'Sarah' }; const view = await render(FixtureWithNgOnChangesComponent, { componentInputs: componentInput }); @@ -396,7 +397,7 @@ describe('Angular component life-cycle hooks', () => { expect(nameChanged).toHaveBeenCalledTimes(1); }); - it('does not invoke ngOnChanges when no properties are provided', async () => { + test('does not invoke ngOnChanges when no properties are provided', async () => { @Component({ template: `` }) class TestFixtureComponent implements OnChanges { ngOnChanges() { @@ -405,7 +406,7 @@ describe('Angular component life-cycle hooks', () => { } const { fixture, detectChanges } = await render(TestFixtureComponent); - const spy = jest.spyOn(fixture.componentInstance, 'ngOnChanges'); + const spy = vi.spyOn(fixture.componentInstance, 'ngOnChanges'); detectChanges(); @@ -414,8 +415,8 @@ describe('Angular component life-cycle hooks', () => { }); describe('initializer', () => { - it('waits for angular app initialization before rendering components', async () => { - const mock = jest.fn(); + test('waits for angular app initialization before rendering components', async () => { + const mock = vi.fn(); await render(FixtureComponent, { providers: [ @@ -433,7 +434,7 @@ describe('initializer', () => { }); describe('DebugElement', () => { - it('gets the DebugElement', async () => { + test('gets the DebugElement', async () => { const view = await render(FixtureComponent); expect(view.debugElement).not.toBeNull(); @@ -464,7 +465,7 @@ describe('initialRoute', () => { } } - it('allows initially rendering a specific route to avoid triggering a resolver for the default route', async () => { + test('allows initially rendering a specific route to avoid triggering a resolver for the default route', async () => { const initialRoute = 'initial-route'; const routes = [ { path: initialRoute, component: FixtureComponent }, @@ -483,16 +484,18 @@ describe('initialRoute', () => { expect(screen.getByText('button')).toBeInTheDocument(); }); - it('allows initially rendering a specific route with query parameters', async () => { + test('allows initially rendering a specific route with query parameters', async () => { @Component({ selector: 'atl-query-param-fixture', template: `

paramPresent$: {{ paramPresent$ | async }}

`, - imports: [NgIf, AsyncPipe], + imports: [AsyncPipe], }) class QueryParamFixtureComponent { private readonly route = inject(ActivatedRoute); - paramPresent$ = this.route.queryParams.pipe(map((queryParams) => (queryParams?.param ? 'present' : 'missing'))); + paramPresent$ = this.route.queryParams.pipe( + map((queryParams) => (queryParams?.['param'] ? 'present' : 'missing')), + ); } const initialRoute = 'initial-route?param=query'; @@ -508,8 +511,8 @@ describe('initialRoute', () => { }); describe('configureTestBed', () => { - it('invokes configureTestBed', async () => { - const configureTestBedFn = jest.fn(); + test('invokes configureTestBed', async () => { + const configureTestBedFn = vi.fn(); await render(FixtureComponent, { configureTestBed: configureTestBedFn, }); @@ -529,7 +532,7 @@ describe('inputs and signals', () => { myJob = input('bar', { alias: 'job' }); } - it('should set the input component', async () => { + test('should set the input component', async () => { await render(InputComponent, { inputs: { myName: 'Bob', @@ -541,7 +544,7 @@ describe('inputs and signals', () => { expect(screen.getByText('Builder')).toBeInTheDocument(); }); - it('should typecheck correctly', async () => { + test('should typecheck correctly', async () => { // we only want to check the types here // so we are purposely not calling render @@ -609,7 +612,7 @@ describe('README examples', () => { } } - it('should render counter', async () => { + test('should render counter', async () => { await render(CounterComponent, { inputs: { counter: 5, @@ -621,7 +624,7 @@ describe('README examples', () => { expect(screen.getByText('Hello Alias!')).toBeVisible(); }); - it('should increment the counter on click', async () => { + test('should increment the counter on click', async () => { await render(CounterComponent, { inputs: { counter: 5 } }); const incrementButton = screen.getByRole('button', { name: '+' }); diff --git a/projects/testing-library/tests/rerender.spec.ts b/projects/testing-library/src/tests/rerender.spec.ts similarity index 97% rename from projects/testing-library/tests/rerender.spec.ts rename to projects/testing-library/src/tests/rerender.spec.ts index 04b8185a..ab86869f 100644 --- a/projects/testing-library/tests/rerender.spec.ts +++ b/projects/testing-library/src/tests/rerender.spec.ts @@ -1,7 +1,8 @@ import { Component, Input, OnChanges, SimpleChanges } from '@angular/core'; -import { render, screen } from '../src/public_api'; +import { vi, test, afterEach } from 'vitest'; +import { render, screen } from '../public_api'; -let ngOnChangesSpy: jest.Mock; +const ngOnChangesSpy = vi.fn(); @Component({ selector: 'atl-fixture', template: ` {{ firstName }} {{ lastName }} `, @@ -14,8 +15,8 @@ class FixtureComponent implements OnChanges { } } -beforeEach(() => { - ngOnChangesSpy = jest.fn(); +afterEach(() => { + ngOnChangesSpy.mockReset(); }); test('rerenders the component with updated props', async () => { diff --git a/projects/testing-library/jest-utils/tests/create-mock.spec.ts b/projects/testing-library/src/tests/vitest-utils/create-mock.spec.ts similarity index 84% rename from projects/testing-library/jest-utils/tests/create-mock.spec.ts rename to projects/testing-library/src/tests/vitest-utils/create-mock.spec.ts index c20109b6..15d11631 100644 --- a/projects/testing-library/jest-utils/tests/create-mock.spec.ts +++ b/projects/testing-library/src/tests/vitest-utils/create-mock.spec.ts @@ -1,8 +1,8 @@ import { Component, inject } from '@angular/core'; import { TestBed } from '@angular/core/testing'; -import { fireEvent, render, screen } from '@testing-library/angular'; - -import { createMock, provideMock, provideMockWithValues, Mock } from '../src/public_api'; +import { test, expect, vi } from 'vitest'; +import { fireEvent, render, screen } from '../../public_api'; +import { createMock, provideMock, provideMockWithValues } from '../../../vitest-utils'; class FixtureService { constructor(private foo: string, public bar: string) {} @@ -48,7 +48,7 @@ test('provides a mock service with values', async () => { providers: [ provideMockWithValues(FixtureService, { bar: 'value', - concat: jest.fn(() => 'a concatenated value'), + concat: vi.fn(() => 'a concatenated value'), }), ], }); @@ -67,7 +67,7 @@ test('is possible to write a mock implementation', async () => { providers: [provideMock(FixtureService)], }); - const service = TestBed.inject(FixtureService) as Mock; + const service = TestBed.inject(FixtureService); fireEvent.click(screen.getByText('Print')); expect(service.print).toHaveBeenCalled(); diff --git a/projects/testing-library/tests/wait-for-element-to-be-removed.spec.ts b/projects/testing-library/src/tests/wait-for-element-to-be-removed.spec.ts similarity index 90% rename from projects/testing-library/tests/wait-for-element-to-be-removed.spec.ts rename to projects/testing-library/src/tests/wait-for-element-to-be-removed.spec.ts index 64d6c356..5e11453e 100644 --- a/projects/testing-library/tests/wait-for-element-to-be-removed.spec.ts +++ b/projects/testing-library/src/tests/wait-for-element-to-be-removed.spec.ts @@ -1,6 +1,7 @@ import { Component, OnInit } from '@angular/core'; -import { render, screen, waitForElementToBeRemoved } from '../src/public_api'; +import { render, screen, waitForElementToBeRemoved } from '../public_api'; import { timer } from 'rxjs'; +import { test, expect } from 'vitest'; import { NgIf } from '@angular/common'; @Component({ diff --git a/projects/testing-library/tests/wait-for.spec.ts b/projects/testing-library/src/tests/wait-for.spec.ts similarity index 90% rename from projects/testing-library/tests/wait-for.spec.ts rename to projects/testing-library/src/tests/wait-for.spec.ts index 8c6562f0..b8b841d6 100644 --- a/projects/testing-library/tests/wait-for.spec.ts +++ b/projects/testing-library/src/tests/wait-for.spec.ts @@ -1,6 +1,7 @@ import { Component } from '@angular/core'; import { timer } from 'rxjs'; -import { render, screen, waitFor, fireEvent } from '../src/public_api'; +import { test } from 'vitest'; +import { render, screen, waitFor, fireEvent } from '../public_api'; @Component({ selector: 'atl-fixture', diff --git a/projects/testing-library/test-setup.ts b/projects/testing-library/test-setup.ts index be311bfe..7b0828bf 100644 --- a/projects/testing-library/test-setup.ts +++ b/projects/testing-library/test-setup.ts @@ -1,7 +1 @@ -import { setupZoneTestEnv } from 'jest-preset-angular/setup-env/zone'; import '@testing-library/jest-dom'; -import { TextEncoder, TextDecoder } from 'util'; - -setupZoneTestEnv(); - -Object.assign(global, { TextDecoder, TextEncoder }); diff --git a/projects/testing-library/tests/config.spec.ts b/projects/testing-library/tests/config.spec.ts deleted file mode 100644 index 7783961a..00000000 --- a/projects/testing-library/tests/config.spec.ts +++ /dev/null @@ -1,51 +0,0 @@ -import { Component, inject } from '@angular/core'; -import { TestBed } from '@angular/core/testing'; -import { render, configure, Config } from '../src/public_api'; -import { ReactiveFormsModule, FormBuilder } from '@angular/forms'; - -@Component({ - selector: 'atl-fixture', - template: ` -
-
- - -
-
- `, - standalone: false, -}) -class FormsComponent { - private formBuilder = inject(FormBuilder); - form = this.formBuilder.group({ - name: [''], - }); -} - -let originalConfig: Config; -beforeEach(() => { - // Grab the existing configuration so we can restore - // it at the end of the test - configure((existingConfig) => { - originalConfig = existingConfig as Config; - // Don't change the existing config - return {}; - }); -}); - -afterEach(() => { - configure(originalConfig); -}); - -beforeEach(() => { - configure({ - defaultImports: [ReactiveFormsModule], - }); -}); - -test('adds default imports to the testbed', async () => { - await render(FormsComponent); - - const reactive = TestBed.inject(ReactiveFormsModule); - expect(reactive).not.toBeNull(); -}); diff --git a/projects/testing-library/tests/issues/issue-398-component-without-host-id.spec.ts b/projects/testing-library/tests/issues/issue-398-component-without-host-id.spec.ts deleted file mode 100644 index c775a2ab..00000000 --- a/projects/testing-library/tests/issues/issue-398-component-without-host-id.spec.ts +++ /dev/null @@ -1,22 +0,0 @@ -import { Component } from '@angular/core'; -import { render, screen } from '../../src/public_api'; - -test('should create the app', async () => { - await render(FixtureComponent); - expect(screen.getByRole('heading')).toBeInTheDocument(); -}); - -test('should re-create the app', async () => { - await render(FixtureComponent); - expect(screen.getByRole('heading')).toBeInTheDocument(); -}); - -@Component({ - selector: 'atl-fixture', - standalone: true, - template: '

My title

', - host: { - '[attr.id]': 'null', // this breaks the cleaning up of tests - }, -}) -class FixtureComponent {} diff --git a/projects/testing-library/tsconfig.json b/projects/testing-library/tsconfig.json index 21a2b8ef..ec26b3b9 100644 --- a/projects/testing-library/tsconfig.json +++ b/projects/testing-library/tsconfig.json @@ -1,5 +1,5 @@ { - "extends": "../../tsconfig.base.json", + "extends": "../../tsconfig.json", "files": [], "include": [], "references": [ diff --git a/projects/testing-library/tsconfig.lib.json b/projects/testing-library/tsconfig.lib.json index 0938741e..2d313ca8 100644 --- a/projects/testing-library/tsconfig.lib.json +++ b/projects/testing-library/tsconfig.lib.json @@ -9,6 +9,6 @@ "target": "ES2022", "useDefineForClassFields": false }, - "exclude": ["src/test-setup.ts", "**/*.spec.ts", "**/*.test.ts", "jest.config.ts"], + "exclude": ["src/test-setup.ts", "**/*.spec.ts", "**/*.test.ts"], "include": ["**/*.ts"] } diff --git a/projects/testing-library/tsconfig.lib.prod.json b/projects/testing-library/tsconfig.lib.prod.json index 752ed5ea..44ea1469 100644 --- a/projects/testing-library/tsconfig.lib.prod.json +++ b/projects/testing-library/tsconfig.lib.prod.json @@ -8,5 +8,5 @@ "angularCompilerOptions": { "compilationMode": "partial" }, - "exclude": ["src/test-setup.ts", "**/*.spec.ts", "**/*.test.ts", "jest.config.ts"] + "exclude": ["src/test-setup.ts", "**/*.spec.ts", "**/*.test.ts"] } diff --git a/projects/testing-library/tsconfig.schematics.json b/projects/testing-library/tsconfig.schematics.json index c0118513..4a68d7a4 100644 --- a/projects/testing-library/tsconfig.schematics.json +++ b/projects/testing-library/tsconfig.schematics.json @@ -1,5 +1,5 @@ { - "extends": "../../tsconfig.base.json", + "extends": "../../tsconfig.json", "compilerOptions": { "strict": true, "target": "ES2020", @@ -14,5 +14,5 @@ "sourceMap": false }, "include": ["schematics/**/*.ts"], - "exclude": ["src/test-setup.ts", "**/*.spec.ts", "**/*.test.ts", "jest.config.ts"] + "exclude": ["src/test-setup.ts", "**/*.spec.ts", "**/*.test.ts"] } diff --git a/projects/testing-library/tsconfig.spec.json b/projects/testing-library/tsconfig.spec.json index 9fee53b3..ec2f2c0d 100644 --- a/projects/testing-library/tsconfig.spec.json +++ b/projects/testing-library/tsconfig.spec.json @@ -1,9 +1,9 @@ { "extends": "./tsconfig.json", "compilerOptions": { - "module": "commonjs", - "types": ["node", "jest", "@testing-library/jest-dom"] + "types": ["node"], + "target": "ES2022", + "useDefineForClassFields": false }, - "files": ["test-setup.ts"], - "include": ["**/*.spec.ts", "**/*.test.ts", "**/*.d.ts", "jest.config.ts"] + "include": ["**/*.ts"] } diff --git a/projects/testing-library/vitest-utils/index.ts b/projects/testing-library/vitest-utils/index.ts new file mode 100644 index 00000000..decc72d8 --- /dev/null +++ b/projects/testing-library/vitest-utils/index.ts @@ -0,0 +1 @@ +export * from './src/public_api'; diff --git a/projects/testing-library/vitest-utils/ng-package.json b/projects/testing-library/vitest-utils/ng-package.json new file mode 100644 index 00000000..0967ef42 --- /dev/null +++ b/projects/testing-library/vitest-utils/ng-package.json @@ -0,0 +1 @@ +{} diff --git a/projects/testing-library/vitest-utils/src/lib/create-mock.ts b/projects/testing-library/vitest-utils/src/lib/create-mock.ts new file mode 100644 index 00000000..702feab6 --- /dev/null +++ b/projects/testing-library/vitest-utils/src/lib/create-mock.ts @@ -0,0 +1,55 @@ +import { Type, Provider } from '@angular/core'; +import { vi, type Mock as VitestMock } from 'vitest'; + +export type Mock = T & { [K in keyof T]: T[K] & VitestMock }; + +export function createMock(type: Type): Mock { + const mock: any = {}; + + function mockFunctions(proto: any) { + if (!proto) { + return; + } + + for (const prop of Object.getOwnPropertyNames(proto)) { + if (prop === 'constructor') { + continue; + } + + const descriptor = Object.getOwnPropertyDescriptor(proto, prop); + if (typeof descriptor?.value === 'function') { + mock[prop] = vi.fn(); + } + } + + mockFunctions(Object.getPrototypeOf(proto)); + } + + mockFunctions(type.prototype); + + return mock; +} + +export function createMockWithValues(type: Type, values: Partial>): Mock { + const mock = createMock(type); + + Object.entries(values).forEach(([field, value]) => { + (mock as any)[field] = value; + }); + + return mock; +} + +export function provideMock(type: Type): Provider { + return { + provide: type, + useValue: createMock(type), + }; +} + +export function provideMockWithValues(type: Type, values: Partial>): Provider { + return { + provide: type, + useValue: createMockWithValues(type, values), + }; +} diff --git a/projects/testing-library/vitest-utils/src/lib/index.ts b/projects/testing-library/vitest-utils/src/lib/index.ts new file mode 100644 index 00000000..5c7715e0 --- /dev/null +++ b/projects/testing-library/vitest-utils/src/lib/index.ts @@ -0,0 +1 @@ +export * from './create-mock'; diff --git a/projects/testing-library/vitest-utils/src/public_api.ts b/projects/testing-library/vitest-utils/src/public_api.ts new file mode 100644 index 00000000..a0e30064 --- /dev/null +++ b/projects/testing-library/vitest-utils/src/public_api.ts @@ -0,0 +1,5 @@ +/* + * Public API Surface of testing-library + */ + +export * from './lib'; diff --git a/release.config.js b/release.config.js deleted file mode 100644 index 3bf46c17..00000000 --- a/release.config.js +++ /dev/null @@ -1,4 +0,0 @@ -module.exports = { - pkgRoot: 'dist/@testing-library/angular', - branches: ['main', { name: 'beta', prerelease: true }], -}; diff --git a/tsconfig.base.json b/tsconfig.base.json deleted file mode 100644 index b75283e1..00000000 --- a/tsconfig.base.json +++ /dev/null @@ -1,30 +0,0 @@ -{ - "compileOnSave": false, - "compilerOptions": { - "baseUrl": "./", - "declaration": false, - "emitDecoratorMetadata": true, - "experimentalDecorators": true, - "importHelpers": true, - "lib": ["es2018", "dom"], - "module": "esnext", - "moduleResolution": "node", - "outDir": "./dist/out-tsc", - "sourceMap": true, - "target": "ES2020", - "typeRoots": ["node_modules/@types"], - "strict": true, - "exactOptionalPropertyTypes": true, - "forceConsistentCasingInFileNames": true, - "noImplicitOverride": true, - "noFallthroughCasesInSwitch": true, - "noImplicitReturns": true, - "noUnusedLocals": true, - "noUnusedParameters": true, - "paths": { - "@testing-library/angular": ["projects/testing-library"], - "@testing-library/angular/jest-utils": ["projects/testing-library/jest-utils"] - } - }, - "exclude": ["node_modules", "tmp"] -} diff --git a/tsconfig.json b/tsconfig.json new file mode 100644 index 00000000..913e4fc2 --- /dev/null +++ b/tsconfig.json @@ -0,0 +1,30 @@ +{ + "compileOnSave": false, + "compilerOptions": { + "baseUrl": "./", + "outDir": "./dist/out-tsc", + "forceConsistentCasingInFileNames": true, + "strict": true, + "noImplicitOverride": true, + "noPropertyAccessFromIndexSignature": true, + "noImplicitReturns": true, + "noFallthroughCasesInSwitch": true, + "sourceMap": true, + "declaration": false, + "experimentalDecorators": true, + "importHelpers": true, + "target": "es2022", + "module": "preserve", + "moduleResolution": "bundler", + "lib": ["es2022", "dom"], + "useDefineForClassFields": false, + "noUnusedLocals": true, + "noUnusedParameters": true + }, + "angularCompilerOptions": { + "enableI18nLegacyMessageIdFormat": false, + "strictInjectionParameters": true, + "strictInputAccessModifiers": true, + "strictTemplates": true + } +} diff --git a/tsconfig.spec.json b/tsconfig.spec.json new file mode 100644 index 00000000..3e057c03 --- /dev/null +++ b/tsconfig.spec.json @@ -0,0 +1,8 @@ +{ + "extends": "./tsconfig.json", + "compilerOptions": { + "outDir": "./out-tsc/spec", + "types": ["node"] + }, + "include": ["src/**/*.ts"] +}