When trying to remove a the parent element I have been able to use this line for most cases:
Polymer.dom(Polymer.dom(this).node.domHost.parentNode).removeChild(Polymer.dom(this).node.domHost);
Yet in some cases I get this error:
Uncaught Error: The node to be removed is not a child of this node: [object HTMLElement]
I have verified the child is there and the objects look correct, but I think I am probably missing a Polymer.dom() somewhere?
I have been able to solve it for all cases that I need by doing this:
var thisNode = Polymer.dom(this).node;
Polymer.dom(Polymer.dom(thisNode.domHost).parentNode).removeChild(thisNode.domHost);
Related
The component that I have testing renders something this:
<div>Text<span>span text</span></div>
As it turns out for testing the only reliable text that I have is the 'span text' but I want to get the 'Text' part of the <div>. Using Jest and react-testing-library I can
await screen.findByText(spanText)
This returns an HTMLElement but it seems limited as I don't have any of the context around the element. For example HTML methods like parentNode and previousSibling return null or undefined. Ideally I would like to get the text content of the parent <div>. Any idea how I can do this with either Jest or react-testing-library?
A good solution for this is the closest function.
In description of closest function is written: Returns the first (starting at element) including ancestor that matches selectors, and null otherwise.
The solution would look like this:
screen.getByText("span text").closest("div")
Admittedly, Testing Library doesn't communicate clearly how to do this. It includes an eslint rule no-direct-node-access that says "Avoid direct Node access. Prefer using the methods from Testing Library". This gives the impression that TL exposes a method for a situation like this, but at the moment it does not.
It could be you don't want to use .closest(), either because your project enforces that eslint rule, or because it is not always a reliable selector. I've found two alternative ways to tackle a situation like you describe.
within():
If your element is inside another element that is selectable by a Testing Library method (like a footer or an element with unique text), you can use within() like:
within(screen.getByRole('footer')).getByText('Text');
find() within the element with a custom function:
screen.getAllByText('Text').find(div => div.innerHTML.includes('span text'));
Doesn't look the prettiest, but you can pass any JS function you want so it's very flexible and controllable.
Ps. if you use my second option depending on your TypeScript config you may need to make an undefined check before asserting on the element with Testing Library's expect(...).toBeDefined().
But I have used HTML methods a lot and there was no problem yet. What was your problem with HTML methods?
You can try this code.
const spanElement = screen.getElementByText('span text');
const parentDiv = spanElement.parentElement as HTMLElement;
within(parentDiv).getElementByText('...');
I've got an application that seems to work fine when I put all my elements inside a <dom-bind> element. When I remove that dom-bind (no longer needed), most of the elements carry on working, but paper-card stops and throws an error:
"Uncaught DOMException: Failed to construct 'CustomElement': The result must not have attributes"
The error is thrown from polymer/lib/legacy/lib/class.html if that helps. Anyone got any ideas?
I had the same error, and find out angular create an empty element (), then bind stuffs to it.
This fail according to spec:
4.13.2 Requirements for custom element constructors
The element must not gain any attributes or children
https://html.spec.whatwg.org/multipage/custom-elements.html#custom-element-conformance
I fix my problem by assigning in connectedCallback()
I am trying to implement drag and drop files from desktop using knockout. The starting code is taken from html5rocks.
I tried to implement this using event binding, so my View looks something like this:
<div class="drop_zone" data-bind="event:{
dragover: function(data, e){ $root.dragover(e);},
drop: function(data, e){ $root.drop(e, $parent);},
dragenter: function(data, e){ $root.dragenter(e);},
dragleave: function(data, e){ $root.dragleave(e);}
}">Drop files here</div>
The $parent parameter was used in attempt to do something similar to my previous question, where parent was able to locate where exactly the element should be removed.
My ViewModel is an observableArray of observableArrays (many dropzones) and looks like this:
this.dropZones = ko.observableArray([{
'elements' : ko.observableArray([])
},{
'elements' : ko.observableArray([])
}]);
The full code can be found in jsFiddle, but the problem is that I can not properly add new files to the files element. Also I can not correctly highlight the element the person is dragEntering/Leaving.
I understand why I can not highlight the proper element (I just select every class, but I can not understand how to select the parent element), I am failing to understand why parent.elements.push(f.name); does not add the name of the file to the right parent.
Can anyone please tell me what is the problem and how can I fix it?
P.S. in jsFiddle I get the error:
TypeError: Cannot read property 'dataTransfer' of undefined
which tells me that I am passing wrong event, but the same code on my local server does not give me this problem. The error which I am getting on localhost is:
Uncaught TypeError: Cannot call method 'push' of undefined
which tells me that my idea of using parent was wrong.
1) { $root.drop(e, $data);} instead of { $root.drop(e, $parent);}
2) var files = e.dataTransfer.files; (without originalEvent)
Fiddle. (I've not fixed problem with css, do it youself :))
You should use $data instead of $parent because of elements is the property of each dropZone element. So, when you iterate with foreach: dropZones you have access to current element by $data, and you should send to $root.drop function current element (not parent) for get access to it elements array.
Update:
Solved CSS problem. (with help of $index() and jQuery .eq())
You could read about binding context (parent, data, index and etc.) here.
I keep getting errors doing this:
puts browser.table(:after? => span(:text => "Asmeniniai duomenys") )[2][2].text
basically saying:
undefined method `span' for main:Object (NoMethodError)
or
undefined method `table' for main:Object (NoMethodError) etc...
so I decided that the table was not found. I tried if/else, but it's the first time I used ruby, I did not understand if it worked or not.
So I thought that the simplest way would be to find out how to highlight something.
Could anyone suggest how can I highlight elements or how to fix this problem?
I assume you mean to highlight the element so you can determine if the right element is being found.
You can use the Element#flash method. This method will change the background of the element a couple of times, which should help you figure out what element was found.
For example:
browser.table.flash
If im usin function to add a mc to the stage like so:
var myChild:MC= new MC();
function somefunc()
{
stage.addChild(myMC)
}
but when I try to remove the mc by:
stage.removeChild(myMC)
I get The supplied DisplayObject must be a child of the caller error...
any suggestions or work arounds?
Your code should work if the item is on the stage. Perhaps qualifying it with a conditional statement like so:
if (myMC.stage != null)
stage.removeChild(myMC);
Alternatively you could use the following code but it is probably not best practice.
if (myMC.parent != null)
myMC.parent.removeChild(myMC);
The problem is not with removeChild. It's with the displaylist. If you check the parent property of the displayobject, when you call "removeChild" it will be null.
Why does it become null could be because of lots of reasons:
Parent is nulled before the child.
The child or parent have event listeners that won't let them die.
The Display Object is really not the instance you're trying to remove. THIS one can be very tricky to find out. Look at the "name and parent properties" of the variable you're trying to remove while calling removeChild.
You could try hiding and showing the movieClip, if possible.
I think its a bit faster than removing and adding consistantly, code permitting.
Keep in mind this is just a suggestion, someone smarter than me outta be able to help you out..
You could also use this fail safe:
if(myMC.parent) myMC.parent.removeChild(myMC);
I could fix this problem by simply removing every EventListeners I added to that object before removing it.