@eturnity/eturnity_reusable_components 9.37.0-ATE-95.0 → 9.37.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@eturnity/eturnity_reusable_components",
-  "version": "9.37.0-ATE-95.0",
+  "version": "9.37.1",
   "files": [
     "dist",
     "src"

package/src/components/inputs/select/option/option.spec.js

@@ -3,31 +3,37 @@ import { mount } from '@vue/test-utils'
 import Option from '@/components/inputs/select/option'
 import theme from '@/assets/theme'
 
+// jsdom never receives the stylesheet vue3-styled-components generates, so the
+// hashed class on the rendered option is the observable: two mounts share a
+// class only when they resolve to the same styles.
 describe('RCoption', () => {
-  const mountOption = (props = {}) =>
+  const styleClass = (props = {}) =>
     mount(Option, {
       props: { value: 'a', ...props },
       slots: { default: 'Option A' },
     })
+      .classes()
+      .join(' ')
 
   it('hovers on grey 300 by default', () => {
-    expect(mountOption().vm.hoveredBackgroundColor).toBe(
-      theme.semanticColors.grey[300]
+    expect(styleClass()).toBe(
+      styleClass({ hoveredBgColor: theme.semanticColors.grey[300] })
     )
   })
 
   it('lets an explicit hoveredBgColor win over the default', () => {
-    expect(
-      mountOption({ hoveredBgColor: 'grey4' }).vm.hoveredBackgroundColor
-    ).toBe('grey4')
+    expect(styleClass({ hoveredBgColor: 'grey4' })).not.toBe(styleClass())
+    expect(styleClass({ hoveredBgColor: 'grey4' })).toBe(
+      styleClass({ hoveredBgColor: theme.colors.grey4 })
+    )
   })
 
   it('keeps its own hover colours in dark and transparent colour modes', () => {
-    expect(mountOption({ colorMode: 'dark' }).vm.hoveredBackgroundColor).toBe(
-      theme.semanticColors.teal[800]
+    expect(styleClass({ colorMode: 'dark', hoveredBgColor: 'grey4' })).toBe(
+      styleClass({ colorMode: 'dark' })
     )
     expect(
-      mountOption({ colorMode: 'transparent' }).vm.hoveredBackgroundColor
-    ).toBe('grey6')
+      styleClass({ colorMode: 'transparent', hoveredBgColor: 'grey4' })
+    ).toBe(styleClass({ colorMode: 'transparent' }))
   })
 })

package/src/components/threeDots/threeDots.spec.js

@@ -1,6 +1,7 @@
 /* eslint-disable */
 import { mount, DOMWrapper } from '@vue/test-utils'
 import ThreeDots from './index.vue'
+import theme from '@/assets/theme'
 
 jest.mock('@/components/icon/iconCache.mjs', () => ({
   fetchIcon: jest.fn(() => Promise.resolve('')),
@@ -118,4 +119,28 @@ describe('ThreeDots', () => {
     expect(w.emitted('on-select')).toHaveLength(1)
     expect(w.emitted('on-select')[0][0]).toMatchObject({ value: 'c1' })
   })
+
+  // jsdom never receives the stylesheet vue3-styled-components generates, so the
+  // hashed class on the trigger is the observable: two mounts share a class only
+  // when they resolve to the same styles.
+  describe('hovered background colour', () => {
+    const styleClass = (props = {}) => {
+      const w = mount(ThreeDots, { props: { options, ...props } })
+      const classes = w.classes().join(' ')
+      w.unmount()
+      return classes
+    }
+
+    it('hovers on grey 300 by default', () => {
+      expect(styleClass()).toBe(
+        styleClass({ hoveredBackgroundColor: theme.semanticColors.grey[300] })
+      )
+    })
+
+    it('lets an explicit hoveredBackgroundColor win over the default', () => {
+      expect(
+        styleClass({ hoveredBackgroundColor: theme.colors.grey5 })
+      ).not.toBe(styleClass())
+    })
+  })
 })