feat: declareDirective support (#304)

.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"
+      ]
     }
   ]
 }

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

README.md

@@ -31,29 +31,41 @@ 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)
 - [Global Injections](#global-injections)
 - [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:

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 {

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<D, H>(options: Required<SpectatorDirectiveOptions<D, H>>): 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 || []];

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<D, H> extends BaseSpectatorOptions {
   template?: string;
   directiveProviders?: Provider[];
   directiveMocks?: Type<any>[];
+  declareDirective?: boolean;
 }
 
 const defaultSpectatorRoutingOptions: OptionalsRequired<SpectatorDirectiveOptions<any, any>> = {
@@ -25,7 +26,8 @@ const defaultSpectatorRoutingOptions: OptionalsRequired<SpectatorDirectiveOption
   shallow: false,
   detectChanges: true,
   directiveProviders: [],
-  directiveMocks: []
+  directiveMocks: [],
+  declareDirective: true
 };
 
 /**

projects/spectator/test/app.module.ts

@@ -6,31 +6,31 @@ import { BrowserModule } from '@angular/platform-browser';
 import { AppComponent } from './app.component';
 import { AsyncInputComponent } from './async-input/async-input.component';
 import { AsyncComponent } from './async/async.component';
-import { AutoFocusDirective } from './auto-focus.directive';
+import { AutoFocusDirective } from './auto-focus/auto-focus.directive';
 import { ButtonComponent } from './button/button.component';
-import { CalcComponent } from './calc/calc.component';
 import { CalcTextAreaComponent } from './calc-textarea/calc-textarea.component';
+import { CalcComponent } from './calc/calc.component';
+import { ChildCustomEventModule } from './child-custom-event/child-custom-event.module';
 import { ChildServiceService } from './child-service.service';
 import { ChildComponent } from './child/child.component';
 import { ClickComponent } from './click/click.component';
 import { ConsumeDynamicComponent } from './consum-dynamic/consume-dynamic.component';
 import { DomSelectorsComponent } from './dom-selectors/dom-selectors.component';
 import { DynamicComponent } from './dynamic/dynamic.component';
+import { EventsComponent } from './events/events.component';
 import { FgComponent } from './fg/fg.component';
+import { FormInputComponent } from './form-input/form-input.component';
 import { HelloComponent } from './hello/hello.component';
 import { HighlightDirective } from './highlight.directive';
+import { IntegrationModule } from './integration/integration.module';
 import { ComponentWithoutOverwrittenProvidersComponent } from './no-overwritten-providers/no-overwritten-providers.component';
+import { TranslatePipe } from './translate.pipe';
 import { AppUnlessDirective } from './unless/unless.component';
 import { ViewChildrenComponent } from './view-children/view-children.component';
 import { WidgetDataService } from './widget-data.service';
 import { WidgetService } from './widget.service';
 import { WidgetComponent } from './widget/widget.component';
 import { ZippyComponent } from './zippy/zippy.component';
-import { FormInputComponent } from './form-input/form-input.component';
-import { IntegrationModule } from './integration/integration.module';
-import { TranslatePipe } from './translate.pipe';
-import { EventsComponent } from './events/events.component';
-import { ChildCustomEventModule } from './child-custom-event/child-custom-event.module';
 
 @NgModule({
   declarations: [

projects/spectator/test/auto-focus/auto-focus.module.spec.ts

@@ -0,0 +1,19 @@
+import { createDirectiveFactory, SpectatorDirective } from '@ngneat/spectator';
+
+import { AutoFocusDirective } from './auto-focus.directive';
+import { AutoFocusModule } from './auto-focus.module';
+
+describe('AutoFocusDirectiveModule', () => {
+  let spectator: SpectatorDirective<AutoFocusDirective>;
+
+  const createDirective = createDirectiveFactory({
+    directive: AutoFocusDirective,
+    imports: [AutoFocusModule],
+    declareDirective: false
+  });
+
+  it('should be declare AutoFocusDirective', () => {
+    spectator = createDirective(`<input [datoAutoFocus]="false"/>`);
+    expect(spectator.directive).toBeDefined();
+  });
+});

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 {}