Form should have labels

test/unit/mocha/part6/form-should-have-checkbox.spec.js

@@ -14,20 +14,20 @@ describe("BookForm.vue", () => {
 
     assert(
       checkbox.length > 0,
-      "The form doesn't have an `<input>` element with a `type` of `checkbox`"
+      "The form doesn't have an `<input>` element with a `type` of `checkbox`."
     );
 
     assert.hasAnyKeys(
       checkbox.attr(),
       ["v-model"],
-      "The BookForm checkbox does not have a `v-model` directive containing `bookData.finishedReading` as its value"
+      "The BookForm checkbox does not have a `v-model` directive containing `bookData.finishedReading` as its value."
     );
 
     assert.propertyVal(
       checkbox.attr(),
       "v-model",
       "bookData.finishedReading",
-      "The BookForm checkbox does not have a `v-model` directive containing `bookData.finishedReading` as its value"
+      "The BookForm checkbox does not have a `v-model` directive containing `bookData.finishedReading` as its value."
     );
   });
 });

test/unit/mocha/part6/form-should-have-labels.spec.js

@@ -0,0 +1,64 @@
+const assert = require("chai").assert;
+const parse5 = require("parse5");
+const cheerio = require("cheerio");
+const helpers = require("../helpers");
+
+describe("BookForm.vue", () => {
+  it("should contain three labels with a `for` attribute @book-form-will-contain-labels", () => {
+    const file = helpers.readFile("src/components/BookForm.vue");
+    const nodes = helpers.parseFile(file);
+    const tagName = helpers.getHtmlTag("template", nodes);
+    const content = parse5.serialize(tagName[0].content);
+    const $ = cheerio.load(content);
+    const label = $("form").find("label");
+
+    assert(
+      label.length === 3,
+      "The form doesn't have three `<label>` elements with a `for` attribute."
+    );
+
+    assert.hasAnyKeys(
+      label.attr(),
+      ["for"],
+      "The BookForm label does not have a `for` attribute containing `finishedReading` as its value."
+    );
+
+    assert.propertyVal(
+      label.attr(),
+      "for",
+      "finishedReading",
+      "The BookForm label does not have a `for` attribute containing `finishedReading` as its value."
+    );
+
+    assert(
+      $('label[for="borrowed"]').length > 0,
+      "The BookForm label does not have a `for` attribute containing `borrowed` as its value."
+    );
+
+    assert(
+      $('label[for="bought"]').length > 0,
+      "The BookForm label does not have a `for` attribute containing `bought` as its value."
+    );
+
+    assert(
+      $('label[for="finishedReading"]')
+        .text()
+        .match(/\s*Finished\s*Reading/),
+      "The BookForm does not have a label with a text of `Finished Reading`."
+    );
+
+    assert(
+      $('label[for="borrowed"]')
+        .text()
+        .match(/\s*borrowed/),
+      "The BookForm does not have a label with a text of `borrowed`."
+    );
+
+    assert(
+      $('label[for="bought"]')
+        .text()
+        .match(/\s*bought/),
+      "The BookForm does not have a label with a text of `bought`."
+    );
+  });
+});

test/unit/mocha/part6/form-should-have-radio-button.spec.js

@@ -14,20 +14,20 @@ describe("BookForm.vue", () => {
 
     assert(
       radio.length == 2,
-      "The form doesn't have two `<input>` elements with a `type` of `radio`"
+      "The form doesn't have two `<input>` elements with a `type` of `radio`."
     );
 
     assert.hasAnyKeys(
       radio.attr(),
       ["v-model"],
-      "The BookForm radio does not have a `v-model` directive containing `bookData.ownership` as its value"
+      "The BookForm radio does not have a `v-model` directive containing `bookData.ownership` as its value."
     );
 
     assert.propertyVal(
       radio.attr(),
       "v-model",
       "bookData.ownership",
-      "The BookForm radio does not have a `v-model` directive containing `bookData.finishedReading` as its value"
+      "The BookForm radio does not have a `v-model` directive containing `bookData.finishedReading` as its value."
     );
   });
 });

test/unit/mocha/part6/refactor-book-data.spec.js

@@ -40,7 +40,7 @@ describe("BookForm.vue", () => {
 
     assert(
       bookTitle.length > 0,
-      "The `bookData` `bookTitle` property is not defined with value of `''`"
+      "The `bookData` `bookTitle` property is not defined with value of `''`."
     );
 
     let bookAuthor = esquery(
@@ -49,7 +49,7 @@ describe("BookForm.vue", () => {
     );
     assert(
       bookAuthor.length > 0,
-      "The `bookData` `bookAuthor` property is not defined with value of `''`"
+      "The `bookData` `bookAuthor` property is not defined with value of `''`."
     );
 
     let finishedReading = esquery(
@@ -59,7 +59,7 @@ describe("BookForm.vue", () => {
 
     assert(
       finishedReading.length > 0,
-      "The `bookData` `finishedReading` property is not defined with value of `false`"
+      "The `bookData` `finishedReading` property is not defined with value of `false`."
     );
 
     let ownership = esquery(data[0], "Property[key.name=ownership]");
@@ -91,7 +91,7 @@ describe("BookForm.vue", () => {
 
     assert(
       notes.length > 0,
-      "The `bookData` `notes` property is not defined with value of `My notes about the book:`"
+      "The `bookData` `notes` property is not defined with value of `My notes about the book:`."
     );
   });
 });

test/unit/mocha/part6/should-have-a-text-area.spec.js

@@ -12,19 +12,19 @@ describe("BookForm.vue", () => {
     const $ = cheerio.load(content);
     const textarea = $("form textarea");
 
-    assert(textarea.length > 0, "The form doesn't have an `<textarea>`");
+    assert(textarea.length > 0, "The form doesn't have an `<textarea>`.");
 
     assert.hasAnyKeys(
       textarea.attr(),
       ["v-model"],
-      "The BookForm textarea does not have a `v-model` directive containing `bookData.notes` as its value"
+      "The BookForm textarea does not have a `v-model` directive containing `bookData.notes` as its value."
     );
 
     assert.propertyVal(
       textarea.attr(),
       "v-model",
       "bookData.notes",
-      "The BookForm textarea does not have a `v-model` directive containing `bookData.notes` as its value"
+      "The BookForm textarea does not have a `v-model` directive containing `bookData.notes` as its value."
     );
   });
 });