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

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

@@ -0,0 +1,343 @@
+import { describe, it, expect, afterEach } from 'vitest'
+import { mount, VueWrapper } from '@vue/test-utils'
+import Warnings from '@/components/Warnings.vue'
+import type { LegendItem, Theme, Language } from '@/types'
+
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+type ComponentInstance = any
+
+const mockWarnings: LegendItem[] = [
+  {
+    type: 'wind',
+    severity: 4,
+    visible: true,
+  },
+  {
+    type: 'thunderStorm',
+    severity: 3,
+    visible: true,
+  },
+  {
+    type: 'rain',
+    severity: 2,
+    visible: false,
+  },
+]
+
+describe('Warnings.vue', () => {
+  let wrapper: VueWrapper | null = null
+
+  afterEach(() => {
+    if (wrapper) {
+      wrapper.unmount()
+      wrapper = null
+    }
+  })
+
+  describe('Component mounting', () => {
+    it('should mount with required props', () => {
+      wrapper = mount(Warnings, {
+        props: {
+          input: mockWarnings,
+          visibleWarnings: ['wind', 'thunderStorm'],
+          language: 'fi' as Language,
+          theme: 'light-theme' as Theme,
+        },
+      })
+
+      expect(wrapper.exists()).toBe(true)
+    })
+
+    it('should mount with empty warnings', () => {
+      wrapper = mount(Warnings, {
+        props: {
+          input: [],
+          visibleWarnings: [],
+          language: 'fi' as Language,
+          theme: 'light-theme' as Theme,
+        },
+      })
+
+      expect(wrapper.exists()).toBe(true)
+    })
+  })
+
+  describe('Computed properties', () => {
+    it('should compute warnings from input', () => {
+      wrapper = mount(Warnings, {
+        props: {
+          input: mockWarnings,
+          visibleWarnings: [],
+          language: 'fi' as Language,
+          theme: 'light-theme' as Theme,
+        },
+      })
+
+      expect((wrapper.vm as ComponentInstance).warnings).toEqual(mockWarnings)
+    })
+
+    it('should detect hidden warnings', () => {
+      wrapper = mount(Warnings, {
+        props: {
+          input: mockWarnings,
+          visibleWarnings: ['wind'],
+          language: 'fi' as Language,
+          theme: 'light-theme' as Theme,
+        },
+      })
+
+      expect((wrapper.vm as ComponentInstance).hiddenWarnings).toBe(true)
+    })
+
+    it('should detect no hidden warnings when all visible', () => {
+      wrapper = mount(Warnings, {
+        props: {
+          input: mockWarnings,
+          visibleWarnings: ['wind', 'thunderStorm', 'rain'],
+          language: 'fi' as Language,
+          theme: 'light-theme' as Theme,
+        },
+      })
+
+      expect((wrapper.vm as ComponentInstance).hiddenWarnings).toBe(false)
+    })
+
+    it('should detect no warnings state', () => {
+      wrapper = mount(Warnings, {
+        props: {
+          input: [],
+          visibleWarnings: [],
+          language: 'fi' as Language,
+          theme: 'light-theme' as Theme,
+        },
+      })
+
+      expect((wrapper.vm as ComponentInstance).noWarnings).toBe(true)
+    })
+
+    it('should compute warningSymbolsText for warnings', () => {
+      wrapper = mount(Warnings, {
+        props: {
+          input: mockWarnings,
+          visibleWarnings: [],
+          language: 'fi' as Language,
+          theme: 'light-theme' as Theme,
+        },
+      })
+
+      expect(typeof (wrapper.vm as ComponentInstance).warningSymbolsText).toBe(
+        'string'
+      )
+    })
+
+    it('should compute noWarnings text when empty', () => {
+      wrapper = mount(Warnings, {
+        props: {
+          input: [],
+          visibleWarnings: [],
+          language: 'fi' as Language,
+          theme: 'light-theme' as Theme,
+        },
+      })
+
+      expect(typeof (wrapper.vm as ComponentInstance).warningSymbolsText).toBe(
+        'string'
+      )
+    })
+
+    it('should compute showWarningsText', () => {
+      wrapper = mount(Warnings, {
+        props: {
+          input: mockWarnings,
+          visibleWarnings: [],
+          language: 'fi' as Language,
+          theme: 'light-theme' as Theme,
+        },
+      })
+
+      expect(typeof (wrapper.vm as ComponentInstance).showWarningsText).toBe(
+        'string'
+      )
+    })
+
+    it('should compute severity level texts', () => {
+      wrapper = mount(Warnings, {
+        props: {
+          input: mockWarnings,
+          visibleWarnings: [],
+          language: 'fi' as Language,
+          theme: 'light-theme' as Theme,
+        },
+      })
+
+      const vm = wrapper.vm as ComponentInstance
+      expect(typeof vm.warningLevel1Text).toBe('string')
+      expect(typeof vm.warningLevel2Text).toBe('string')
+      expect(typeof vm.warningLevel3Text).toBe('string')
+      expect(typeof vm.warningLevel4Text).toBe('string')
+    })
+  })
+
+  describe('Event handling', () => {
+    it('should emit warningsToggled when warning is toggled on', () => {
+      wrapper = mount(Warnings, {
+        props: {
+          input: mockWarnings,
+          visibleWarnings: ['wind'],
+          language: 'fi' as Language,
+          theme: 'light-theme' as Theme,
+        },
+      })
+      ;(wrapper.vm as ComponentInstance).onWarningToggled({
+        warning: 'rain',
+        visible: true,
+      })
+
+      expect(wrapper.emitted('warningsToggled')).toBeTruthy()
+      const emittedWarnings = wrapper.emitted(
+        'warningsToggled'
+      )![0]![0] as string[]
+      expect(emittedWarnings).toContain('wind')
+      expect(emittedWarnings).toContain('rain')
+    })
+
+    it('should emit warningsToggled when warning is toggled off', () => {
+      wrapper = mount(Warnings, {
+        props: {
+          input: mockWarnings,
+          visibleWarnings: ['wind', 'rain'],
+          language: 'fi' as Language,
+          theme: 'light-theme' as Theme,
+        },
+      })
+      ;(wrapper.vm as ComponentInstance).onWarningToggled({
+        warning: 'rain',
+        visible: false,
+      })
+
+      expect(wrapper.emitted('warningsToggled')).toBeTruthy()
+      const emittedWarnings = wrapper.emitted(
+        'warningsToggled'
+      )![0]![0] as string[]
+      expect(emittedWarnings).toContain('wind')
+      expect(emittedWarnings).not.toContain('rain')
+    })
+
+    it('should not add warning twice when already visible', () => {
+      wrapper = mount(Warnings, {
+        props: {
+          input: mockWarnings,
+          visibleWarnings: ['wind'],
+          language: 'fi' as Language,
+          theme: 'light-theme' as Theme,
+        },
+      })
+      ;(wrapper.vm as ComponentInstance).onWarningToggled({
+        warning: 'wind',
+        visible: true,
+      })
+
+      const emittedWarnings = wrapper.emitted(
+        'warningsToggled'
+      )![0]![0] as string[]
+      expect(emittedWarnings.filter((w) => w === 'wind').length).toBe(1)
+    })
+
+    it('should emit showAllWarnings event', () => {
+      wrapper = mount(Warnings, {
+        props: {
+          input: mockWarnings,
+          visibleWarnings: [],
+          language: 'fi' as Language,
+          theme: 'light-theme' as Theme,
+        },
+      })
+      ;(wrapper.vm as ComponentInstance).showAll()
+
+      expect(wrapper.emitted('showAllWarnings')).toBeTruthy()
+    })
+  })
+
+  describe('Theme support', () => {
+    it('should apply theme class', () => {
+      wrapper = mount(Warnings, {
+        props: {
+          input: mockWarnings,
+          visibleWarnings: [],
+          language: 'fi' as Language,
+          theme: 'dark-theme' as Theme,
+        },
+      })
+
+      expect(wrapper.find('#fmi-warnings-view').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(Warnings, {
+          props: {
+            input: mockWarnings,
+            visibleWarnings: [],
+            language: 'fi' as Language,
+            theme,
+          },
+        })
+
+        expect(wrapper.find('#fmi-warnings-view').classes()).toContain(theme)
+      })
+    })
+  })
+
+  describe('Content rendering', () => {
+    it('should render Warning components for each warning', () => {
+      wrapper = mount(Warnings, {
+        props: {
+          input: mockWarnings,
+          visibleWarnings: [],
+          language: 'fi' as Language,
+          theme: 'light-theme' as Theme,
+        },
+      })
+
+      const warningComponents = wrapper.findAllComponents({ name: 'Warning' })
+      expect(warningComponents).toHaveLength(mockWarnings.length)
+    })
+
+    it('should show no-warnings separator when no warnings', () => {
+      wrapper = mount(Warnings, {
+        props: {
+          input: [],
+          visibleWarnings: [],
+          language: 'fi' as Language,
+          theme: 'light-theme' as Theme,
+        },
+      })
+
+      const separator = wrapper.find('.legend-separator')
+      expect(separator.classes()).toContain('no-warnings')
+    })
+
+    it('should not show no-warnings class when warnings exist', () => {
+      wrapper = mount(Warnings, {
+        props: {
+          input: mockWarnings,
+          visibleWarnings: [],
+          language: 'fi' as Language,
+          theme: 'light-theme' as Theme,
+        },
+      })
+
+      const separator = wrapper.find('.legend-separator')
+      expect(separator.classes()).not.toContain('no-warnings')
+    })
+  })
+})

