I am using jasmine-node and want to reuse some custom matchers I have been using with karma. I cannot find how to load my custom matchers...
Using karma and jasmine 2.4 I can load them this way:
beforeEach(function () {
jasmine.addMatchers(customMatchers);
});
But using jasmine-node it is not working.
I must be missing something because jasmine itself is actually undefined..Can some please guide me in the right direction? Thank-you
Related
I use Cypress to automate logging in to a web application, protected by an iFrame.
In my Selenium I can use a command to switch to iFrame:
driver.switchTo().frame(driver.findElement(By.xpath(".//*#id='app']/iframe")));
After that I can access iFrame elements as well.
But with Cypress, I don't know the method to switch to frame?
Cypress doesn't give you an out of the box solution to work with iframes like Selenium or other tools. But thanks to the huge community, a lot of workarounds are available to work with iframes. One such way is:
1.Go to cypress/support/command.js and write:
Cypress.Commands.add('getIframe', (iframe) => {
return cy.get(iframe)
.its('0.contentDocument.body')
.should('be.visible')
.then(cy.wrap);
})
2.In the tests write:
cy.getIframe('selector')
If you want to learn more about iframes and cypress, you can read this well written blog post by Gleb Bahmutov.
I'm using Ember 2.7.0 of course with ember-cli.
I come from Rails, I used to put in "assets/application.js" all my javascript like, for example:
var ready = function () {
myFunction('test');
$('#btn-fluid').on('click', function () {
$('#myPage').toggleClass('container')
});
}
document.addEventListener("turbolinks:load", function () {
ready()
})
Now with Ember where I have to put this code in my application?
I read on the web the use of:
Ember.Application.create({
ready: function () {
});
but I don't know how to put this code: in app.js maybe, but I already have:
App = Ember.Application.extend({
modulePrefix: config.modulePrefix,
podModulePrefix: config.podModulePrefix,
Resolver
});
and if I create another file in the root, like for example "mycode.js" like this:
import {Ember} from 'ember';
let myCode;
myCode = Ember.Application.create({
ready: function () {
console.log('Test!');
}
});
export default myCode;
and import it in application using ember-cli-build.js here:
...
app.import('mycode.js');
it compile the big js with my code, but it doesn't work at all my ready function.
How to do?
I have to use Components? Maybe an application component?
Which is the best Ember way for top performances?
To start working with Ember is a must to know Ember's structure and the way Ember works, Simply you need to use Ember guideline to get the best performance. I will explain you some steps and example and I hope it will help you to understand more.
First of all check this image
1. Review Ember Guides and API Docs
In addition, it's a good to review this repository on Github as well. https://github.com/emberjs/guides/ which will help developers to get used to Ember.
2. Install Ember-CLI
Ember-CLI is a command line interface which has been designed for creating Ember apps that strongly favor convention over configuration.
3. Install the Ember Inspector Extension
The Ember Inspector Extension is super-useful for debugging your Ember app.You may also find Chrome app on Google play.
4. Read “From Rails To Ember”
Since you know Ruby on Rails and you are a developer of that, it is essential that you read the tips compiled in From Rails To Ember.
5. Get to Know Ember.Component
A simple way to think of an Ember component is that it is a combination of controller and view, isolated and reusable:
You should pass in the state you need to the component.
Components should communicate with their parent scope (e.g, controller
or another component) by sending actions.
Parent scope (e.g., controller or another component) communicates with
the component by changing the data state that it has passed to the
component.
As an example I am going to explain some part of your code.
You have this
$('#btn-fluid').on('click', function () {
$('#myPage').toggleClass('container')
});
and probably this is your HTML code
<a id="btn-fluid">Whatever for CLICK </a>
<div id="myPage" class="">dummy text </div>
However, in Ember what would be the best practice to use Actions in your Route or Controller to define your action function for example your code in Ember will be something like this :
myPage: null,
actions: {
clickOnbtnFliud() {
this.set('myPage', 'container');
}
}
and HTML in the same template for the controller would be like
<a {{action 'clickOnbtnFliud'}}>Whatever for CLICK </a>
<div class="{{myPage}}">dummy text </div>
In Summary,
You may use Components as you need which is the best practice for your Ember Application but you need to understand where you have to create that.
You rarely need to edit Ember-Cli-Build.js unless you want to insert extra plugins library or ... but I don't recommend you to insert your internal JS files as you can simply convert it to Ember Native codes. For instance you don't need to do this app.import('mycode.js'); but you can simply create your Route and add your custom code like I said as an example before to your Route or Controller or Components.
What I can assure you is if you user Ember in the way that you can find in Guidelines in Ember website, You don't need to worry about performance.Just try to user Ember Native way to implement your code.
Last word, As much as possible keep yourself motivated to use EmberAddons rather than thirdparty plugins and always choose the best updated addons not all of them. Search for best Addons and popular ones and use it.
Hope this guide help you.
I want to run Jasmine unit test in combination with JSTest.NET, so that I can execute my test runs in VisualStudio with MSTest. This is obligatory for me, as our teams build system (TFS) workflow cannot be extended/changed (for organisational reasons) to use Jasmine's SpecRunner.html or some other way to run Jasmine tests.
Thus, JSTest.NET seems to do the trick for me, as it is a bridge betweeen javascript and MSTest.
Therefore, I my first step was to write this MSTest:
[DeploymentItem(#"Scripts\jasmine\jasmine.js")]
[DeploymentItem(#"Scripts\jasmine\jasmine-html.js")]
[DeploymentItem(#"Scripts\jasmine\boot.js")]
[TestMethod]
public void SimpleJasmineTest()
{
_script.AppendFile("jasmine.js");
_script.AppendFile("jasmine-html.js");
_script.AppendFile("boot.js");
_script.AppendBlock(#"
describe('Hello world', function() {
it('should be nice here', function() {
expect('world'.length).toBe(5);
});
})");
_script.RunTest(#"
");
}
When executing this test, I get a "runtime error in JScript: 'window' is undefined", which is obvious as there is no browser in the game that could provide a window object.
Anyone can kick me into the right direction?
I found that using Chutzpah's solution (instead of JSTest.NET) is practical for my needs, following this tutorial:
http://aspnetperformance.com/post/Unit-testing-JavaScript-as-part-of-TFS-Build.aspx
I am using Jasmine 2.0.4 with jasmine-ajax 2.99.0 to try to test a module that calls a web service.
The code is the following:
define(['models/data-service', 'models/admin', 'models/contest', 'models/participant', 'ContestResponse'],
function(dataService, admin, Contest, Participant, ContestResponse){
"use strict";
describe("Data Service Tests", function(){
var onSuccess, onFailure, request;
describe("on new contests loaded", function(){
beforeEach(function(){
jasmine.Ajax.install();
});
it("calls onSuccess with an array of Contests", function(){
onSuccess = jasmine.createSpy('onSuccess');
onFailure = jasmine.createSpy('onFailure');
dataService.getContests()
.done(onSuccess)
.fail(onFailure);
request = jasmine.Ajax.requests.mostRecent();
expect(request.url).toBe('/api/contest');
expect(request.method).toBe('GET');
request.respondWith(ContestResponse.getResponse().contest.success);
expect(onSuccess).toHaveBeenCalled();
var successArgs = onSuccess.calls.mostRecent().args[0];
expect(successArgs.length).toEqual(4);
});
});
});
});
Everything works until it reaches the line where I try to call the respondWith method of the request. Even though I can see that the object returned from the jasmine.Ajax.requests.mostRecent() is of type FakeXMLHttpRequest, respondWidth is marked as undefined. Any Ideas?
Thanks
[UPDATE]
I have been able to narrow it down. It looks like the mock-ajax.js file is not being loaded. I have the karma-jasmine-ajax node module installed and have added jasmine-ajax to the frameworks array of the karma.conf.js like this:
frameworks: ['jasmine-ajax','jasmine', 'requirejs'],
is there anything else I need to do?
[RANT] no wonder why so few developers are running unit test with javascript [/RANT]
I faced the same issue, it looks like the latest version doesn't have respondWith method.
Downgrading the jasmine-ajax plugin made the trick:
npm install karma-jasmine-ajax#0.1.1
Now I can see respondWith is working fine.
This appears to have been a transitional problem in one of the jasmine-ajax libraries. Upgrading to latest version (3.1.0 at the time of this writing) will fix your problem.
npm install jasmine-ajax
bower install jasmine-ajax
or
jasmine-ajax on github
If you can't change jasmine-ajax versions due to conflicts (ie: you use Jasmine 1.3 or something else that has a dependency on a different version of jasmine-ajax), you can use: request.response instead of request.respondWith
I'm prototyping a MVC.NET 4.0 application and am defining our Javascript test configuration. I managed to get Jasmine working in VS2012 with the Chutzpah extensions, and I am able to run pure Javascript tests successfully.
However, I am unable to load test fixture (DOM) code and access it from my tests.
Here is the code I'm attempting to run:
test.js
/// various reference paths...
jasmine.getFixtures().fixturesPath = "./";
describe("jasmine tests:", function () {
it("Copies data correctly", function () {
loadFixtures('testfixture.html');
//setFixtures('<div id="wrapper"><div></div></div>');
var widget = $("#wrapper");
expect(widget).toExist();
});
});
The fixture is in the same folder as the test file. The setFixtures operation works, but when I attempt to load the HTML from a file, it doesn't. Initially, I tried to use the most recent version of jasmine-jquery from the repository, but then fell back to the over 1 year old download version 1.3.1 because it looked like there was a bug in the newer one. Here is the message I get with 1.3.1:
Test 'jasmine tests::Copies data correctly' failed
Error: Fixture could not be loaded: ./testfixture.html (status: error, message: undefined) in file:///C:/Users/db66162/SvnProjects/MvcPrototype/MvcPrototype.Tests/Scripts/jasmine/jasmine-jquery-1.3.1.js (line 103)
When I examine the source, it is doing an AJAX call, yet I'm not running in a browser. Instead, I'm using Chutzpah, which runs a headless browser (PhantomJS). When I run this in the browser with a test harness, it does work.
Is there someone out there who has a solution to this problem? I need to be able to run these tests automatically both in Visual Studio and TeamCity (which is why I am using Chutzpah). I am open to solutions that include using another test runner in place of Chutzpah. I am also going to evaluate the qUnit testing framework in this effort, so if you know that qUnit doesn't have this problem in my configuration, I will find that useful.
I fixed the issue by adding the following setting to chutzpah.json:
"TestHarnessLocationMode": "SettingsFileAdjacent",
where chutzpah.json is in my test app root
I eventually got my problem resolved. Thank you Ian for replying. I am able to use PhantomJS in TeamCity to run the tests through the test runner. I contacted the author of Chutzpah and he deployed an update to his product that solved my problem in Visual Studio. I can now run the Jasmine test using Chutzpah conventions to reference libraries and include fixtures while in VS, and use the PhantomJS runner in TeamCity to use the test runner (html).
My solution on TeamCity was to run a batch file that launches tests. So, the batch:
#echo off
REM -- Uses the PhantomJS headless browser packaged with Chutzpah to run
REM -- Jasmine tests. Does not use Chutzpah.
setlocal
set path=..\packages\Chutzpah.2.2.1\tools;%path%;
echo ##teamcity[message text='Starting Jasmine Tests']
phantomjs.exe phantom.run.js %1
echo ##teamcity[message text='Finished Jasmine Tests']
And the Javascript (phantom.run.js):
// This code lifted from https://gist.github.com/3497509.
// It takes the test harness HTML file URL as the parameter. It launches PhantomJS,
// and waits a specific amount of time before exit. Tests must complete before that
// timer ends.
(function () {
"use strict";
var system = require("system");
var url = system.args[1];
phantom.viewportSize = {width: 800, height: 600};
console.log("Opening " + url);
var page = new WebPage();
// This is required because PhantomJS sandboxes the website and it does not
// show up the console messages form that page by default
page.onConsoleMessage = function (msg) {
console.log(msg);
// Exit as soon as the last test finishes.
if (msg && msg.indexOf("Dixi.") !== -1) {
phantom.exit();
}
};
page.open(url, function (status) {
if (status !== 'success') {
console.log('Unable to load the address!');
phantom.exit(-1);
} else {
// Timeout - kill PhantomJS if still not done after 2 minutes.
window.setTimeout(function () {
phantom.exit();
}, 10 * 1000); // NB: use accurately, tune up referring to your needs
}
});
}());
I've got exactly the same problem. AFAIK it's to do with jasmine-jquery trying to load the fixtures via Ajax when the tests are run via the file:// URI scheme.
Apparently Chrome doesn't allow this (see https://stackoverflow.com/a/5469527/1904 and http://code.google.com/p/chromium/issues/detail?id=40787) and support amongst other browsers may vary.
Edit
You might have some joy by trying to set some PhantomJS command-line options such as --web-security=false. YMMV though: I haven't tried this myself yet, but thought I'd mention it in case it's helpful (or in case anyone else know more about this option and whether it will help).
Update
I did manage to get some joy loading HTML fixtures by adding a /// <reference path="relative/path/to/fixtures" /> comment at the top of my Jasmine spec. But I still have trouble loading JSON fixtures.
Further Update
Loading HTML fixtures by adding a /// <reference path="relative/path/to/fixtures" /> comment merely loads in your HTML fixtures to the Jasmine test runner, which may or may not be suitable for your needs. It doesn't load the fixtures into the jasmine-fixtures element, and consequently your fixtures don't get cleaned up after each test.