use socket for testing

socketsupply · Apr 24, 2024 · 4b2ba69 · 4b2ba69
1 parent de3d4b4
commit 4b2ba69
Show file tree

Hide file tree

Showing 30 changed files with 127 additions and 82 deletions.
diff --git a/_test/index.html b/_test/index.html
@@ -15,7 +15,7 @@
          object-src 'none';
       "
     >
-    <script src="index.js" type="module"></script>
+    <script src="_test/index.js" type="module"></script>
   </head>
   <body>
   </body>

diff --git a/accordion/test.js b/accordion/test.js
@@ -1,7 +1,7 @@
 import { test } from 'socket:test'
 import { html, qs } from '../_test/util.js'
 import { Tonic } from '@socketsupply/tonic'
-import { Components } from '..'
+import { Components } from '../index.js'
 Components(Tonic)
 
 document.body.appendChild(html`

diff --git a/badge/test.js b/badge/test.js
@@ -2,7 +2,7 @@ import { test } from 'socket:test'
 import { html, qs } from '../_test/util.js'
 
 import { Tonic } from '@socketsupply/tonic'
-import { Components } from '..'
+import { Components } from '../index.js'
 
 Components(Tonic)
 

diff --git a/button/test.js b/button/test.js
@@ -2,7 +2,7 @@ import { test } from 'socket:test'
 import { html, qs } from '../_test/util.js'
 
 import { Tonic } from '@socketsupply/tonic'
-import { Components } from '..'
+import { Components } from '../index.js'
 
 Components(Tonic)
 

diff --git a/chart/test.js b/chart/test.js
@@ -3,7 +3,7 @@ import { html, qs } from '../_test/util.js'
 
 import { Tonic } from '@socketsupply/tonic'
 import chart from 'chart.js'
-import { Components } from '..'
+import { Components } from '../index.js'
 
 Components(Tonic)
 

diff --git a/checkbox/test.js b/checkbox/test.js
@@ -2,7 +2,7 @@ import { test } from 'socket:test'
 import { html, qs } from '../_test/util.js'
 
 import { Tonic } from '@socketsupply/tonic'
-import { Components } from '..'
+import { Components } from '../index.js'
 
 Components(Tonic)
 

diff --git a/dialog/test.js b/dialog/test.js
@@ -2,7 +2,7 @@ import { test } from 'socket:test'
 import { html, qs } from '../_test/util.js'
 
 import { Tonic } from '@socketsupply/tonic'
-import { Components } from '..'
+import { Components } from '../index.js'
 
 Components(Tonic)
 

diff --git a/icon/test.js b/icon/test.js
@@ -2,7 +2,7 @@ import { test } from 'socket:test'
 import { html, qs } from '../_test/util.js'
 
 import { Tonic } from '@socketsupply/tonic'
-import { Components } from '..'
+import { Components } from '../index.js'
 
 Components(Tonic)
 

diff --git a/importmap.json b/importmap.json
@@ -1,5 +1,6 @@
 {
   "imports": {
-    "@socketsupply/tonic": "npm:@socketsupply/tonic"
+    "@socketsupply/tonic": "npm:@socketsupply/tonic",
+    "chart.js": "npm:chart.js"
   }
 }
diff --git a/index.js b/index.js
@@ -42,7 +42,7 @@ Components.Tonic = Tonic
 //
 // An example collection of components.
 //
-export function Components (Tonic) {
+function Components (Tonic) {
   if (once) {
     return
   }
@@ -83,4 +83,5 @@ export function Components (Tonic) {
   Tonic.add(TonicToggle, 'tonic-toggle')
 }
 
+export { Components }
 export default Components
diff --git a/input/test.js b/input/test.js
@@ -2,7 +2,7 @@ import { test } from 'socket:test'
 import { html, qs } from '../_test/util.js'
 
 import { Tonic } from '@socketsupply/tonic'
-import { Components } from '..'
+import { Components } from '../index.js'
 
 Components(Tonic)
 

diff --git a/package.json b/package.json
@@ -1,15 +1,11 @@
 {
   "name": "@socketsupply/components",
-  "version": "14.0.13",
+  "version": "14.1.0",
   "description": "Example components",
   "type": "module",
   "scripts": {
-    "prepare": "npm run lint",
-    "prepublishOnly": "git push --follow-tags",
     "lint": "standard -v",
-    "test": "standard && esbuild --format=esm --bundle _test/index.js | tape-run",
-    "test:ci": "esbuild --format=esm --bundle _test/index.js | tape-run",
-    "test:open": "esbuild --format=esm --bundle _test/index.js | tape-run --browser chrome --keep-open",
+    "test": "npm run lint && ssc build -r",
     "pub": "npm pub && npm publish --registry https://npm.pkg.github.com"
   },
   "repository": {
@@ -30,8 +26,9 @@
   },
   "homepage": "https://github.com/socketsupply/components#readme",
   "devDependencies": {
+    "@socketsupply/socket": "github:socketsupply/socket#next",
     "@socketsupply/tonic": "15.0.0",
-    "standard": "16.0.4",
-    "chart.js": "^2.9.2"
+    "chart.js": "^2.9.2",
+    "standard": "16.0.4"
   }
 }
diff --git a/panel/test.js b/panel/test.js
@@ -2,7 +2,7 @@ import { test } from 'socket:test'
 import { html, qs } from '../_test/util.js'
 
 import { Tonic } from '@socketsupply/tonic'
-import { Components } from '..'
+import { Components } from '../index.js'
 
 Components(Tonic)
 
@@ -81,24 +81,24 @@ panelPositionButton.addEventListener('click', e => panelPosition.show())
 
 test('opening a panel', async t => {
   const container = qs('#example-panel-default')
-  const overlay = qs('.tonic--overlay')
+  const overlay = qs('.tonic--dialog--overlay')
   const main = qs('main', container)
   const h3 = qs('h3', main)
 
-  t.ok(container)
-  t.ok(overlay)
-  t.ok(main)
-  t.ok(h3)
+  t.ok(container, 'container created')
+  t.ok(overlay, 'overlay created')
+  t.ok(main, 'main found')
+  t.ok(h3, 'h3 found')
 
-  t.equal(h3.textContent.trim(), 'Hello')
+  t.equal(h3.textContent.trim(), 'Hello', 'should contain "Hello"')
 
-  t.ok(container.hasAttribute('hidden'))
+  t.ok(container.hasAttribute('hidden'), 'should be hidden')
 
   await container.show()
 
   t.equal(container.hasAttribute('hidden'), false, 'is not hidden')
 
   await container.hide()
 
-  t.ok(container.hasAttribute('hidden'))
+  t.ok(container.hasAttribute('hidden'), 'container is hidden')
 })
diff --git a/popover/index.js b/popover/index.js
@@ -112,13 +112,17 @@ export class TonicPopover extends Tonic {
     }
   }
 
-  show (triggerNode) {
+  show () {
+    const triggerNode = document.querySelector(`#${this.props.for}`)
     const popover = this.querySelector('.tonic--popover')
     let scrollableArea = triggerNode.parentNode
 
     while (true) {
       if (!scrollableArea || scrollableArea.tagName === 'BODY') break
-      if (window.getComputedStyle(scrollableArea).overflow === 'scroll') break
+
+      const overflow = window.getComputedStyle(scrollableArea).overflow
+      if (['scroll', 'scroll-x', 'scroll-y', 'auto'].includes(overflow)) break
+
       scrollableArea = scrollableArea.parentNode
     }
 
@@ -147,19 +151,17 @@ export class TonicPopover extends Tonic {
         left += triggerNode.offsetWidth - popover.offsetWidth
         break
       case 'bottom':
-        pos += triggerNode.offsetHeight + margin
+        pos += triggerNode.parentNodeNode.offsetHeight + margin
         left += (triggerNode.offsetWidth / 2) - (popover.offsetWidth / 2)
         break
     }
 
     popover.style.top = `${pos}px`
     popover.style.left = `${left}px`
 
-    window.requestAnimationFrame(() => {
-      popover.className = `tonic--popover tonic--show tonic--popover--${this.props.position}`
-      const event = new window.Event('show')
-      this.dispatchEvent(event)
-    })
+    popover.className = `tonic--popover tonic--show tonic--popover--${this.props.position}`
+    const event = new window.Event('show')
+    this.dispatchEvent(event)
   }
 
   hide () {

diff --git a/popover/test.js b/popover/test.js
@@ -2,7 +2,7 @@ import { test } from 'socket:test'
 import { html, qs } from '../_test/util.js'
 
 import { Tonic } from '@socketsupply/tonic'
-import { Components } from '..'
+import { Components } from '../index.js'
 
 Components(Tonic)
 
@@ -13,9 +13,9 @@ document.body.appendChild(html`
   <!-- Popover Default -->
   <div class="test-container">
     <span>Default Popover</span>
-    <tonic-button id="tonic-popover-default-button">
+    <button id="tonic-popover-default-button">
       Open Popover
-    </tonic-button>
+    </button>
   </div>
 
   <tonic-popover
@@ -30,17 +30,6 @@ document.body.appendChild(html`
 </section>
 `)
 
-//
-// Panel Default
-//
-const popover = document.getElementById('tonic-popover-default')
-popover.addEventListener('show', event => {
-  document.body.addEventListener('click', e => {
-    popover.hide()
-  }, { once: true })
-})
-
-// TODO: write tests for popover.
 test('opening popover', async t => {
   const container = qs('#popover')
   const popover = qs('#tonic-popover-default', container)
@@ -49,20 +38,24 @@ test('opening popover', async t => {
   t.ok(popover)
   t.ok(button)
 
-  const popoverCont = qs('.tonic--popover', popover)
-  t.ok(popoverCont)
+  const coPopover = qs('.tonic--popover', popover)
+  t.ok(coPopover)
 
-  const divs = popoverCont.querySelectorAll('div')
+  popover.addEventListener('show', event => {
+    t.ok(coPopover.classList.contains('tonic--show'), 'the component should be visible')
+    popover.hide()
+  })
+
+  const divs = coPopover.querySelectorAll('div')
   t.equal(divs.length, 3)
 
-  const styles = window.getComputedStyle(divs[0])
-  t.equal(styles.visibility, 'hidden')
+  t.ok(!coPopover.classList.contains('tonic--show'), 'the component should be hidden')
 
-  button.querySelector('button').click()
   await sleep(512)
+  button.click()
 
-  const styles2 = window.getComputedStyle(divs[0])
-  t.equal(styles2.visibility, 'visible')
+  await sleep(512)
+  t.ok(!coPopover.classList.contains('tonic--show'), 'the component should not be visible')
 })
 
 function sleep (ms) {

diff --git a/profile-image/test.js b/profile-image/test.js
@@ -2,7 +2,7 @@ import { test } from 'socket:test'
 import { html, qs } from '../_test/util.js'
 
 import { Tonic } from '@socketsupply/tonic'
-import { Components } from '..'
+import { Components } from '../index.js'
 
 Components(Tonic)
 

diff --git a/progress-bar/test.js b/progress-bar/test.js
@@ -2,7 +2,7 @@ import { test } from 'socket:test'
 import { html, qs } from '../_test/util.js'
 
 import { Tonic } from '@socketsupply/tonic'
-import { Components } from '..'
+import { Components } from '../index.js'
 
 Components(Tonic)
 

diff --git a/range/test.js b/range/test.js
@@ -2,7 +2,7 @@ import { test } from 'socket:test'
 import { html, qs } from '../_test/util.js'
 
 import { Tonic } from '@socketsupply/tonic'
-import { Components } from '..'
+import { Components } from '../index.js'
 
 Components(Tonic)
 

diff --git a/relative-time/test.js b/relative-time/test.js
@@ -1,8 +1,8 @@
 import { test } from 'socket:test'
 import { html, qs } from '../_test/util.js'
 
-import { Components } from '..'
-import { RelativeTime } from '.'
+import { Components } from '../index.js'
+import { RelativeTime } from './index.js'
 import { Tonic } from '@socketsupply/tonic'
 
 Components(Tonic)

diff --git a/router/test.js b/router/test.js
@@ -1,7 +1,7 @@
 import { html } from '../_test/util.js'
 import { Tonic } from '@socketsupply/tonic'
 
-import { Components } from '..'
+import { Components } from '../index.js'
 
 Components(Tonic)
 

diff --git a/select/test.js b/select/test.js
@@ -2,7 +2,7 @@ import { test } from 'socket:test'
 import { html, qs } from '../_test/util.js'
 
 import { Tonic } from '@socketsupply/tonic'
-import { Components } from '..'
+import { Components } from '../index.js'
 
 Components(Tonic)