@kokoccc/vuetify 1.0.1

package/src/util/__tests__/colorUtils.spec.ts

@@ -0,0 +1,162 @@
+import {
+  classToHex,
+  colorToInt,
+  intToHex,
+  isCssColor,
+  parseGradient,
+} from '../colorUtils'
+import * as transformSRGB from '../color/transformSRGB'
+import * as transformCIELAB from '../color/transformCIELAB'
+
+const colors = {
+  red: {
+    base: '#ff0000',
+    lighten1: '#ff6666',
+  },
+}
+const currentTheme = { primary: '#1976d2' }
+
+describe('isCssColor', () => {
+  it('should return true if css color is passed', () => {
+    expect(isCssColor('#ff0000')).toBeTruthy()
+    expect(isCssColor('#fff')).toBeTruthy()
+    expect(isCssColor('rgb(255, 255, 255)')).toBeTruthy()
+    expect(isCssColor('rgba(255, 0, 0, 0.8)')).toBeTruthy()
+    expect(isCssColor('var(--my-color)')).toBeTruthy()
+  })
+
+  it('should return false if non-css color is passed', () => {
+    expect(isCssColor('red')).toBeFalsy()
+    expect(isCssColor('primary')).toBeFalsy()
+  })
+})
+
+describe('colorToInt', () => {
+  it('should convert a hex string to a number', () => {
+    expect(colorToInt('#123456')).toBe(0x123456)
+    expect(colorToInt('#abc')).toBe(0xaabbcc)
+    expect(colorToInt('876543')).toBe(0x876543)
+    expect(colorToInt('669')).toBe(0x666699)
+    expect(colorToInt('fff')).toBe(0xffffff)
+  })
+
+  it('should keep existing numbers', () => {
+    expect(colorToInt(0xabcdef)).toBe(0xabcdef)
+  })
+
+  it('should reject invalid formats', async () => {
+    expect(() => colorToInt([])).toThrow('Colors can only be numbers or strings, recieved Array instead')
+    expect(() => colorToInt(() => {})).toThrow('Colors can only be numbers or strings, recieved Function instead')
+
+    colorToInt(-1)
+    colorToInt('#1000000')
+    colorToInt('#13')
+    colorToInt('#6')
+    colorToInt('red')
+
+    expect(`Colors cannot be negative: '-1'`).toHaveBeenTipped()
+    expect(`'#1000000' is not a valid rgb color`).toHaveBeenTipped()
+    expect(`'#13' is not a valid rgb color`).toHaveBeenTipped()
+    expect(`'#6' is not a valid rgb color`).toHaveBeenTipped()
+    expect(`'red' is not a valid rgb color`).toHaveBeenTipped()
+  })
+})
+
+describe('classToHex', () => {
+  it('should convert a color class string to a hex string', () => {
+    expect(classToHex('red', colors, currentTheme)).toBe('#ff0000')
+    expect(classToHex('red lighten-1', colors, currentTheme)).toBe('#ff6666')
+    expect(classToHex('primary', colors, currentTheme)).toBe('#1976d2')
+  })
+})
+
+// TODO
+describe('intToHex', () => {
+  it('should convert', () => {
+    expect(intToHex(0)).toBe('#000000')
+    expect(intToHex(0xffffff)).toBe('#ffffff')
+  })
+})
+
+describe('transformSRGB', () => {
+  it('should convert sRGB to XYZ', () => {
+    expect(transformSRGB.toXYZ(0)).toEqual([0, 0, 0])
+    expect(transformSRGB.toXYZ(0xffffff)).toEqual([0.9505, 1, 1.0890])
+    expect(transformSRGB.toXYZ(0xfcfbf4)).toEqualCloseTo([0.909712, 0.962215, 0.993659], 6)
+    expect(transformSRGB.toXYZ(0x45a081)).toEqualCloseTo([0.189875, 0.279918, 0.251711], 6)
+    expect(transformSRGB.toXYZ(0x191995)).toEqualCloseTo([0.061733, 0.030719, 0.287013], 6)
+    expect(transformSRGB.toXYZ(0xcd6600)).toEqualCloseTo([0.299282, 0.224819, 0.027620], 6)
+  })
+
+  it('should convert XYZ to sRGB', () => {
+    expect(transformSRGB.fromXYZ([0, 0, 0])).toBe(0)
+    expect(transformSRGB.fromXYZ([0.9505, 1, 1.0890])).toBe(0xffffff)
+    expect(transformSRGB.fromXYZ([0.909712, 0.962215, 0.993659])).toBe(0xfcfbf4)
+    expect(transformSRGB.fromXYZ([0.189875, 0.279918, 0.251711])).toBe(0x45a081)
+    expect(transformSRGB.fromXYZ([0.061733, 0.030719, 0.287013])).toBe(0x191995)
+    expect(transformSRGB.fromXYZ([0.299282, 0.224819, 0.027620])).toBe(0xcd6600)
+  })
+})
+
+describe('transformCIELAB', () => {
+  it('should convert LAB to XYZ', () => {
+    expect(transformCIELAB.toXYZ([0, 0, 0])).toEqual([0, 0, 0])
+    expect(transformCIELAB.toXYZ([100, 0.0053, -0.0104])).toEqualCloseTo([0.9505, 1, 1.0890], 4)
+    expect(transformCIELAB.toXYZ([98.5202, -0.8731, 3.4542])).toEqualCloseTo([0.909713, 0.962215, 0.99366], 6)
+    expect(transformCIELAB.toXYZ([59.8813, -34.7853, 8.0829])).toEqualCloseTo([0.189875, 0.279918, 0.251711], 6)
+    expect(transformCIELAB.toXYZ([20.3296, 44.3917, -65.5991])).toEqualCloseTo([0.061733, 0.030719, 0.287014], 6)
+    expect(transformCIELAB.toXYZ([54.5346, 36.1321, 62.8465])).toEqualCloseTo([0.299282, 0.224819, 0.027620], 6)
+  })
+
+  it('should convert XYZ to LAB', () => {
+    expect(transformCIELAB.fromXYZ([0, 0, 0])).toEqual([0, 0, 0])
+    expect(transformCIELAB.fromXYZ([0.9505, 1, 1.0890])).toEqualCloseTo([100, 0.0053, -0.0104], 4)
+    expect(transformCIELAB.fromXYZ([0.909712, 0.962215, 0.993659])).toEqualCloseTo([98.5202, -0.8731, 3.4542], 4)
+    expect(transformCIELAB.fromXYZ([0.189875, 0.279918, 0.251711])).toEqualCloseTo([59.8813, -34.7853, 8.0829], 4)
+    expect(transformCIELAB.fromXYZ([0.061733, 0.030719, 0.287014])).toEqualCloseTo([20.3296, 44.3917, -65.5991], 4)
+    expect(transformCIELAB.fromXYZ([0.299282, 0.224819, 0.027620])).toEqualCloseTo([54.5346, 36.1321, 62.8465], 4)
+  })
+})
+
+describe('parseGradient', () => {
+  it('should replace colors with their valid forms', () => {
+    expect(
+      parseGradient('to top, red lighten-1, rgba(#000, .8)', colors, currentTheme)
+    ).toBe('to top, #ff6666, rgba(0,0,0, .8)')
+    expect(
+      parseGradient('to top, #fff, primary', colors, currentTheme)
+    ).toBe('to top, #fff, #1976d2')
+    expect(
+      parseGradient('to top, var(--foo), rgba(#0000, .6)', colors, currentTheme)
+    ).toBe('to top, var(--foo), rgba(0,0,0, .6)')
+  })
+})
+
+expect.extend({
+  toEqualCloseTo (received, expected, precision = 3) {
+    const getType = item => item.constructor.name.toLowerCase()
+
+    function round (obj) {
+      switch (getType(obj)) {
+        case 'array':
+          return obj.map(round)
+
+        case 'object':
+          return Object.keys(obj).reduce((acc, key) => {
+            acc[key] = round(obj[key])
+            return acc
+          }, {})
+
+        case 'number':
+          return +obj.toFixed(precision)
+
+        default:
+          return obj
+      }
+    }
+
+    expect(round(received)).toEqual(expected)
+
+    return { pass: true }
+  },
+})

