I am new to cypress and I want to write unit tests for my existing application. Can anyone suggest how to write unit tests for angular js using cypress and code coverage?
I have followed the documentation but I am not getting combined results. The code coverage index file is showing only spec files.
https://i.postimg.cc/FH0fnRrM/Screen-Shot-2020-11-09-at-10-53-56-AM.png
https://i.postimg.cc/wjkNjvCh/Screen-Shot-2020-11-09-at-10-54-45-AM.png
You can use these plugins:
For angular
https://github.com/bahmutov/cypress-angular-unit-test
https://github.com/bahmutov/cypress-angularjs-unit-test
For code coverage
https://github.com/cypress-io/code-coverage
I also recommend that you read this article:
https://www.cypress.io/blog/2018/03/20/angular-cypress-love/
I'm attempting to test our play 2.4.x application that makes heavy use of react for rendering tables and similar things. When just running the application normally, all the javascript gets processed and output properly. From our integration test phase however (using something that extends WithBrowser for selenium support in specs2 examples), the assets are clearly not available.
We get a lot of errors like the following (one for each javascript file we attempt to load):
[error] - com.gargoylesoftware.htmlunit.html.HtmlPage - Error loading JavaScript from [http://localhost:19001/assets/lib/react/react-with-addons.js]
Is there anything that can be added to tell play to process our javascript pipeline before the test/integration phases?
Are you using the IntegrationTest Configuration in SBT?
I was having the same problem and finally solved it by adding:
(managedClasspath in IntegrationTest) += (packageBin in Assets).value
to my build.sbt
This might not be the same for you, but I'm using Gulp to generate my css and js files and place them in an 'out' directory. So in order to get them picked up by the build I also had to add:
unmanagedResourceDirectories in Assets <+= baseDirectory { _ / "out" }
I am trying to setup the code coverage for the unit test for the angular project. However it gave me some error. Refer https://github.com/angular-class/NG6-starter/issues/58
Refer to implementation in : https://github.com/packetloop/angular-webpack/blob/master/karma.conf.js
and also add a file : https://github.com/packetloop/angular-webpack/blob/master/spec.js
I find the Angular console test reporting awkward to read, it just a big pile of console text with next to no formatting.
Is it possible to get the Angular unit testing reporting to appear in the browser using html for formatting? I noticed this github repo the other day - https://github.com/larrymyers/jasmine-reporters
Is it possible to use the html reporter in that library for Angular unit test reporting..can I have the results of Angular unit tests shown in a browser?
I know there is a 'reporters' config option in the karma test runner file used for Angular testing and it has the following options -
dots,
progress,
junit,
growl,
coverage
However these seem to do absolutely nothing, no matter what I set them to, and I couldn't find any documentation on them.
So what is the purpose of the reporters option in karma.conf.js?
I personally use the coverage option. But for this to work you need to setup Istanbul ( https://github.com/yahoo/istanbul ) Coverage reporter separately. This will give you in HTML format the status of what files and lines in files are being tested, it will not show the actual tests written.
I don't think any of the reporters will actually print out the individual tests in HTML format. Try using Webstorm, it displays the individual tests in an easy to read format.
I've tried the karma-html-reporter module from npm, but it hasn't worked for me, so maybe see if they've updated that one.
I run karma from IntelliJ 13.x and am able to get a clean html format for the test output using the following configuration options in karma.conf.js in the config.set section :
reporters: ['progress', 'junit', 'html']
plugins : ['karma-htmlfile-reporter', ...] (karma-jasmine, etc...)
htmlReporter: { outputFile: 'tests/units.html' }
After my tests run I can just right click on the test/units.html and open in browser to see a formatted version of the results including color coding of results. Of course you will need to install any plugins or dependencies to get the test to run.
If you've been developing your project using the Angular-CLI, you can just run a
ng test --code-coverage
with the following (or similar) config in your karma.conf.js file
coverageIstanbulReporter: {
reports: ['html', 'lcovonly'],
fixWebpackSourcePaths: true,
thresholds: {
global: { // thresholds for all files
statements: 0,
lines: 0,
branches: 0,
functions: 0
},
each: { // thresholds per file
statements: 0,
lines: 0,
branches: 0,
functions: 0
}
}
},
honestly, if not, the Karma Istanbul coverage tool is excellent and relatively simple to install.
For code coverage I use the newer version of karma-coverage-istanbul-reporter. It builds a report website based on the angular-cli code coverage output. You can drill down into your components and services to see where your unit test coverage is lacking. There is also an aggregation of coverage at the top. The output will create a coverage folder in your defined destination, just load the index.html for the report.
I wanted to note that by default this will include all files without .spec.ts. Use the following to exclude models and other files from coverage in your .angular-cli.json test section:
"codeCoverage" : {
"exclude": ["./src/test/*mocks.ts",
"./src/environments/*.ts",
"./src/app/models/*model.ts"
]
}
I am new to AngularJS to JS in general. Now I want to use JSTestDriver and behavior driven development framework Jasmin . As I understood AngularJS works with Jasmine and test driver. I am working with Ideal Intellij 11.1.3. I added the plug in for JsTestdriver to It and run some test as described here http://code.google.com/p/js-test-driver/wiki/IntelliJPlugin. Now here is the problem. When I write some Jasmine tests like this one
describe("A suite", function() {
it("contains spec with an expectation", function() {
expect(true).toBe(true);
});
});
, for the first time indea intellij asked me to download the jasmine adapter and I did, but when I run the test I got this message : unable to attach test reporter to test framework intellij. I searched google for solutions, some guy posted how to run the angular tutorials: here : https://groups.google.com/forum/?fromgroups=#!topic/angular/LdjNsZD69Uk.
he uses a configuration files that comes with Angular js. and Node.js should I install them too ? isn't there any way to automatically do this from ideal intellij ?
What files structure should I have ?
Any help, link or suggestion will be great.
I fixed my jsTestDriver.conf file and it's paths, but now I get this problem :
Testing started at 1:31 PM ...
Cannot read [
/tmp/.m2/repository/org/testng/testng/6.7/testng-6.7.jar!/testng-reports.js
/home/clouway/.m2/repository/org/testng/testng/6.7/testng-6.7.jar!/testng-reports.js
] derived from .m2/repository/org/testng/testng/6.7/testng-6.7.jar!/testng-reports.js
Cannot read [
/tmp/.m2/repository/org/testng/testng/6.7/testng-6.7.jar!/jquery-1.7.1.min.js
/home/clouway/.m2/repository/org/testng/testng/6.7/testng-6.7.jar!/jquery-1.7.1.min.js
] derived from .m2/repository/org/testng/testng/6.7/testng-6.7.jar!/jquery-1.7.1.min.js
at com.google.jstestdriver.PathResolver.resolve(PathResolver.java:98)
at com.google.jstestdriver.config.ParsedConfiguration.resolvePaths(ParsedConfiguration.java:99)
at com.google.jstestdriver.config.Initializer.initialize(Initializer.java:86)
at com.google.jstestdriver.embedded.JsTestDriverImpl.createRunnerInjector(JsTestDriverImpl.java:368)
at com.google.jstestdriver.embedded.JsTestDriverImpl.runConfigurationWithFlags(JsTestDriverImpl.java:342)
at com.google.jstestdriver.embedded.JsTestDriverImpl.runConfiguration(JsTestDriverImpl.java:233)
at com.google.jstestdriver.idea.TestRunner.runTests(TestRunner.java:195)
at com.google.jstestdriver.idea.TestRunner.executeTestCase(TestRunner.java:131)
at com.google.jstestdriver.idea.TestRunner.unsafeExecuteConfig(TestRunner.java:122)
at com.google.jstestdriver.idea.TestRunner.executeConfig(TestRunner.java:97)
at com.google.jstestdriver.idea.TestRunner.executeAll(TestRunner.java:88)
at com.google.jstestdriver.idea.TestRunner.main(TestRunner.java:330)
Empty test suite.
I Use maven as my build tool.
I haven't used JSTestDriver in IntelliJ, so I can't address your question directly. However, AngularJS has moved from JSTestDriver to using Testacular (http://vojtajina.github.com/testacular/), so you might want to do the same. The link includes some setup help getting it running in WebStorm which should be the same.
Looks like he's renamed it "Karma" (http://karma-runner.github.com/)