Forms Unit Testing

[alvinleonard]

Hi @lathonez, first of all I want to say awesome stuff on the Unit Testing Ionic 2 blog: http://lathonez.github.io/2016/ionic-2-unit-testing/.

I had a look at your Clicker demo, in particular the Forms component and how it can be unit/integration tested. There is one particular line there which intrigues me:

@Component({
  changeDetection: ChangeDetectionStrategy.OnPush,
  selector: 'clicker-form',
  templateUrl: 'build/components/clickerForm/clickerForm.html',
  directives: [TextInput, FORM_DIRECTIVES, REACTIVE_FORM_DIRECTIVES],
})

I'd like to ask if there's more details about the directives that is passed through to the Component. This line resolves my error below but I'd like to know how as I could not find any documentation on Angular 2 side.

FAILED TESTS:
  LoginForm
    ✖ initialises
      PhantomJS 2.1.1 (Mac OS X 0.0.0)
    Failed: Template parse errors:
    There is no directive with "exportAs" set to "ngModel" ("orm" novalidate>
        <ion-item>
          <ion-input [(ngModel)]="login.email" name="email" type="text" [ERROR ->]#email="ngModel" spellcheck="false"
                     autocapitalize="off" placeholder="Email" require"): LoginPage@14:68

[lathonez]

Hey,

Thanks for the kind words.

Yeah, this was an absolute pain, it all started when we took the RC4 forms. For full background see #126

The summarising comment is here: #126 (comment)

TL;dr - when we bootstrap the app we set up forms:

ionicBootstrap(ClickerApp, [
  disableDeprecatedForms(),
  provideForms(),

This also appears to set up what we need for directives too. I don't know how this happens, it's just what I've observed from digging. I'd love to find some further reading on it but I've not had any luck so far.

When we're unit testing there's no bootstrapping, everything is tested in isolation, so we have to put some extra mileage in to get the forms to work.

I've not found that I need to pass FORM_DIRECTIVES or REACTIVE_FORM_DIRECTIVES through to my components to get them to work at run time, only during testing, which is where I draw these conclusions from.

Sorry this isn't more helpful.

[alvinleonard]

Yeah, ionicBootstrap() internally loads all the directives from https://github.com/driftyco/ionic/blob/master/src/config/directives.ts.

A bit reluctant to add extra code just to make tests work, but I guess we have to for now.

[lathonez]

I guess the alternative is calling ionicBootatrap for every relevant unit
test?

On 12 Sep 2016 15:22, "Alvin Leonard" [email protected] wrote:

Yeah, ionicBootstrap() internally loads all the directives from
https://github.com/driftyco/ionic/blob/master/src/config/directives.ts.

A bit reluctant to add extra code just to make tests work, but I guess we
have to for now.

—
You are receiving this because you were mentioned.
Reply to this email directly, view it on GitHub
#146 (comment),
or mute the thread
https://github.com/notifications/unsubscribe-auth/AG5tSG_pB4aWPnqr72K5w9aADBIcmJNYks5qpOGvgaJpZM4J6LuY
.

[alvinleonard]

Yeah that would be the alternative. :)

[alvinleonard]

Thanks for the feedback @lathonez. Closing this thread now. :)

[lathonez]

#191