Test Alerts

docs/alert.md

@@ -54,5 +54,4 @@ Alerts are set up to slide into view from the top-right side of the screen. Clic
 ## Options
 
 - `data-alert-dismiss-after-value` can be provided to make the alert dimiss after x miliseconds. Default is `undefined`.
-- `data-alert-show-delay-value` can be set to tell the alert to show itself after x miliseconds. Defaults to `0` miliseconds.
-- `data-alert-remove-delay-value` can be set to tell the alert to hide itself after x milisconds. Defaults to `1100` miliseconds.
+- `data-alert-show-delay-value` can be set to tell the alert to show itself after x miliseconds. Defaults to `0` miliseconds.

src/alert.js

@@ -5,7 +5,6 @@ export default class extends Controller {
   static values = {
     dismissAfter: Number,
     showDelay: { type: Number, default: 0 },
-    removeDelay: { type: Number, default: 1100 }
   }
 
   connect() {

test/alert_test.js

@@ -0,0 +1,49 @@
+import { aTimeout, fixture, expect, nextFrame } from '@open-wc/testing'
+import { fetchFixture } from './test_helpers'
+
+import { Application } from '@hotwired/stimulus'
+import Alert from '../src/alert'
+
+describe('AlertController', () => {
+  const loadFixture = async (fixturePath) => {
+    const html = await fetchFixture(fixturePath)
+    await fixture(html)
+    const application = Application.start()
+    application.register('alert', Alert)
+  }
+
+  const fetchElement = () => document.querySelector("[data-controller='alert'")
+
+  describe('with default values', () => {
+    it('shows the element immediately and closes it without delay ', async () => {
+      await loadFixture('alerts/alert_default.html')
+      expect(fetchElement().className.includes("hidden")).to.equal(false)
+
+      const closeButton = document.querySelector("[data-action='alert#close']")
+      closeButton.click()
+
+      await aTimeout(1000)
+      expect(fetchElement()).to.equal(null)
+    })
+  })
+
+  describe('with show delay value', () => {
+    it('shows after 1000ms', async () => {
+      await loadFixture('alerts/alert_show_delay.html')
+      expect(fetchElement().className.includes("hidden")).to.equal(true)
+
+      await aTimeout(1000)
+      expect(fetchElement().className.includes("hidden")).to.equal(false)
+    })
+  })
+
+  describe('with dismiss after value', () => {
+    it('dismisses after 500ms', async () => {
+      await loadFixture('alerts/alert_dismiss_after.html')
+      expect(fetchElement().className.includes("hidden")).to.equal(false)
+
+      await aTimeout(600)
+      expect(fetchElement()).to.equal(null)
+    })
+  })
+})

test/fixtures/alerts/alert_default.html

@@ -0,0 +1,6 @@
+<div data-controller="alert">
+  <div>
+    <div>Stimulus is the JS of the future!</div>
+    <button data-action="alert#close">Close</button>
+  </div>
+</div>

test/fixtures/alerts/alert_dismiss_after.html

@@ -0,0 +1,6 @@
+<div data-controller="alert" data-alert-dismiss-after-value="500">
+  <div>
+    <div>Stimulus is the JS of the future!</div>
+    <button data-action="alert#close">Close</button>
+  </div>
+</div>

test/fixtures/alerts/alert_show_delay.html

@@ -0,0 +1,10 @@
+<div
+  data-controller="alert"
+  data-alert-show-delay-value="1000"
+  class="hidden"
+>
+  <div>
+    <div>Stimulus is the JS of the future!</div>
+    <button data-action="alert#close">Close</button>
+  </div>
+</div>