This probably applies to other UI libraries like Prime-NG and the like, but I'm using ng-lightning.
I am trying to grab the ngl-checkbox element with a querySelector in one of my unit tests.
fixture = TestBed.createComponent(Component);
fixture.debugElement.nativeElement.querySelector('ng-lightning element here?');
I tried adding an id attribute on the ngl-checkbox and also the input within the ngl-checkbox tags, but that doesn't work. Since the ng-lightning element renders into a bunch of different things, what do I need to pass into the querySelector to get that checkbox?
Another thing is how do I target the ng-lightning element in an external css file? I can't just target that element like a regular h1 tag.
Related
Angular 2/4/5/6:
I have a div :
The innerHtml is actually html that has multiple tags in it, for example:
<H1> Title of note /H1>
<P> This is a example note </P>
How would I get the reference of these sub html elements inside the innerHtml on click or highlight in the typescript file in Angular?
The purpose of this is to add a highlight span to the highlight portion of a html element, and its very difficult to modify the innerHtml before it is recieved by the angular side.
I was wondering if there is a solution similar to using nativeElement, but since i can't add #var to any of the subelements I am not sure what to do.
I am not totally sure of what you mean, but I would use a JQuery selector to add the class with the CSS style you want to apply to highlight the text.
If you don't want to use JQuery, you still can manipulate the DOM via document commands.
Question: How would you E2E test a SPA with many custom elements which are created multiple times and able to retrieve them by unqiue ID?
The problem we have is to unique identify the custom elements. Thus, you can't place an id inside the custom element like this:
<customelement id="MyCustomElement"></customelement>
because as you would instantiate the custom element multiple times the id will be added twice to the DOM.
Aurelia uses protractor as E2E test tooling. Including the Aurelia flavoured locator to retrieve/check value.bind="VMproperty" syntax. The elment(by.valueBind("VMproperty")) won't work for multiple custom elements which have the VMProperty.
We're thinking in creating somekind of breadcrumb which includes the parent id, creating an unique ID for that specific custom element.
I'm sure people would be using Aurelia for larger projects/sites and require proper E2E testing. The example on Aurelia HUB: http://aurelia.io/hub.html#/doc/article/aurelia/testing/latest/end-to-end-testing/5 is fine for initial setup, but doesnt state in how to E2E test mulitple custom elements.
Any help would be appreciated :)
It sounds like you could walk down to the custom element from the parent element with $('#parentID customelement') if there's just one of them.
If you have multiple custom elements within the parent, you can just get all of them with $('#parentID').$$('customelement') and iterate through the ElementArrayFinder.
If you don't have to worry about custom elements within other parent elements, you could even just use $$('customelement') to grab all of them in an ElementArrayFinder.
To go over each element in the ElementArrayFinder when you don't know the order, I tend to go two ways.
The first way filters the ElementArrayFinder down to the ElementFinder you want:
var item = $$('.someclass').filter((elem)=>{
return elem.isWhatIWant(); //chose any qualifier that returns a boolean
}).first();
expect(item.isWhatIWant()).toBeTruthy();
The second way goes over and checks each element:
$$('.someclass').each((elem)=>{
expect(elem.isWhatIWant()).toBeTruthy();
})
I use the second way more often, since you can always add qualifiers within the each to determine which elements should be checked, but the first way can be better if you want to save the ElementFinder for later use.
I am still experimenting how far I can go with building a widget in Polymer and I am stuck in one place. I want to create an element with children that are also polymer elements. Something like:
<my-view name="Hello">
<my-child-view attribute="test">Test</my-child-view>
<my-child-view attribute="test1">Test2</my-child-view>
<my-child-view attribute="test2">Test3</my-child-view>
<my-child-view attribute="test3"></my-child-view>
<my-other-child-view var="test5"></my-other-child-view>
</my-view>
I want to get children that are the tag name "my-child-view". Using this.children takes all the children. Is there a native polymer functionality like this.getChildrenWithQuery('my-child-view')? Or should I just loop through children and check the ones with tag name myself?
this.querySelectorAll('my-child-view')
Native JS DOM! Yes, querySelectorAll() works on elements as well as the document.
If I'm adding a tag in JavaScript to another tag how can I check to see if it's valid.
IE I have this block:
Using JQuery:
var fragment = $("<p>Some text is <strong>here</strong></p>");
Is there a way using either JavaScript or some library to query this fragment and get a list of allowable tags?
For instance:
fragment.wrapInner('<em></em>');
Will generate valide HTML, but:
fragment.wrapInner('<div></div>');
Won't as div is not allowed inside a P tag.
The reason I want to do this is related to Range#surroundContents, as it's not letting me insert span tags directly inside divs, only insides p tags and the reverse is true as well, but I need a solution that will insert the correct type element inside the tag. IE div should not insert into p and the reverse, but these are far far from the only cases I need to concern myself with, as I'm dealing with generic content, so I need a general solution.
Is it possible to have some sort of Id scoping when manipulating DOM with JS?
I use jQuery as my JS framework.
For example:
Is there any mechanism that would allow to select someDiv children of first or someDiv children of second, or do all ids on the page have to be unique?
I know this would be doable using classes (jQuery selector would be .first>.someDiv), but is this doable for the id property as well?
Edit: for clarification, here's a more complete example:
File picture_editor.php:
...
JS script for this editor, that needs to manipulate picture_id
...
File main_view.php:
...
Script that manipulates picture_id
...
include(picture_editor.php);
...
Now in the case where picture_editor is included in a file (like main_view) that has an element with the same id as elements in picture_editor, something somewhere is going to stop working (whether it's some script in picture_editor or main_view, or both).
Question: How do you go around that?
HTML id attribute, Definition and
Usage:
The id attribute specifies a unique id for an HTML element.
The id must be unique within the HTML document.
The id attribute can be used by a JavaScript (via the HTML DOM) or by
CSS to make changes or style the
element with the specified id.
From http://www.w3schools.com/tags/att_standard_id.asp
All ids need to be unique, so I don't think so.
If your ids are not unique, then your page is not valid HTML. Rethink your structure if you have non-unique id.
As for whether jQuery supports it, it's unlikely, as it should never meet that scenario.