G'day:
I should be writing the article to finish off that series about Docker / … / Vue.js etc, but whilst I was reading the docs and doing some online course (read: watching some videos) on Vue.js, I decided to TDD one of the exercises they were suggesting. The testing requirements were a bit tougher than I'd previously done with Mocha, and it took me longer to nail the testing of this than I would have liked. I figured it's worth working through it again, and jotting down some notes this time. Also I've read a bunch of blog articles instructing on Vue.js, and none of them say stuff like "implement your expectations as tests before you begin", so this is breaking that mould: if you have a dev task… always start by implementing tests for your expectations.
The exercise is part of the video Build a GitHub User Profile Component at vueschool.io. I've found their videos pretty handy, btw, and have been practising my testing whilst working through them in parallel to watching them.
The exercise is to take some flat example HTML and convert it into a Vue-implemented / data-driven solution. Here's the HTML:
<html>
<head>
<link rel="stylesheet"
href="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.min.css">
</head>
<body>
<div id="app"
class="ui container">
<h1>GitHub Profiles</h1>
<github-user-card username="hootlex"></github-user-card>
<!-- Template for GitHub card -->
<div class="ui card">
<div class="image">
<img src="https://semantic-ui.com/images/avatar2/large/kristy.png">
</div>
<div class="content">
<a class="header">Kristy</a>
<div class="meta">
<span class="date">Joined in 2013</span>
</div>
<div class="description">
Kristy is an art director living in New York.
</div>
</div>
<div class="extra content">
<a>
<i class="user icon"></i>
22 Friends
</a>
</div>
</div>
</div>
<!-- Import Vue.js and axios -->
<script src="https://unpkg.com/vue"></script>
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
<!-- Your JavaScript Code :) -->
<script>
new Vue({
el: '#app'
})
</script>
</body>
</html>
And that displays this sort of thing:
IE: some details from a Github user profile. NB: no idea whether Kirsty is a real person - I hope not - but it's the exampe vueschool gave. The ultimate object of the exercise is to provide the Github user name to the code and it will display that user's deets.
One could see this as a refactoring exercise. Before we can refactor our code, we need to have some green tests to guard that we don't break anything while we refactor. In the real world we'd already have these, but I don't in this case so I'll need to knock some together now. The initial "green" state of the code is that it displays placeholder information at specific places in the DOM. This is all we will test for to start with.
Having reviewed the mark-up, there's seven things we need to test for, best described by the test definitions themselves:
root@ed4374d9ac6a:/usr/share/fullstackExercise# cat tests/functional/public/GithubProfilesTest.js
let chai = require("chai");
let fail = chai.assert.fail;
describe.only("For now, just identify the tests we need to make green", function () {
it("should have the expected person's name", function () {
fail("not implemented");
});
it("should have the expected person's github page URL", function () {
fail("not implemented");
});
it("should have the expected person's avatar", function () {
fail("not implemented");
});
it("should have the expected person's joining year", function () {
fail("not implemented");
});
it("should have the expected person's description", function () {
fail("not implemented");
});
it("should have the expected person's number of friends", function () {
fail("not implemented");
});
it("should have the expected person's friends URL", function () {
fail("not implemented");
});
});
root@ed4374d9ac6a:/usr/share/fullstackExercise# npm test
> fullstackexercise@2.6.0 test
> mocha tests/**/*.js
For now, just identify the tests we need to make green
1) should have the expected person's name
2) should have the expected person's github page URL
3) should have the expected person's avatar
4) should have the expected person's joining year
5) should have the expected person's description
6) should have the expected person's number of friends
7) should have the expected person's friends URL
0 passing (5ms)
7 failing
1) For now, just identify the tests we need to make green
should have the expected person's name:
AssertionError: not implemented
at Context.<anonymous> (tests/functional/public/GithubProfilesTest.js:6:9)
at processImmediate (node:internal/timers:463:21)
[etc. elided for brevity]
npm
ERR! code 7
npm
ERR! path /usr/share/fullstackExercise
npm
ERR! command failed
npm
ERR! command sh -c mocha tests/**/*.js
npm
ERR! A complete log of this run can be found in:
npm
ERR! /root/.npm/_logs/2021-01-18T18_11_48_274Z-debug.log
root@ed4374d9ac6a:/usr/share/fullstackExercise#
The tests run, they fail, but I have a list of requirements to fulfil, even if I have not yet defined what it is to fulfil them. I'll start doing that now. For the next iteration I am going to do these things:
- make the actual HTTP request with Puppeteer;
- identify where in the DOM I need to check values;
- for now, test against a bad value. The failure message will help is check if we're checking the DOM correctly;
let puppeteer = require("puppeteer");
let chai = require("chai");
let should = chai.should();
describe.only("Tests of githubProfiles page using placeholder data", function () {
let browser;
let page;
before("Load the page", async function () {
this.timeout(5000);
browser = await puppeteer.launch( {args: ["--no-sandbox"]});
page = await browser.newPage();
await Promise.all([
page.goto("http://webserver.backend/githubProfiles.html"),
page.waitForNavigation()
]);
});
after("Close down the browser", async function () {
await page.close();
await browser.close();
});
it("should have the expected person's name", async function () {
let name = await page.$eval("#app>.card>.content>.header", headerElement => headerElement.innerText)
name.should.equal("INSERT EXPECTED NAME VALUE HERE");
});
it("should have the expected person's github page URL", async function () {
let linkHref = await page.$eval("#app>.card>.content>a.header", headerElement => headerElement.href);
linkHref.should.equal("INSERT EXPECTED LINKHREF VALUE HERE");
});
it("should have the expected person's avatar", async function () {
let avatar = await page.$eval("#app>.card>.image>img", avatarElement => avatarElement.src);
avatar.should.equal("INSERT EXPECTED AVATAR SRC VALUE HERE");
});
it("should have the expected person's joining year", async function () {
let joiningMessage = await page.$eval("#app>.card>.content>.meta>.date", joiningElement => joiningElement.innerText);
joiningMessage.should.equal("INSERT EXPECTED JOINING MESSAGE VALUE HERE");
});
it("should have the expected person's description", async function () {
let description = await page.$eval("#app>.card>.content>.description", descriptionElement => descriptionElement.innerText);
description.should.equal("INSERT EXPECTED DESCRIPTION VALUE HERE");
});
it("should have the expected person's number of friends", async function () {
let friendsText = await page.$eval("#app>.card>.extra.content>a", extraContentAnchorElement => extraContentAnchorElement.innerText);
friendsText.should.equal("INSERT EXPECTED FRIENDS TEXT VALUE HERE");
});
it("should have the expected person's friends URL", async function () {
let linkHref = await page.$eval("#app>.card>.extra.content>a", extraContentAnchorElement => extraContentAnchorElement.href);
linkHref.should.equal("INSERT EXPECTED FRIENDS LINK HREF VALUE HERE");
});
});
And the run confirms (mostly) that we're inspecting the correct bit of the DOM. I'll just include the AssertionErrors from each test here, cos the rest of the output is largely the same:
AssertionError: expected 'Kristy' to equal 'INSERT EXPECTED NAME VALUE HERE'
AssertionError: expected '' to equal 'INSERT EXPECTED LINKHREF VALUE HERE'
AssertionError: expected 'https://semantic-ui.com/images/avatar2/large/kristy.png' to equal 'INSERT EXPECTED AVATAR SRC VALUE HERE'
AssertionError: expected 'Joined in 2013' to equal 'INSERT EXPECTED JOINING MESSAGE VALUE HERE'
AssertionError: expected 'Kristy is an art director living in New York.' to equal 'INSERT EXPECTED DESCRIPTION VALUE HERE'
AssertionError: expected ' 22 Friends' to equal 'INSERT EXPECTED FRIENDS TEXT VALUE HERE'
AssertionError: expected '' to equal 'INSERT EXPECTED FRIENDS LINK HREF VALUE HERE'
Cool it looks like I've mostly nailed the DOM selectors though: the correct values are being extracted by the tests. There's two that I'm not sure about though: the two link hrefs aren't actually in the mark-up, so their values are just blank. Well: all going well that's the reason, but I need to check that. A third thing to note is that there's a leading space in the friends text. Initially I thought this was a typo in the mark-up, but if we have a look, it's collapsed leading whitespace from the other content in the element I'm checking:
<div class="extra content">
<a>
<i class="user icon"></i>
22 Friends
</a>
</div>
That's legit, and we'll need our test to expect that. I've gone ahead and "fixed" the test mark-up to include the anchor tag hrefs (with dummy values):
<div class="content">
<a class="header" href="GITHUB_PAGE_URL">Kristy</a>
<div class="meta">
<span class="date">Joined in 2013</span>
</div>
<div class="description">
Kristy is an art director living in New York.
</div>
</div>
<div class="extra content">
<a href="GITHUB_FRIENDS_PAGE_URL">
Now to re-run the tests, and hopefully see those dummy values being compared to the test values. Again, I'll just include the AssertionExceptions:
AssertionError: expected 'Kristy' to equal 'INSERT EXPECTED NAME VALUE HERE'
AssertionError: expected 'http://webserver.backend/GITHUB_PAGE_URL' to equal 'INSERT EXPECTED LINKHREF VALUE HERE'
AssertionError: expected 'https://semantic-ui.com/images/avatar2/large/kristy.png' to equal 'INSERT EXPECTED AVATAR SRC VALUE HERE'
AssertionError: expected 'Joined in 2013' to equal 'INSERT EXPECTED JOINING MESSAGE VALUE HERE'
AssertionError: expected 'Kristy is an art director living in New York.' to equal 'INSERT EXPECTED DESCRIPTION VALUE HERE'
AssertionError: expected ' 22 Friends' to equal 'INSERT EXPECTED FRIENDS TEXT VALUE HERE'
AssertionError: expected 'http://webserver.backend/GITHUB_FRIENDS_PAGE_URL' to equal 'INSERT EXPECTED FRIENDS LINK HREF VALUE HERE'
OK, nice one. The tests are all good now: they are testing the correct elements in the DOM (except the whitespace one, I'll get to that), so I'm gonna update the tests to check for the actual placeholder values now. IE: make the tests pass for the boilerplate HTML.
let puppeteer = require("puppeteer");
let chai = require("chai");
chai.use(require("chai-string"));
let should = chai.should();
describe.only("Tests of githubProfiles page using placeholder data", function () {
let browser;
let page;
let expectedUserData = {
name : "Kristy",
pageUrl : "http://webserver.backend/GITHUB_PAGE_URL",
avatar : "https://semantic-ui.com/images/avatar2/large/kristy.png",
joinedMessage : "Joined in 2013",
description : "Kristy is an art director living in New York.",
friends : "22 Friends",
friendsPageUrl: "http://webserver.backend/GITHUB_FRIENDS_PAGE_URL"
};
// ...
it("should have the expected person's name", async function () {
let name = await page.$eval("#app>.card>.content>.header", headerElement => headerElement.innerText)
name.should.equal(expectedUserData.name);
});
// ...
it("should have the expected person's number of friends", async function () {
let friendsText = await page.$eval("#app>.card>.extra.content>a", extraContentAnchorElement => extraContentAnchorElement.innerText);
friendsText.should.containIgnoreSpaces(expectedUserData.friends);
});
// ...
});
I've elided a lot of code there due to it either being unchanged from before, or just the same as the examples I'm showing, and just focused on a coupla changes:
- I've moved the expected values out into one object. This is partly to keep it all in one place, partly because I already know I'll be changing how I populate all that very soon.
- I'm testing the actual values from the mark-up now. So the tests should be green.
- I'm dealing with the extraneous whitespace.
When I run this:
> fullstackexercise@2.6.0 test
> mocha tests/**/*.js
Tests of githubProfiles page using placeholder data
✓ should have the expected person's name
✓ should have the expected person's github page URL
✓ should have the expected person's avatar
✓ should have the expected person's joining year
✓ should have the expected person's description
✓ should have the expected person's number of friends
✓ should have the expected person's friends URL
7 passing (3s)
root@ed4374d9ac6a:/usr/share/fullstackExercise#
Where are we now then? We have some tests that correctly check the correct part of the DOM of our test page. And all those tests pass. We can now start to do the actual work. The first thing we can do is a slight refactor: we can pull the inline mark-up out into a Vue template, and use the template's data object to furnish the template with the dynamic values. The desired result here is that no adjustments to tests should be necessary. First the mark-up file:
<html>
<head>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.min.css">
</head>
<body>
<div id="app"
class="ui container">
<h1>GitHub Profiles</h1>
<github-user-card username="hootlex"></github-user-card>
</div>
<script type="text/x-template" id="github-user-card-template">
<div class="ui card">
<div class="image">
<img :src="avatar">
</div>
<div class="content">
<a class="header" :href="pageUrl">{{name}}</a>
<div class="meta">
<span class="date">Joined in {{joinedYear}}</span>
</div>
<div class="description">
{{description}}
</div>
</div>
<div class="extra content">
<a :href="friendsPageUrl">
<i class="user icon"></i>
{{friends}} Friends
</a>
</div>
</div>
</script>
<script src="https://unpkg.com/vue"></script>
<script src="assets/scripts/githubProfiles.js"></script>
</body>
</html>
I've done a few things here:
- Moved the mark-up for the "Github user card" into its own template.
- And taken out the hard-coded values, which I will relocate into the JS application code (see below).
- And I'm actually calling the JS application code.
That's actually the mark-up side of things complete now. Th JS code to support it is thus:
let githubUserCardComponent = {
template : "#github-user-card-template",
data : function () {
return {
name : "Kristy",
pageUrl : "http://webserver.backend/GITHUB_PAGE_URL",
avatar : "https://semantic-ui.com/images/avatar2/large/kristy.png",
joinedYear : 2013,
description : "Kristy is an art director living in New York.",
friends : 22,
friendsPageUrl: "http://webserver.backend/GITHUB_FRIENDS_PAGE_URL"
};
}
};
new Vue({
el: '#app',
components: {
"github-user-card" : githubUserCardComponent
}
});
Here we're just setting the data values expected by the template. It's still all hard-coded values for now. To check we've not messed anything up, we re-run the tests:
Tests of githubProfiles page using placeholder data
✓ should have the expected person's name
✓ should have the expected person's github page URL
✓ should have the expected person's avatar
✓ should have the expected person's joining year
✓ should have the expected person's description
✓ should have the expected person's number of friends
✓ should have the expected person's friends URL
Cool. That all works.
Now we are going to need to do a code change: we need to source the actual data for the user from Github, via its API. But before we do that, we need to update our tests to expect that. We can't have our tests start to break because we've changed the code. We need to update the tests to expect the changes, and then… well… let them break that way instead ;-)
Now in the normal scheme of things, to keep this purely a functional test, I would mock the data provider for the data so when testing I'd not be getting live Github data, I'd be getting "known" values from a mock, and test that the known values are handled correctly. But I don't yet know how to test Vue components separately, so I don't know how to go about mocking the request to Github. What I'm gonna do is turn this into an integration test, and the test will get the correct data from Github, and then check if the app is getting the same (so accordingly correct) data too. Currently the test has this:
let expectedUserData = {
name : "Kristy",
pageUrl : "http://webserver.backend/GITHUB_PAGE_URL",
avatar : "https://semantic-ui.com/images/avatar2/large/kristy.png",
joinedMessage : "Joined in 2013",
description : "Kristy is an art director living in New York.",
friends : "22 Friends",
friendsPageUrl: "http://webserver.backend/GITHUB_FRIENDS_PAGE_URL"
};
We're gonna get rid of those stubbed values with "live" values from Github. For reference, this is the JSON returned from the API call we're using:
{
"login": "adamcameron",
"id": 2041977,
"node_id": "MDQ6VXNlcjIwNDE5Nzc=",
"avatar_url": "https://avatars3.githubusercontent.com/u/2041977?v=4",
"gravatar_id": "",
"url": "https://api.github.com/users/adamcameron",
"html_url": "https://github.com/adamcameron",
"followers_url": "https://api.github.com/users/adamcameron/followers",
"following_url": "https://api.github.com/users/adamcameron/following{/other_user}",
"gists_url": "https://api.github.com/users/adamcameron/gists{/gist_id}",
"starred_url": "https://api.github.com/users/adamcameron/starred{/owner}{/repo}",
"subscriptions_url": "https://api.github.com/users/adamcameron/subscriptions",
"organizations_url": "https://api.github.com/users/adamcameron/orgs",
"repos_url": "https://api.github.com/users/adamcameron/repos",
"events_url": "https://api.github.com/users/adamcameron/events{/privacy}",
"received_events_url": "https://api.github.com/users/adamcameron/received_events",
"type": "User",
"site_admin": false,
"name": "Adam Cameron",
"company": null,
"blog": "http://blog.adamcameron.me/",
"location": "London",
"email": null,
"hireable": null,
"bio": null,
"twitter_username": "adam_cameron",
"public_repos": 21,
"public_gists": 211,
"followers": 27,
"following": 2,
"created_at": "2012-07-25T18:02:54Z",
"updated_at": "2021-01-16T16:57:34Z"
}
We won't need most of that.
Now I'll go ahead and re-jig my test code to make this call, and use it as the basis for the values to test against:
describe.only("Tests of githubProfiles page using github data", function () {
let browser;
let page;
let expectedUserData;
before("Load the page", async function () {
this.timeout(5000);
await loadTestPage();
expectedUserData = await loadTestUserFromGithub();
});
Here I have pushed the assignment of expectedUserData into the before handler, and also extracted the implementation into its own function, given there's a lot more code now:
let loadTestUserFromGithub = async function () {
let githubUserData = await new Promise((resolve, reject) => {
let request = https.get(
"https://api.github.com/users/hootlex",
{
auth: `username: ${process.env.GITHUB_PERSONAL_ACCESS_TOKEN}`,
headers: {'user-agent': 'node.js'}
}, response => {
let rawResponseData = "";
response.on("data", data => {
rawResponseData += data;
}).on("end", () => {
resolve(JSON.parse(rawResponseData));
}).on("error", error => {
reject(error.message);
});
}
);
request.end();
});
return {
name : githubUserData.name,
pageUrl : githubUserData.html_url,
avatar : githubUserData.avatar_url,
joinedYear : new Date(githubUserData.created_at).getFullYear(),
description : githubUserData.bio ?? "",
friends : githubUserData.followers,
friendsPageUrl: githubUserData.html_url + "?tab=followers"
};
}
That's less complicated than it looks. Using the native Node.js https library requires one makes the request easily enough, but then one needs to receive the response data in chunks and assemble it yerself via the data event handler. And then once it's done one can use it in the end handler. To get it back to the calling code where it can be put to use, one needs to wrap all this in a promise, resolving with the data in the end handler. I really do wish there was a OhForGoodnessSakeStopMessingAroundAndJustGiveMeTheResponse handler, which I imagine is what people would use, 99% of the time. Ah well.
It's also worth noting those config params I'm setting in there:
{
auth: `username: ${process.env.GITHUB_PERSONAL_ACCESS_TOKEN}`,
headers: {'user-agent': 'node.js'}
}
The Github API has rate-limiting on it, and one is only allowed 60 requests per hour unless one uses some sort of authentication. One can just us a personal access token to work around this restriction. It's secret information so I don't want it anywhere in my code, so I'm just setting an environment variable on my host machine, and passing that through to the Node.js container. From docker-compose.yml:
node:
build:
context: ./node
environment:
- GITHUB_PERSONAL_ACCESS_TOKEN=${GITHUB_PERSONAL_ACCESS_TOKEN}
And I'm passing a user agent there because the Github API requires one to.
That should all now "work", in that the tests will be broken, but it'll be testing the hard-coded Vue template data against the expected correct/live values from Github. AGain, I'll just show the AssertionExceptions here:
should have the expected person's name:
AssertionError: expected 'Kristy' to equal 'Alex Kyriakidis'
should have the expected person's github page URL:
AssertionError: expected 'http://webserver.backend/GITHUB_PAGE_URL' to equal 'https://github.com/hootlex'
should have the expected person's avatar:
AssertionError: expected 'https://semantic-ui.com/images/avatar2/large/kristy.png' to equal 'https://avatars0.githubusercontent.com/u/6147968?v=4'
should have the expected person's joining year:
AssertionError: expected 'Joined in 2013' to equal undefined
should have the expected person's description:
AssertionError: expected 'Kristy is an art director living in New York.' to equal 'Developer - Teacher - Author- Consultant'
should have the expected person's number of friends:
AssertionError: expected 22 Friends to contain 850 ignoring spaces
should have the expected person's friends URL:
AssertionError: expected 'http://webserver.backend/GITHUB_FRIENDS_PAGE_URL' to equal 'https://github.com/hootlex?tab=followers'
Argh. OK so the good news is that most of those are failing in the right way: they are testing the correct placeholder vs live values. But the one testing the joining year and the one testing the number of friends are failing for the wrong reasons:
Firstly the "should have the expected person's joining year" test has two problems:
// test code
it("should have the expected person's joining year", async function () {
let joiningMessage = await page.$eval("#app>.card>.content>.meta>.date", joiningElement => joiningElement.innerText);
joiningMessage.should.equal(expectedUserData.joinedMessage);
});
// test data
return {
name : githubUserData.name,
pageUrl : githubUserData.html_url,
avatar : githubUserData.avatar_url,
joinedYear : new Date(githubUserData.created_at).getFullYear(),
description : githubUserData.bio ?? "",
friends : githubUserData.followers,
friendsPageUrl: githubUserData.html_url + "?tab=followers"
};
The test data is joinedYear (just the year), and the test is still comparing to the entire message: joinedMessage. So I'll update the test, thus:
it("should have the expected person's joining year", async function () {
const expectedJoiningMessage = `Joined in ${expectedUserData.joinedYear}`;
let joiningMessage = await page.$eval("#app>.card>.content>.meta>.date", joiningElement => joiningElement.innerText);
joiningMessage.should.equal(expectedJoiningMessage);
});
And now this test actually passes because - by coincidence - the hard-coded year in the template matches the live one coming from Github. We can't have that so for now I'm changing the value in the template to be a different year. We can't be changing code if its test doesn't fail until before we make the changes to make the test pass.
The "should have the expected person's number of friends" is failing incorrectly for much the same reason as the previous one. Here's the relevant code:
//test code
it("should have the expected person's number of friends", async function () {
let friendsText = await page.$eval("#app>.card>.extra.content>a", extraContentAnchorElement => extraContentAnchorElement.innerText);
friendsText.should.containIgnoreSpaces(expectedUserData.friends);
});
// test data
return {
name : githubUserData.name,
pageUrl : githubUserData.html_url,
avatar : githubUserData.avatar_url,
joinedYear : new Date(githubUserData.created_at).getFullYear(),
description : githubUserData.bio ?? "",
friends : githubUserData.followers,
friendsPageUrl: githubUserData.html_url + "?tab=followers"
};
Again in the test we're expecting the entire message - eg "" - to be in the value we're comparing, but obviously we're only getting the count back from Github. I'll change that in the same way as the previous one (I'll spare you the code, you get the idea). now those tests are failing in the correct way:
AssertionError: expected 'Joined in 2013_BREAK_ME' to equal 'Joined in 2013'
AssertionError: expected 22 Friends to contain 850 Friends ignoring spaces
Now we can update the app code to get the correct data.
Firstly we're gonna need to pay attn to the username value passed to the template in the parent mark-up:
<div id="app"
class="ui container">
<h1>GitHub Profiles</h1>
<github-user-card username="hootlex"></github-user-card>
</div>
This is just a matter of adding a property to the template definition:
let githubUserCardComponent = {
template : "#github-user-card-template",
props : {
username: {
type: String,
required: true
}
},
Now we can use this.username in the rest of the template code.
Next: a the moment all our data values are hard-coded sample data:
let githubUserCardComponent = {
template : "#github-user-card-template",
data : function () {
return {
name : "Kristy",
pageUrl : "http://webserver.backend/GITHUB_PAGE_URL",
avatar : "https://semantic-ui.com/images/avatar2/large/kristy.png",
joinedYear : 2013,
description : "Kristy is an art director living in New York.",
friends : 22,
friendsPageUrl: "http://webserver.backend/GITHUB_FRIENDS_PAGE_URL"
};
}
};
We're gonna null-out all those as we don't know what they will be when the template is first loaded. However, when the instance of the component is created, we can dart off to Github and get the relevant values.
let githubUserCardComponent = {
// ...
data : function () {
return {
name : null,
pageUrl : null,
avatar : null,
joinedYear : null,
description : null,
friends : null,
friendsPageUrl: null
};
},
created () {
axios.get(
`https://api.github.com/users/${this.username}`,
{
auth: {
username: this.$route.query.GITHUB_PERSONAL_ACCESS_TOKEN
}
}
)
.then(response => {
this.name = response.data.name;
this.pageUrl = response.data.html_url;
this.avatar = response.data.avatar_url;
this.joinedYear = new Date(response.data.created_at).getFullYear();
this.description = response.data.bio;
this.friends = response.data.followers;
this.friendsPageUrl = response.data.html_url + "?tab=followers";
});
}
};
There's a coupla things to note here. Firstly, just like in the test, I am passing a personal access token to the Github API so I don't get throttled by them. And, again, I don't want the actual token value to be in the code, so I am passing it on the URL. To get the value from the URL, I need to use the Vue Router (which I know nothing about other than what I found on Stack Overflow when I needed to get something from the query string). To use this I need to initialise the Vue app with a router:
let router = new VueRouter({
mode: 'history',
routes: []
});
new Vue({
router,
el: '#app',
components: {
"github-user-card" : githubUserCardComponent
}
});
Then I can access my query string param as per the code above.
The other bit to look at in the created handler above is this Axios thing. It's just an HTTP lib that the tutorial suggested. It seems pretty slick and easier to use than the HTTPS library I was messing about with in the test code. It's relevant to note that Axios has an implementation for Node.js too, but I didn't know that when I wrote the tests. The code there works, I'll leave it.
Both the Vue Router and Axios libs need to be loaded in the main mark-up file too, obvs:
<script src="https://unpkg.com/vue"></script>
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
<script src="https://unpkg.com/vue-router"></script>
<script src="assets/scripts/githubProfiles.js"></script>
</body>
</html>
OK so in theory now on the client-side we are loading-in the data from Github, and this should match the same data the tests grabbed, and our tests should be green…
AssertionError: expected '' to equal 'Alex Kyriakidis'
AssertionError: expected '' to equal 'https://github.com/hootlex'
AssertionError: expected '' to equal 'https://avatars0.githubusercontent.com/u/6147968?v=4'
AssertionError: expected 'Joined in' to equal 'Joined in 2013'
AssertionError: expected '' to equal 'Developer - Teacher - Author- Consultant'
AssertionError: expected Friends to contain 850 Friends ignoring spaces
AssertionError: expected '' to equal 'https://github.com/hootlex?tab=followers'
Um… where are the client-side values? I checked in the browser, and it all seemed legit:
What's worse is that about 25% of the time, the tests were actually passing! It took me quite a while to work out what was going on, but finally it turned out that I needed a lesson in how to think asynchronously, and what the various processing stages are of a web page. I'll detail the troubleshooting in another article (maybe), but it boiled down to this line of code:
let loadTestPage = async function () {
browser = await puppeteer.launch( {args: ["--no-sandbox"]});
page = await browser.newPage();
await Promise.all([
page.goto("http://webserver.backend/githubProfiles.html"),
page.waitForNavigation()
]);
}
When a web page loads, it's navigable as soon as the asset files (mark-up, CSS, JS etc) are loaded. But it does not wait for asynchronous data requests to complete before the page is considered ready for navigation. So that promise is fulfilled whilst the call to Github is probably still under way. Sometimes it was completing in time for the test code to check the values; most of the time it had not, so the values weren't there. I did not notice this when I first wrote this code because the call to Github wasn't in there then, so there was no problem. Anyhow, this was easily solved:
page.waitForNavigation({waitUntil: "networkidle0"})
After that the tests still failed sometimes, but this time it was because loading the test page and then the test code hitting Github itself was occasionally taking longer than the 5000ms timeout I currently had, so I upped that to 10000ms:
before("Load the page", async function () {
this.timeout(10000);
And after those two tweaks:
Tests of githubProfiles page using github data
✓ should have the expected person's name
✓ should have the expected person's github page URL
✓ should have the expected person's avatar
✓ should have the expected person's joining year
✓ should have the expected person's description
✓ should have the expected person's number of friends
✓ should have the expected person's friends URL
7 passing (5s)
And I repeated the tests dozens of times, and they always passed now, so I'm happy I've nailed the code there.
I actually continued on from here and updated the code to allow passing an override username value in the URL, but this article is already massive and this is the third day working on it, so I'm gonna end here. This was probably a tedious read, but the exercise for me in TDDing some Vue stuff was absolute gold. I still need to find out how to separate Vue components out into separate files so I can test them individually, and outside the context of a web page that is using them, but that's for another day.
Righto.
--
Adam
