G'day:
OK so maybe this will be the last article in this series. But given what a monster it's become: who knows. As a recap, here are links to the earlier articles:
- Intro / Nginx
- PHP
- PHPUnit
- Tweaks I made to my Bash environment in my Docker containers
- MariaDB
- Installing Symfony
- Using Symfony
- Testing a simple web page built with Vue.js using Mocha, Chai and Puppeteer
- I mess up how I configure my Docker containers
- An article about moving files and changing configuration
- Setting up a Vue.js project and integrating some existing code into it (this article)
- Unit testing Vue.js components
It's up to you whether you read the rest of that lot, or just skim it, or whatever. Looking at the source code might help. This is where it's at as I am writing this sentence: Fullstack Exercise v 2.10. That has already got some of the code in it that is "new" to this article. Any other code links in here I'll link to the final version of the work. I think so far I've done the Vue.js project install, and reconfigured it and Nginx so that I'm using Nginx as the front-end web server, not the one that ships with the Vue.js project. Other than that the Vue code is just the "hello world" stuff the project starts with.
OK so the object of this exercise is to take my gdayWorldViaVue.html page which is is built with its Vue template embedded in just a JS file. I discuss the creation of this work in the article "Part 8: Testing a simple web page built with Vue.js using Mocha, Chai and Puppeteer". Here's the code:
frontend/public/gdayWorldViaVue.html:
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title id="title">{{ message }}</title>
</head>
<body>
<div id="app">
<greeting :message="message"></greeting>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
<script src="assets/scripts/gdayWorldViaVue.js"></script>
</body>
</html>
And frontend/public/assets/scripts/gdayWorldViaVue.js:
Vue.component('greeting', {
props : {
message : {
type: String,
required: true
}
},
template : `
<div>
<h1>{{ message }}</h1>
<p>{{ message }}</p>
</div>
`
});
let appData = {message: "G'day world via Vue"};
new Vue({el: '#title', data: appData});
new Vue({el: '#app', data: appData});
Oh, an for the sake of completeness, the output:
Ah, and of course there's a test (frontend/test/functional/GdayWorldViaVueTest.js):
let puppeteer = require('puppeteer');
let chai = require("chai");
let chaiAsPromised = require("chai-as-promised");
chai.use(chaiAsPromised);
let should = chai.should();
describe("Baseline test of vue.js working", function () {
let browser;
let page;
const expectedText = "G'day world via Vue";
before("Load the test document", async function () {
this.timeout(5000);
browser = await puppeteer.launch( {args: ["--no-sandbox"]});
page = await browser.newPage();
await page.goto("http://fullstackexercise.frontend/gdayWorldViaVue.html");
});
after("Close down the browser", async function () {
await page.close();
await browser.close();
});
it("should return the correct page title", async function () {
await page.title().should.eventually.equal(expectedText);
});
it("should return the correct page heading", async function () {
let headingText = await page.$eval("h1", headingElement => headingElement.innerText);
headingText.should.equal(expectedText);
});
it("should return the correct page content", async function () {
let paragraphContent = await page.$eval("p", paragraphElement => paragraphElement.innerText);
paragraphContent.should.equal(expectedText);
});
});
Output:
> full-stack-exercise@2.6.0 test
> mocha test/**/*.js
Baseline test of vue.js working
✓ should return the correct page title
✓ should return the correct page heading
✓ should return the correct page content
3 passing (535ms)
root@18a88721ed2a:/usr/share/fullstackExercise#
Having those test cases there are gold, because it means all this work is basically a refactoring exercise (we've done the red / green bit in the earlier article), so the object of this exercise is to separate-out the template from the JS file and into a .vue file, and know the work is done because those test cases still pass.
Right, so I have hit the Vue.JS website, and done some reading, and to use .vue files, I need to create a Vue project. First I just want to see what the project-creation does, to check if it'll be easier to integrate my work into the project, or the project into the work: you might remember a similar drama when I was installing Symphony ("Part 6: Installing Symfony"). Once-bitten, twice-shy, I'm just gonna see what Vue thinks it's doing first. I'm gonna create this project in /tmp.
Oh Adam… back-up! First of all I need to install Vue CLI. This is the app that deals with project creation and stuff like that. This is easy, I just integrate it into the node/Dockerfile:
FROM node
RUN apt-get update \
&& apt-get install -y wget gnupg \
&& wget -q -O - https://dl-ssl.google.com/linux/linux_signing_key.pub | apt-key add - \
&& sh -c 'echo "deb [arch=amd64] http://dl.google.com/linux/chrome/deb/ stable main" >> /etc/apt/sources.list.d/google.list' \
&& apt-get update \
&& apt-get install -y google-chrome-stable fonts-ipafont-gothic fonts-wqy-zenhei fonts-thai-tlwg fonts-kacst fonts-freefont-ttf libxss1 \
--no-install-recommends \
&& rm -rf /var/lib/apt/lists/*
WORKDIR /usr/share/fullstackExercise/
COPY config/* ./
RUN npm install -g @vue/cli
RUN npm install
EXPOSE 8080
Just to be clear, the first npm install there is installing Vue CLI globally, the second one is installing the modules necessary for my app. Incidentally, it was getting this stuff working that was the inspiration for two of my recent articles: "Part 9: I mess up how I configure my Docker containers" and "Part 10: An article about moving files and changing configuration". But it's all working now.
Now I've got Vue CLI installed, I'll install a project:
root@18a88721ed2a:/usr/share/fullstackExercise# cd /tmp
root@18a88721ed2a:/tmp# ll
total 20
drwxrwxrwt 1 root root 4096 Feb 12 12:18 ./
drwxr-xr-x 1 root root 4096 Feb 10 16:43 ../
drwx------ 2 root root 4096 Feb 6 19:32 apt-key-gpghome.b8FchIBzPr/
-rw-r--r-- 1 root staff 543 Feb 9 12:36 core-js-banners
drwxr-xr-x 3 root root 4096 Feb 6 03:03 v8-compile-cache-0/
root@18a88721ed2a:/tmp# vue create hello-world
Vue CLI v4.5.11
? Please pick a preset:
Default ([Vue 2] babel, eslint)
> Default (Vue 3 Preview) ([Vue 3] babel, eslint)
Manually select features
? Please pick a preset: Default ([Vue 2] babel, eslint)
? Pick the package manager to use when installing dependencies:
Use Yarn
> Use NPM
✨ Creating project in /tmp/hello-world.
π Initializing git repository...
⚙️ Installing CLI plugins. This might take a while...
added 1269 packages, and audited 1270 packages in 57s
62 packages are looking for funding
run `npm fund` for details
found 0 vulnerabilities
π Invoking generators...
π¦ Installing additional dependencies...
added 71 packages, and audited 1341 packages in 6s
68 packages are looking for funding
run `npm fund` for details
found 0 vulnerabilities
⚓ Running completion hooks...
π Generating README.md...
π Successfully created project hello-world.
π Get started with the following commands:
$ cd hello-world
$ npm run serve
WARN Skipped git commit due to missing username and email in git config, or failed to sign commit.
You will need to perform the initial commit yourself.
root@18a88721ed2a:/tmp#
Lovely. Let's do this run-serve thing:
root@18a88721ed2a:/tmp/hello-world# npm run serve
> hello-world@0.1.0 serve
> vue-cli-service serve
INFO Starting development server...
98% after emitting CopyPlugin
DONE Compiled successfully in 2221ms 1:27:33 PM
App running at:
- Local: http://localhost:8081/
It seems you are running Vue CLI inside a container.
Access the dev server via http://localhost:<your container's external mapped port>/
Note that the development build is not optimized.
To create a production build, run npm run build.
This won't work because I need to poke a hole through from the container to the host machine on 8081, but I'll quickly do this (I'll spare you the detail). Gimme a minute.
Cool. My first challenge is that I've already got a web server, and I want to use it. I don't want to be using Vue's stub web server. Now for dev there's no real need for this: Vue's web server would be fine, but I've got Nginx there, so I'm going to use it. Also I don't want to use localhost to access it. I figured I needed to configure a proxy_pass "thing" (sorry for technical buzzword there), but I had no idea how to do it. I'm a noob with Nginx. Anyhow, I googled about and found this article "VueJS dev serve with reverse proxy" by someone called Marko MitraniΔ . I didn't understand all the settings it was suggesting, but I grabbed them and it all works (docker/nginx/sites/frontend.conf):
server {
listen 80;
listen [::]:80;
server_name fullstackexercise.frontend;
root /usr/share/nginx/html/frontend;
index index.html;
location / {
#autoindex on;
#try_files $uri $uri/ =404;
# from https://medium.com/homullus/vuejs-dev-serve-with-reverse-proxy-cdc3c9756aeb
proxy_pass http://vuejs.backend:8080/;
proxy_set_header Host vuejs.backend;
proxy_set_header Origin vuejs.backend;
proxy_hide_header Access-Control-Allow-Origin;
add_header Access-Control-Allow-Origin "http://fullstackexercise.frontend";
}
# from https://medium.com/homullus/vuejs-dev-serve-with-reverse-proxy-cdc3c9756aeb
location /sockjs-node/ {
proxy_pass http://vuejs.backend:8080;
proxy_redirect off;
proxy_set_header Host vuejs.backend;
proxy_set_header Origin vuejs.backend;
proxy_http_version 1.1;
proxy_set_header Upgrade $http_upgrade;
proxy_set_header Connection "Upgrade";
proxy_hide_header Access-Control-Allow-Origin;
add_header Access-Control-Allow-Origin "http://fullstackexercise.frontend";
}
location ~ /\.ht {
deny all;
}
}
The first block is for the website (on http://fullstackexercise.frontend); the second block is for the listener for changes in the source code. Vue does some magic with web sockets and ping up to the browser to reload any code changes that are back on the server. This is quite cool. Oh I also needed to put some settings in docker/node/config/vue.config.js:
module.exports = {
devServer: {
host: "vuejs.backend",
disableHostCheck: false,
port: 8080,
watchOptions : {
ignored: /node_modules/,
poll: 1000
}
}
}
But I'm getting ahead of myself here. The Nginx stuff is for the fullstackExercise websites. I'm still with this one in /tmp/ directory. All I want to check is what it installs, which is this lot:
.
|-- node_modules/
| `-- [… seemingly millions of files elided…]
|-- public/
| |-- favicon.ico
| `-- index.html
|-- src/
| |-- assets/
| | `-- logo.png
| |-- components/
| | `-- HelloWorld.vue
| |-- App.vue
| `-- main.js
|-- .gitignore
|-- README.md
|-- babel.config.js
|-- package-lock.json
`-- package.json
1760 directories, 5161 files
root@61c6341dc75c:/tmp/hello-world#
OK so it seems to be just a bunch of NPM libs and stuff in package.json:
{
"name": "hello-world",
"version": "0.1.0",
"private": true,
"scripts": {
"serve": "vue-cli-service serve",
"build": "vue-cli-service build",
"lint": "vue-cli-service lint"
},
"dependencies": {
"core-js": "^3.6.5",
"vue": "^3.0.0"
},
"devDependencies": {
"@vue/cli-plugin-babel": "~4.5.0",
"@vue/cli-plugin-eslint": "~4.5.0",
"@vue/cli-service": "~4.5.0",
"@vue/compiler-sfc": "^3.0.0",
"babel-eslint": "^10.1.0",
"eslint": "^6.7.2",
"eslint-plugin-vue": "^7.0.0-0"
},
"eslintConfig": {
"root": true,
"env": {
"node": true
},
"extends": [
"plugin:vue/vue3-essential",
"eslint:recommended"
],
"parserOptions": {
"parser": "babel-eslint"
},
"rules": {}
},
"browserslist": [
"> 1%",
"last 2 versions",
"not dead"
]
}
root@61c6341dc75c:/tmp/hello-world#
All of which will merge into my existing package.json just fine. And some source code files and assets. I took a punt and just integrated all of that into my app, stuck CMD ["npm", "run", "serve"] in my docker/node/Dockerfile, and rebuilt my containers…
Cool. Plus I re-ran all my own tests on the other code in the app, and everything is still currently green. Also I can change my source code on the server, and almost instantly it's displayed in the browser without a reload:
Right. So now I have to try to integrate this gdayWorldViaVue.html page into my Vue app. It took a while to work out how to do this: I'm sure it's in the Vue.js docs somewhere, but I couldn't find it. Ultimately I found a Q&A on Stack Overflow that explained it: "multiple pages in Vue.js CLI" (and a handy Github repo with example code in it). Basically Vue CLI assumes everyone wants a single-page app, and doesn't really expose how to add additional pages into this SPA. But it's just a matter of defining the pages in vue.config.js (and I have the doc reference now: Configuration Reference > Pages. First I just shifted the project's own index page into a page definition:
module.exports = {
pages : {
index: {
entry: "src/index/main.js",
template: "public/index.html",
filename: "index.html"
}
},
devServer: {
host: "vuejs.backend",
disableHostCheck: false,
port: 8080,
watchOptions : {
ignored: /node_modules/,
poll: 1000
}
}
}
This also necessitated moving main.js, components/HelloWorld.vue and App.vue from the base of the src/ directory structure, into the src/index/ subdirectory, as well as changing a relative reference to ./assets/logo.png to ../assets/logo.png, given it's being referenced from a file in that index/ subdirectory now. I rebuilt the container, and restarted it, and the Hello World page still worked. Now to add the gdayWorldViaVue.html page into it.
This was pretty easy, and was just a matter of moving some stuff around in the file system and within files. Previously we had a single HTML file, gdayWorldViaVue.html, and a single JS file, gdayWorldViaVue.js, as per above in this article. First I implemented the page mapping for this page in vue.config.js, as per the index example above:
gdayWorld: {
entry: "src/gdayWorld/main.js",
template: "public/gdayWorldViaVue.html",
filename: "gdayWorldViaVue.html"
}
And then I need to distribute the contents of the existing .html and .js file to their more Vue / page / component-centric equivalents. src/gdayWorld/main.js is identical to the one for the index page:
import { createApp } from 'vue'
import App from './App.vue'
createApp(App).mount('#app')
frontend/public/gdayWorldViaVue.html has had the reference to the JS files in the foot of the <body> removed as the application now handles those, it also has the body of the #app <div/> removed as this is handled by the App.vue file now, and also has placeholder text put in for the page title:
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title id="title">PAGE-TITLE</title>
</head>
<body>
<div id="app"></div>
</body>
</html>
I was handling the page title in quite an unorthodox fashion before, and I'm going to fix this now.
frontend/src/gdayWorld/App.vue defines what goes in the #app <div/>, and loads in the GreetingMessage component:
<template>
<greeting-message :message="message"></greeting-message>
</template>
<script>
import GreetingMessage from './components/GreetingMessage.vue'
export default {
name: 'App',
components: {
GreetingMessage
},
data () {
return {
message: "G'day world via Vue"
};
},
created () {
// document.title = this.message;
}
}
</script>
Note it will also sets the document.title value now, from the app data. It's commented-out for now because I want to see the test for this fail initially, so I am sure what we're seeing is the refactored implementation.
And frontend/src/gdayWorld/components/GreetingMessage.vue defines the behaviour of itself. So this file is a stand-alone component now, which is what we were aiming to do all along.
<template>
<div>
<h1>{{ message }}</h1>
<p>{{ message }}</p>
</div>
</template>
<script>
export default {
name: 'GreetingMessage',
props : {
message : {
type: String,
required: true
}
}
}
</script>
I also deleted frontend/public/assets/scripts/gdayWorldViaVue.js as it's now surplus to requirement. Because we've changed the Vue app's config, and that is copied over in Dockerfile, I need to rebuild the containers to see this "change". Once that's done I re-run my tests:
> full-stack-exercise@2.6.0 test
> mocha test/**/*.js
Baseline test of vue.js working
1) should return the correct page title
✓ should return the correct page heading
✓ should return the correct page content
2 passing (319ms)
1 failing
1) Baseline test of vue.js working
should return the correct page title:
AssertionError: expected 'PAGE-TITLE' to equal 'G\'day world via Vue'
+ expected - actual
-PAGE-TITLE
+G'day world via Vue
at /usr/share/fullstackExercise/node_modules/chai-as-promised/lib/chai-as-promised.js:302:22
at processTicksAndRejections (node:internal/process/task_queues:94:5)
at async Context.<anonymous> (test/functional/GdayWorldViaVueTest.js:29:9)
npm ERR! code 1
npm ERR! path /usr/share/fullstackExercise
npm ERR! command failed
npm ERR! command sh -c mocha test/**/*.js
npm ERR! A complete log of this run can be found in:
npm ERR! /root/.npm/_logs/2021-02-12T17_13_50_305Z-debug.log
root@ebd7dc7b4a3d:/usr/share/fullstackExercise#
Woohoo! Two test are passing, and the expected one is failing. If I now uncomment that line above (and as soon as I do that my page in the browser now gets its title too btw), the test is now passing:
✓ should return the correct page title
✓ should return the correct page heading
✓ should return the correct page content
Similarly if I go and change the message in frontend/src/gdayWorld/App.vue the tests fail appropriately, so I'm happy the tests are testing the new implementation.
Now I just need to work out how to implement a test of just the GreetingMessage.vue component discretely, as opposed to the way I'm doing it now: curling a page it's within and checking the page's content. This is fine for an end-to-end test, but not so good for a unit test. TBH in this simple case the current approach is actually fine, but I want to know how to test components.
Excuse me whilst I do some reading.
…
[Adam runs npm install of many combinations of NPM libs]
…
[Adam downgrades his version of Vue.js and does the npm install crap some more]
…
OK screw that. Seems to me - on initial examination - that getting all the libs together to make stand-alone components testable is going to take me longer to work out than I have patience for. I'll do it later. So. I'm gonna leave this article here at the "and lo, I have .vue-file-based Vue components working now, and kinda understand how that side of things comes together, but - nor now at least - I'm gonna do my front-end testing via HTTP requests of the whole document, not via each component. For what I need to do right now this is fine anyhow, I think. Sigh.
Righto.
--
Adam