package/tests/unit/components/__snapshots__/RegionWarning.snapshot.spec.ts.snap

@@ -0,0 +1,41 @@
+// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
+
+exports[`RegionWarning.vue Snapshots > Language snapshots > should render in English correctly 1`] = `"<div data-v-77d0cfc0="" class="symbol-image warning-image current-warning-image transform-rotate-270 symbol-rotate-270 level-3 wind" aria-label="Dangerous wind warning for land areas (25 m/s from 450°)"><span data-v-77d0cfc0="" aria-hidden="true" class="warning-symbol-text symbol-text transform-rotate-90">25</span></div>"`;
+
+exports[`RegionWarning.vue Snapshots > Language snapshots > should render in Finnish correctly 1`] = `"<div data-v-77d0cfc0="" class="symbol-image warning-image current-warning-image transform-rotate-270 symbol-rotate-270 level-3 wind" aria-label="Vaarallinen tuulivaroitus maa‑alueille (25 m/s suunnasta 450°)"><span data-v-77d0cfc0="" aria-hidden="true" class="warning-symbol-text symbol-text transform-rotate-90">25</span></div>"`;
+
+exports[`RegionWarning.vue Snapshots > Language snapshots > should render in Swedish correctly 1`] = `"<div data-v-77d0cfc0="" class="symbol-image warning-image current-warning-image transform-rotate-270 symbol-rotate-270 level-3 wind" aria-label="Farlig vindvarning för landområden (25 m/s från 450°)"><span data-v-77d0cfc0="" aria-hidden="true" class="warning-symbol-text symbol-text transform-rotate-90">25</span></div>"`;
+
+exports[`RegionWarning.vue Snapshots > Rotation snapshots > should render with east direction correctly 1`] = `"<div data-v-77d0cfc0="" class="symbol-image warning-image current-warning-image transform-rotate-90 symbol-rotate-90 level-3 wind" aria-label="Vaarallinen tuulivaroitus maa‑alueille (20 m/s suunnasta 270°)"><span data-v-77d0cfc0="" aria-hidden="true" class="warning-symbol-text symbol-text transform-rotate-270">20</span></div>"`;
+
+exports[`RegionWarning.vue Snapshots > Rotation snapshots > should render with north direction correctly 1`] = `"<div data-v-77d0cfc0="" class="symbol-image warning-image current-warning-image transform-rotate-0 symbol-rotate-0 level-3 wind" aria-label="Vaarallinen tuulivaroitus maa‑alueille (20 m/s suunnasta 180°)"><span data-v-77d0cfc0="" aria-hidden="true" class="warning-symbol-text symbol-text transform-rotate-360">20</span></div>"`;
+
+exports[`RegionWarning.vue Snapshots > Rotation snapshots > should render with south direction correctly 1`] = `"<div data-v-77d0cfc0="" class="symbol-image warning-image current-warning-image transform-rotate-180 symbol-rotate-180 level-3 wind" aria-label="Vaarallinen tuulivaroitus maa‑alueille (20 m/s suunnasta 360°)"><span data-v-77d0cfc0="" aria-hidden="true" class="warning-symbol-text symbol-text transform-rotate-180">20</span></div>"`;
+
+exports[`RegionWarning.vue Snapshots > Rotation snapshots > should render with west direction correctly 1`] = `"<div data-v-77d0cfc0="" class="symbol-image warning-image current-warning-image transform-rotate-270 symbol-rotate-270 level-3 wind" aria-label="Vaarallinen tuulivaroitus maa‑alueille (20 m/s suunnasta 450°)"><span data-v-77d0cfc0="" aria-hidden="true" class="warning-symbol-text symbol-text transform-rotate-90">20</span></div>"`;
+
+exports[`RegionWarning.vue Snapshots > Severity level snapshots > should render severity level 2 correctly 1`] = `"<div data-v-77d0cfc0="" class="symbol-image warning-image current-warning-image transform-rotate-0 symbol-rotate-0 level-2 wind" aria-label="Mahdollisesti vaarallinen tuulivaroitus maa‑alueille"><span data-v-77d0cfc0="" aria-hidden="true" class="warning-symbol-text symbol-text transform-rotate-360"></span></div>"`;
+
+exports[`RegionWarning.vue Snapshots > Severity level snapshots > should render severity level 3 correctly 1`] = `"<div data-v-77d0cfc0="" class="symbol-image warning-image current-warning-image transform-rotate-0 symbol-rotate-0 level-3 wind" aria-label="Vaarallinen tuulivaroitus maa‑alueille"><span data-v-77d0cfc0="" aria-hidden="true" class="warning-symbol-text symbol-text transform-rotate-360"></span></div>"`;
+
+exports[`RegionWarning.vue Snapshots > Severity level snapshots > should render severity level 4 correctly 1`] = `"<div data-v-77d0cfc0="" class="symbol-image warning-image current-warning-image transform-rotate-0 symbol-rotate-0 level-4 wind" aria-label="Hyvin vaarallinen tuulivaroitus maa‑alueille"><span data-v-77d0cfc0="" aria-hidden="true" class="warning-symbol-text symbol-text transform-rotate-360"></span></div>"`;
+
+exports[`RegionWarning.vue Snapshots > Warning type snapshots > should render cold weather warning correctly 1`] = `"<div data-v-77d0cfc0="" class="symbol-image warning-image current-warning-image transform-rotate-0 symbol-rotate-0 level-3 cold-weather" aria-label="Vaarallinen pakkasvaroitus"><span data-v-77d0cfc0="" aria-hidden="true" class="warning-symbol-text symbol-text transform-rotate-360"></span></div>"`;
+
+exports[`RegionWarning.vue Snapshots > Warning type snapshots > should render flood level warning correctly 1`] = `"<div data-v-77d0cfc0="" class="symbol-image warning-image current-warning-image transform-rotate-0 symbol-rotate-0 level-3 flood-level" aria-label="Vaarallinen tulvavaroitus"><span data-v-77d0cfc0="" aria-hidden="true" class="warning-symbol-text symbol-text transform-rotate-360"></span></div>"`;
+
+exports[`RegionWarning.vue Snapshots > Warning type snapshots > should render forest fire weather warning correctly 1`] = `"<div data-v-77d0cfc0="" class="symbol-image warning-image current-warning-image transform-rotate-0 symbol-rotate-0 level-3 forest-fire-weather" aria-label="Vaarallinen maastopalo&amp;shy;varoitus"><span data-v-77d0cfc0="" aria-hidden="true" class="warning-symbol-text symbol-text transform-rotate-360"></span></div>"`;
+
+exports[`RegionWarning.vue Snapshots > Warning type snapshots > should render hot weather warning correctly 1`] = `"<div data-v-77d0cfc0="" class="symbol-image warning-image current-warning-image transform-rotate-0 symbol-rotate-0 level-2 hot-weather" aria-label="Mahdollisesti vaarallinen hellevaroitus"><span data-v-77d0cfc0="" aria-hidden="true" class="warning-symbol-text symbol-text transform-rotate-360"></span></div>"`;
+
+exports[`RegionWarning.vue Snapshots > Warning type snapshots > should render pedestrian safety warning correctly 1`] = `"<div data-v-77d0cfc0="" class="symbol-image warning-image current-warning-image transform-rotate-0 symbol-rotate-0 level-2 pedestrian-safety" aria-label="Mahdollisesti vaarallinen jalankulkusää"><span data-v-77d0cfc0="" aria-hidden="true" class="warning-symbol-text symbol-text transform-rotate-360"></span></div>"`;
+
+exports[`RegionWarning.vue Snapshots > Warning type snapshots > should render rain warning correctly 1`] = `"<div data-v-77d0cfc0="" class="symbol-image warning-image current-warning-image transform-rotate-0 symbol-rotate-0 level-2 rain" aria-label="Mahdollisesti vaarallinen sadevaroitus"><span data-v-77d0cfc0="" aria-hidden="true" class="warning-symbol-text symbol-text transform-rotate-360"></span></div>"`;
+
+exports[`RegionWarning.vue Snapshots > Warning type snapshots > should render sea wind warning correctly 1`] = `"<div data-v-77d0cfc0="" class="symbol-image warning-image current-warning-image transform-rotate-180 symbol-rotate-180 level-3 sea-wind" aria-label="Vaarallinen tuulivaroitus merelle (15 m/s suunnasta 360°)"><span data-v-77d0cfc0="" aria-hidden="true" class="warning-symbol-text symbol-text transform-rotate-180">15</span></div>"`;
+
+exports[`RegionWarning.vue Snapshots > Warning type snapshots > should render thunderstorm warning correctly 1`] = `"<div data-v-77d0cfc0="" class="symbol-image warning-image current-warning-image transform-rotate-0 symbol-rotate-0 level-4 thunder-storm" aria-label="Hyvin vaarallinen raju ukonilma"><span data-v-77d0cfc0="" aria-hidden="true" class="warning-symbol-text symbol-text transform-rotate-360"></span></div>"`;
+
+exports[`RegionWarning.vue Snapshots > Warning type snapshots > should render traffic weather warning correctly 1`] = `"<div data-v-77d0cfc0="" class="symbol-image warning-image current-warning-image transform-rotate-0 symbol-rotate-0 level-2 traffic-weather" aria-label="Mahdollisesti vaarallinen liikennesää"><span data-v-77d0cfc0="" aria-hidden="true" class="warning-symbol-text symbol-text transform-rotate-360"></span></div>"`;
+
+exports[`RegionWarning.vue Snapshots > Warning type snapshots > should render wind warning correctly 1`] = `"<div data-v-77d0cfc0="" class="symbol-image warning-image current-warning-image transform-rotate-270 symbol-rotate-270 level-3 wind" aria-label="Vaarallinen tuulivaroitus maa‑alueille (25 m/s suunnasta 450°)"><span data-v-77d0cfc0="" aria-hidden="true" class="warning-symbol-text symbol-text transform-rotate-90">25</span></div>"`;