dangit i disappointed douglas adams. one method must go!!

jazzypants1989 · Oct 19, 2023 · a824a00 · a824a00
1 parent a4e0ea4
commit a824a00
Show file tree

Hide file tree

Showing 29 changed files with 1,021 additions and 426 deletions.
diff --git a/tests/attach.html b/tests/attach.html
@@ -6,18 +6,45 @@
     <title>Attach Test</title>
   </head>
   <body>
-    <div id="testContainer"></div>
+    <div id="testContainer">hi</div>
     <script type="module">
       import { $, $$ } from "../index.js"
 
+      const element = document.createElement("div")
+      element.id = "element"
+      element.innerHTML = `
+      <div>
+        <span class="multiple">Multiple</span>
+      <span class="multiple">Multiple</span>
+      <span class="multiple">Multiple</span>
+      </div>
+      `
+
+      const childrenOfElement = element.querySelectorAll(".multiple")
+
       $("#testContainer").attach([
         `
-        <div id="originalElement">Original Element</div>,
-        <div class="two">Two</div>,
-        <div class="two">Two</div>,
-        <div id="parent">Parent</div>,
+        <div id="parent">
+        <div id="originalElement">Original Element</div>
+        <div class="two">Two</div>
+        <div class="two">Two</div>
+        </div>
+      `,
+        `
+        <div id="parent2">
+        <div id="originalElement2">WOW!</div>
+        <div class="two">Cool!</div>
+        <div class="two">NEAT!</div>
+        </div>
       `,
+        childrenOfElement,
       ])
+
+      $$(".multiple").css("color", "red")
+
+      // $("#testContainer").attach(childrenOfElement, {
+      //   position: "after",
+      // })
     </script>
   </body>
 </html>
diff --git a/tests/become.html b/tests/become.html
@@ -22,7 +22,6 @@
         //   $(`<div class="replacementElements">hey what's up?
         //   <h2>Test</h2>
         //   </div>`)
-        // test with NodeList created from JavaScript
         const replacementEls = document.querySelectorAll(".replacementElements")
 
         document.getElementById("testContainer").appendChild(output)

diff --git a/tests/become3.html b/tests/become3.html
@@ -20,8 +20,6 @@ <h2>Cycle Match Test:</h2>
     <div id="remove">
       <h2>Remove Match Test:</h2>
       <div class="toBeReplaced">To Be Replaced 1</div>
-      <div class="toBeReplaced">To Be Replaced 2</div>
-      <div class="toBeReplaced">To Be Replaced 3</div>
       <div class="replacementElement">Replacement Element 1</div>
       <div class="replacementElement">Replacement Element 2</div>
     </div>
