@fmidev/smartmet-alert-client 4.4.19 → 4.7.0-beta.0

package/tests/unit/components/DayLarge.spec.ts

@@ -0,0 +1,348 @@
+import { describe, it, expect, afterEach } from 'vitest'
+import { mount, VueWrapper } from '@vue/test-utils'
+import DayLarge from '@/components/DayLarge.vue'
+import type { Day, DayRegions, WarningsMap, Theme, Language } from '@/types'
+
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+type ComponentInstance = any
+
+const mockDay: Day = {
+  weekdayName: 'thursday',
+  day: 31,
+  month: 10,
+  year: 2025,
+  severity: 3,
+  updatedDate: '31.10.2025',
+  updatedTime: '14:00',
+}
+
+const mockRegions: DayRegions = {
+  land: [],
+  sea: [],
+}
+
+describe('DayLarge.vue', () => {
+  let wrapper: VueWrapper | null = null
+
+  afterEach(() => {
+    if (wrapper) {
+      wrapper.unmount()
+      wrapper = null
+    }
+  })
+
+  describe('Component mounting', () => {
+    it('should mount with required props', () => {
+      wrapper = mount(DayLarge, {
+        props: {
+          index: 0,
+          input: mockDay,
+          visibleWarnings: [],
+          warnings: null,
+          regions: mockRegions,
+          geometryId: 2021,
+          theme: 'light-theme' as Theme,
+          language: 'fi' as Language,
+        },
+      })
+
+      expect(wrapper.exists()).toBe(true)
+    })
+
+    it('should mount with minimal props', () => {
+      wrapper = mount(DayLarge, {
+        props: {
+          index: 0,
+        },
+      })
+
+      expect(wrapper.exists()).toBe(true)
+    })
+  })
+
+  describe('Computed properties', () => {
+    it('should compute warningsTitle from translations', () => {
+      wrapper = mount(DayLarge, {
+        props: {
+          index: 0,
+          input: mockDay,
+          language: 'fi' as Language,
+        },
+      })
+
+      expect(typeof (wrapper.vm as ComponentInstance).warningsTitle).toBe(
+        'string'
+      )
+    })
+
+    it('should compute updatedTitle from translations', () => {
+      wrapper = mount(DayLarge, {
+        props: {
+          index: 0,
+          input: mockDay,
+          language: 'fi' as Language,
+        },
+      })
+
+      expect(typeof (wrapper.vm as ComponentInstance).updatedTitle).toBe(
+        'string'
+      )
+    })
+
+    it('should compute atTime from translations', () => {
+      wrapper = mount(DayLarge, {
+        props: {
+          index: 0,
+          input: mockDay,
+          language: 'fi' as Language,
+        },
+      })
+
+      expect(typeof (wrapper.vm as ComponentInstance).atTime).toBe('string')
+    })
+
+    it('should compute warningsDate from input', () => {
+      wrapper = mount(DayLarge, {
+        props: {
+          index: 0,
+          input: mockDay,
+          staticDays: true,
+          language: 'fi' as Language,
+        },
+      })
+
+      expect((wrapper.vm as ComponentInstance).warningsDate).toBe('31.10.2025')
+    })
+
+    it('should compute warningsDate with time range when not static', () => {
+      wrapper = mount(DayLarge, {
+        props: {
+          index: 0,
+          input: mockDay,
+          staticDays: false,
+          timeOffset: 0,
+          language: 'fi' as Language,
+        },
+      })
+
+      expect((wrapper.vm as ComponentInstance).warningsDate).toContain(
+        '31.10.2025'
+      )
+    })
+
+    it('should return empty warningsDate when input is missing date parts', () => {
+      wrapper = mount(DayLarge, {
+        props: {
+          index: 0,
+          input: {} as Day,
+          language: 'fi' as Language,
+        },
+      })
+
+      expect((wrapper.vm as ComponentInstance).warningsDate).toBe('')
+    })
+
+    it('should compute updatedDate from input', () => {
+      wrapper = mount(DayLarge, {
+        props: {
+          index: 0,
+          input: mockDay,
+          language: 'fi' as Language,
+        },
+      })
+
+      expect((wrapper.vm as ComponentInstance).updatedDate).toBe('31.10.2025')
+    })
+
+    it('should compute updatedTime from input', () => {
+      wrapper = mount(DayLarge, {
+        props: {
+          index: 0,
+          input: mockDay,
+          language: 'fi' as Language,
+        },
+      })
+
+      expect((wrapper.vm as ComponentInstance).updatedTime).toBe('14:00')
+    })
+
+    it('should compute dataProviderFirst from translations', () => {
+      wrapper = mount(DayLarge, {
+        props: {
+          index: 0,
+          input: mockDay,
+          language: 'fi' as Language,
+        },
+      })
+
+      expect(typeof (wrapper.vm as ComponentInstance).dataProviderFirst).toBe(
+        'string'
+      )
+    })
+
+    it('should compute dataProviderSecond from translations', () => {
+      wrapper = mount(DayLarge, {
+        props: {
+          index: 0,
+          input: mockDay,
+          language: 'fi' as Language,
+        },
+      })
+
+      expect(typeof (wrapper.vm as ComponentInstance).dataProviderSecond).toBe(
+        'string'
+      )
+    })
+  })
+
+  describe('Props handling', () => {
+    it('should accept visibleWarnings prop', () => {
+      wrapper = mount(DayLarge, {
+        props: {
+          index: 0,
+          visibleWarnings: ['wind', 'rain'],
+        },
+      })
+
+      expect(wrapper.exists()).toBe(true)
+    })
+
+    it('should accept warnings prop', () => {
+      const mockWarnings: WarningsMap = {}
+
+      wrapper = mount(DayLarge, {
+        props: {
+          index: 0,
+          warnings: mockWarnings,
+        },
+      })
+
+      expect(wrapper.exists()).toBe(true)
+    })
+
+    it('should accept loading prop', () => {
+      wrapper = mount(DayLarge, {
+        props: {
+          index: 0,
+          loading: false,
+        },
+      })
+
+      expect(wrapper.exists()).toBe(true)
+    })
+
+    it('should accept spinnerEnabled prop', () => {
+      wrapper = mount(DayLarge, {
+        props: {
+          index: 0,
+          spinnerEnabled: false,
+        },
+      })
+
+      expect((wrapper.vm as ComponentInstance).spinnerEnabled).toBe(false)
+    })
+  })
+
+  describe('Events', () => {
+    it('should have onLoaded method', () => {
+      wrapper = mount(DayLarge, {
+        props: {
+          index: 0,
+        },
+      })
+
+      expect(typeof (wrapper.vm as ComponentInstance).onLoaded).toBe('function')
+    })
+
+    it('should emit loaded event when onLoaded is called with true', () => {
+      wrapper = mount(DayLarge, {
+        props: {
+          index: 0,
+        },
+      })
+      ;(wrapper.vm as ComponentInstance).onLoaded(true)
+
+      expect(wrapper.emitted('loaded')).toBeTruthy()
+      expect(wrapper.emitted('loaded')![0]).toEqual([true])
+    })
+
+    it('should not emit loaded event when onLoaded is called with false', () => {
+      wrapper = mount(DayLarge, {
+        props: {
+          index: 0,
+        },
+      })
+      ;(wrapper.vm as ComponentInstance).onLoaded(false)
+
+      expect(wrapper.emitted('loaded')).toBeFalsy()
+    })
+  })
+
+  describe('Theme support', () => {
+    it('should accept theme prop', () => {
+      wrapper = mount(DayLarge, {
+        props: {
+          index: 0,
+          theme: 'dark-theme' as Theme,
+        },
+      })
+
+      expect(wrapper.exists()).toBe(true)
+    })
+
+    it('should support all theme variants', () => {
+      const themes: Theme[] = [
+        'light-theme',
+        'dark-theme',
+        'light-gray-theme',
+        'dark-gray-theme',
+      ]
+
+      themes.forEach((theme) => {
+        wrapper = mount(DayLarge, {
+          props: {
+            index: 0,
+            theme,
+          },
+        })
+
+        expect(wrapper.exists()).toBe(true)
+      })
+    })
+  })
+
+  describe('Language support', () => {
+    it('should support Finnish language', () => {
+      wrapper = mount(DayLarge, {
+        props: {
+          index: 0,
+          language: 'fi' as Language,
+        },
+      })
+
+      expect(wrapper.exists()).toBe(true)
+    })
+
+    it('should support Swedish language', () => {
+      wrapper = mount(DayLarge, {
+        props: {
+          index: 0,
+          language: 'sv' as Language,
+        },
+      })
+
+      expect(wrapper.exists()).toBe(true)
+    })
+
+    it('should support English language', () => {
+      wrapper = mount(DayLarge, {
+        props: {
+          index: 0,
+          language: 'en' as Language,
+        },
+      })
+
+      expect(wrapper.exists()).toBe(true)
+    })
+  })
+})

