Add tests

packages/collapse/src/index.js

@@ -53,3 +53,21 @@ export default function (Alpine) {
         }
     })
 }
+
+function modifierValue(modifiers, key, fallback) {
+    // If the modifier isn't present, use the default.
+    if (modifiers.indexOf(key) === -1) return fallback
+
+    // If it IS present, grab the value after it: x-show.transition.duration.500ms
+    const rawValue = modifiers[modifiers.indexOf(key) + 1]
+
+    if (! rawValue) return fallback
+
+    if (key === 'duration') {
+        // Support x-collapse.duration.500ms && duration.500
+        let match = rawValue.match(/([0-9]+)ms/)
+        if (match) return match[1]
+    }
+
+    return rawValue
+}

tests/cypress/integration/plugins/collapse.spec.js

@@ -0,0 +1,17 @@
+import { haveAttribute, haveComputedStyle, html, test } from '../../utils'
+
+test('can collapse and expand element',
+    [html`
+        <div x-data="{ expanded: false }">
+            <button @click="expanded = ! expanded">toggle</button>
+            <h1 x-show="expanded" x-collapse>contents</h1>
+        </div>
+    `],
+    ({ get }, reload) => {
+        get('h1').should(haveComputedStyle('height', '0px'))
+        get('button').click()
+        get('h1').should(haveAttribute('style', 'overflow: hidden; height: auto;'))
+        get('button').click()
+        get('h1').should(haveComputedStyle('height', '0px'))
+    },
+)

tests/cypress/spec.html

@@ -11,6 +11,7 @@
     <script src="/../../packages/persist/dist/cdn.js"></script>
     <script src="/../../packages/trap/dist/cdn.js"></script>
     <script src="/../../packages/intersect/dist/cdn.js"></script>
+    <script src="/../../packages/collapse/dist/cdn.js"></script>
     <script>
         let root = document.querySelector('#root')