Unit test collapse behaviour of a div element in Angular-JS - unit-testing

I have a simple form that I want to be shown on a button click. i.e a button says "Add new User", then a the page expands and a form is shown, after the user finishes work with the form the form collapse back and a message is shown to the user.
The first problem i am facing is:
using this code
function AngularUI($scope, $window) {
$scope.collapse = function (selector) {
angular.element(selector).collapse();
}
}
and
<div class="ang-ui-test">
<button ng-click="collapse('#collapsible')">
using angular.element
</button>
<div id="collapsible" class="collapse">
some thing in here ...... !
</div>
<button type="button" class="btn btn-danger" data-toggle="collapse" data-target="#demo">
simple collapsible
</button>
<div id="demo" class="collapse in">This one work properly</div>
</div>
the second one that does not uses angular.element.collapse works properly.
The second problem is : how do I test the behavior mentioned above.
on the first button press, the one that uses angular.element if the div is hidden it is shown but, it does not hide the collapsible after it is shown.
( i.e a button says "Add new User", then a the page expands and a form is shown, after the user finishes work with the form the form collapse back and a message is shown to the user.
thanks in advance.

You're doing it wrong. It's bad juju to do DOM manipulations in the controller because you are trying to look for / manipulate the DOM before it had a chance to render/refresh/update. Think of all the JS in the controller being executed in it's own phase, and THEN all the HTML is updated to reflect the final model state.
Try using ng-class="{collapse:someBoolExpression}"
You could also take a look at ui-hide, ui-show and ui-toggle (from AngularUI, but I think we should probably add a ticket to let you customize the class used.
Try to get the mindset of doing DOM manipulation manually out of your head. It takes a while, but once you get used to it your development speed picks up exponentially. When you finally hit a wall where Angular can't already do the job for you, start reading up on directives and checkout AngularUI's source code for some good, commented examples.

Related

Django: Update specific part of template by button click

I have a text field
<input type="text" value="This is a test." name="mytextbox" size="10"/>
and separated from that a button
<button type = "button" class="btn btn-primary">
<font size="1">Run</font>
</button>
that should update a list and update the value of the text field itself.
Sometimes forms are used in this context, but I would have to wrap the forms tag around the whole template when the input and button are separated on the screen.
Since I am relatively new to Django, I would like to know the best
strategy to solve the problem.
a) Reload the complete page template with changed arguments/context
b) Create a html template of the specific part that extends the main template and only try to render/update this one.
c) Do something smarter.
There are some answers in a (much older) post from 8 years ago but I am interested in the state-of-the-art solution.

Changes to the code - I do not see on the site

Got a question. For example, I change the code on the page
/catalog/view/theme/nextdef/template/extension/module/latest.twig
, or rather add a handler to the button:
<i class = "fa fa-heart" onclick = "window.dataLayer = window.dataLayer || [];
dataLayer.push ({'event': 'heart'}); "> </i> </button>
But when you click on this element, there are no changes. If you look at the page code, then it is also not updated. Although I write the cache and update the Disable cache inside the browser too, and still no changes ... I would be grateful if you help. thank
The problem was that the template editor had a history of this page. And there was no code. Apparently, he referred to her. I did not know that opencart prioritizes history compared to server files.

Submit button is not clicking even though python script is executed-Python Selenium

In my testing, one of the page is having "Submit" button and when i try to click on submit button is not working (not clicking) even though script is executed.
Below is the HTML code for the submit button
<button class="btn btn-primary" name="submit_button" value="1" type="submit">
<i class="fa fa-check"></i>
Submit
I have written the scripts as like below to find submit button element.
time.sleep(6)
sub = web.find_element_by_name("submit_button")
sub.click()
I have tried to find element using "Xpath" (Absolute XPath and Relative XPath) as well and observed that did not work. one more thing is that,the accessible page is in "iframe"
and i have access that as like below
web.switch_to.frame("page-content")
To confirm that whether the scripts is running or not i have modified above code as like below.
time.sleep(6)
print ("hello")
sub = web.find_element_by_name("submit_button")
print ("hello1")
sub.click()
print ("hello2")
From above code i got know that scripts were executing successfully
Please guide me what is the issue?
Answers are much appreciable!

Ember's input helper need double click to edit in ie11

<div draggable="true">
{{input value="default value" }}
</div>
In ember.js, as above code, when the div element has an attribute 'draggable="true"', on the webpage, the input area must need a double-click to edit in ie-11, but in chrome or firefox, it just need a click event to edit. Has anyone resolved this issue?
seems to be a bug
[IE 11] Input field of type text does not respond to mouse clicks when ancestor node has draggable=true
bad workaround:
<div style="background-color:lightgray" id="dragE" draggable="true">
<input id="inputE" type="text" />
</div>
click on the lightgray background
now the input field support single click
$('#dragE').focus(); <br>
$('#inputE').focus();<br>
was my solution
unfotunately reproducing with pluncer & co. did not work.
Or...set attribute draggable to "false", when the page goes to a production environment.
This worked for us.

Revealing a Modal in Foundation 4

How do you Reveal a modal programmatically in Foundation 4?
In Foundation 3 we had the easy to use reveal() method.
What can you use in Foundation 4? Please help.
I am pretty sure you can simply use the .foundation method on your modal to call 'open' on it.. Something like:
$('#myModal').foundation('reveal', 'open');
e: Just checked the docs and yep, It's right there: http://foundation.zurb.com/docs/components/reveal.html
Look for "You can also open and close Reveal via JavaScript:"
Unfortunately, in Foundation 4 you must have this trigger link to open a modal =/ Unfortunately not because you'll have to write a lot more code (thats not true), but because this implementation isnt, let's say, pretty.
My code for the modal:
<!-- MODAL BOX START CONFIGURATION -->
<a class="reveal-link" data-reveal-id="modal"></a>
<div id="modal" class="reveal-modal medium">
<div id="modalContent"></div>
<a class="close-reveal-modal">×</a>
</div>
JS function to open and put some content into the modal
function openModal(url,params,text){
// If #url is not empty then we change the #modalContent value with the #url value
if(url !== '')
{
ajaxLoad('#modalContent',url,params);
}
// If #text is not empty then we change the #modalContent value with the #text value
else if(text !== '')
{
$('#modalContent').html(text);
}
// If both #url and #text are empty, then the #modalContent remains unchanged.
// Now we just show de modal with the changed (or not) content
$('a.reveal-link').trigger('click'); }
Hope it helps!
For programmatic (javascript) access the docs seem to only suggest launching via click event.
Add your Modal:
<div id="myModal" class="reveal-modal">
<h2>Awesome. I have it.</h2>
<p class="lead">Your couch. It is mine.</p>
<p>Im a cool paragraph that lives inside of an even cooler modal. Wins</p>
<a class="close-reveal-modal">×</a>
</div>
Set the trigger:
Click Me For A Modal
Activate trigger programmatically:
$('#my-trigger').trigger('click');
Admittedly it does seem like a work-around, maybe this is due to their heightened "lightweight/mobile-first" focus. Lets see what the next release brings.
$("#myModal").foundation('reveal', 'open');