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

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

@@ -0,0 +1,373 @@
+import { describe, it, expect, afterEach } from 'vitest'
+import { mount, VueWrapper } from '@vue/test-utils'
+import Region from '@/components/Region.vue'
+import type {
+  RegionWarningItem,
+  WarningsMap,
+  Warning,
+  Theme,
+  Language,
+} from '@/types'
+
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+type ComponentInstance = any
+
+const mockWarning: Warning = {
+  type: 'wind',
+  id: 'test-warning-1',
+  regions: { 'county.1': true },
+  covRegions: new Map(),
+  coveragesLarge: [],
+  coveragesSmall: [],
+  effectiveFrom: '2025-10-31T12:00:00Z',
+  effectiveUntil: '2025-11-01T12:00:00Z',
+  effectiveDays: [true, true, false, false, false],
+  validInterval: '31.10.2025 14:00 – 1.11.2025 14:00',
+  severity: 3,
+  direction: 270,
+  value: 25,
+  text: '25',
+  info: {
+    fi: 'Kovaa tuulta',
+    sv: 'Hårt blåsväder',
+    en: 'Strong wind',
+  },
+  link: '',
+  linkText: '',
+}
+
+const mockRegionWarnings: RegionWarningItem[] = [
+  {
+    type: 'wind',
+    identifiers: ['test-warning-1'],
+    coverage: 100,
+  },
+]
+
+const mockWarnings: WarningsMap = {
+  'test-warning-1': mockWarning,
+}
+
+describe('Region.vue', () => {
+  let wrapper: VueWrapper | null = null
+
+  afterEach(() => {
+    if (wrapper) {
+      wrapper.unmount()
+      wrapper = null
+    }
+  })
+
+  describe('Component mounting', () => {
+    it('should mount with required props', () => {
+      wrapper = mount(Region, {
+        props: {
+          type: 'land',
+          code: 'county.1',
+          name: 'Uusimaa',
+          input: mockRegionWarnings,
+          warnings: mockWarnings,
+          theme: 'light-theme' as Theme,
+          language: 'fi' as Language,
+        },
+      })
+
+      expect(wrapper.exists()).toBe(true)
+    })
+
+    it('should mount with minimal props', () => {
+      wrapper = mount(Region, {
+        props: {},
+      })
+
+      expect(wrapper.exists()).toBe(true)
+    })
+  })
+
+  describe('Computed properties', () => {
+    it('should compute identifier from code', () => {
+      wrapper = mount(Region, {
+        props: {
+          code: 'county.1',
+        },
+      })
+
+      expect((wrapper.vm as ComponentInstance).identifier).toBe(
+        'accordion-item-county.1'
+      )
+    })
+
+    it('should compute regionName from translations', () => {
+      wrapper = mount(Region, {
+        props: {
+          name: 'Uusimaa',
+          language: 'fi' as Language,
+        },
+      })
+
+      expect(typeof (wrapper.vm as ComponentInstance).regionName).toBe('string')
+    })
+
+    it('should compute warningsSummary from input and warnings', () => {
+      wrapper = mount(Region, {
+        props: {
+          input: mockRegionWarnings,
+          warnings: mockWarnings,
+        },
+      })
+
+      const summary = (wrapper.vm as ComponentInstance).warningsSummary
+      expect(Array.isArray(summary)).toBe(true)
+      expect(summary.length).toBe(1)
+    })
+
+    it('should return empty warningsSummary when no warnings match', () => {
+      wrapper = mount(Region, {
+        props: {
+          input: mockRegionWarnings,
+          warnings: {},
+        },
+      })
+
+      expect((wrapper.vm as ComponentInstance).warningsSummary).toEqual([])
+    })
+
+    it('should compute reducedWarnings from input and warnings', () => {
+      wrapper = mount(Region, {
+        props: {
+          input: mockRegionWarnings,
+          warnings: mockWarnings,
+        },
+      })
+
+      const reduced = (wrapper.vm as ComponentInstance).reducedWarnings
+      expect(Array.isArray(reduced)).toBe(true)
+    })
+
+    it('should compute ariaButton from translations', () => {
+      wrapper = mount(Region, {
+        props: {
+          name: 'Uusimaa',
+          language: 'fi' as Language,
+        },
+      })
+
+      expect(typeof (wrapper.vm as ComponentInstance).ariaButton).toBe('string')
+    })
+
+    it('should compute ariaInfo from warnings', () => {
+      wrapper = mount(Region, {
+        props: {
+          input: mockRegionWarnings,
+          warnings: mockWarnings,
+          language: 'fi' as Language,
+        },
+      })
+
+      expect(Array.isArray((wrapper.vm as ComponentInstance).ariaInfo)).toBe(
+        true
+      )
+    })
+  })
+
+  describe('State management', () => {
+    it('should start with open state as false', () => {
+      wrapper = mount(Region, {
+        props: {},
+      })
+
+      expect((wrapper.vm as ComponentInstance).open).toBe(false)
+    })
+
+    it('should toggle open state on onRegionToggle', () => {
+      wrapper = mount(Region, {
+        props: {},
+      })
+
+      expect((wrapper.vm as ComponentInstance).open).toBe(false)
+      ;(wrapper.vm as ComponentInstance).onRegionToggle()
+
+      expect((wrapper.vm as ComponentInstance).open).toBe(true)
+      ;(wrapper.vm as ComponentInstance).onRegionToggle()
+
+      expect((wrapper.vm as ComponentInstance).open).toBe(false)
+    })
+  })
+
+  describe('Props handling', () => {
+    it('should accept type prop', () => {
+      wrapper = mount(Region, {
+        props: {
+          type: 'sea',
+        },
+      })
+
+      expect((wrapper.vm as ComponentInstance).type).toBe('sea')
+    })
+
+    it('should accept code prop', () => {
+      wrapper = mount(Region, {
+        props: {
+          code: 'county.2',
+        },
+      })
+
+      expect((wrapper.vm as ComponentInstance).code).toBe('county.2')
+    })
+
+    it('should accept name prop', () => {
+      wrapper = mount(Region, {
+        props: {
+          name: 'Varsinais-Suomi',
+        },
+      })
+
+      expect((wrapper.vm as ComponentInstance).name).toBe('Varsinais-Suomi')
+    })
+
+    it('should accept input prop', () => {
+      wrapper = mount(Region, {
+        props: {
+          input: mockRegionWarnings,
+        },
+      })
+
+      expect((wrapper.vm as ComponentInstance).input).toEqual(
+        mockRegionWarnings
+      )
+    })
+
+    it('should accept warnings prop', () => {
+      wrapper = mount(Region, {
+        props: {
+          warnings: mockWarnings,
+        },
+      })
+
+      expect(wrapper.exists()).toBe(true)
+    })
+  })
+
+  describe('Theme support', () => {
+    it('should accept theme prop', () => {
+      wrapper = mount(Region, {
+        props: {
+          theme: 'dark-theme' as Theme,
+        },
+      })
+
+      expect((wrapper.vm as ComponentInstance).theme).toBe('dark-theme')
+    })
+
+    it('should default to light-theme', () => {
+      wrapper = mount(Region, {
+        props: {},
+      })
+
+      expect((wrapper.vm as ComponentInstance).theme).toBe('light-theme')
+    })
+  })
+
+  describe('Language support', () => {
+    it('should support Finnish language', () => {
+      wrapper = mount(Region, {
+        props: {
+          language: 'fi' as Language,
+        },
+      })
+
+      expect(wrapper.exists()).toBe(true)
+    })
+
+    it('should support Swedish language', () => {
+      wrapper = mount(Region, {
+        props: {
+          language: 'sv' as Language,
+        },
+      })
+
+      expect(wrapper.exists()).toBe(true)
+    })
+
+    it('should support English language', () => {
+      wrapper = mount(Region, {
+        props: {
+          language: 'en' as Language,
+        },
+      })
+
+      expect(wrapper.exists()).toBe(true)
+    })
+  })
+
+  describe('Accessibility', () => {
+    it('should have accordion button with correct aria attributes', () => {
+      wrapper = mount(Region, {
+        props: {
+          code: 'county.1',
+        },
+      })
+
+      const button = wrapper.find('.accordion-trigger')
+      expect(button.attributes('aria-expanded')).toBe('false')
+      expect(button.attributes('aria-controls')).toBe(
+        'accordion-section-county.1'
+      )
+    })
+
+    it('should update aria-expanded when toggled', async () => {
+      wrapper = mount(Region, {
+        props: {
+          code: 'county.1',
+        },
+      })
+      ;(wrapper.vm as ComponentInstance).onRegionToggle()
+      await wrapper.vm.$nextTick()
+
+      const button = wrapper.find('.accordion-trigger')
+      expect(button.attributes('aria-expanded')).toBe('true')
+    })
+
+    it('should have accordion panel with role region', () => {
+      wrapper = mount(Region, {
+        props: {
+          code: 'county.1',
+        },
+      })
+
+      const panel = wrapper.find('.accordion-panel')
+      expect(panel.attributes('role')).toBe('region')
+    })
+  })
+
+  describe('CSS classes', () => {
+    it('should apply collapsed class when closed', () => {
+      wrapper = mount(Region, {
+        props: {},
+      })
+
+      const button = wrapper.find('.accordion-trigger')
+      expect(button.classes()).toContain('collapsed')
+    })
+
+    it('should remove collapsed class when open', async () => {
+      wrapper = mount(Region, {
+        props: {},
+      })
+      ;(wrapper.vm as ComponentInstance).onRegionToggle()
+      await wrapper.vm.$nextTick()
+
+      const button = wrapper.find('.accordion-trigger')
+      expect(button.classes()).not.toContain('collapsed')
+    })
+
+    it('should apply collapsed class to toggle icon when closed', () => {
+      wrapper = mount(Region, {
+        props: {},
+      })
+
+      const toggle = wrapper.find('.current-warning-toggle')
+      expect(toggle.classes()).toContain('collapsed')
+    })
+  })
+})

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

