I have been going through the testing tutorial on the angular website. I am curious if there is a listing of all of the items that are available for test through the debugElement. For example
let nav = fixture.debugElement.query(By.css('h1')).nativeElement;
expect(nav.innerText).toBe(fixture.componentInstance.homeHeader);
What other elements are there like the innerText value that I am testing.
Thank you for any help.
The list is too long. These are native JS DOM elements It depends on what type element it is to get a complete list of properties. You should learn to navigate the MDN site. Here is a link to HTMLHeadingElement (this is what an h1 is). If you look at the sidebar, you will see
Properties (missing from HTMLHeadingElement, see below). This is a list of all direct properties of this element (see parent for inherited properties)
Inheritance. This is inheritance the hierarchy for HTMLHeadingElement
EventTarget
|
Node
|
Element
|
HTMLElement
|
HTMLHeadingElement
You can click any one of those links, and you will see the inherited properties. For instance, if you click on Node, you will see that that's where the HTMLHeadingElement gets the innerText property from. If you go back to HTMLHeadingElement, you will see that it has no direct properties. That means that all of its properties are inherited from its parents
Methods (missing for HTMLHeadingElement, see parent for inherited methods)
Events. These are all the events that can be triggered for the element
Related pages for HTML DOM. This is a list that is common to all the pages. You can see a list of all the different kinds of DOM elements. You can click through them. For the most part though, most of the properties you will use from any of the DOM elements will be inherited properties from the parent. So you probably want to just look at the parent properties list. Though some do have their own properties.
Related
I've got a dijit Tree which is populated via a store wrapped in Observable, essentially the example here: http://dojotoolkit.org/reference-guide/1.10/dijit/Tree.html#id7 (Not that the example actually runs from the dojo site though: unless that's just my browser).
It's working well and I can expand and collapse items. However, it displays an expand icon even for the last item in a hierarchy - i.e. an item that doesn't have any children. When you try and expand such an item, it seems to realise this and the expand icon then disappears.
Does anyone know of how to supress the expand icons from appearing in the first place?
Thanks!
Implement the mayHaveChildren() method of the model:
Implementing logic here avoids showing +/- expando icon for nodes that
we know don't have children. (For efficiency reasons we may not want
to check if an element actually has children until user clicks the
expando node)
This method inputs one of your items and outputs true if it can be expanded; false otherwise.
Refer to the http://dojotoolkit.org/reference-guide/1.9/dijit/registry.html
Both can input a Node and Return Widget?
What is the practical use of them?
registry.byNode just checks the given node and returns the widget that it belongs to.
registry.getEnclosingWidget will walk up the DOM until it finds a node that represents a widget.
This means that when given a DOM node of a widget, they will both return the same thing. See this note in the documentation about that specific case. registry.getEnclosingWidget is useful if you have a node that you know is associated with a certain widget but that it is not necessarily a root widget node itself.
Web page contain a button with some text for example "Test". This button actually is a toolbar element. ( class ="tbButton" id="id",text="Test") and redirects to a certain table when press on it.
When try to use the following click methods
selenium.click("id");
selenium.doubleClick("id");
selenium.click("//*[text()='Test'and contains(#class, 'tbButton')] ");
the button does not react
Could enybody show an alternative methods that is able to resolve a problem
It's hard to know exactly what the problem is without knowing more about the actual contents of the page you are testing. Is there an example of the toolbar online somewhere?
With modern interfaces, locating elements with Selenium is not always an exact science. Here are a few suggestions:
With modern interfaces you often find that the DOM is being manipulated, so it is possible that the identifier you are using is no longer valid by the time you get to your click(). Use Firebug to check that you have the correct element.
Often it helps to click on the parent of the element, such as a div or the parent table cell. Again, use FireBug, to try some other elements near your toolbar button. Alternatively, Firebug sometimes reveals that the element contains other elements. You might have more luck changing the target to a contained element instead.
Sometimes you have to play around with some of the alternative actions. For instance, some controls respond to a mouseDown() followed by a mouseUp(), but not to a click(). Again you can often get hints from looking at the source with Firebug.
Is there a dojo/dijit method to which i can pass a widget and get the inheritance hierarchy of that widget.
getInheritanceHierarchy(dijitWidgetInstance)
which will return the inheritance hierarchy in some format (json or array).
I checked the doc. Say for example, i want to find the inheritance hierarchy for dojox.grid.TreeGrid.
The doc says "Object » DataGrid » dojox.grid.TreeGrid", but when i click on the Datagrid link there, it goes to error page.
This prints the inheritance chain in reverse order:
dojo.forEach(MyClass._meta.bases,function(b) {
console.log(b.prototype.declaredClass);
});
Replace MyClass with instance.constructor when using instances.
NOTE: This is likely to change or break and should not be used in production code! Useful only for debugging.
I need to know if I am going about something the right way.
For a given page, I am instantiating an object for the page itself. Let's call that object myPage. Within the page I have containers (usually div tags). When I go to an admin component to work with a specific div, I instantiate an object for that as well. Let's call that myDiv.
Now, one of the things I want to work with for a given div is the styling of that div. So normally I would think that I'd just put in some style-related methods, such as myDiv.getPadding() or myDiv.getBackgroundColor(), etc.
But it occurs to me that I may eventually have other objects for which I may also need to do style-related stuff.
Given this, should I then create a separate style.cfc? Would that then be extended by the div object? Or would the style object extend the div object? My understanding is that the more specific object extends the less specific one, but I am not sure which is more specific in this case: is it the div object, which references a specific div, or the style object, which provides a specific set of data?
Thanks in advance!
First, unless you need to write styles on-the-fly, I would create one or more stylesheets and link them dynamically, instead of creating them dynamically.
Assuming, however, that you do need to create them on-the-fly...
I would not have either the control (div) extend the style or vice-versa. A style is not a more specific definition of a div, nor is the reverse true. What I would do is create a style object that only contains the display meta-data for a given element or element set. This can be contained within your control/div object (not an extension), or can be part of the page object. The style is definitely related to the control, but I would not combine them, as that makes it harder to separate content and presentation.
By no means am I saying this is the best approach, but if you really wanted to use CFCs to style your pages, you could have a DivTag.cfc extend an HtmlTag.cfc, which would act as your base class for all HTML tags. You could then compose a StyleAttribute.cfc into your HtmlTag.cfc to work with any style properties, such as background colors and padding. So then you would end up calling functions like myDiv.getStyle().getPadding().
In general, you should really try to favor composition ("has a") over inheritance ("is a") and not get too crazy with your component hierarchies. In this case, I'd recommend using CSS files to style your pages.