package/src/util/__tests__/console.spec.ts

@@ -0,0 +1,132 @@
+import { consoleWarn, consoleError, consoleInfo, deprecate, breaking, removed } from '../console'
+
+describe('console', () => {
+  beforeEach(() => {
+    // Clear console mocks before each test
+    jest.clearAllMocks()
+  })
+
+  describe('consoleWarn', () => {
+    it('should generate a warning', () => {
+      consoleWarn('foo')
+      expect('[Vuetify] foo').toHaveBeenTipped()
+    })
+
+    it('should generate a warning with Vue 3 component', () => {
+      const vm = {
+        type: { name: 'Vue3Component' },
+        props: { color: 'primary', size: 'large' },
+        setupState: { isActive: true, count: 0 }
+      }
+      consoleWarn('Vue 3 warning', vm)
+      expect('[Vuetify] Vue 3 warning\n\n(found in <Vue3Component> (props: color, size, setup: isActive, count))').toHaveBeenTipped()
+    })
+
+    it('should not show duplicate warnings for same component instance', () => {
+      const vm = {
+        type: { name: 'TestComponent' },
+        props: {},
+        setupState: {}
+      }
+      consoleWarn('duplicate warning', vm)
+      consoleWarn('duplicate warning', vm) // Should not show again
+      expect('[Vuetify] duplicate warning\n\n(found in <TestComponent>)').toHaveBeenTipped()
+    })
+  })
+
+  describe('consoleError', () => {
+    it('should generate an error', () => {
+      consoleError('foo')
+      expect('[Vuetify] foo').toHaveBeenWarned()
+    })
+
+    it('should generate an error with Vue 3 component', () => {
+      const vm = {
+        type: { name: 'Vue3ErrorComponent' },
+        props: { error: true },
+        setupState: { hasError: true }
+      }
+      consoleError('Vue 3 error', vm)
+      expect('[Vuetify] Vue 3 error\n\n(found in <Vue3ErrorComponent> (props: error, setup: hasError))').toHaveBeenWarned()
+    })
+  })
+
+  describe('deprecate', () => {
+    it('should generate deprecation warning', () => {
+      deprecate('oldProp', 'newProp')
+      expect('[Vuetify] [UPGRADE] \'oldProp\' is deprecated, use \'newProp\' instead.').toHaveBeenTipped()
+    })
+
+    it('should generate deprecation warning with Vue 3 component', () => {
+      const vm = {
+        type: { name: 'DeprecatedComponent' },
+        props: {},
+        setupState: {}
+      }
+      deprecate('oldMethod', 'newMethod', vm)
+      expect('[Vuetify] [UPGRADE] \'oldMethod\' is deprecated, use \'newMethod\' instead.\n\n(found in <DeprecatedComponent>)').toHaveBeenTipped()
+    })
+  })
+
+  describe('breaking', () => {
+    it('should generate breaking change error', () => {
+      breaking('removedProp', 'replacementProp')
+      expect('[Vuetify] [BREAKING] \'removedProp\' has been removed, use \'replacementProp\' instead.').toHaveBeenWarned()
+    })
+
+    it('should generate breaking change error with Vue 3 component', () => {
+      const vm = {
+        type: { name: 'BreakingComponent' },
+        props: {},
+        setupState: {}
+      }
+      breaking('oldAPI', 'newAPI', vm)
+      expect('[Vuetify] [BREAKING] \'oldAPI\' has been removed, use \'newAPI\' instead.\n\n(found in <BreakingComponent>)').toHaveBeenWarned()
+    })
+  })
+
+  describe('removed', () => {
+    it('should generate removal warning', () => {
+      removed('unusedProp')
+      expect('[Vuetify] [REMOVED] \'unusedProp\' has been removed. You can safely omit it.').toHaveBeenTipped()
+    })
+
+    it('should generate removal warning with Vue 3 component', () => {
+      const vm = {
+        type: { name: 'RemovedComponent' },
+        props: {},
+        setupState: {}
+      }
+      removed('unusedMethod', vm)
+      expect('[Vuetify] [REMOVED] \'unusedMethod\' has been removed. You can safely omit it.\n\n(found in <RemovedComponent>)').toHaveBeenTipped()
+    })
+  })
+
+  describe('component name formatting', () => {
+    it('should handle anonymous Vue 3 components', () => {
+      const vm = {
+        type: {},
+        props: {},
+        setupState: {}
+      }
+      consoleWarn('anonymous test', vm)
+      expect('[Vuetify] anonymous test\n\n(found in <Anonymous>)').toHaveBeenTipped()
+    })
+
+    it('should handle Vue 3 root component', () => {
+      const vm = {
+        appContext: {
+          app: {
+            _instance: {
+              proxy: {}
+            }
+          }
+        }
+      }
+      // Mock the root check
+      vm.appContext.app._instance.proxy = vm
+      consoleWarn('root test', vm)
+      expect('[Vuetify] root test\n\n(found in <Root>)').toHaveBeenTipped()
+    })
+  })
+})

