diff --git a/.all-contributorsrc b/.all-contributorsrc index 246da3d8..d153d31e 100644 --- a/.all-contributorsrc +++ b/.all-contributorsrc @@ -352,6 +352,15 @@ "contributions": [ "code" ] + }, + { + "login": "Steven-Harris", + "name": "Steven Harris", + "avatar_url": "https://avatars3.githubusercontent.com/u/7720242?s=400&v=4", + "profile": "https://stevenharrisdev.com", + "contributions": [ + "code" + ] } ] } diff --git a/CONTRIBUTING.md b/CONTRIBUTING.md index 361310a6..4e576455 100644 --- a/CONTRIBUTING.md +++ b/CONTRIBUTING.md @@ -33,7 +33,7 @@ If you want to test your changes in an app that consumes Spectator, you can do t `cd` to the library build output directory: ```bash -cd projects/spectator/dist +cd dist ``` Tell `npm` to use this package when asked to `link`: @@ -53,7 +53,7 @@ npm link @ngneat/spectator Run tests while preserving symlinks: ``` -ng test --preserveSymlinks +ng test --preserve-symlinks ``` # Committing changes diff --git a/README.md b/README.md index 89b02712..57f418b8 100644 --- a/README.md +++ b/README.md @@ -31,22 +31,31 @@ Spectator helps you get rid of all the boilerplate grunt work, leaving you with ## Table of Contents - [Installation](#installation) + - [NPM](#npm) + - [Yarn](#yarn) - [Testing Components](#testing-components) - [Events API](#events-api) + - [Custom Events](#custom-events) - [Keyboard helpers](#keyboard-helpers) - [Mouse helpers](#mouse-helpers) - [Queries](#queries) - [String Selector](#string-selector) - [Type Selector](#type-selector) - [DOM Selector](#dom-selector) - - [Mocking Components](#mocking-components) - - [Testing SCAM](#testing-single-component-angular-modules) + - [Testing Select Elements](#testing-select-elements) + - [Mocking Components](#mocking-components) + - [Testing Single Component/Directive Angular Modules](#testing-single-componentdirective-angular-modules) - [Testing with Host](#testing-with-host) - [Custom Host Component](#custom-host-component) - [Testing with Routing](#testing-with-routing) + - [Triggering a navigation](#triggering-a-navigation) + - [Integration testing with `RouterTestingModule`](#integration-testing-with-routertestingmodule) + - [Routing Options](#routing-options) - [Testing Directives](#testing-directives) - [Testing Services](#testing-services) + - [Additional Options](#additional-options) - [Testing Pipes](#testing-pipes) + - [Using Custom Host Component](#using-custom-host-component) - [Mocking Providers](#mocking-providers) - [Jest Support](#jest-support) - [Testing with HTTP](#testing-with-http) @@ -54,6 +63,9 @@ Spectator helps you get rid of all the boilerplate grunt work, leaving you with - [Component Providers](#component-providers) - [Custom Matchers](#custom-matchers) - [Schematics](#schematics) +- [Default Schematics Collection](#default-schematics-collection) +- [Core Team](#core-team) +- [Contributors](#contributors) ## Installation @@ -380,9 +392,9 @@ const createHost = createHostFactory({ }); ``` -#### Testing Single Component Angular Modules +#### Testing Single Component/Directive Angular Modules -Components that are declared in their own module can be tested by defining the component +Components (or Directives) that are declared in their own module can be tested by defining the component module in the imports list of the component factory together with the component. For example: ```ts @@ -408,6 +420,18 @@ const createComponent = createComponentFactory({ }); ``` +When using createDirectiveFactory set the `declareDirective` property of the factory options to `false`: + +```ts +const createDirective = createDirectiveFactory({ + component: HighlightComponent, + imports: [HighlightComponentModule], + declareDirective: false, +}); +``` + + + ## Testing with Host Testing a component with a host component is a more elegant and powerful technique to test your component. It basically gives you the ability to write your tests in the same way that you write your code. Let's see it in action: diff --git a/projects/spectator/jest/test/auto-focus.directive.spec.ts b/projects/spectator/jest/test/auto-focus.directive.spec.ts index 91962a22..42c791fe 100644 --- a/projects/spectator/jest/test/auto-focus.directive.spec.ts +++ b/projects/spectator/jest/test/auto-focus.directive.spec.ts @@ -1,7 +1,7 @@ import { Component } from '@angular/core'; -import { SpectatorHost, createHostFactory, createDirectiveFactory, SpectatorDirective } from '@ngneat/spectator/jest'; +import { createDirectiveFactory, createHostFactory, SpectatorDirective, SpectatorHost } from '@ngneat/spectator/jest'; -import { AutoFocusDirective } from '../../test/auto-focus.directive'; +import { AutoFocusDirective } from '../../test/auto-focus/auto-focus.directive'; @Component({ selector: 'custom-host', template: '' }) class CustomHostComponent { diff --git a/projects/spectator/src/lib/spectator-directive/initial-module.ts b/projects/spectator/src/lib/spectator-directive/initial-module.ts index 4a8d0479..86e457e3 100644 --- a/projects/spectator/src/lib/spectator-directive/initial-module.ts +++ b/projects/spectator/src/lib/spectator-directive/initial-module.ts @@ -1,7 +1,6 @@ import { NO_ERRORS_SCHEMA } from '@angular/core'; import { initialModule, ModuleMetadata } from '../base/initial-module'; - import { SpectatorDirectiveOptions } from './options'; /** @@ -10,7 +9,9 @@ import { SpectatorDirectiveOptions } from './options'; export function initialSpectatorDirectiveModule(options: Required>): ModuleMetadata { const moduleMetadata = initialModule(options); - moduleMetadata.declarations.push(options.directive); + if (options.declareDirective) { + moduleMetadata.declarations.push(options.directive); + } moduleMetadata.declarations.push(options.host); moduleMetadata.schemas = [options.shallow ? NO_ERRORS_SCHEMA : options.schemas || []]; diff --git a/projects/spectator/src/lib/spectator-directive/options.ts b/projects/spectator/src/lib/spectator-directive/options.ts index dd6a7700..f043fa6f 100644 --- a/projects/spectator/src/lib/spectator-directive/options.ts +++ b/projects/spectator/src/lib/spectator-directive/options.ts @@ -1,9 +1,9 @@ -import { Type, Provider } from '@angular/core'; +import { Provider, Type } from '@angular/core'; -import { merge } from '../internals/merge'; -import { OptionalsRequired } from '../types'; import { BaseSpectatorOptions, getDefaultBaseOptions } from '../base/options'; +import { merge } from '../internals/merge'; import { HostComponent } from '../spectator-host/host-component'; +import { OptionalsRequired } from '../types'; /** * @publicApi @@ -16,6 +16,7 @@ export interface SpectatorDirectiveOptions extends BaseSpectatorOptions { template?: string; directiveProviders?: Provider[]; directiveMocks?: Type[]; + declareDirective?: boolean; } const defaultSpectatorRoutingOptions: OptionalsRequired> = { @@ -25,7 +26,8 @@ const defaultSpectatorRoutingOptions: OptionalsRequired { + let spectator: SpectatorDirective; + + const createDirective = createDirectiveFactory({ + directive: AutoFocusDirective, + imports: [AutoFocusModule], + declareDirective: false + }); + + it('should be declare AutoFocusDirective', () => { + spectator = createDirective(``); + expect(spectator.directive).toBeDefined(); + }); +}); diff --git a/projects/spectator/test/auto-focus/auto-focus.module.ts b/projects/spectator/test/auto-focus/auto-focus.module.ts new file mode 100644 index 00000000..8fbd952f --- /dev/null +++ b/projects/spectator/test/auto-focus/auto-focus.module.ts @@ -0,0 +1,11 @@ +import { CommonModule } from '@angular/common'; +import { NgModule } from '@angular/core'; + +import { AutoFocusDirective } from './auto-focus.directive'; + +@NgModule({ + imports: [CommonModule], + declarations: [AutoFocusDirective], + exports: [AutoFocusDirective] +}) +export class AutoFocusModule {}