Add test for Knockout semanticui data binding (#215)

agjohnson · web-flow · commit 226aa48850a8 · 2023-09-26T10:16:07.000-07:00
* Switch to web-test-runner

Reusing some of what I went through with the addons testing work, I
tried to use web-test-runner here as well. Even though we aren't using
web components here yet, this pattern still works quite nicely for
testing some complex browser integration style tests.

This uses WTR, Rollup for bundling for tests, and I've created two test
cases: I translated old tests to Chai/WTR, and a new test that mixes
HTML and JS, using WTR HTML tests.

* Remove unneeded hack

* Update CI config

* More CI config

* Some cleanup and formatting

* Add test for Knockout semanticui data binding

This confirms that the custom binding for SUI modules works as expected
by inspecting the element and confirming it seems to have had our logic
and the jQuery SUI plugin logic applied to it.

This found a small bug with the binding code itself. I only tested
dropdown for now, I'm not sure if it's worth testing anything too deeply
yet.
diff --git a/readthedocsext/theme/static/readthedocsext/theme/js/site.js b/readthedocsext/theme/static/readthedocsext/theme/js/site.js
diff --git a/src/js/application/index.js b/src/js/application/index.js
@@ -22,7 +22,8 @@ import * as project_views from "../project";
  * :meth:`Application.run`.
  */
 export class Application {
-  constructor() {
+  constructor(config) {
+    this.config = config;
     this.registry = new Registry();
   }
 
@@ -50,21 +51,22 @@ export class Application {
    *     Convention on :ref:`js-json-config`
    */
   load_config() {
-    console.debug("Loading site front end configuration from script tag");
-
-    const site_config_src = jquery("script#site-config").text() || "{}";
-    const site_config = JSON.parse(site_config_src);
-    if (site_config.webpack_public_path) {
-      __webpack_public_path__ = site_config.webpack_public_path;
+    if (this.config === undefined) {
+      console.debug("Loading site front end configuration from script tag");
+      const site_config_src = jquery("script#site-config").text() || "{}";
+      this.config = JSON.parse(site_config_src);
+    }
+    if (this.config.webpack_public_path) {
+      __webpack_public_path__ = this.config.webpack_public_path;
       global.__webpack_public_path__ = window.__webpack_public_path__ =
-        site_config.webpack_public_path;
+        this.config.webpack_public_path;
     }
     // Null route debug logging, don't do output anything that was debug
-    if (!site_config.debug) {
+    if (!this.config.debug) {
       console.debug = () => {};
     }
 
-    return site_config;
+    return this.config;
   }
 
   /**
diff --git a/src/js/application/plugins.js b/src/js/application/plugins.js
@@ -347,9 +347,9 @@ export const message = {
  */
 export const semanticui = {
   update: (element, value_accessor, all_bindings) => {
-    const value = ko.unwrap(value_accessor());
+    const binding_value = ko.unwrap(value_accessor());
     const jq_element = jquery(element);
-    for (const [key, value] of Object.entries(value)) {
+    for (const [key, value] of Object.entries(binding_value)) {
       if (key === "modal") {
         // modal is not supported here because the jQuery ``modal()`` plugin
         // replaces ``<body>`` and this causes an error from Knockout, because
diff --git a/src/js/tests/plugins/knockout_semanticui.test.html b/src/js/tests/plugins/knockout_semanticui.test.html
@@ -0,0 +1,48 @@
+<html>
+  <body>
+    <div class="ui dropdown" data-bind="semanticui: { dropdown: {}}">
+      Dropdown
+      <i class="dropdown icon"></i>
+      <div class="menu">
+        <div class="item">Choice 1</div>
+        <div class="item">Choice 2</div>
+      </div>
+    </div>
+
+    <script type="module">
+      import { expect } from "@open-wc/testing";
+      import { runTests } from "@web/test-runner-mocha";
+      import { default as ko } from "knockout";
+      import { default as jquery } from "jquery";
+
+      import { Application } from "../../application";
+      import { Registry } from "../../application/registry";
+
+      const app = new Application({ debug: true });
+      app.run();
+
+      runTests(async () => {
+        describe("Knockout semanticui plugin", () => {
+          it("SUI module initialized successfully", () => {
+            const elem = jquery(".ui.dropdown");
+
+            // The HTML attribute we add. Note `data()` is a jQuery method that
+            // can convert HTML data attributes to camelCase attribute names.
+            const data = elem.data();
+            expect(data.semanticuiDropdown).to.be.true;
+
+            // Inspect internal attributes added to the element by the FUI
+            // module plugin. For example, the module is attached to the element
+            // here:
+            // https://github.com/fomantic/Fomantic-UI/blob/b19851433cef2feba58b036cc19dcc72da176f1b/src/definitions/modules/dropdown.js#L143C26-L149
+            const moduleData = elem.data("module-dropdown");
+            expect(moduleData.can.show()).to.be.true;
+            expect(moduleData.is.active()).to.be.false;
+            expect(moduleData.is.disabled()).to.be.false;
+            expect(moduleData.is.empty()).to.be.false;
+          });
+        });
+      });
+    </script>
+  </body>
+</html>