package/src/util/__tests__/dateTimeUtils.spec.ts

@@ -0,0 +1,24 @@
+import { weekNumber } from '../dateTimeUtils'
+
+describe('/util/dateTimeUtils.ts', () => {
+  test.each([
+    [2010, 0, 1, 1, 4, 53],
+    [2016, 0, 1, 0, 4, 53],
+    [2006, 0, 1, 1, 4, 52],
+    [2005, 11, 31, 0, 4, 52],
+    [2006, 0, 1, 0, 4, 1],
+    [2017, 0, 1, 0, 4, 1],
+    [2019, 11, 31, 0, 4, 1],
+    [2020, 0, 1, 0, 4, 1],
+    [2020, 0, 1, 1, 4, 1],
+    [2020, 0, 8, 0, 4, 2],
+    [2020, 0, 8, 1, 4, 2],
+    [2020, 1, 1, 2, 4, 5],
+    // ISO 8601 (first day of week Monday, First week of year must contain a thurstday)
+    [2012, 0, 1, 1, 4, 52],
+    // American locale (first day of week Sunday, 1 Jan determines first week)
+    [2012, 0, 1, 0, 0, 1],
+  ])('should return correct weeknumber', (year, month, day, firstDayOfWeek, localFirstDayOfYear, week) => {
+    expect(weekNumber(year, month, day, firstDayOfWeek, localFirstDayOfYear)).toBe(week)
+  })
+})

