I am new to Angular testing, and I want to perform 2 kinds of test for my application:
Unit Test - I choose to use Jest since I can run my test without opening the browser, and it also supports testing for specific cases with --testNamePatern.
End to end test - I want to try out Protractor since it is available in Angular and also has a big Angular community to work with.
My question is, can I use both Jest and Protractor in my application? If yes, do I need to configure anything to use both of them in my application.
You can use both jest and protractor in your application. By default the new angular cli release gives you a karma runner for unit tests and a protractor runner for end to end tests inside the same application. You are just changing Karma with Jest.
Can I run protractor tests (end to end) with jest?
No you cannot.
Can I run unit tests using protractor?
No you cannot.
Can I run protractor for end to end tests and jest for unit tests in the same application?
Yes you can. You will just need to tell jest which files to pick up and the same with protractor.
Can I get both the reports in a single file or a single run?
No you cannot. You will have to configure your jest runner to print reports which will be different from the protractor reports.
You can use both jest and protractor without configuring anything special. Here is a snippet of the package.json I am using for running e2e tests with protractor and lighthouse tests with jest.
{
"name": "performance-tests",
"version": "1.0.0",
"description": "Performance tests and end to end tests.",
"main": "jest.js",
"scripts": {
"debug": "node --inspect-brk ./node_modules/.bin/protractor protractor.conf.js",
"pretest": "npm run tsc && npm run webdriver-update",
"e2e": "npm run tsc && ./node_modules/protractor/bin/protractor protractor/compiled-js-files/protractor.conf.js",
"grid": "sh run-grid.sh && npm run e2e",
"tsc": "./node_modules/typescript/bin/tsc",
"webdriver-update": "./node_modules/protractor/bin/webdriver-manager update --standalone --versions.standalone=3.8.0 --chrome --versions.chrome=78.0.3904.97",
"lighthouse": "./node_modules/jest/bin/jest.js --verbose -t=lighthouse",
"lighthouse-reports": "./node_modules/jest/bin/jest.js --verbose -t=lighthouse && node ./lighthouse/db.js"
},
"repository": {
"type": "",
"url": ""
},
"author": "Sankalan Parajuli",
"license": "ISC",
"bugs": {
"url": ""
},
"homepage": "",
"dependencies": {
"#types/jasmine": "^3.3.12",
"#types/jasminewd2": "^2.0.6",
"#types/node": "^12.12.14",
"jasmine": "^3.3.1",
"lighthouse": "^4.0.0-beta",
"protractor": "5.4.2",
"protractor-beautiful-reporter": "^1.3.3"
},
"devDependencies": {
"#types/request": "^2.48.3",
"#types/selenium-webdriver": "^4.0.0",
"csvtojson": "^2.0.8",
"jest": "^23.4.1",
"moment": "^2.24.0",
"mongodb": "^3.1.13",
"puppeteer": "^1.6.0",
"request-promise": "^4.2.5",
"ts-node": "^8.5.2",
"typescript": "2.8.1"
}
}
Hope it helps.
Related
I am currently doing some work with npm scripts and can't find an answer to my question online!
I want to run 3 NPM scripts by typing one command. Here the scripts:
"start-jsonserver:platform": "ng serve --configuration jsonserver"
"start:corePlugins": "ng serve corePlugins",
"start:jsonserver": "cd ../json-server & npm run start",
"start:allJsonEnvironment": "npm run start-jsonserver:platform && npm run start:corePlugins && npm run start:jsonserver",
Note that the last command is not working as I want it to as it stops after the first ng serve is "done". I have also tried the same command with just one & but this has the same effect
I have found a solution which is opening 3 seperate Powershell windows:
"start:allJsonEnvironment": "start powershell npm run start-jsonserver:platform && start powershell npm run start:corePlugins && start powershell npm run start:jsonserver"
The Problem is this opens the normal 'standalone' Powershell windows which, to be honest is really ugly and I am used to seeing the VS Code internal Powershell windows (3 at the same time) since its easy to spot if something went wrong.
Like that:
So if there is a way to open these 'internal' Powershell windows from the npm script I would really appreciate help.
(I know there is a way to run all three scripts in one internal window but that is not what I am looking for!)
Okay after some research I have found another solution.
Its not envolving NPM scripts but it is actually the better solution.
My personal solution to the Problem was to use the VS Code Tasks and dependsOn to connect all three commands:
{
"version": "2.0.0",
"tasks":
[
{
"label": "corePlugins",
"type": "shell",
"options": {
"cwd": "${workspaceFolder}/frontend"
},
"command": "ng serve corePlugins"
},
{
"label": "serve_conf_json",
"type": "shell",
"options": {
"cwd": "${workspaceFolder}/frontend"
},
"command": "ng serve --configuration jsonserver"
},
{
"label": "json-server",
"group": "test",
"type": "shell",
"options": {
"cwd": "${workspaceFolder}/json-server"
},
"command": "npm run start"
},
{
"label": "startAllJson",
"dependsOn": [
"json-server",
"corePlugins",
"serve_conf_json",
]
}
]
}
So now I can just run the Task startAllJson and it opens 3 VSCode Terminals and runs those commands.
I know this might not be the perfect answer to my question but it was the best solution I found in a short amount of time.
In pretest command "tsc" i have used so that file should convert to js. This command changes ts code to js. Now in config js file specs extension remains TS example- file "testspec.ts" not js. extension is not changing. Due to this i am facing specs not found. Extension should also change in configuration.js of specs file.How can i resolve this, so that i just have to give command npm run test and my testcase executes.
Code of package.json
{
"name": "protractortypescriptcucumberframework",
"version": "1.0.0",
"description": "cucumberframework",
"main": "index.js",
"scripts": {
"test": "protractor JSFiles/configuration.js",
"pretest": "tsc",
"protractor":"./node_modules/protractor/built/cli.js",
"webdriver-update":"./node_modules/.bin/webdriver-manager update"
},
"author": "ak",
"license": "ISC",
"dependencies": {
"protractor": "^7.0.0",
"typescript": "~3.9.6",
"jasmine": "~3.5.0",
"#types/jasmine": "~3.5.11",
"#types/jasminewd2": "~2.0.8",
"ts-node": "~8.10.2",
"#types/node": "~14.0.23"
}
}
Error i face is below after command > npm run test
> protractortypescriptcucumberframework#1.0.0 pretest C:\Users\Admin\Eclipse Protractor JavaScript\ProtractorTypeScriptCucumberFramework
> tsc
> protractortypescriptcucumberframework#1.0.0 test C:\Users\Admin\Eclipse Protractor JavaScript\ProtractorTypeScriptCucumberFramework
> protractor JSFiles/configuration.js
[13:49:25] I/launcher - Running 1 instances of WebDriver
[13:49:25] I/direct - Using ChromeDriver directly...
DevTools listening on ws://127.0.0.1:49802/devtools/browser/9a9f6b17-da99-4aec-993c-a265017ee716
> protractortypescriptcucumberframework#1.0.0 test C:\Users\Admin\Eclipse Protractor JavaScript\ProtractorTypeScriptCucumberFramework
> protractor JSFiles/configuration.js
[13:49:25] I/launcher - Running 1 instances of WebDriver
[13:49:25] I/direct - Using ChromeDriver directly...
DevTools listening on ws://127.0.0.1:49802/devtools/browser/9a9f6b17-da99-4aec-993c-a265017ee716
Started
No specs found
Finished in 0.218 seconds
[13:49:49] I/launcher - 0 instance(s) of WebDriver still running
[13:49:49] I/launcher - chrome #01 passed
Config file code.
import {Config} from "protractor";
// An example configuration file
export let config: Config = {
// The address of a running selenium server.
//seleniumAddress: 'http://localhost:4444/wd/hub',
directConnect:true,
// Capabilities to be passed to the webdriver instance.
capabilities: {
browserName: 'chrome'
},
// Spec patterns are relative to the configuration file location passed
// to protractor (in this example conf.js).
// They may include glob patterns.
specs: ['testspec.ts'],
// Options to be passed to Jasmine-node.
jasmineNodeOpts: {
showColors: true, // Use colors in the command line report.
}
};
I figured out the error.
In config file of ts extension need to pass spec with js extension only. scripts tag will not automatically change spec extension. It has to be passed by user in config ts file.
I have followed the walkthrough document to create my first SAPUI5 / OpenUI5 project. And I use ui5-cli and NPM to manage my project.
Every time I want to run my project, I type the command ui5 serve -o index.html to start the service. And in my browser, I have to visit localhost:8080/index.html to get my project view.
But if I just type localhost:8080/, it cannot find index.html automatically. So how to resolve the problem?
Here is my package.json:
{
"name": "appname",
"version": "1.0.0",
"description": "app description",
"main": "index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"dev": "ui5 serve -o index.html",
"build": "ui5 build --all"
},
"keywords": [
"keyword"
],
"author": "",
"license": "ISC",
"dependencies": {
"#openui5/sap.m": "^1.64.0",
"#openui5/sap.ui.core": "^1.64.0",
"#openui5/sap.ui.layout": "^1.64.0",
"#openui5/sap.ui.unified": "^1.64.0",
"#openui5/themelib_sap_belize": "^1.64.0"
}
}
Here is the simple ui5.yaml generate by ui5 init command:
specVersion: '1.0'
metadata:
name: appname
type: application
So how to just visit localhost:8080 in browser and it can get to my project?
I know that you could use browserstack before protractor 3.0 but they have added official support in 3.0 . I haven't been able to try that out yet so maybe that's the answer to my question? Currently don't have the ability to upgrade so if that's my answer then I will go through the proper channels to make that happen.
The problem I'm having with browser stack is that it names all the sessions random hashes. So I may have a suite of tests and I have no way to tell which session is which test. You can manually change the capabilities.name but then everything will have that name.
I know when I use saucelabs it will name everything after the name of the test file. so for example it will be sometest.js . I don't know if this is something protractor is doing or some node-module we're using that is doing the work behind the scenes and I don't know?
I just want to know how I can run my suite that runs all my smoketests and names each browserstack session after the actual name of the tests in the suite.
here is an example of what things look like on browserstack. I did manually set the capabilities.name to mytest for a few sessions.
here is how they look with sauce labs
Also here is my package.json file in case any of these modules might be making saucelabs name the jobs after the test file name
{
"name": "protractor",
"version": "1.0.0",
"description": "Protractor protype",
"main": "Gruntfile.js",
"dependencies": {
"grunt-sauce-tunnel": "^0.2.1",
"jasmine-reporters": "^2.1.1",
"lodash": "^3.2.0",
"protractor": "2.5.1",
"require-all": "2.0.0"
},
"devDependencies": {
"chalk": "^1.1.1",
"grunt": "^0.4.5",
"grunt-env": "^0.4.2",
"grunt-protractor-runner": "3.0.0",
"grunt-sauce-connect-launcher": "^0.3.0",
"jasmine-spec-reporter": "^2.2.3",
"request-promise": "^1.0.2",
"selenium-webdriver": "2.48.2",
"xlsx-json": "^0.1.0"
},
"scripts": {
"install": "node node_modules/protractor/bin/webdriver-manager update",
"test": "echo \"Error: no test specified\" && exit 1"
},
"repository": {
"type": "git",
"url": "git:user/rwolfe/protractor"
},
"author": "",
"license": "ISC"
}
So I don't know if this was due to upgrading to protractor 3.0 or not but apparently in the conf.js I saw that for sauce labs we were setting
exports.config.capabilities.name = " ";
and when I did that for browserstack now the names of the test show up how I would expect as below.
I built a site with wintersmith in November of 2013. It's live at http://powma.com
I'm coming back to it, but it's not building :-{
I don't mind getting my hands dirty, but I don't know where to start. I'm getting this error:
error Error loading plugin './node_modules/wintersmith-coffee/': Cannot find module './plugin'
Any suggestions?
Thanks!
Mike
UPDATE
Hey, this is because the coffeescript wasn't getting compiled.
I installed it globally, but that didn't help.
$ sudo npm install -g coffee-script
I manually compiled it and moved to other errors. Any suggestions for what's missing?
$ coffee -c plugin.coffee
Here's my config.json:
{
"locals":
{ "url": "http://localhost:8080"
, "title": "Powma"
, "subTitle": "Linking you to technology"
, "motto": "We build exceptions sites and applications to connect people to products, services, and each other."
, "owner": "Michael Cole"
, "profilePicture": "/static/img/profile-professional.jpg"
, "inlineSpriteMaxBytes" : 10000
},
"views": "./views",
"plugins":
[ "./node_modules/wintersmith-coffee/"
, "./node_modules/wintersmith-stylus/"
],
"require": {
"moment": "moment",
"_": "underscore",
"typogr": "typogr"
},
"jade": {
"pretty": true
},
"markdown": {
"smartLists": true,
"smartypants": true
},
"paginator": {
"perPage": 3
}
}
And package.json:
{
"name": "Powma-com",
"version": "0.1.1",
"private": true,
"engines": {
"node": "0.10.17"
},
"dependencies": {
"moment": "2.0.x",
"underscore": "1.5.x",
"typogr": "0.5.x",
"wintersmith": "2.0.x",
"wintersmith-stylus": "git://github.com/MichaelJCole/wintersmith-stylus.git#master",
"wintersmith-coffee": "0.2.x",
"express": "3.4.x",
"sendgrid": "~0.3.0-rc.1.7",
"express-validator": "~0.8.0",
"underscore-express": "0.0.4"
}
}
This is a new dev laptop I'm working with so that may be part of the problem.
I worked around the issue, but didn't fix it. Do I really need to manually compile the coffeescript?
Thanks!
I solved this issue by explicitly specifying plugin.coffee in the config.json file.
{
...other stuff...
"plugins":
[ "./node_modules/wintersmith-coffee/plugin.coffee"
, "./node_modules/wintersmith-stylus/plugin.coffee"
],
...more stuff...
}
It looks like you're missing wintersmith-coffee in node_modules; make sure you have it installed locally with npm install wintersmith-coffee. You can also try removing it from config.json if you're not using it anywhere.
It would also be helpful to see both your config.json and package.json. Also make sure you run an npm install and npm update to make sure you have everything referenced in package.json installed and updated.
Update
Not having CoffeeScript installed could have been the issue. After installing that globally, I'm not sure if all of your shell sessions will pick up the command and use it without being restarted. With a new shell session, see if you can build the site. You can also try testing Wintersmith in isolation of your site. Try generating a sample site with wintersmith new somepath and see if you can run wintersmith build there. That would be a good start for narrowing down your issues between your site and your workstation setup.