Log warning if from CSS class in replace_css_class wasn't found

marcoroth · Nov 5, 2023 · 7f60562 · 7f60562
1 parent 18a491d
commit 7f60562
Show file tree

Hide file tree

Showing 2 changed files with 31 additions and 9 deletions.
diff --git a/src/actions/attributes.ts b/src/actions/attributes.ts
@@ -107,7 +107,13 @@ export function replace_css_class(this: StreamElement) {
   const to = this.getAttribute("to") || ""
 
   if (from && to) {
-    this.targetElements.forEach((element: HTMLElement) => element.classList.replace(from, to))
+    this.targetElements.forEach((element: HTMLElement) => {
+      const wasReplaced = element.classList.replace(from, to)
+
+      if (!wasReplaced) {
+        console.warn(`[TurboPower] The "${from}" CSS class provided in the "from" attribute for the "replace_css_class" action was not found on the target element. No replacements made.`, element)
+      }
+    })
   } else {
     console.warn(`[TurboPower] no "from" or "to" class provided for Turbo Streams operation "replace_css_class"`)
   }

diff --git a/test/attributes/replace_css_class.test.js b/test/attributes/replace_css_class.test.js
@@ -9,6 +9,7 @@ describe("replace_css_class", () => {
     afterEach(() => {
       sinon.restore()
     })
+
     it('should do nothing and print warning if no "from" were provided', async () => {
       sinon.replace(console, "warn", sinon.fake())
 
@@ -17,12 +18,12 @@ describe("replace_css_class", () => {
       const expectedWarning =
         '[TurboPower] no "from" or "to" class provided for Turbo Streams operation "replace_css_class"'
 
-      assert.equal(document.querySelector("#element").getAttribute("from"), null)
+      assert.equal(document.querySelector("#element").getAttribute("class"), null)
       assert(!console.warn.calledWith(expectedWarning), `console.warn wasn't called with "${expectedWarning}"`)
 
-      await executeStream('<turbo-stream action="replace_css_class" classes="" target="element"></turbo-stream>')
+      await executeStream('<turbo-stream action="replace_css_class" target="element"></turbo-stream>')
 
-      assert.equal(document.querySelector("#element").getAttribute("from"), null)
+      assert.equal(document.querySelector("#element").getAttribute("class"), null)
       assert(console.warn.calledWith(expectedWarning), `console.warn wasn't called with "${expectedWarning}"`)
     })
 
@@ -34,25 +35,40 @@ describe("replace_css_class", () => {
       const expectedWarning =
         '[TurboPower] no "from" or "to" class provided for Turbo Streams operation "replace_css_class"'
 
-      assert.equal(document.querySelector("#element").getAttribute("from"), null)
+      assert.equal(document.querySelector("#element").getAttribute("class"), null)
       assert(!console.warn.calledWith(expectedWarning), `console.warn wasn't called with "${expectedWarning}"`)
 
       await executeStream('<turbo-stream action="replace_css_class" target="element"></turbo-stream>')
 
-      assert.equal(document.querySelector("#element").getAttribute("from"), null)
+      assert.equal(document.querySelector("#element").getAttribute("class"), null)
       assert(console.warn.calledWith(expectedWarning), `console.warn wasn't called with "${expectedWarning}"`)
     })
+
+    it('should do nothing if "from" attribute is not present on element', async () => {
+      const spy = sinon.spy(console, "warn")
+      const element = await fixture('<div id="element" class=""></div>')
+
+      assert.equal(element.getAttribute("class"), "")
+      assert.equal(spy.callCount, 0)
+
+      await executeStream('<turbo-stream action="replace_css_class" target="element" from="one" to="two"></turbo-stream>')
+
+      assert.equal(element.getAttribute("class"), "")
+      assert.equal(spy.callCount, 1)
+      assert.equal(spy.firstCall.firstArg, `[TurboPower] The "one" CSS class provided in the "from" attribute for the "replace_css_class" action was not found on the target element. No replacements made.`)
+      assert.equal(spy.firstCall.lastArg, element)
+    })
   })
 
   context("target", () => {
     it("should replace the css class", async () => {
-      await fixture('<div id="element" class="background-blue"></div>')
-      assert.equal(document.querySelector("#element").getAttribute("class"), "background-blue")
+      const element = await fixture('<div id="element" class="background-blue"></div>')
+      assert.equal(element.getAttribute("class"), "background-blue")
 
       await executeStream(
         '<turbo-stream action="replace_css_class" from="background-blue" to="background-red" target="element"></turbo-stream>',
       )
-      assert.equal(document.querySelector("#element").getAttribute("class"), "background-red")
+      assert.equal(element.getAttribute("class"), "background-red")
     })
   })