package/tests/unit/components/DaySmall.spec.ts

@@ -0,0 +1,352 @@
+import { describe, it, expect, afterEach } from 'vitest'
+import { mount, VueWrapper } from '@vue/test-utils'
+import DaySmall from '@/components/DaySmall.vue'
+import type { Day, DayRegions, WarningsMap, Theme, Language } from '@/types'
+
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+type ComponentInstance = any
+
+const mockDay: Day = {
+  weekdayName: 'thursday',
+  day: 31,
+  month: 10,
+  year: 2025,
+  severity: 3,
+  updatedDate: '31.10.2025',
+  updatedTime: '14:00',
+}
+
+const mockRegions: DayRegions = {
+  land: [],
+  sea: [],
+}
+
+describe('DaySmall.vue', () => {
+  let wrapper: VueWrapper | null = null
+
+  afterEach(() => {
+    if (wrapper) {
+      wrapper.unmount()
+      wrapper = null
+    }
+  })
+
+  describe('Component mounting', () => {
+    it('should mount with required props', () => {
+      wrapper = mount(DaySmall, {
+        props: {
+          index: 0,
+          input: mockDay,
+          visibleWarnings: [],
+          warnings: null,
+          regions: mockRegions,
+          geometryId: 2021,
+          theme: 'light-theme' as Theme,
+          language: 'fi' as Language,
+        },
+      })
+
+      expect(wrapper.exists()).toBe(true)
+    })
+
+    it('should mount with minimal props', () => {
+      wrapper = mount(DaySmall, {
+        props: {
+          index: 0,
+        },
+      })
+
+      expect(wrapper.exists()).toBe(true)
+    })
+  })
+
+  describe('Computed properties', () => {
+    it('should compute weekday from translations', () => {
+      wrapper = mount(DaySmall, {
+        props: {
+          index: 0,
+          input: mockDay,
+          language: 'fi' as Language,
+        },
+      })
+
+      expect(typeof (wrapper.vm as ComponentInstance).weekday).toBe('string')
+    })
+
+    it('should compute severity from input', () => {
+      wrapper = mount(DaySmall, {
+        props: {
+          index: 0,
+          input: mockDay,
+        },
+      })
+
+      expect((wrapper.vm as ComponentInstance).severity).toBe(3)
+    })
+
+    it('should return 0 severity when input is empty', () => {
+      wrapper = mount(DaySmall, {
+        props: {
+          index: 0,
+          input: {} as Day,
+        },
+      })
+
+      expect((wrapper.vm as ComponentInstance).severity).toBe(0)
+    })
+
+    it('should compute date with static days', () => {
+      wrapper = mount(DaySmall, {
+        props: {
+          index: 0,
+          input: mockDay,
+          staticDays: true,
+        },
+      })
+
+      expect((wrapper.vm as ComponentInstance).date).toBe('31.10.')
+    })
+
+    it('should compute date with time ranges when not static', () => {
+      wrapper = mount(DaySmall, {
+        props: {
+          index: 0,
+          staticDays: false,
+        },
+      })
+
+      expect((wrapper.vm as ComponentInstance).date).toBe('0...24 h')
+    })
+
+    it('should compute different time ranges for different indices', () => {
+      const timeRanges = [
+        '0...24 h',
+        '24...48 h',
+        '48...72 h',
+        '72...96 h',
+        '96...120 h',
+      ]
+
+      timeRanges.forEach((expected, index) => {
+        wrapper = mount(DaySmall, {
+          props: {
+            index,
+            staticDays: false,
+          },
+        })
+
+        expect((wrapper.vm as ComponentInstance).date).toBe(expected)
+      })
+    })
+
+    it('should compute ariaLabel', () => {
+      wrapper = mount(DaySmall, {
+        props: {
+          index: 0,
+          input: mockDay,
+          regions: mockRegions,
+          language: 'fi' as Language,
+        },
+      })
+
+      expect(typeof (wrapper.vm as ComponentInstance).ariaLabel).toBe('string')
+    })
+
+    it('should return empty date when input is missing date parts', () => {
+      wrapper = mount(DaySmall, {
+        props: {
+          index: 0,
+          input: {} as Day,
+          staticDays: true,
+        },
+      })
+
+      expect((wrapper.vm as ComponentInstance).date).toBe('')
+    })
+  })
+
+  describe('Props handling', () => {
+    it('should accept active prop', () => {
+      wrapper = mount(DaySmall, {
+        props: {
+          index: 0,
+          active: true,
+        },
+      })
+
+      expect(wrapper.find('.date-selector-cell').classes()).toContain('active')
+    })
+
+    it('should not have active class when not active', () => {
+      wrapper = mount(DaySmall, {
+        props: {
+          index: 0,
+          active: false,
+        },
+      })
+
+      expect(wrapper.find('.date-selector-cell').classes()).not.toContain(
+        'active'
+      )
+    })
+
+    it('should accept staticDays prop', () => {
+      wrapper = mount(DaySmall, {
+        props: {
+          index: 0,
+          staticDays: false,
+        },
+      })
+
+      expect(wrapper.exists()).toBe(true)
+    })
+
+    it('should accept loading prop', () => {
+      wrapper = mount(DaySmall, {
+        props: {
+          index: 0,
+          loading: false,
+        },
+      })
+
+      expect(wrapper.exists()).toBe(true)
+    })
+
+    it('should accept warnings prop', () => {
+      const mockWarnings: WarningsMap = {}
+
+      wrapper = mount(DaySmall, {
+        props: {
+          index: 0,
+          warnings: mockWarnings,
+        },
+      })
+
+      expect(wrapper.exists()).toBe(true)
+    })
+
+    it('should accept visibleWarnings prop', () => {
+      wrapper = mount(DaySmall, {
+        props: {
+          index: 0,
+          visibleWarnings: ['wind', 'rain'],
+        },
+      })
+
+      expect(wrapper.exists()).toBe(true)
+    })
+  })
+
+  describe('Theme support', () => {
+    it('should apply theme class', () => {
+      wrapper = mount(DaySmall, {
+        props: {
+          index: 0,
+          theme: 'dark-theme' as Theme,
+        },
+      })
+
+      expect(wrapper.find('.date-selector-cell').classes()).toContain(
+        'dark-theme'
+      )
+    })
+
+    it('should support all theme variants', () => {
+      const themes: Theme[] = [
+        'light-theme',
+        'dark-theme',
+        'light-gray-theme',
+        'dark-gray-theme',
+      ]
+
+      themes.forEach((theme) => {
+        wrapper = mount(DaySmall, {
+          props: {
+            index: 0,
+            theme,
+          },
+        })
+
+        expect(wrapper.find('.date-selector-cell').classes()).toContain(theme)
+      })
+    })
+  })
+
+  describe('CSS classes', () => {
+    it('should apply severity class to footer', () => {
+      wrapper = mount(DaySmall, {
+        props: {
+          index: 0,
+          input: mockDay,
+        },
+      })
+
+      const footer = wrapper.find('.date-selector-cell-footer')
+      expect(footer.classes()).toContain('dark-level-3')
+    })
+
+    it('should apply mobile severity class to text', () => {
+      wrapper = mount(DaySmall, {
+        props: {
+          index: 0,
+          input: mockDay,
+        },
+      })
+
+      const text = wrapper.find('.date-selector-text')
+      expect(text.classes()).toContain('mobile-level-3')
+    })
+  })
+
+  describe('Language support', () => {
+    it('should support Finnish language', () => {
+      wrapper = mount(DaySmall, {
+        props: {
+          index: 0,
+          language: 'fi' as Language,
+        },
+      })
+
+      expect(wrapper.exists()).toBe(true)
+    })
+
+    it('should support Swedish language', () => {
+      wrapper = mount(DaySmall, {
+        props: {
+          index: 0,
+          language: 'sv' as Language,
+        },
+      })
+
+      expect(wrapper.exists()).toBe(true)
+    })
+
+    it('should support English language', () => {
+      wrapper = mount(DaySmall, {
+        props: {
+          index: 0,
+          language: 'en' as Language,
+        },
+      })
+
+      expect(wrapper.exists()).toBe(true)
+    })
+  })
+
+  describe('Accessibility', () => {
+    it('should have aria-label on main element', () => {
+      wrapper = mount(DaySmall, {
+        props: {
+          index: 0,
+          input: mockDay,
+          regions: mockRegions,
+          language: 'fi' as Language,
+        },
+      })
+
+      expect(
+        wrapper.find('.date-selector-cell').attributes('aria-label')
+      ).toBeDefined()
+    })
+  })
+})