search

ngUpgraders / ng-forward

The default solution for those that want to write Angular 2.x style code in Angular 1.x
411 stars 36 forks source link

Add tests for TodoMVC examples #33

Open timkindberg opened 8 years ago

timkindberg commented 8 years ago

We need to add component tests to the todo mvc example that Pete made.

timkindberg commented 8 years ago

If anyone wants to take a stab at this in the ng-forward-playground repo, there are lots of good examples already in our ng-forward repo.

You would use the TestComponentBuilder class seen here: https://github.com/ngUpgraders/ng-forward/blob/master/src/tests/test-component-builder.js

You can see how you'd use it in a test here: https://github.com/ngUpgraders/ng-forward/blob/master/src/tests/utils.spec.js

TestComponentBuilder returns a "Root Test Component" which has the following structure: https://github.com/ngUpgraders/ng-forward/blob/master/src/tests/utils.spec.js#L125-L159

Every DebugElement is not only a full angular.element but also has the following methods for you to use as you see fit: https://github.com/ngUpgraders/ng-forward/blob/master/src/util/jqlite-extensions.js#L6-L33

That stuff all matches the Angular 2 test utils syntax. I can be available to help anyone willing to take this on.

kasperlewau commented 8 years ago

I'd love to take a stab at this!

kasperlewau commented 8 years ago

In terms of style, what do you reckon would be the preferred choice for specs? 

describe('...', () => {});
// or
describe('...', function () {});
// or? 
describe('...', function(){});

I'm all for numero uno, but I noticed that it and number three are currently in use in the ng-forward repo.

timkindberg commented 8 years ago

Thanks!! Número uno works.

kasperlewau commented 8 years ago

Alrighty so, I've hit a slight wall here when testing Components (TodoStore/Todo/Filters are done), I can't seem to grasp it just yet.

Here's what the setup looks like (in chunks): 

import {expect, sinon} from '../tests/frameworks';
import 'angular';
import 'angular-mocks';
import {providers, TestComponentBuilder} from '../../node_modules/ng-forward/dist/tests';
  context('component', () => {
    let tcl, component;

    beforeEach(() => {
      providers(provide => {
        return [
          provide('Filters', { useValue: ['a','b','c'] })
        ];
      });

      tcl = new TestComponentBuilder();
      component = tcl.create(FilterLinks);
    });
  });

So far, so good(?) I guess - with the major structural difference between the example you showed and the output in my specs; 

LOG: RootTestComponent{debugElement: Object{0: <filterlinks class="ng-scope"></filterlinks>, length: 1}, _rootTestScope: Scope{$$childTail: null, $$childHead: null, $$nextSibling: n
ull, $$watchers: null, $$listeners: Object{}, $$listenerCount: Object{}, $$watchersCount: 0, $id: 2, $$ChildScope: null, $parent: Scope{$id: ..., $$childTail: ..., $$childHead: ...,
 $$prevSibling: ..., $$nextSibling: ..., $$watchers: ..., $parent: ..., $$phase: ..., $root: ..., $$destroyed: ..., $$listeners: ..., $$listenerCount: ..., $$watchersCount: ..., $$i
solateBindings: ..., $$asyncQueue: ..., $$postDigestQueue: ..., $$applyAsyncQueue: ..., $$ChildScope: ...}, $$prevSibling: null}}

That output may not be saying much, but the two things I do have access to is debugElement and _rootTestScope. In my case, debugElement is lacking the following methods:

At this point in time, I haven't been able to figure out what is amiss. I feel like I'm either;

a) Importing something I shouldn't be into the suite. b) Not importing something I should be into the suite. c) Misunderstanding the usage of TCB/RTC (componentBuilder/rootComponent) to a great degree.

I noticed there was a helper in the tests directory, setting up a quickRootTestComponent - is that something that should be utilised so as to 'wrap' the component that you actually want to test? o.O

Full suite can be seen here: current progress And here's the implementation.

Any pointers? :smiley: @timkindberg

timkindberg commented 8 years ago

You are good on using angular, angular-mocks, and frameworks as duplicates in your testing. Those are really internal to ng-forward. The only things you should pull from ng-forward for testing is TestComponentBuilder and providers. I thought you could import then straight from 'ng-forward' instead of the deep path you have now.

Your tcl var should probably be tcb.

Yep it's all 'so far, so good'. You seem to be understanding how this all works.

So now it looks like you are missing the jqlite extensions which come from this file: https://github.com/ngUpgraders/ng-forward/blob/master/src/util/jqlite-extensions.js

And those (I thought) are included in the bundle via: https://github.com/ngUpgraders/ng-forward/blob/master/src/index.js#L1

The quickRootTestComponent is my internal helper for quicker testing. I imagine devs will create helpers like this that wrap TestComponentBuilder, however I'm unsure we should be teaching it that way. So for now let's just use TestComponentBuilder even though its a bit more verbose.

I think you are doing really well.

kasperlewau commented 8 years ago

Your tcl var should probably be tcb.

Yes, most definitely. Sorry about the wee typo!

As far as I know (looking at a glance here), I'm not actually importing the bundle so it would make sense for the jqlite extensions to not be present in the suite.

I'll give the jqlite extensions a go and see if they don't sort out my pickle - thanks!

I think you are doing really well.

Thank you : )

kasperlewau commented 8 years ago

Sorry, I did not have the necessary time available to have a more in depth look at this last night.

I will say though that the inclusion of the jqLite extensions did not automagically solve my problem, so I do believe there is something else amiss in the unit tests.

I'll get back to this on the weekend, if anyone would like to take over/take a stab at it, I can submit a PR to the playground repo with the unit tests that have been completed.

timkindberg commented 8 years ago

I think doing a PR or linking your personal branch in this issue would suffice. I bet its something I can help you past, OR better yet you've found a sticking point that I'll need to solve with testing.