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

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

@@ -0,0 +1,281 @@
+import { describe, it, expect, afterEach } from 'vitest'
+import { mount } from '@vue/test-utils'
+import DayLarge from '@/components/DayLarge.vue'
+
+const mockInput = {
+  weekdayName: 'thursday',
+  day: 31,
+  month: 10,
+  year: 2025,
+  severity: 3,
+  updatedDate: '31.10.2025',
+  updatedTime: '14:00',
+}
+
+const mockRegions = {
+  land: [],
+  sea: [],
+}
+
+describe('DayLarge.vue', () => {
+  let wrapper
+
+  afterEach(() => {
+    if (wrapper) {
+      wrapper.unmount()
+    }
+  })
+
+  describe('Component mounting', () => {
+    it('should mount with required props', () => {
+      wrapper = mount(DayLarge, {
+        props: {
+          index: 0,
+          input: mockInput,
+          regions: mockRegions,
+          geometryId: 2021,
+          language: 'fi',
+        },
+      })
+
+      expect(wrapper.exists()).toBe(true)
+    })
+  })
+
+  describe('Computed properties', () => {
+    it('should compute warningsTitle', () => {
+      wrapper = mount(DayLarge, {
+        props: {
+          index: 0,
+          input: mockInput,
+          regions: mockRegions,
+          geometryId: 2021,
+          language: 'fi',
+        },
+      })
+
+      expect(wrapper.vm.warningsTitle).toBeTruthy()
+      expect(typeof wrapper.vm.warningsTitle).toBe('string')
+    })
+
+    it('should compute updatedTitle', () => {
+      wrapper = mount(DayLarge, {
+        props: {
+          index: 0,
+          input: mockInput,
+          regions: mockRegions,
+          geometryId: 2021,
+          language: 'fi',
+        },
+      })
+
+      expect(wrapper.vm.updatedTitle).toBeTruthy()
+    })
+
+    it('should compute atTime', () => {
+      wrapper = mount(DayLarge, {
+        props: {
+          index: 0,
+          input: mockInput,
+          regions: mockRegions,
+          geometryId: 2021,
+          language: 'fi',
+        },
+      })
+
+      expect(wrapper.vm.atTime).toBeTruthy()
+    })
+
+    it('should format static warnings date', () => {
+      wrapper = mount(DayLarge, {
+        props: {
+          index: 0,
+          input: mockInput,
+          regions: mockRegions,
+          geometryId: 2021,
+          staticDays: true,
+          language: 'fi',
+        },
+      })
+
+      expect(wrapper.vm.warningsDate).toBe('31.10.2025')
+    })
+
+    it('should format dynamic warnings date with time range', () => {
+      wrapper = mount(DayLarge, {
+        props: {
+          index: 0,
+          input: mockInput,
+          regions: mockRegions,
+          geometryId: 2021,
+          staticDays: false,
+          timeOffset: 0,
+          language: 'fi',
+        },
+      })
+
+      const warningsDate = wrapper.vm.warningsDate
+
+      expect(warningsDate).toContain('31.10.2025')
+      expect(warningsDate).toContain('1.11.2025')
+    })
+
+    it('should return empty string when date data is missing', () => {
+      const incompleteInput = {
+        weekdayName: 'thursday',
+        severity: 2,
+      }
+
+      wrapper = mount(DayLarge, {
+        props: {
+          index: 0,
+          input: incompleteInput,
+          regions: mockRegions,
+          geometryId: 2021,
+          language: 'fi',
+        },
+      })
+
+      expect(wrapper.vm.warningsDate).toBe('')
+    })
+
+    it('should display updatedDate from input', () => {
+      wrapper = mount(DayLarge, {
+        props: {
+          index: 0,
+          input: mockInput,
+          regions: mockRegions,
+          geometryId: 2021,
+          language: 'fi',
+        },
+      })
+
+      expect(wrapper.vm.updatedDate).toBe('31.10.2025')
+    })
+
+    it('should display updatedTime from input', () => {
+      wrapper = mount(DayLarge, {
+        props: {
+          index: 0,
+          input: mockInput,
+          regions: mockRegions,
+          geometryId: 2021,
+          language: 'fi',
+        },
+      })
+
+      expect(wrapper.vm.updatedTime).toBe('14:00')
+    })
+  })
+
+  describe('Event handling', () => {
+    it('should emit loaded event when child component loads', () => {
+      wrapper = mount(DayLarge, {
+        props: {
+          index: 0,
+          input: mockInput,
+          regions: mockRegions,
+          geometryId: 2021,
+          language: 'fi',
+        },
+      })
+
+      wrapper.vm.onLoaded(true)
+
+      expect(wrapper.emitted('loaded')).toBeTruthy()
+      expect(wrapper.emitted('loaded')[0]).toEqual([true])
+    })
+
+    it('should not emit loaded event when loaded is false', () => {
+      wrapper = mount(DayLarge, {
+        props: {
+          index: 0,
+          input: mockInput,
+          regions: mockRegions,
+          geometryId: 2021,
+          language: 'fi',
+        },
+      })
+
+      wrapper.vm.onLoaded(false)
+
+      expect(wrapper.emitted('loaded')).toBeFalsy()
+    })
+  })
+
+  describe('Content rendering', () => {
+    it('should render warnings title', () => {
+      wrapper = mount(DayLarge, {
+        props: {
+          index: 0,
+          input: mockInput,
+          regions: mockRegions,
+          geometryId: 2021,
+          language: 'fi',
+        },
+      })
+
+      const text = wrapper.text()
+      expect(text).toBeTruthy()
+    })
+
+    it('should render updated date and time', () => {
+      wrapper = mount(DayLarge, {
+        props: {
+          index: 0,
+          input: mockInput,
+          regions: mockRegions,
+          geometryId: 2021,
+          language: 'fi',
+        },
+      })
+
+      expect(wrapper.text()).toContain('31.10.2025')
+      expect(wrapper.text()).toContain('14:00')
+    })
+  })
+
+  describe('Props validation', () => {
+    it('should use default empty object for input', () => {
+      wrapper = mount(DayLarge, {
+        props: {
+          index: 0,
+          regions: mockRegions,
+          geometryId: 2021,
+          language: 'fi',
+        },
+      })
+
+      expect(wrapper.vm.input).toEqual({})
+    })
+
+    it('should accept spinnerEnabled prop', () => {
+      wrapper = mount(DayLarge, {
+        props: {
+          index: 0,
+          input: mockInput,
+          regions: mockRegions,
+          geometryId: 2021,
+          spinnerEnabled: false,
+          language: 'fi',
+        },
+      })
+
+      expect(wrapper.vm.spinnerEnabled).toBe(false)
+    })
+
+    it('should use default spinnerEnabled true', () => {
+      wrapper = mount(DayLarge, {
+        props: {
+          index: 0,
+          input: mockInput,
+          regions: mockRegions,
+          geometryId: 2021,
+          language: 'fi',
+        },
+      })
+
+      expect(wrapper.vm.spinnerEnabled).toBe(true)
+    })
+  })
+})

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

