I'm still new to QUnit. There's the snippet
<body>
<div id=qunit></div>
<div id=qunit-fixture>
..
<a title=something href=#>foo</a>
</div>
and the corresponding test case contains
$( 'a').each( function() {
console.debug( this);
// do something
} );
However, QUnit inserts the results in #qunit, including some hyperlinks, which in turn appear in the test case (inside the each). Obviously, content inserted by QUnit should be outside the test's scope. Any suggestion for how to avoid this?
QUnit deals with this by having your place the HTML your test needs inside the qunit-fixture element, so instead of:
$('a').each(function() { ... });
you would do:
$('#qunit-fixture a').each(function() { ... });
in your test case.
This lets you isolate your tests without depending on other page contents. The QUnit documentation provides more information about this methodology.
Related
I am writing jest tests. The tested Dashboard component's render shows below,
in Dashboard.jsx
render(){
const {appState,dashboardState,shopFiltersState,shopSortersState}=store.getState();
return (
<div style={appState.primeStyle.dashboard}>
{
(appState.currUser.account==='admin')?
<IconButton iconStyle={shopDetailStyle.iconMenu.icon} style={shopDetailStyle.iconMenu.iconBtn} tooltip={I18n.t('moreInfo')} tooltipPosition="top-center" onClick={this.handleIconAPClick} ><IconInfo /></IconButton>:<div/>
}
</div>
);
}
If I want to test this Dashboard.jsx with different appState, shopFiterssState or shopSortersState, are there good suggestions about how to do it?
I know the existence of mockStore, but I don't think it can be used to modify other component's state in the normal code flow.
Any suggestions are appreciated.
I have a problem while running more than one test in protractor : Timed out waiting for asynchronous script result after 60010 s
The code of tutorial script which is executed just after the login script :
Here the code i'm using in my config file from A Code proposed in another question but it didn't solve my problem !
onPrepare: function() {
return browser.getProcessedConfig().then(function(config) {
var browserName = config.capabilities.browserName;
browser.manage().timeouts().setScriptTimeout(60000);
});
PS : Even if i put an incorrect location for the element i have the error of time out and not this element cannot be found ! as if that line of code "the click into tutorial button" is never executed
Is it because tutorial make an ajax call ?
Here my html code :
</div></md-card-content> </md-card><!-- end ngIf: !expandChart --> </div> </div> </div></md-content> </div></div> <!-- Google Analytics: change UA-XXXXX-X to be your site's ID --> <!--<script>--> <!--!function(A,n,g,u,l,a,r){A.GoogleAnalyticsObject=l,A[l]=A[l]||function(){--> <!--(A[l].q=A[l].q||[]).push(arguments)},A[l].l=+new Date,a=n.createElement(g),--> <!--r=n.getElementsByTagName(g)[0],a.src=u,r.parentNode.insertBefore(a,r)--> <!--}(window,document,'script','https://www.google-analytics.com/analytics.js','ga');--> <!--ga('create', 'UA-XXXXX-X');--> <!--ga('send', 'pageview');--> <!--</script>--> <script src="scripts/vendor.js"></script> <script src="cordova.js"></script> <script src="scripts/scripts.js"></script> <script src="https://crypto-js.googlecode.com/svn/tags/3.1.2/build/rollups/sha1.js"></script> <script src="https://crypto-js.googlecode.com/svn/tags/3.1.2/build/rollups/sha256.js"></script> <script src="https://crypto-js.googlecode.com/svn/tags/3.1.2/build/components/enc-base64-min.js"></script> <div class="introjs-overlay" style="top: 0;bottom: 0; left: 0;right: 0;position: fixed;opacity: 0.8;"></div><div class="introjs-helperLayer " style="width: 538px; height:366px; top:64px;left: 195px;"></div><div class="introjs-tooltipReferenceLayer" style="width: 538px; height:366px; top:64px;left: 195px;"><div class="introjs-tooltip" style="left: 546px;"><div class="introjs-tooltiptext">Watchlist view. Swipe the row in the grid to the left to show the delete action.</div><div class="introjs-bullets"><ul><li><a class="active" href="javascript:void(0);" data-stepnumber="1"> </a></li><li> </li><li> </li><li> </li><li> </li><li> </li><li> </li><li> </li></ul></div><div class="introjs-progress" style="display: none;"><div class="introjs-progressbar" style="width:12.5%;"></div></div><div class="introjs-arrow left" style="display: inherit;"></div><div class="introjs-tooltipbuttons"><a class="introjs-button introjs-skipbutton" href="javascript:void(0);">Don't show it again!</a>PreviousNext</div></div></div></body></html>
1. Regarding with route check
In case after first spec, user got logged in and the route changed. Make sure all are navigated before any test executed.
expect(browser.getCurrentUrl()).toContain('#/the_route_of_logged_in');
// '#/' is just illustration. You can remove it to make it shorter
// => like this ...toContain('the_route_of_logged_in');
2. Regarding with click on tutorial
browser.wait(EC.elementToBeClickable(tutorial), 10000);
Do the browser.wait with EC for click-able button before attempt to click it (it seem like you got good approach here)
=> SUMMING UP you can give this a try:
'user strict';
var EC = protractor.ExpectedConditions;
describe('tutorials', function () {
it('should make click into tutorial button', function () {
expect(browser.getCurrentUrl()).toContain('the_route_of_logged_in');
var tutorial = $('.introjs-nextbutton');
browser.wait(EC.elementToBeClickable(tutorial), 8000, 'Timed out');
tutorial.click();
browser.sleep(8080); // regardless we are not reaching this point. But I will suggest to reduce this sleep time like 1000 (1s).
});
});
3. (optional) in case 2 points above does not help
In your all of your spec login-spec.js and tutorial-spec.js. Add process.nextTick(done); in a afterAll() block to ensure if there are no any Jasmine Reporters being stuck after a spec.
describe('foo', function(){
afterAll(function(done){
process.nextTick(done);
});
it('should bar...', function() {});
}
P.S. Beware that I am totally have no clue if my suggestions/approach could help. As debugging with e2e-test always painful... because we are always likely not knowing "where are the errors come from". So all I can do is giving you suggestions.
(sometimes it took me hours to just observe the behaviors of browser to identify an issue of e2e-test)
And DO NOT COPY PASTE my code into your code. I typed it with the images you provide, I can make some typos there.
Add parameter to conf.js under capabilities:
maxSessions: 1,
it should help.
Also your timeoutinterval might be too high 30000 should be enough.
Or on prepare change line to :
browser.manage().timeouts().implicitlyWait(5000);
#EDIT:
change to sth similar to this found something like this
baseUrl is 10.0.2.2 instead of localhost because it is used to access the localhost of the host machine in the android
emulator/device
baseUrl: 'http://10.0.2.2:' + (process.env.HTTP_PORT || '8000'),
Capabilities new command:
newCommandTimeout: 60
Also use of promises might be helpfull instead of timeouts
someethingToDo.click().then(function(){
return somethingToDo.click();
}).then(function(){
//morecode
});
I think you might have an issue with how your timeouts are set up. Remove all timeout references from your config file and try something like this (adjust accordingly to include other configurations as needed):
exports.config = {
allScriptsTimeout: 60000,
getPageTimeout: 30000,
jasmineNodeOpts: {
defaultTimeoutInterval: 62000,
}
}
Finally i tried to solve my problem by adding this call back
describe("long asynchronous specs", function() {
beforeEach(function(done) {
done();
}, 10000);
});
Here is a link from jasmine Asynchronous_Support that help me understand time out problems.
Hope that can help you,
I would like getting the value of two textarea from WYMeditor:
The first one:
<script type="text/javascript">
jQuery(function() {
$(" .wymeditor").wymeditor({
logoHtml: '',
lang: 'fr',
skin: 'default',
});
});
</script>
And the second one:
<script type="text/javascript">
jQuery(function() {
$(" .wymeditor_ref").wymeditor({
logoHtml: '',
lang: 'fr',
skin: 'silver',
});
});
</script>
HTML:
<textarea id="definition" class="wymeditor" name="definition"/></textarea>
<textarea id="references_definitions" class="wymeditor_ref" name="definition"/></textarea>
I'm using this: WYMeditor.INSTANCES[0].html();
But, the problem is I don't know how to do if there are two textarea. How getting the second value?
Thanks a lot!!
Get specific WYMeditor instance HTML with known ordering
If you simply want to iterate through the results of all the WYMeditor instances on a particular page, your array index method is just fine. If you know the order in which the WYMeditor instances are created, you'll do something like:
var wymResults,
wymRefResults;
wymResults = WYMeditor.INSTANCES[0].xhtml();
wymRefResults = WYMeditor.INSTANCES[1].xhtml();
Get HTML from all WYMeditor instances
If you have an unknown number of instances of WYMeditor, this is how you might get the results of all of them:
var results = [],
i;
for (i = 0; i < WYMeditor.INSTANCES.length; i++) {
// Do something with the xhtml results
results.push(WYMeditorINSTANCES[i].xhtml());
}
Get specific HTML results with unknown instantiation order
If it matters which WYMeditor instance you'd like to retrieve though, which is often the case, you'll want to store references to the specific instances when you create them. eg.
var wym,
wymRef,
wymResults,
wymRefResults;
// Instantiate my WYMeditor instances
wym = $(".wymeditor").wymeditor();
wymRef = $(".wymeditor_ref").wymeditor();
// Let's grab the results. This will probably live in some kind of `submit()` handler.
wymResults = wym.xhtml();
wymRefResults = wymRef.xhtml();
Use xhtml(), not html()
Another note specific to your example, but you should be using the xhtml() call instead of the html() call to ensure consistent, cross-browser markup.
The html() call doesn't run the resulting HTML through the parser or do any browser-specific cleanup, which means that if you were to load some html in lets say IE9 that was created in Chrome, just calling html() without making any changes will mean the resulting HTML will be slightly different. Different browsers need HTML that is slightly different to provide a consistent editing experience, and WYMeditor abstracts this away for you, assuming you use xhtml() to get the results.
I've read several examples of handling onClick for dijit.Tree.. in particular this one seems to tell me all I need: dojo how to override dijit class method
However, for some reason my handler gets called when my page first loads, and never when I click on a tree node?
Here's the code:
<div dojoType="dijit.layout.ContentPane" title="Published Blueprints" minSize="20" style="width: 300px;" id="leftAccordion" region="leading" splitter="true">
<div id="blueprintTree" dojoType="dijit.Tree" store="" query="" label="Blueprints" openOnClick="false">
</div>
</div>
...and I then do this...
dojo.ready(function() {
var tree = dijit.byId("blueprintTree");
tree.connect(tree, "onClick", function(item) {
// my code here...
});
});
... the "my code here" part gets invoked when I start (in debug) my jsp, but never when i lock around on nodes...
Obviously I'm missing something simple?
Regards
Brian
Is it required to put the connect inside the dojo.ready()? Maybe that is why it is called on startup?
Looking at the dijit.Tree source, I saw that the onClick had two args
This is what I used in my case to successfully capture onClicks:
In the Tree constructor add openOnClick: false:
var tree = new dijit.Tree( {
model: myModel,
openOnClick: false,
etc...
Then in the same function where I create the tree using the programmatic approach
dojo.connect( tree,"onClick", function(/*dojo.data*/ item, /*TreeNode*/ nodeWidget){
//my code
});
My html document looks like this:
<html>
<head> .. load jquery and other stuff </head>
<body>
<div id="cool_container">
<div class="cool">.. no script friendly markup ..</div>
</div>
<a id="cool_link">Link</a>
<script>
function installStuff(){
$('.cool').coolPlugin();
$('#cool_link').click(function(){
$('#cool_container').load('/anothercooldiv.html');
});
}
$(document).load(function(){ installStuff(); });
</script>
</body>
</html>
Of course, /anothercooldiv.html gives another <div class="cool"> .. etc ...</div> fragment.
So what's the best way to turn the fresh cool div into a coolPlugin without breaking everything (and writing some nasty hacks) ?
It'd would be great to be able to either:
Call installStuff with a default jQuery context '#cool_container', so I could call something like:
$.doThisInContext(function(){installStuff();}, $('#cool_container');
In the load callback.
Or, have an equivalent of 'live' (that would solve the problem of links if cool contains links), but on an element existence, that I could use like that in my function installStuff:
$('.cool').exists(function(what){ what.coolPlugin() };
Then the coolPlugin would be installed on all cool elements now and in the future.
I'd suggest the .livequery() plugin for this still:
$(function() {
$('.cool').livequery(function() {
$(this).coolPlugin();
});
$('#cool_link').click(function(){
$('#cool_container').load('/anothercooldiv.html');
});
});
The important bit:
$('.cool').livequery(function() {
$(this).coolPlugin();
});
Will run for every current and future .cool element as they're added, running the plugin on each.
Applying the plugin to the newly ajax loaded content shouldn't be too tricky:
$('#cool_container').load('/anothercooldiv.html', function() {
$(this).coolPlugin();
});