feat(debug): replace DebugElement with new Debug DOM by juliemr · Pull Request #6555 · angular/angular

juliemr · 2016-01-19T05:37:43Z

Now, using ng.probe(element) in the browser console returns
a DebugElement when in dev mode.

ComponentFixture#debugElement also returns a new DebugElement.

Breaking Change:

This is a breaking change for unit tests. The API for the DebugElement
has changed. Now, there is a DebugElement or DebugNode for every node
in the DOM, not only nodes with an ElementRef. componentViewChildren is
removed, and childNodes is a list of ElementNodes corresponding to every
child in the DOM. query no longer takes a scope parameter, since
the entire rendered DOM is included in the childNodes.

Before:

componentFixture.debugElement.componentViewChildren[0];

After

// Depending on the DOM structure of your component, the
// index may have changed or the first component child
// may be a sub-child.
componentFixture.debugElement.children[0];

Before:

debugElement.query(By.css('div'), Scope.all());

After:

debugElement.query(By.css('div'));

Before:

componentFixture.debugElement.elementRef;

After:

componentFixture.elementRef;

juliemr · 2016-01-19T05:40:33Z

@tbosch this is a work in progress, as some tests are not yet upgraded. However, the API changes are complete and the unit tests for the new DebugElement are done, and it would be great to get feedback. Particularly, I'm not thrilled with the API for Renderer#setInjectableMirrors, which is kind of a grab bag for all sorts of info we need from the view.

cc @jelbourn @wardbell , this is a heads up of some breaking changes to the unit test API. Feedback appreciated.

wardbell · 2016-01-19T08:43:51Z

modules/angular2/src/core/render/api.ts

This name is deeply mysterious. No doc comments. What does it do?

It adds info from the AppElement and AppView (injectable tokens, the injector itself, and the current component) that we'll need for debugging.

It's a renderer function, so it should be internal and a user should never have to bother with it. In any case, it's probably a good idea to add a comment, I'll do that.

See my comment at the implementation

juliemr · 2016-01-19T17:20:57Z

Remaining tasks

Fix tests that are failing due to the breaking changes
Create before/after examples for the breaking changes in the commit message

juliemr · 2016-01-22T08:17:00Z

I've added a commit which fixes Angular's tests, adds a couple necessary features to DebugElement, and removes the ViewListener. Please take a look!

juliemr · 2016-01-22T08:59:05Z

I've created a doc to track the changes that will be necessary for the merge to g3: https://docs.google.com/document/d/1wdODXGw8k_bCCYvPzxFxRX7jfAxHn7SXwTCpfsCL07c/

tbosch · 2016-01-22T22:41:56Z

modules/angular2/src/core/debug/debug_node.ts

Can we change this to be a directiveTypes: Type[]?

Better: providerTokens: any[]

tbosch · 2016-01-22T23:03:28Z

@juliemr this looks already pretty good. Left some comments...

tbosch · 2016-01-22T23:04:24Z

Btw, don't worry about the circle CI failure, @IgorMinar said we can ignore it for now...

juliemr · 2016-01-24T06:53:02Z

Thanks for the review - all done except for platform location question above.

I squashed the commits and added before/after examples to the breaking changes in the commit message.

juliemr · 2016-01-27T02:12:54Z

Dear merge-master - this is not quite ready for merge yet. There are some pending g3 issues that I am working on addressing - the doc has been updated.

juliemr · 2016-01-28T04:52:04Z

Now ready for merge! I have prepared fixes for all g3 issues, they are linked in the doc.

alexeagle · 2016-01-28T17:39:43Z

Missing LGTM - @tbosch ?

tbosch · 2016-01-28T17:53:03Z

modules/angular2/src/core/debug/debug_renderer.ts

Remove this todo

Now, using `ng.probe(element)` in the browser console returns a DebugElement when in dev mode. `ComponentFixture#debugElement` also returns a new DebugElement. Breaking Change: This is a breaking change for unit tests. The API for the DebugElement has changed. Now, there is a DebugElement or DebugNode for every node in the DOM, not only nodes with an ElementRef. `componentViewChildren` is removed, and `childNodes` is a list of ElementNodes corresponding to every child in the DOM. `query` no longer takes a scope parameter, since the entire rendered DOM is included in the `childNodes`. Before: ``` componentFixture.debugElement.componentViewChildren[0]; ``` After ``` // Depending on the DOM structure of your component, the // index may have changed or the first component child // may be a sub-child. componentFixture.debugElement.children[0]; ``` Before: ``` debugElement.query(By.css('div'), Scope.all()); ``` After: ``` debugElement.query(By.css('div')); ``` Before: ``` componentFixture.debugElement.elementRef; ``` After: ``` componentFixture.elementRef; ```

alexeagle · 2016-01-29T19:28:46Z

merged as e1bf3d3

…port Fixes two small issues introduced with pr angular#6555

siddharthjain210 · 2016-04-24T14:31:41Z

I have created a sample application with angular2.beta13. Also i have used the test framework by taking guidelines from angular2-seed project by mgechev.
When i am debugging my unit test cases in phantomjs, instead of DebugRenderer, DOMRenderer is instanciated, because of which my test cases with TestComponentBuilder are failing. Please let me know what else i need to do.