@@ -0,0 +1,278 @@
+import { describe, it, expect, afterEach } from 'vitest'
+import { mount } from '@vue/test-utils'
+import DaySmall from '@/components/DaySmall.vue'
+
+const mockInput = {
+  weekdayName: 'thursday',
+  day: 31,
+  month: 10,
+  year: 2025,
+  severity: 3,
+  updatedDate: '31.10.2025',
+  updatedTime: '14:00',
+}
+
+const mockRegions = {
+  land: [
+    {
+      key: 'county.1',
+      name: 'Uusimaa',
+      warnings: [],
+    },
+  ],
+  sea: [
+    {
+      key: 'sea_region.B1N',
+      name: 'Perämeri',
+      warnings: [],
+    },
+  ],
+}
+
+describe('DaySmall.vue', () => {
+  let wrapper
+
+  afterEach(() => {
+    if (wrapper) {
+      wrapper.unmount()
+    }
+  })
+
+  describe('Component mounting', () => {
+    it('should mount with required props', () => {
+      wrapper = mount(DaySmall, {
+        props: {
+          index: 0,
+          input: mockInput,
+          regions: mockRegions,
+          geometryId: 2021,
+          language: 'fi',
+        },
+      })
+
+      expect(wrapper.exists()).toBe(true)
+    })
+  })
+
+  describe('Computed properties', () => {
+    it('should compute weekday from input', () => {
+      wrapper = mount(DaySmall, {
+        props: {
+          index: 0,
+          input: mockInput,
+          regions: mockRegions,
+          geometryId: 2021,
+          language: 'fi',
+        },
+      })
+
+      // Weekday is computed via t() which might return empty for unknown keys
+      expect(typeof wrapper.vm.weekday).toBe('string')
+    })
+
+    it('should compute severity from input', () => {
+      wrapper = mount(DaySmall, {
+        props: {
+          index: 0,
+          input: mockInput,
+          regions: mockRegions,
+          geometryId: 2021,
+          language: 'fi',
+        },
+      })
+
+      expect(wrapper.vm.severity).toBe(3)
+    })
+
+    it('should format static date correctly', () => {
+      wrapper = mount(DaySmall, {
+        props: {
+          index: 0,
+          input: mockInput,
+          regions: mockRegions,
+          geometryId: 2021,
+          staticDays: true,
+          language: 'fi',
+        },
+      })
+
+      expect(wrapper.vm.date).toBe('31.10.')
+    })
+
+    it('should format dynamic date correctly', () => {
+      wrapper = mount(DaySmall, {
+        props: {
+          index: 0,
+          input: mockInput,
+          regions: mockRegions,
+          geometryId: 2021,
+          staticDays: false,
+          language: 'fi',
+        },
+      })
+
+      expect(wrapper.vm.date).toBe('0...24 h')
+    })
+
+    it('should show correct time ranges for dynamic days', () => {
+      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,
+            input: mockInput,
+            regions: mockRegions,
+            geometryId: 2021,
+            staticDays: false,
+            language: 'fi',
+          },
+        })
+
+        expect(wrapper.vm.date).toBe(expected)
+      })
+    })
+
+    it('should generate aria label with region counts', () => {
+      wrapper = mount(DaySmall, {
+        props: {
+          index: 0,
+          input: mockInput,
+          regions: mockRegions,
+          geometryId: 2021,
+          language: 'fi',
+        },
+      })
+
+      const ariaLabel = wrapper.vm.ariaLabel
+
+      expect(ariaLabel).toContain('31')
+      expect(ariaLabel).toContain('10')
+      expect(ariaLabel).toContain('1') // land region count
+      expect(ariaLabel).toContain('1') // sea region count
+    })
+  })
+
+  describe('Theme support', () => {
+    it('should apply active class when active prop is true', () => {
+      wrapper = mount(DaySmall, {
+        props: {
+          index: 0,
+          input: mockInput,
+          regions: mockRegions,
+          geometryId: 2021,
+          active: true,
+          language: 'fi',
+        },
+      })
+
+      expect(wrapper.find('.date-selector-cell').classes()).toContain('active')
+    })
+
+    it('should not apply active class when active prop is false', () => {
+      wrapper = mount(DaySmall, {
+        props: {
+          index: 0,
+          input: mockInput,
+          regions: mockRegions,
+          geometryId: 2021,
+          active: false,
+          language: 'fi',
+        },
+      })
+
+      expect(wrapper.find('.date-selector-cell').classes()).not.toContain(
+        'active'
+      )
+    })
+
+    it('should apply theme class', () => {
+      wrapper = mount(DaySmall, {
+        props: {
+          index: 0,
+          input: mockInput,
+          regions: mockRegions,
+          geometryId: 2021,
+          theme: 'dark-theme',
+          language: 'fi',
+        },
+      })
+
+      expect(wrapper.find('.date-selector-cell').classes()).toContain(
+        'dark-theme'
+      )
+    })
+
+    it('should apply severity class to footer', () => {
+      wrapper = mount(DaySmall, {
+        props: {
+          index: 0,
+          input: mockInput,
+          regions: mockRegions,
+          geometryId: 2021,
+          language: 'fi',
+        },
+      })
+
+      const footer = wrapper.find('.date-selector-cell-footer')
+      expect(footer.classes()).toContain('dark-level-3')
+    })
+  })
+
+  describe('Content rendering', () => {
+    it('should render weekday when staticDays is true', () => {
+      wrapper = mount(DaySmall, {
+        props: {
+          index: 0,
+          input: mockInput,
+          regions: mockRegions,
+          geometryId: 2021,
+          staticDays: true,
+          language: 'fi',
+        },
+      })
+
+      const text = wrapper.find('.date-selector-text').text()
+      expect(text).toBeTruthy()
+    })
+
+    it('should render date', () => {
+      wrapper = mount(DaySmall, {
+        props: {
+          index: 0,
+          input: mockInput,
+          regions: mockRegions,
+          geometryId: 2021,
+          language: 'fi',
+        },
+      })
+
+      expect(wrapper.text()).toContain('31.10.')
+    })
+
+    it('should handle missing date data gracefully', () => {
+      const incompleteInput = {
+        weekdayName: 'thursday',
+        severity: 2,
+      }
+
+      wrapper = mount(DaySmall, {
+        props: {
+          index: 0,
+          input: incompleteInput,
+          regions: mockRegions,
+          geometryId: 2021,
+          language: 'fi',
+        },
+      })
+
+      expect(wrapper.vm.date).toBe('')
+    })
+  })
+})