package/src/util/__tests__/dom.spec.ts

@@ -0,0 +1,45 @@
+import { defineComponent, h } from 'vue'
+import {
+  mount,
+  enableAutoUnmount,
+} from '@vue/test-utils'
+import {
+  attachedRoot,
+} from '../dom'
+
+const FooComponent = defineComponent({
+  render () {
+    return h('div', ['foo'])
+  },
+})
+
+describe('dom', () => {
+  enableAutoUnmount(afterEach)
+
+  it('should properly detect an element\'s root', () => {
+    const shadowHost = document.createElement('div')
+    expect(attachedRoot(shadowHost)).toBeNull()
+
+    const shadowRoot = shadowHost.attachShadow({ mode: 'closed' })
+    expect(attachedRoot(shadowRoot)).toBeNull()
+
+    document.body.appendChild(shadowHost)
+    expect(attachedRoot(shadowHost)).toBe(document)
+
+    expect(attachedRoot(shadowRoot)).toBe(shadowRoot)
+
+    const insideDiv = document.createElement('div')
+    expect(attachedRoot(insideDiv)).toBeNull()
+
+    shadowRoot.appendChild(insideDiv)
+    expect(attachedRoot(insideDiv)).toBe(shadowRoot)
+  })
+
+  it('should detect the root of mounted components', () => {
+    const attachedWrapper = mount(FooComponent, { attachTo: document.body })
+    expect(attachedRoot(attachedWrapper.element)).toBe(document)
+
+    const detachedWrapper = mount(FooComponent)
+    expect(attachedRoot(detachedWrapper.element)).toBeNull()
+  })
+})