Skip to content

Commit

Permalink
feat: declareDirective support (#304)
Browse files Browse the repository at this point in the history
  • Loading branch information
Steven-Harris authored May 9, 2020
1 parent 26517a4 commit 2032619
Show file tree
Hide file tree
Showing 11 changed files with 87 additions and 21 deletions.
9 changes: 9 additions & 0 deletions .all-contributorsrc
Original file line number Diff line number Diff line change
Expand Up @@ -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"
]
}
]
}
4 changes: 2 additions & 2 deletions CONTRIBUTING.md
Original file line number Diff line number Diff line change
Expand Up @@ -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`:
Expand All @@ -53,7 +53,7 @@ npm link @ngneat/spectator
Run tests while preserving symlinks:

```
ng test --preserveSymlinks
ng test --preserve-symlinks
```

# Committing changes
Expand Down
32 changes: 28 additions & 4 deletions README.md
Original file line number Diff line number Diff line change
Expand Up @@ -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

Expand Down Expand Up @@ -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
Expand All @@ -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:
Expand Down
4 changes: 2 additions & 2 deletions projects/spectator/jest/test/auto-focus.directive.spec.ts
Original file line number Diff line number Diff line change
@@ -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 {
Expand Down
Original file line number Diff line number Diff line change
@@ -1,7 +1,6 @@
import { NO_ERRORS_SCHEMA } from '@angular/core';

import { initialModule, ModuleMetadata } from '../base/initial-module';

import { SpectatorDirectiveOptions } from './options';

/**
Expand All @@ -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 || []];
Expand Down
10 changes: 6 additions & 4 deletions projects/spectator/src/lib/spectator-directive/options.ts
Original file line number Diff line number Diff line change
@@ -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
Expand All @@ -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>> = {
Expand All @@ -25,7 +26,8 @@ const defaultSpectatorRoutingOptions: OptionalsRequired<SpectatorDirectiveOption
shallow: false,
detectChanges: true,
directiveProviders: [],
directiveMocks: []
directiveMocks: [],
declareDirective: true
};

/**
Expand Down
14 changes: 7 additions & 7 deletions projects/spectator/test/app.module.ts
Original file line number Diff line number Diff line change
Expand Up @@ -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: [
Expand Down
19 changes: 19 additions & 0 deletions projects/spectator/test/auto-focus/auto-focus.module.spec.ts
Original file line number Diff line number Diff line change
@@ -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();
});
});
11 changes: 11 additions & 0 deletions projects/spectator/test/auto-focus/auto-focus.module.ts
Original file line number Diff line number Diff line change
@@ -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 {}

0 comments on commit 2032619

Please sign in to comment.