@@ -46,7 +44,7 @@ <h2>Remove Match Test:</h2>
         // Cycle Match Test
         toBeReplacedElsCycle.become(replacementElsCycle, {
           mode: "clone",
-          match: "all",
+          match: "cycle",
         })
 
         if (
@@ -61,7 +59,6 @@ <h2>Remove Match Test:</h2>
         // Remove Match Test
         toBeReplacedElsRemove.become(replacementElsRemove, {
           mode: "clone",
-          match: "all",
         })
 
         if (

diff --git a/tests/body.html b/tests/body.html
diff --git a/tests/contextSwitchingPro.html → tests/contextSwitching.html b/tests/contextSwitchingPro.html → tests/contextSwitching.html
@@ -10,11 +10,14 @@
       <h1>jQuery is for old people.</h1>
       <div class="card">
         <button id="counter" type="button"></button>
+        <button id="counter" type="button"></button>
+
+        <button>I AM NOT THAT BUTTON</button>
       </div>
     <script type="module">
       import { $, $$ } from "../index.js"
       let count = 0
-      const counter = $("#counter").text(count)
+      const counter = $$("#counter").text(count)
       counter
         .text(count)
         .on("click", () => {
@@ -31,9 +34,10 @@ <h1>jQuery is for old people.</h1>
         .css("border", "2px solid red")
         .parent()
         .css("border", "2px solid blue")
-        .kids()
-        .css("backgroundColor", "lightblue")
-        .pick("#counter")
+        .refresh()
+        .css("backgroundColor", "lightgreen")
+        // .pick("#counter")
+        // .css("backgroundColor", "lightgreen")
     </script>
   </body>
 </html>
diff --git a/tests/createElement.html b/tests/createElement.html
@@ -11,10 +11,7 @@
     <script type="module">
       import { $, $$, setErrorHandler } from "../index.js"
 
-      // setErrorHandler((err) => {
-      //   alert(err)
-      // })
-      $().moveTo("#testContainer", { position: "before" })
+      $(`<h1>HEY</h1>`).moveTo("#testContainer", { position: "before" })
     </script>
   </body>
 </html>
diff --git a/tests/do.html b/tests/do.html
@@ -25,16 +25,16 @@
       //       }, 1000)
       //     })
 
-      //     el.style.color = "green"
-      //     el.textContent = "do method test PASSED"
+      //     el.css({ backgroundColor: "hotpink" })
 
-      //     // el.css({ color: "green" }).text("do method test PASSED")
+      //     el.style.color = "darkgreen"
+      //     el.text("do method test PASSED")
       //   })
       // }
 
       // doMethodTest()
 
-      async function nowMethodTest() {
+      async function deferMethodTest() {
         const output = document.createElement("div")
         document.getElementById("testContainer").appendChild(output)
 
@@ -45,17 +45,19 @@
           .css({ color: "red" })
           .text("Hello, world!") // Text is red
           .wait(500)
-          .text("Goodbye, world!") // Text is blue
+          .do(async (el) => {
+            const json = await fetch(
+              "https://jsonplaceholder.typicode.com/users/1"
+            ).then((res) => res.json())
+
+            el.css({ color: "green" })
+            el.text(json.name) // Text is green
+          })
+          .wait(2000)
+          .text("Short and stout!") // Text is blue
       }
 
-      nowMethodTest()
-
-      //     el.style.color = "green"
-      //     el.textContent = "now method test PASSED"
-
-      //     // el.css({ color: "green" }).text("do method test PASSED")
-      //   })
-      // }
+      deferMethodTest()
     </script>
   </body>
 </html>
diff --git a/tests/fromHTML.html b/tests/fromHTML.html
@@ -12,14 +12,12 @@
     <script type="module">
       import { $, $$ } from "../index.js"
 
-      const button = $$("button")
+      const body = $("body")
 
-      // button.fromHTML("http://localhost:5500/tests/moveTo2.html", {
-      //   onSuccess: () => body.attach("<h1>It worked!</h1>"),
-      // })
-
-      button.fromStream("http://localhost:8080", {
+      body.fromHTML("http://localhost:5500/tests/playground.html", {
         onSuccess: () => $("body").attach("<h1>It worked!</h1>"),
+        runScripts: true,
+        sanitize: false,
       })
     </script>
   </body>

diff --git a/tests/fromJSON.html b/tests/fromJSON.html
@@ -12,17 +12,29 @@
     <script type="module">
       import { $, $$ } from "../index.js"
 
-      $("#testDiv").fromJSON(
-        "https://jsonplaceholder.typicode.com/todos/1",
-        (element, data) => {
-          element.html(`<h1>Title: ${data.title}</h1>`).addClass("updated")
-        },
-        {
-          fallback: "I'M A CUSTOM FALLBACK",
-          error: "I'M A CUSTOM ERROR",
-          onSuccess: () => $$("body").attach("<h1>It worked!</h1>"),
-        }
-      )
+      $("#testDiv")
+        .text("Loading...")
+        .fromJSON(
+          "https://jsonplaceholder.typicode.com/todos/1",
+          (element, data) => {
+            const { title, userId, id, completed } = data
+            element
+              .wait(1000)
+              .html(
+                `<h1>${title}</h1>
+            <p>userId: ${userId}</p>
+            <p>id: ${id}</p>
+            <p>completed: ${completed}</p>`
+              )
+              .addClass("updated")
+          },
+          {
+            fallback: "I'M A CUSTOM FALLBACK",
+            error: "I'M A CUSTOM ERROR",
+            onSuccess: () => $$("body").attach("<h1>It worked!</h1>"),
+          }
+        )
+        .css("background-color", "hotpink")
     </script>
 
     <style>

diff --git a/tests/fromStream.html b/tests/fromStream.html
@@ -0,0 +1,22 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Test Next Method</title>
+  </head>
+  <body>
+    <button id="btn1">Button 1</button>
+    <script type="module">
+      import { $, $$ } from "../index.js"
+
+      const body = $("body")
+
+      body.fromStream("http://localhost:8080", {
+        onSuccess: () => $("body").attach("<h1>It worked!</h1>"),
+        runScripts: true,
+        sanitize: false,
+      })
+    </script>
+  </body>
+</html>