@@ -0,0 +1,361 @@
+import { describe, it, expect, afterEach } from 'vitest'
+import { mount, VueWrapper } from '@vue/test-utils'
+import RegionWarning from '@/components/RegionWarning.vue'
+import type { WarningIconInput, Language } from '@/types'
+
+describe('RegionWarning.vue Snapshots', () => {
+  let wrapper: VueWrapper | null = null
+
+  afterEach(() => {
+    if (wrapper) {
+      wrapper.unmount()
+      wrapper = null
+    }
+  })
+
+  describe('Warning type snapshots', () => {
+    it('should render wind warning correctly', () => {
+      const warning: WarningIconInput = {
+        type: 'wind',
+        severity: 3,
+        direction: 270,
+        text: '25',
+      }
+
+      wrapper = mount(RegionWarning, {
+        props: {
+          input: warning,
+          language: 'fi' as Language,
+        },
+      })
+
+      expect(wrapper.html()).toMatchSnapshot()
+    })
+
+    it('should render thunderstorm warning correctly', () => {
+      const warning: WarningIconInput = {
+        type: 'thunderStorm',
+        severity: 4,
+      }
+
+      wrapper = mount(RegionWarning, {
+        props: {
+          input: warning,
+          language: 'fi' as Language,
+        },
+      })
+
+      expect(wrapper.html()).toMatchSnapshot()
+    })
+
+    it('should render rain warning correctly', () => {
+      const warning: WarningIconInput = {
+        type: 'rain',
+        severity: 2,
+      }
+
+      wrapper = mount(RegionWarning, {
+        props: {
+          input: warning,
+          language: 'fi' as Language,
+        },
+      })
+
+      expect(wrapper.html()).toMatchSnapshot()
+    })
+
+    it('should render sea wind warning correctly', () => {
+      const warning: WarningIconInput = {
+        type: 'seaWind',
+        severity: 3,
+        direction: 180,
+        text: '15',
+      }
+
+      wrapper = mount(RegionWarning, {
+        props: {
+          input: warning,
+          language: 'fi' as Language,
+        },
+      })
+
+      expect(wrapper.html()).toMatchSnapshot()
+    })
+
+    it('should render traffic weather warning correctly', () => {
+      const warning: WarningIconInput = {
+        type: 'trafficWeather',
+        severity: 2,
+      }
+
+      wrapper = mount(RegionWarning, {
+        props: {
+          input: warning,
+          language: 'fi' as Language,
+        },
+      })
+
+      expect(wrapper.html()).toMatchSnapshot()
+    })
+
+    it('should render pedestrian safety warning correctly', () => {
+      const warning: WarningIconInput = {
+        type: 'pedestrianSafety',
+        severity: 2,
+      }
+
+      wrapper = mount(RegionWarning, {
+        props: {
+          input: warning,
+          language: 'fi' as Language,
+        },
+      })
+
+      expect(wrapper.html()).toMatchSnapshot()
+    })
+
+    it('should render forest fire weather warning correctly', () => {
+      const warning: WarningIconInput = {
+        type: 'forestFireWeather',
+        severity: 3,
+      }
+
+      wrapper = mount(RegionWarning, {
+        props: {
+          input: warning,
+          language: 'fi' as Language,
+        },
+      })
+
+      expect(wrapper.html()).toMatchSnapshot()
+    })
+
+    it('should render hot weather warning correctly', () => {
+      const warning: WarningIconInput = {
+        type: 'hotWeather',
+        severity: 2,
+      }
+
+      wrapper = mount(RegionWarning, {
+        props: {
+          input: warning,
+          language: 'fi' as Language,
+        },
+      })
+
+      expect(wrapper.html()).toMatchSnapshot()
+    })
+
+    it('should render cold weather warning correctly', () => {
+      const warning: WarningIconInput = {
+        type: 'coldWeather',
+        severity: 3,
+      }
+
+      wrapper = mount(RegionWarning, {
+        props: {
+          input: warning,
+          language: 'fi' as Language,
+        },
+      })
+
+      expect(wrapper.html()).toMatchSnapshot()
+    })
+
+    it('should render flood level warning correctly', () => {
+      const warning: WarningIconInput = {
+        type: 'floodLevel',
+        severity: 3,
+      }
+
+      wrapper = mount(RegionWarning, {
+        props: {
+          input: warning,
+          language: 'fi' as Language,
+        },
+      })
+
+      expect(wrapper.html()).toMatchSnapshot()
+    })
+  })
+
+  describe('Severity level snapshots', () => {
+    it('should render severity level 2 correctly', () => {
+      const warning: WarningIconInput = {
+        type: 'wind',
+        severity: 2,
+      }
+
+      wrapper = mount(RegionWarning, {
+        props: {
+          input: warning,
+          language: 'fi' as Language,
+        },
+      })
+
+      expect(wrapper.html()).toMatchSnapshot()
+    })
+
+    it('should render severity level 3 correctly', () => {
+      const warning: WarningIconInput = {
+        type: 'wind',
+        severity: 3,
+      }
+
+      wrapper = mount(RegionWarning, {
+        props: {
+          input: warning,
+          language: 'fi' as Language,
+        },
+      })
+
+      expect(wrapper.html()).toMatchSnapshot()
+    })
+
+    it('should render severity level 4 correctly', () => {
+      const warning: WarningIconInput = {
+        type: 'wind',
+        severity: 4,
+      }
+
+      wrapper = mount(RegionWarning, {
+        props: {
+          input: warning,
+          language: 'fi' as Language,
+        },
+      })
+
+      expect(wrapper.html()).toMatchSnapshot()
+    })
+  })
+
+  describe('Language snapshots', () => {
+    it('should render in Finnish correctly', () => {
+      const warning: WarningIconInput = {
+        type: 'wind',
+        severity: 3,
+        direction: 270,
+        text: '25',
+      }
+
+      wrapper = mount(RegionWarning, {
+        props: {
+          input: warning,
+          language: 'fi' as Language,
+        },
+      })
+
+      expect(wrapper.html()).toMatchSnapshot()
+    })
+
+    it('should render in Swedish correctly', () => {
+      const warning: WarningIconInput = {
+        type: 'wind',
+        severity: 3,
+        direction: 270,
+        text: '25',
+      }
+
+      wrapper = mount(RegionWarning, {
+        props: {
+          input: warning,
+          language: 'sv' as Language,
+        },
+      })
+
+      expect(wrapper.html()).toMatchSnapshot()
+    })
+
+    it('should render in English correctly', () => {
+      const warning: WarningIconInput = {
+        type: 'wind',
+        severity: 3,
+        direction: 270,
+        text: '25',
+      }
+
+      wrapper = mount(RegionWarning, {
+        props: {
+          input: warning,
+          language: 'en' as Language,
+        },
+      })
+
+      expect(wrapper.html()).toMatchSnapshot()
+    })
+  })
+
+  describe('Rotation snapshots', () => {
+    it('should render with north direction correctly', () => {
+      const warning: WarningIconInput = {
+        type: 'wind',
+        severity: 3,
+        direction: 0,
+        text: '20',
+      }
+
+      wrapper = mount(RegionWarning, {
+        props: {
+          input: warning,
+          language: 'fi' as Language,
+        },
+      })
+
+      expect(wrapper.html()).toMatchSnapshot()
+    })
+
+    it('should render with east direction correctly', () => {
+      const warning: WarningIconInput = {
+        type: 'wind',
+        severity: 3,
+        direction: 90,
+        text: '20',
+      }
+
+      wrapper = mount(RegionWarning, {
+        props: {
+          input: warning,
+          language: 'fi' as Language,
+        },
+      })
+
+      expect(wrapper.html()).toMatchSnapshot()
+    })
+
+    it('should render with south direction correctly', () => {
+      const warning: WarningIconInput = {
+        type: 'wind',
+        severity: 3,
+        direction: 180,
+        text: '20',
+      }
+
+      wrapper = mount(RegionWarning, {
+        props: {
+          input: warning,
+          language: 'fi' as Language,
+        },
+      })
+
+      expect(wrapper.html()).toMatchSnapshot()
+    })
+
+    it('should render with west direction correctly', () => {
+      const warning: WarningIconInput = {
+        type: 'wind',
+        severity: 3,
+        direction: 270,
+        text: '20',
+      }
+
+      wrapper = mount(RegionWarning, {
+        props: {
+          input: warning,
+          language: 'fi' as Language,
+        },
+      })
+
+      expect(wrapper.html()).toMatchSnapshot()
+    })
+  })
+})