Skip to content

Commit 41eb25c

Browse files
jonashacktjonashackt
committed
Documenting Nightwatch and using new 1.x features in config.
1 parent b577bc1 commit 41eb25c

File tree

4 files changed

+132
-39
lines changed

4 files changed

+132
-39
lines changed

‎README.md‎

Lines changed: 124 additions & 37 deletions
Original file line numberDiff line numberDiff line change
@@ -446,57 +446,57 @@ export const AXIOS = axios.create({
446446
```
447447

448448

449-
## NPM Security
450-
451-
npm Security - npm@6
452-
453-
https://medium.com/npm-inc/announcing-npm-6-5d0b1799a905
454-
455-
`npm audit`
456-
457-
https://blog.npmjs.org/post/173719309445/npm-audit-identify-and-fix-insecure
458-
459-
Run `npm audit fix` to update the vulnerable packages. Only in situations, where nothing else helps, try `npm audit fix --force` (this will also install braking changes)
460-
461-
https://nodejs.org/en/blog/vulnerability/june-2018-security-releases/
462-
463-
---> __Update NPM regularly__
464449

465-
https://docs.npmjs.com/troubleshooting/try-the-latest-stable-version-of-npm
450+
## Testing
466451

467-
`npm install -g npm@latest`
452+
### Install vue-test-utils
468453

469-
---> __Update Packages regularly__
454+
https://github.com/vuejs/vue-test-utils
470455

471-
https://docs.npmjs.com/getting-started/updating-local-packages
456+
`npm install --save-dev @vue/test-utils`
472457

473-
`npm outdated`
458+
### Jest
474459

475-
`npm update`
460+
Jest is a new shooting star at the sky of JavaScript testing frameworks: https://facebook.github.io/jest/
476461

462+
Intro-Blogpost: https://blog.codecentric.de/2017/06/javascript-unit-tests-sind-schwer-aufzusetzen-keep-calm-use-jest/
477463

478-
## Testing
464+
Examples: https://github.com/vuejs/vue-test-utils-jest-example
479465

480-
### Install vue-test-utils
466+
Vue.js Jest Docs: https://vue-test-utils.vuejs.org/guides/#testing-single-file-components-with-jest
481467

482-
https://github.com/vuejs/vue-test-utils
468+
A Jest Unittest looks like [Hello.test.js](frontend/test/components/Hello.test.js):
483469

484-
`npm install --save-dev @vue/test-utils`
470+
```
471+
import { shallowMount } from '@vue/test-utils';
472+
import Hello from '@/components/Hello'
485473
486-
### Jest
474+
describe('Hello.vue', () => {
475+
it('should render correct hello message', () => {
476+
// Given
477+
const hellowrapped = shallowMount(Hello, {
478+
propsData: { hellomsg: 'Welcome to your Jest powered Vue.js App' },
479+
stubs: ['router-link', 'router-view']
480+
});
487481
488-
https://facebook.github.io/jest/
482+
// When
483+
const contentH1 = hellowrapped.find('h1');
489484
490-
Intro-Blogpost: https://blog.codecentric.de/2017/06/javascript-unit-tests-sind-schwer-aufzusetzen-keep-calm-use-jest/
485+
// Then
486+
expect(contentH1.text()).toEqual('Welcome to your Jest powered Vue.js App');
487+
})
488+
})
489+
```
491490

492-
https://github.com/vuejs/vue-test-utils-jest-example
491+
To pass Component props while using Vue.js Router, see https://stackoverflow.com/a/37940045/4964553.
493492

493+
How to test components with `router-view` or `router-link` https://vue-test-utils.vuejs.org/guides/using-with-vue-router.html#testing-components-that-use-router-link-or-router-view.
494494

495-
Vue.js Jest Docs: https://vue-test-utils.vuejs.org/guides/#testing-single-file-components-with-jest
495+
The test files itself could be named `xyz.spec.js` or `xyz.test.js` - and could reside nearly everywhere in the project.
496496

497497
##### Jest Configuration
498498

499-
* [package.json](frontend/package.json):
499+
The Jest run-configuration is done inside the [package.json](frontend/package.json):
500500

501501
```
502502
"scripts": {
@@ -506,25 +506,112 @@ Vue.js Jest Docs: https://vue-test-utils.vuejs.org/guides/#testing-single-file-c
506506
},
507507
```
508508

509-
* [frontend/test/unit/jest.conf.js](frontend/test/unit/jest.conf.js)
509+
Jest itself is configured inside [frontend/test/unit/jest.conf.js](frontend/test/unit/jest.conf.js)
510510

511511
##### Run Unit tests
512512

513-
`npm run unit`
513+
`npm run unit` - that´ll look like:
514+
515+
![unittestrun-jest](unittestrun-jest.png)
516+
517+
518+
519+
## End-2-End (E2E) tests with Nightwatch
514520

515-
Run all tests (incl. E2E): `npm test`
521+
Great tooling: http://nightwatchjs.org/ - Nightwatch controls WebDriver / Selenium standalone Server in own childprocess and abstracts from those, providing a handy DSL for Acceptance tests:
516522

523+
Docs: http://nightwatchjs.org/gettingstarted/#browser-drivers-setup
517524

518-
### E2E tests with Nightwatch
525+
![http://nightwatchjs.org/img/operation.png](http://nightwatchjs.org/img/operation.png)
519526

520-
http://nightwatchjs.org/
527+
Nightwatch is configured through the [nightwatch.conf.js](/frontend/test/e2e/nightwatch.conf.js). Watch out for breaking changes in 1.x: https://github.com/nightwatchjs/nightwatch/wiki/Migrating-to-Nightwatch-1.0
521528

522-
Nightwatch controls Selenium standalone Server in own childprocess
529+
More options could be found in the docs: http://nightwatchjs.org/gettingstarted/#settings-file
530+
531+
532+
#### Write Nightwatch tests
533+
534+
An example Nightwatch test is provided in [HelloAcceptance.test.js](/frontend/test/e2e/specs/HelloAcceptance.test.js):
535+
536+
```
537+
module.exports = {
538+
'default e2e tests': function (browser) {
539+
// automatically uses dev Server port from /config.index.js
540+
// default: http://localhost:8080
541+
// see nightwatch.conf.js
542+
const devServer = browser.globals.devServerURL
543+
544+
browser
545+
.url(devServer)
546+
.waitForElementVisible('#app', 5000)
547+
.assert.elementPresent('.hello')
548+
.assert.containsText('h1', 'Welcome to your Vue.js powered Spring Boot App')
549+
.assert.elementCount('img', 1)
550+
.end()
551+
}
552+
}
553+
554+
```
523555

524556
##### Run E2E Tests
525557

526558
`npm run e2e`
527559

560+
##### Current Problem with npm audit (see [NPM Security](#npm-security))
561+
562+
With 1.0.6, the following error occurs after an `npm run e2e`:
563+
564+
```
565+
OK. 4 assertions passed. (8.625s)
566+
The "path" argument must be of type string. Received type object
567+
at assertPath (path.js:39:11)
568+
at Object.join (path.js:1157:7)
569+
at process._tickCallback (internal/process/next_tick.js:68:7)
570+
```
571+
572+
With the latest 0.9.21 of Nightwatch, this issue is gone. __BUT:__ the the `npm audit` command does find vulnerabilities:
573+
574+
![nightwatch-npmaudit-vulnerabilities](nightwatch-npmaudit-vulnerabilities.png)
575+
576+
And thus the whole build process will brake. The problem are breaking changes in [Nightwatch 1.x](https://github.com/nightwatchjs/nightwatch#nightwatch-v10), that aren´t reflected inside the Vue.js Webpack template so far (they use the latest 0.9.x, which is vulnerable): https://github.com/nightwatchjs/nightwatch/wiki/Migrating-to-Nightwatch-1.0
577+
578+
579+
## Run all tests
580+
581+
`npm test`
582+
583+
584+
585+
## NPM Security
586+
587+
npm Security - npm@6
588+
589+
https://medium.com/npm-inc/announcing-npm-6-5d0b1799a905
590+
591+
`npm audit`
592+
593+
https://blog.npmjs.org/post/173719309445/npm-audit-identify-and-fix-insecure
594+
595+
Run `npm audit fix` to update the vulnerable packages. Only in situations, where nothing else helps, try `npm audit fix --force` (this will also install braking changes)
596+
597+
https://nodejs.org/en/blog/vulnerability/june-2018-security-releases/
598+
599+
---> __Update NPM regularly__
600+
601+
https://docs.npmjs.com/troubleshooting/try-the-latest-stable-version-of-npm
602+
603+
`npm install -g npm@latest`
604+
605+
---> __Update Packages regularly__
606+
607+
https://docs.npmjs.com/getting-started/updating-local-packages
608+
609+
`npm outdated`
610+
611+
`npm update`
612+
613+
614+
528615

529616
# Links
530617

‎frontend/test/e2e/nightwatch.conf.js‎

Lines changed: 8 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -14,13 +14,19 @@ module.exports = {
1414
port: 4444,
1515
cli_args: {
1616
'webdriver.chrome.driver': require('chromedriver').path
17+
//'webdriver.gecko.driver': geckodriver.path
1718
}
1819
},
1920

2021
test_settings: {
2122
default: {
22-
selenium_port: 4444,
23-
selenium_host: 'localhost',
23+
// see breaking changes in 1.x https://github.com/nightwatchjs/nightwatch/wiki/Migrating-to-Nightwatch-1.0
24+
webdriver: {
25+
webdriver_port: 4444,
26+
webdriver_host: 'localhost',
27+
},
28+
//selenium_port: 4444,
29+
//selenium_host: 'localhost',
2430
silent: true,
2531
globals: {
2632
devServerURL: 'http://localhost:' + (process.env.PORT || config.dev.port)

‎nightwatch-npmaudit-vulnerabilities.png‎

177 KB
Loading

‎unittestrun-jest.png‎

333 KB
Loading

0 commit comments

Comments
 (0)