Cleanup: Vue-Hangman

Cleanup isn’t fun, and it usually doesn’t produce anything other people can see, but that is my task today. I’m cleaning up my Hangman game that I wrote a few days ago in Vue using Vuex.

What do I mean by “cleanup”?

Well, I have what you might call a bad habit. When writing something new, my main goal is just to get it working. Then, later, I go back over it and refactor it into something that is possible to maintain and test. I was eager to have Hangman on Widget Wonk, so I published it before doing cleanup. I don’t recommend doing that.

Cleaning up can be described in general terms. First, I’m going to go through my components and see if anything needs to be factored out into separate, smaller components. In the case of logic, I’ll decide if any of the functions/logic can and should be separated out into helper modules or service modules.

Oy, in the case of my Hangman game, I wrote one big, monolithic component. So that has to go. It’s too long, overly complicated, impossible to test. Let’s turn this into several small dumb display components. Along the way, I’ll write some unit testing to check the logic. Unit testing is definitely part of cleanup. Also, I’ll try to give things descriptive names.

Let me describe in passing how I scope styles. Vue does have this thing built-in that allows you to scope styles to the component at hand so they don’t affect other components. I don’t like to use that. I think it’s faster to explicitly scope the styles myself. So, if I have a component called MainPhraseDisplay, then the outer div of the template has a “main-phrase-display” class attached, and I write the styles in SCSS and they are all scoped under the .main-phrase-display class.

For unit testing I use jest. Here’s my config.

  "jest": {
    "moduleFileExtensions": [
      "js",
      "json",
      "vue"
    ],
    "transform": {
      ".*\\.(vue)$": "vue-jest",
      "^.+\\.js$": "<rootDir>/node_modules/babel-jest"
    }
  }

For each new component, I begin with a test file that just checks that it mounts. Something like this:

// main-phrase-display.test.js
import {mount} from '@vue/test-utils';
import MainPhraseDisplay from "./main-phrase-display.vue";

test("main-phrase-display mounts", function() {
    expect(()=>{
        mount(MainPhraseDisplay);
    }).not.toThrow();
});

That’s a useful place to begin.

This is good practice using @vue/test-utils. It’s pretty annoying and idiosyncratic.

This is also a good time to make sure form elements have appropriate labels associated to them and that the name on the input matches the for on the label. Speaking practically, having these attributes in place is mainly about accessibility.

I use eslint and appropriate Vue plugins also, and cleanup is also the time to make sure it’s working and it’s actually following my custom rule set and not just using the pre-configured rule set or doing nothing. If there is the tiniest little error in your eslint config and you use it with VS Code, then VS Code will just ignore the file. VS Code won’t use your custom rules set. Or it might just not lint your files at all. (I don’t really understand how VS Code works, but it seems like they try extra hard to make eslint not work well with it.)

Unfortunately, even for a small widget like my Hangman game, cleanup is more than a day’s work. It would not have been any faster to do cleanup as I worked the first time. Writing unit tests and all that takes how long it takes, now or later. Making code clean and correct takes longer than just making something that works. But it’s well worth the time.

In the famous book Clean Code, the author makes the point that unit tests contribute to clean code by giving the coder the confidence to make changes. You have the tests in place, and if you wrote a strong battery of tests that cover the project well enough, they will give you immediate feedback if you accidentally break something. I completely agree with that. Unit testing is worth the time.

All that said, there’s only so much cleanup I can do at a sitting. It’s extraordinarily boring. Maybe later in my life I’ll learn the lesson that I should do cleanup incrementally so that changes can be published along the way. When I began working today, though, I had not learned that lesson. So: maybe tomorrow I’ll be ready to publish the new, clean version of Vue-Hangman.