angularjs - Testing an attribute of isolated scope from a directive -

angularjs - Testing an attribute of isolated scope from a directive -

i've examined this q&a related directives isolated scopes helped me resolve testing attribute used '@' property; i'm finding hard test attributes create utilize of '=' property.

consider (from directive called upcoming):

return { restrict: 'a', link: link, scope: { upcoming: '@', patientdetails: '=' } };

in test upcoming can access (from angular 1.2 onwards) using isolatescope() function so:

elm = angular.element('<div upcoming="remembered" patient-details="patientdetails"></div>'); // compiles directive , links scope $compile(elm)(scope); scope.$digest(); isolatescope = elm.isolatescope();

and in tests can this:

it("should have attribute 'upcoming' attached isolate scope", function () { expect(isolatescope.upcoming).tobedefined(); expect(isolatescope.upcoming).tobe('remembered'); });

but if approach other property in same way undefined error. tried this:

// retrieve target html - remembered.html beforeeach(inject(function ($compile) { patient = { name: 'lorem ipsum', readyforrefill: 1, progresscount: 2, upcomingcount: 3, taggedcount: 4, expiringcount: 5, onerefillremaining: 9000 }; elm = angular.element('<div upcoming="remembered" patient-details="patient"></div>'); // compiles directive , links scope $compile(elm)(scope); scope.$digest(); isolatescope = elm.isolatescope(); isolatescope.patientdetails = patient; }));

the test:

it("should have attribute 'patientdetails' attached isolate scope", function () { expect(isolatescope.patientdetails).tobedefined(); });

passes sense testing wrong thing.

can clarify me please?

edit

doing tassekatt suggested solved problem did happen break 5 other tests. these tests examined actual template beingness loaded , determined contents had. example:

it("ul should contain 4 li", function () { var li = elm.find('li'); expect(li.length).tobe(4); });

is no longer valid elm element <div upcoming="remembered" patient-details="patient"></div> html opposed 1 loaded via template:

<p><a href=""><b>sign in</b></a> view total <br>prescription statuses.</p> <ul> <li><span>{{patientdetails.readyforrefill}}</span> prescriptions ready refill</li> <li><span>{{patientdetails.readyforrefill}}</span> readyfill<sup>&#174;</sup> <li><span>{{patientdetails.expiringcount}}</span> expiring prescriptions</li> <li><span>{{patientdetails.onerefillremaining}}</span> prescriptions 1 refill left</li> </ul>

is there away load both correctly? though worth noting depending on logs in, template alter render effort count divs , p tags irrelevant tests?

thanks

if want create sure scope of directive gets passed right patient details object should set in scope before element compiled. can retrieve via isolatescope() , perform validations.

for example:

elm = angular.element('<div upcoming="remembered" patient-details="patient"></div>'); scope = $rootscope.$new(); scope.patient = { name: 'lorem ipsum', readyforrefill: 1, progresscount: 2, upcomingcount: 3, taggedcount: 4, expiringcount: 5, onerefillremaining: 9000 }; $compile(elm)(scope); isolatescope = elm.isolatescope();

and:

it("should work", function() { expect(isolatescope.patientdetails).tobedefined(); expect(isolatescope.patientdetails.name).tobe('lorem ipsum'); });

update:

if need test generated markup should utilize compiled element:

compiled = $compile(elm)(scope); ... it("ul should contain 4 li", function () { var li = compiled.find('li'); expect(li.length).tobe(4); });

angularjs