Skip to content

Commit c74b45e

Browse files
committed
Merge remote-tracking branch 'origin/master'
2 parents e050426 + 1226a85 commit c74b45e

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

54 files changed

+10910
-9550
lines changed

README.md

+229-7
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,7 @@
44
[![Coverage Status](https://coveralls.io/repos/github/jonashackt/spring-boot-vuejs/badge.svg?branch=master)](https://coveralls.io/github/jonashackt/spring-boot-vuejs?branch=master)
55
[![License](http://img.shields.io/:license-mit-blue.svg)](https://github.com/jonashackt/spring-boot-vuejs/blob/master/LICENSE)
66

7-
![localhost-first-run](https://github.com/jonashackt/spring-boot-vuejs/blob/master/localhost-first-run.png)
7+
![localhost-first-run](screenshots/localhost-first-run.png)
88

99
A live deployment is available on Heroku: https://spring-boot-vuejs.herokuapp.com
1010

@@ -20,7 +20,7 @@ Key points are:
2020
* Angular 2 isn’t the way to go, if you know version 1 (complete re-write, only with Typescript, loss of many of 1’s advantages, Angular 4 is coming)
2121
* React (facebookish problems (licence), need to choose btw. Redux & MObX, harder learning curve, slower coding speed)
2222

23-
![comparison-angular-react-vuejs](https://github.com/jonashackt/spring-boot-vuejs/blob/master/comparison-angular-react-vuejs.png)
23+
![comparison-angular-react-vuejs](screenshots/comparison-angular-react-vuejs.png)
2424

2525
And the [introduction phrase](https://vuejs.org/v2/guide/index.html) sounds really great:
2626

@@ -122,7 +122,7 @@ vue init webpack frontend
122122

123123
This will initialize a project skeleton for Vue.js in /frontend directory - it therefore asks some questions in the cli:
124124

125-
![vuejs-cli-init](https://github.com/jonashackt/spring-boot-vuejs/blob/master/vuejs-cli-init.png)
125+
![vuejs-cli-init](screenshots/vuejs-cli-init.png)
126126

127127
If you want to learn more about installing Vue.js, head over to the docs: https://vuejs.org/v2/guide/installation.html
128128

@@ -225,7 +225,13 @@ That’s it!
225225

226226
Install vue-devtools Browser extension https://github.com/vuejs/vue-devtools and get better feedback, e.g. in Chrome:
227227

228-
![vue-devtools-chrome](https://github.com/jonashackt/spring-boot-vuejs/blob/master/vue-devtools-chrome.png)
228+
![vue-devtools-chrome](screenshots/vue-devtools-chrome.png)
229+
230+
## IntelliJ integration
231+
232+
There´s a blog post: https://blog.jetbrains.com/webstorm/2018/01/working-with-vue-js-in-webstorm/
233+
234+
Escpecially the `New... Vue Component` looks quite cool :)
229235

230236

231237

@@ -409,7 +415,7 @@ The docs contain all the possible components: https://bootstrap-vue.js.org/docs/
409415

410416
See some elements, when you go to http://localhost:8080/#/bootstrap/ - this should look like this:
411417

412-
![bootstrap-styled-vuejs](https://github.com/jonashackt/spring-boot-vuejs/blob/master/bootstrap-styled-vuejs.png)
418+
![bootstrap-styled-vuejs](screenshots/bootstrap-styled-vuejs.png)
413419

414420
A good discussion about various UI component frameworks: http://vuetips.com/bootstrap
415421

@@ -420,11 +426,11 @@ As you may already read, the app is automatically deployed to Heroku on https://
420426

421427
The project makes use of the nice Heroku Pipelines feature, where we do get a full Continuous Delivery pipeline with nearly no effort:
422428

423-
![heroku-pipeline](heroku-pipeline.png)
429+
![heroku-pipeline](screenshots/heroku-pipeline.png)
424430

425431
And with the help of super cool `Automatic deploys`, we have our TravisCI build our app after every push to master - and with the checkbox set to `Wait for CI to pass before deploy` - the app gets also automatically deployed to Heroku - but only, if the TravisCI (and Coveralls...) build succeeded:
426432

427-
![heroku-automatic-deploys](heroku-automatic-deploys.png)
433+
![heroku-automatic-deploys](screenshots/heroku-automatic-deploys.png)
428434

429435
You only have to connect your Heroku app to GitHub, activate Automatic deploys and set the named checkbox. That´s everything!
430436

@@ -447,6 +453,222 @@ export const AXIOS = axios.create({
447453

448454

449455

456+
## Testing
457+
458+
### Install vue-test-utils
459+
460+
https://github.com/vuejs/vue-test-utils
461+
462+
`npm install --save-dev @vue/test-utils`
463+
464+
### Jest
465+
466+
Jest is a new shooting star at the sky of JavaScript testing frameworks: https://facebook.github.io/jest/
467+
468+
Intro-Blogpost: https://blog.codecentric.de/2017/06/javascript-unit-tests-sind-schwer-aufzusetzen-keep-calm-use-jest/
469+
470+
Examples: https://github.com/vuejs/vue-test-utils-jest-example
471+
472+
Vue.js Jest Docs: https://vue-test-utils.vuejs.org/guides/#testing-single-file-components-with-jest
473+
474+
A Jest Unittest looks like [Hello.test.js](frontend/test/components/Hello.test.js):
475+
476+
```
477+
import { shallowMount } from '@vue/test-utils';
478+
import Hello from '@/components/Hello'
479+
480+
describe('Hello.vue', () => {
481+
it('should render correct hello message', () => {
482+
// Given
483+
const hellowrapped = shallowMount(Hello, {
484+
propsData: { hellomsg: 'Welcome to your Jest powered Vue.js App' },
485+
stubs: ['router-link', 'router-view']
486+
});
487+
488+
// When
489+
const contentH1 = hellowrapped.find('h1');
490+
491+
// Then
492+
expect(contentH1.text()).toEqual('Welcome to your Jest powered Vue.js App');
493+
})
494+
})
495+
```
496+
497+
To pass Component props while using Vue.js Router, see https://stackoverflow.com/a/37940045/4964553.
498+
499+
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.
500+
501+
The test files itself could be named `xyz.spec.js` or `xyz.test.js` - and could reside nearly everywhere in the project.
502+
503+
##### Jest Configuration
504+
505+
The Jest run-configuration is done inside the [package.json](frontend/package.json):
506+
507+
```
508+
"scripts": {
509+
...
510+
"unit": "jest --config test/unit/jest.conf.js --coverage",
511+
....
512+
},
513+
```
514+
515+
Jest itself is configured inside [frontend/test/unit/jest.conf.js](frontend/test/unit/jest.conf.js)
516+
517+
##### Run Unit tests
518+
519+
`npm run unit` - that´ll look like:
520+
521+
![unittestrun-jest](screenshots/unittestrun-jest.png)
522+
523+
524+
##### Integration in Maven build (via frontend-maven-plugin)
525+
526+
Inside the [pom.xml](pom.xml) we always automatically run the Jest Unittests with the following configuration:
527+
528+
```
529+
<!-- Run Unit tests -->
530+
<execution>
531+
<id>npm run test</id>
532+
<goals>
533+
<goal>npm</goal>
534+
</goals>
535+
<!-- optional: default phase is "generate-resources" -->
536+
<phase>test</phase>
537+
<!-- Optional configuration which provides for running any npm command -->
538+
<configuration>
539+
<arguments>run unit</arguments>
540+
</configuration>
541+
</execution>
542+
```
543+
544+
This will integrate the Jest Unittests right after the npm run build command, just you are used to in Java-style projects:
545+
546+
![maven-integration-jest-unittests](screenshots/maven-integration-jest-unittests.png)
547+
548+
And don´t mind the depitction with `ERROR` - this is just a known bug: https://github.com/eirslett/frontend-maven-plugin/issues/584
549+
550+
551+
##### Run Jest tests inside IntelliJ
552+
553+
First we need to install the NodeJS IntelliJ plugin (https://www.jetbrains.com/help/idea/developing-node-js-applications.html), which isn´t bundled with IntelliJ by default:
554+
555+
![nodejs-intellij-plugin](screenshots/nodejs-intellij-plugin.png)
556+
557+
IntelliJ Jest integration docs: https://www.jetbrains.com/help/idea/running-unit-tests-on-jest.html
558+
559+
The automatic search inside the [package.json](frontend/package.json) for the Jest configuration file [jest.conf.js](frontend/test/unit/jest.conf.js) doesn´t seem to work right now, so we have to manually configure the `scripts` part of:
560+
561+
```
562+
"unit": "jest --config test/unit/jest.conf.js --coverage",
563+
```
564+
565+
inside the Run Configuration under `Jest` and `All Tests`:
566+
567+
![configure-jest-inside-intellij](screenshots/configure-jest-inside-intellij.png)
568+
569+
Now, when running `All Tests`, this should look like you´re already used to Unittest IntelliJ-Integration:
570+
571+
![run-jest-inside-intellij](screenshots/run-jest-inside-intellij.png)
572+
573+
574+
575+
## End-2-End (E2E) tests with Nightwatch
576+
577+
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:
578+
579+
Docs: http://nightwatchjs.org/gettingstarted/#browser-drivers-setup
580+
581+
![http://nightwatchjs.org/img/operation.png](http://nightwatchjs.org/img/operation.png)
582+
583+
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
584+
585+
More options could be found in the docs: http://nightwatchjs.org/gettingstarted/#settings-file
586+
587+
588+
#### Write Nightwatch tests
589+
590+
An example Nightwatch test is provided in [HelloAcceptance.test.js](/frontend/test/e2e/specs/HelloAcceptance.test.js):
591+
592+
```
593+
module.exports = {
594+
'default e2e tests': function (browser) {
595+
// automatically uses dev Server port from /config.index.js
596+
// default: http://localhost:8080
597+
// see nightwatch.conf.js
598+
const devServer = browser.globals.devServerURL
599+
600+
browser
601+
.url(devServer)
602+
.waitForElementVisible('#app', 5000)
603+
.assert.elementPresent('.hello')
604+
.assert.containsText('h1', 'Welcome to your Vue.js powered Spring Boot App')
605+
.assert.elementCount('img', 1)
606+
.end()
607+
}
608+
}
609+
610+
```
611+
612+
##### Run E2E Tests
613+
614+
`npm run e2e`
615+
616+
##### Current Problem with npm audit (see [NPM Security](#npm-security))
617+
618+
With 1.0.6, the following error occurs after an `npm run e2e`:
619+
620+
```
621+
OK. 4 assertions passed. (8.625s)
622+
The "path" argument must be of type string. Received type object
623+
at assertPath (path.js:39:11)
624+
at Object.join (path.js:1157:7)
625+
at process._tickCallback (internal/process/next_tick.js:68:7)
626+
```
627+
628+
With the latest 0.9.21 of Nightwatch, this issue is gone. __BUT:__ the the `npm audit` command does find vulnerabilities:
629+
630+
![nightwatch-npmaudit-vulnerabilities](screenshots/nightwatch-npmaudit-vulnerabilities.png)
631+
632+
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
633+
634+
635+
## Run all tests
636+
637+
`npm test`
638+
639+
640+
641+
## NPM Security
642+
643+
npm Security - npm@6
644+
645+
https://medium.com/npm-inc/announcing-npm-6-5d0b1799a905
646+
647+
`npm audit`
648+
649+
https://blog.npmjs.org/post/173719309445/npm-audit-identify-and-fix-insecure
650+
651+
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)
652+
653+
https://nodejs.org/en/blog/vulnerability/june-2018-security-releases/
654+
655+
---> __Update NPM regularly__
656+
657+
https://docs.npmjs.com/troubleshooting/try-the-latest-stable-version-of-npm
658+
659+
`npm install -g npm@latest`
660+
661+
---> __Update Packages regularly__
662+
663+
https://docs.npmjs.com/getting-started/updating-local-packages
664+
665+
`npm outdated`
666+
667+
`npm update`
668+
669+
670+
671+
450672
# Links
451673

452674
Nice introdutory video: https://www.youtube.com/watch?v=z6hQqgvGI4Y

frontend/.babelrc

+2-2
Original file line numberDiff line numberDiff line change
@@ -8,11 +8,11 @@
88
}],
99
"stage-2"
1010
],
11-
"plugins": ["transform-runtime"],
11+
"plugins": ["transform-vue-jsx", "transform-runtime"],
1212
"env": {
1313
"test": {
1414
"presets": ["env", "stage-2"],
15-
"plugins": ["istanbul"]
15+
"plugins": ["transform-vue-jsx", "transform-es2015-modules-commonjs", "dynamic-import-node"]
1616
}
1717
}
1818
}

frontend/.eslintignore

+5-2
Original file line numberDiff line numberDiff line change
@@ -1,2 +1,5 @@
1-
build/*.js
2-
config/*.js
1+
/build/
2+
/config/
3+
/dist/
4+
/*.js
5+
/test/unit/coverage/

frontend/.eslintrc.js

+13-11
Original file line numberDiff line numberDiff line change
@@ -1,27 +1,29 @@
1-
// http://eslint.org/docs/user-guide/configuring
1+
// https://eslint.org/docs/user-guide/configuring
22

33
module.exports = {
44
root: true,
5-
parser: 'babel-eslint',
65
parserOptions: {
7-
sourceType: 'module'
6+
parser: 'babel-eslint'
87
},
98
env: {
109
browser: true,
1110
},
12-
// https://github.com/standard/standard/blob/master/docs/RULES-en.md
13-
extends: 'standard',
11+
extends: [
12+
// https://github.com/vuejs/eslint-plugin-vue#priority-a-essential-error-prevention
13+
// consider switching to `plugin:vue/strongly-recommended` or `plugin:vue/recommended` for stricter rules.
14+
'plugin:vue/essential',
15+
// https://github.com/standard/standard/blob/master/docs/RULES-en.md
16+
'standard'
17+
],
1418
// required to lint *.vue files
1519
plugins: [
16-
'html'
20+
'vue'
1721
],
1822
// add your custom rules here
19-
'rules': {
20-
// allow paren-less arrow functions
21-
'arrow-parens': 0,
23+
rules: {
2224
// allow async-await
23-
'generator-star-spacing': 0,
25+
'generator-star-spacing': 'off',
2426
// allow debugger during development
25-
'no-debugger': process.env.NODE_ENV === 'production' ? 2 : 0
27+
'no-debugger': process.env.NODE_ENV === 'production' ? 'error' : 'off'
2628
}
2729
}

frontend/.gitignore

+4-3
Original file line numberDiff line numberDiff line change
@@ -1,15 +1,16 @@
11
.DS_Store
22
node_modules/
3-
dist/
3+
/dist/
44
npm-debug.log*
55
yarn-debug.log*
66
yarn-error.log*
7-
test/unit/coverage
8-
test/e2e/reports
7+
/test/unit/coverage/
8+
/test/e2e/reports/
99
selenium-debug.log
1010

1111
# Editor directories and files
1212
.idea
13+
.vscode
1314
*.suo
1415
*.ntvs*
1516
*.njsproj

frontend/.postcssrc.js

+10
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,10 @@
1+
// https://github.com/michael-ciniawsky/postcss-load-config
2+
3+
module.exports = {
4+
"plugins": {
5+
"postcss-import": {},
6+
"postcss-url": {},
7+
// to edit target browsers: use "browserslist" field in package.json
8+
"autoprefixer": {}
9+
}
10+
}

0 commit comments

Comments
 (0)