angular-automatic-lock-bot · 2019-09-08T07:21:46Z

This issue has been automatically locked due to inactivity.
Please file a new issue if you are encountering a similar or related problem.

Read more about our automatic conversation locking policy.

_{This action has been performed automatically by a bot.}

juliemr added the state: WIP label Jan 19, 2016

juliemr assigned tbosch Jan 19, 2016

googlebot added the cla: yes label Jan 19, 2016

juliemr mentioned this pull request Jan 19, 2016

Implement a renderer independent DebugDom #6465

Closed

wardbell reviewed Jan 19, 2016
View reviewed changes

juliemr added the action: review The PR is still awaiting reviews from at least one requested reviewer label Jan 19, 2016

juliemr force-pushed the debug-dom-18012016 branch from 0d3d3d4 to 66251bc Compare January 22, 2016 08:31

juliemr removed the state: WIP label Jan 22, 2016

juliemr force-pushed the debug-dom-18012016 branch 2 times, most recently from 2e8a600 to 4b150f9 Compare January 22, 2016 08:41

juliemr added the breaking changes label Jan 22, 2016

tbosch reviewed Jan 22, 2016
View reviewed changes

tbosch added the action: cleanup The PR is in need of cleanup, either due to needing a rebase or in response to comments from reviews label Jan 22, 2016

juliemr force-pushed the debug-dom-18012016 branch from 4b150f9 to 36419f0 Compare January 24, 2016 06:52

juliemr force-pushed the debug-dom-18012016 branch from b7e006e to 50b11b2 Compare January 26, 2016 20:09

juliemr added the P1: urgent label Jan 26, 2016

juliemr removed the action: merge The PR is ready for merge by the caretaker label Jan 27, 2016

juliemr force-pushed the debug-dom-18012016 branch 2 times, most recently from 8a55baf to 8d57a18 Compare January 27, 2016 20:21

juliemr added the action: merge The PR is ready for merge by the caretaker label Jan 28, 2016

juliemr assigned alexeagle and unassigned tbosch Jan 28, 2016

tbosch reviewed Jan 28, 2016
View reviewed changes

modules/angular2/src/core/debug/debug_renderer.ts Outdated

Copy link
Copy Markdown

Contributor

tbosch Jan 28, 2016

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Remove this todo

tbosch added pr_state: LGTM action: cleanup The PR is in need of cleanup, either due to needing a rebase or in response to comments from reviews labels Jan 28, 2016

juliemr force-pushed the debug-dom-18012016 branch from 8d57a18 to f668ab2 Compare January 28, 2016 17:55

juliemr removed the action: cleanup The PR is in need of cleanup, either due to needing a rebase or in response to comments from reviews label Jan 28, 2016

juliemr force-pushed the debug-dom-18012016 branch from f668ab2 to 1584941 Compare January 28, 2016 21:43

alexeagle added zomg_admin: do merge and removed zomg_admin: do merge labels Jan 29, 2016

alexeagle closed this Jan 29, 2016

juliemr mentioned this pull request Jan 29, 2016

chore(tests): fix broken linker integration test and fix DebugNode ex… #6780

Merged

juliemr added a commit to juliemr/angular that referenced this pull request Jan 29, 2016

chore(tests): fix broken linker integration test and fix DebugNode ex…

a78dcfa

…port Fixes two small issues introduced with pr angular#6555

angular-automatic-lock-bot bot locked and limited conversation to collaborators Sep 8, 2019

Conversation

juliemr commented Jan 19, 2016

Uh oh!

juliemr commented Jan 19, 2016

Uh oh!

wardbell Jan 19, 2016

Choose a reason for hiding this comment

Uh oh!

juliemr Jan 19, 2016

Choose a reason for hiding this comment

Uh oh!

tbosch Jan 22, 2016

Choose a reason for hiding this comment

Uh oh!

juliemr commented Jan 19, 2016

Uh oh!

juliemr commented Jan 22, 2016

Uh oh!

juliemr commented Jan 22, 2016

Uh oh!

tbosch Jan 22, 2016

Choose a reason for hiding this comment

Uh oh!

tbosch Jan 22, 2016

Choose a reason for hiding this comment

Uh oh!

juliemr Jan 24, 2016

Choose a reason for hiding this comment

Uh oh!

tbosch commented Jan 22, 2016

Uh oh!

tbosch commented Jan 22, 2016

Uh oh!

juliemr commented Jan 24, 2016

Uh oh!

juliemr commented Jan 27, 2016

Uh oh!

juliemr commented Jan 28, 2016

Uh oh!

alexeagle commented Jan 28, 2016

Uh oh!

tbosch Jan 28, 2016

Choose a reason for hiding this comment

Uh oh!

alexeagle commented Jan 29, 2016

Uh oh!

siddharthjain210 commented Apr 24, 2016 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

angular-automatic-lock-bot bot commented Sep 8, 2019

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

6 participants

siddharthjain210 commented Apr 24, 2016 •

edited

Loading