more in new version of 16

Author: hjwp

chapter_16_javascript.asciidoc

@@ -191,7 +191,7 @@ I'm adding the code inline, in a `<script>` tag
 at the bottom of our _base.html_ template:
 
 [role="sourcecode"]
-.lists/templates/base.html
+.lists/templates/base.html (ch16l004)
 ====
 [source,javascript]
 ----
@@ -398,7 +398,8 @@ src/lists/static/tests
         └── jasmine_favicon.png
 ----
 
-We need to go edit the _SpecRunner.html_ file to take into account the things we've moved around:
+We need to go edit the _SpecRunner.html_ file
+to take into account the things we've moved around:
 
 
 [role="sourcecode"]
@@ -593,55 +594,120 @@ so that one test can't affect another.
 
 
 Let's now have a play with our testing framework,
-to see if we find DOM elements and make assertions on whether they are visible.
-We'll also try manually hiding an element, from the tests,
-just as an experiment, before we write any of our "real" JS code.
+to see if we can find DOM elements and make assertions on whether they are visible.
+We'll also try the same `style.display=none` hiding technique
+that we originally used in our spiked code.
 
 
 [role="sourcecode"]
 .lists/static/tests/Spec.js (ch16l011)
 ====
 [source,javascript]
 ----
-  it("smoke test for checking visibility", () => {
-    const errorDiv = document.querySelector("div.invalid-feedback");  //<1>
-    expect(errorDiv.checkVisibility()).toBe(true, "error div should be visible on load");  //<2>
-    errorDiv.style.display = "none";  //<3>
-    expect(errorDiv.checkVisibility()).toBe(false, "js hiding should work");  //<4>
+  it("sense check our html fixture", () => {
+    const errorMsg = document.querySelector("div.invalid-feedback");
+    expect(errorMsg.checkVisibility()).toBe(true);  //<1>
+  });
+
+  it("check we know how to hide things", () => {
+    const errorMsg = document.querySelector("div.invalid-feedback");
+    errorMsg.style.display = "none";  //<2>
+    expect(errorMsg.checkVisibility()).toBe(false);  //<3>
   });
 ----
 ====
 
-<1> We retrieve our error div with `document.querySelector`,
-  which is probably the easiest way to find a particular piece of the DOM,
-  in modern plain-old JavaScript (does anyone still remember jQuery?).
-
-<2> Another fairly new API in JavaScript-Land is `checkVisibility()`.
-  Notice we're also adding a second argument in the `.toBe()` clause,
-  which is the message that will be printed if the test fails.
+<1> We retrieve our error div with `querySelector` again,
+    and then use another fairly new API in JavaScript-Land called `checkVisibility()`.
 
 <3> We manually hide the element in the test,
   by setting its `style.display` to "none".
 
 <4> And we check it worked, with `checkVisibility()` again.
 
 
-TODO:  on-fail messages are deprecated in jasmine,
-  split out separate `it()` for default state.
+Notice that I'm being really good about splitting things out into multiple tests,
+with one assertion each.
+Jasmine encourages that, for example, by deprecating the ability to pass
+on-failure messages into individual `expect/toBe` expressions.
+
 
 If you refresh the browser, you should see that all passes:
 
+
 .Expected results from Jasmine in the browser
 ====
 [role="jasmine-output"]
 ----
-1 spec, 0 failures, randomized with seed 12345		finished in 0.009s
+2 specs, 0 failures, randomized with seed 12345        finished in 0.01s
 
 Superlists tests
-  * smoke test for checking visibility
+  * check we know how to hide things
+  * sense check our html fixture
 ----
 ====
 
+(I'll show the Jasmine outputs as text, like the above, from now on,
+to avoid filling the chapter with screenshots.)
+
+
+////
+rough content, i think i prefer doing it the real way tho.
+
+
+==== Testing Bootsrap-related functionality
+
+When hacking about in devtools, we found out that what we actually
+want to do is remove the `is-invalid` class from the input element.
+Let's just see if that works
+
+[role="sourcecode"]
+.src/lists/static/tests/Spec.js (ch16l012)
+====
+[source,python]
+----
+  it("check we know how to hide things", () => {
+    const textInput = document.querySelector("#id_text");
+    const errorMsg = document.querySelector(".invalid-feedback");
+    // errorMsg.style.display = "none";  //<1>
+    textInput.classList.remove("is-invalid");  //<2>
+    expect(errorMsg.checkVisibility()).toBe(false);
+  });
+----
+====
+
+<1> Let's comment out our `style.display` hackery for now
+<2> Instead we'll try removing the `is-invalid` class,
+    using the `.classList` API (https://developer.mozilla.org/en-US/docs/Web/API/Element/classList)
+
+
+===== An Unexpected Failure
+
+Nope, an unexpected failure:
+
+
+[role="jasmine-output"]
+----
+2 specs, 1 failure, randomized with seed 12345    finished in 0.01s
+Spec List | Failures
+
+Superlists tests > check we know how to hide things
+Expected true to be false.
+<Jasmine>
+@file:///...goat-book/src/lists/static/tests/Spec.js:37:40
+<Jasmine>
+----
+
+
+
+  <link rel="stylesheet" href="lib/jasmine-4.6.1/jasmine.css">
+
+  <!-- Bootstrap CSS -->
+  <link href="../bootstrap/css/bootstrap.min.css" rel="stylesheet">
+
+  <script src="lib/jasmine-4.6.1/jasmine.js"></script>
+////
+
 
 
 === Building a JavaScript Unit Test for Our Desired Functionality
@@ -657,46 +723,39 @@ we can switch back to just one test and start to write the real thing:
 ====
 [source,javascript]
 ----
-  it("error message should be hidden on input", () => {  //<1>
-    const inputSelector = "input#id_text";
-    const errorSelector = "div.invalid-feedback";
-    const textInput = document.querySelector(inputSelector); //<2>
-    const errorDiv = document.querySelector(errorSelector);
-    expect(errorDiv.checkVisibility()).toBe(true, "error div should be visible on load"); //<3>
+  it("sense-check our html fixture", () => {  //<1>
+    const errorMsg = document.querySelector(".invalid-feedback");
+    expect(errorMsg.checkVisibility()).toBe(true);
+  });
 
-    initialize(textInput, errorDiv);  //<4>
+  it("error message should be hidden on input", () => {  //<2>
+    const textInput = document.querySelector("#id_text");  //<3>
+    const errorMsg = document.querySelector(".invalid-feedback");
 
-    expect(errorDiv.checkVisibility()).toBe(true, "error div should not be hidden by initialize()");  //<5>
+    textInput.dispatchEvent(new InputEvent("input"));  //<4>
 
-    textInput.dispatchEvent(new InputEvent("input"));  //<6>
-    expect(errorDiv.checkVisibility()).toBe(false, "error div should be hidden on input"); //<7>
+    expect(errorMsg.checkVisibility()).toBe(false);  //<5>
   });
 ----
 ====
 
-<1> Let's change our test name to a description of what we want to happen;
+<1> Let's keep the first smoke test, it's not doing any harm.
+
+<2> Let's change the second one, and give it a name that describes
+  what we want to happen;
   our objective is that, when the user starts typing into the input box,
   we should hide the error message.
 
-<2> We retrieve the `<input>` element from the DOM,
+<3> We retrieve the `<input>` element from the DOM,
   in a similar way to how we found the error message div.
 
-<3> We leave our old assertion in-place,
-  just to sense-check that our fixtures start out with the error visible,
-  like the real page will when we render an error for the user.
+<4> Here's how we simulate a user typing into the input box.
 
-<4> Here's where we start "programming by wishful thinking".
-  Let's imagine we have an `initialize()` function to set up our auto-hiding behaviour.
-  We pass in the input element to watch for input events,
-  and the error div that we want to hide.
-
-<5> Let's sense-check once again that our `initialize()` function doesn't
-    just cheekily hide the error div immediately.
+<5> And here's our real assertion: the error div should be hidden after
+  the input box sees an input event.
 
-<6> Here's how we simulate a user typing into the input box.
 
-<7> And here's our real assertion: the error div should be hidden after
-  the input box sees an input event.
+TODO resume here
 
 
 And that gives us a fairly silly error,