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

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

@@ -0,0 +1,385 @@
+import { describe, it, expect, afterEach } from 'vitest'
+import { mount, VueWrapper } from '@vue/test-utils'
+import DescriptionWarning from '@/components/DescriptionWarning.vue'
+import type { 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: 'https://example.com',
+  linkText: 'Lisätietoja',
+}
+
+describe('DescriptionWarning.vue', () => {
+  let wrapper: VueWrapper | null = null
+
+  afterEach(() => {
+    if (wrapper) {
+      wrapper.unmount()
+      wrapper = null
+    }
+  })
+
+  describe('Component mounting', () => {
+    it('should mount with required props', () => {
+      wrapper = mount(DescriptionWarning, {
+        props: {
+          input: mockWarning,
+          language: 'fi' as Language,
+          theme: 'light-theme' as Theme,
+        },
+      })
+
+      expect(wrapper.exists()).toBe(true)
+    })
+  })
+
+  describe('Computed properties', () => {
+    it('should compute warningTitle from translations', () => {
+      wrapper = mount(DescriptionWarning, {
+        props: {
+          input: mockWarning,
+          language: 'fi' as Language,
+        },
+      })
+
+      expect(typeof (wrapper.vm as ComponentInstance).warningTitle).toBe(
+        'string'
+      )
+    })
+
+    it('should compute warningLevel from translations', () => {
+      wrapper = mount(DescriptionWarning, {
+        props: {
+          input: mockWarning,
+          language: 'fi' as Language,
+        },
+      })
+
+      expect(typeof (wrapper.vm as ComponentInstance).warningLevel).toBe(
+        'string'
+      )
+    })
+
+    it('should compute warningDetails for wind with direction', () => {
+      wrapper = mount(DescriptionWarning, {
+        props: {
+          input: mockWarning,
+          language: 'fi' as Language,
+        },
+      })
+
+      expect((wrapper.vm as ComponentInstance).warningDetails).toContain('m/s')
+    })
+
+    it('should return empty warningDetails when text is null', () => {
+      const warningNoText: Warning = {
+        ...mockWarning,
+        text: '',
+        direction: 0,
+      }
+
+      wrapper = mount(DescriptionWarning, {
+        props: {
+          input: warningNoText,
+          language: 'fi' as Language,
+        },
+      })
+
+      expect((wrapper.vm as ComponentInstance).warningDetails).toBe('')
+    })
+
+    it('should compute info based on language', () => {
+      wrapper = mount(DescriptionWarning, {
+        props: {
+          input: mockWarning,
+          language: 'fi' as Language,
+        },
+      })
+
+      expect((wrapper.vm as ComponentInstance).info).toBe('Kovaa tuulta')
+    })
+
+    it('should compute info for Swedish', () => {
+      wrapper = mount(DescriptionWarning, {
+        props: {
+          input: mockWarning,
+          language: 'sv' as Language,
+        },
+      })
+
+      expect((wrapper.vm as ComponentInstance).info).toBe('Hårt blåsväder')
+    })
+
+    it('should compute info for English', () => {
+      wrapper = mount(DescriptionWarning, {
+        props: {
+          input: mockWarning,
+          language: 'en' as Language,
+        },
+      })
+
+      expect((wrapper.vm as ComponentInstance).info).toBe('Strong wind')
+    })
+
+    it('should compute validText from translations', () => {
+      wrapper = mount(DescriptionWarning, {
+        props: {
+          input: mockWarning,
+          language: 'fi' as Language,
+        },
+      })
+
+      expect(typeof (wrapper.vm as ComponentInstance).validText).toBe('string')
+    })
+
+    it('should compute linkHidden when link is empty', () => {
+      const warningNoLink: Warning = {
+        ...mockWarning,
+        link: '',
+      }
+
+      wrapper = mount(DescriptionWarning, {
+        props: {
+          input: warningNoLink,
+          language: 'fi' as Language,
+        },
+      })
+
+      expect((wrapper.vm as ComponentInstance).linkHidden).toBe(true)
+    })
+
+    it('should compute linkHidden as false when link exists', () => {
+      wrapper = mount(DescriptionWarning, {
+        props: {
+          input: mockWarning,
+          language: 'fi' as Language,
+        },
+      })
+
+      expect((wrapper.vm as ComponentInstance).linkHidden).toBe(false)
+    })
+
+    it('should compute description from translations', () => {
+      wrapper = mount(DescriptionWarning, {
+        props: {
+          input: mockWarning,
+          language: 'fi' as Language,
+        },
+      })
+
+      expect(typeof (wrapper.vm as ComponentInstance).description).toBe(
+        'string'
+      )
+    })
+  })
+
+  describe('Fields mixin integration', () => {
+    it('should compute severity', () => {
+      wrapper = mount(DescriptionWarning, {
+        props: {
+          input: mockWarning,
+          language: 'fi' as Language,
+        },
+      })
+
+      expect((wrapper.vm as ComponentInstance).severity).toBe(3)
+    })
+
+    it('should compute typeClass', () => {
+      wrapper = mount(DescriptionWarning, {
+        props: {
+          input: mockWarning,
+          language: 'fi' as Language,
+        },
+      })
+
+      expect((wrapper.vm as ComponentInstance).typeClass).toBe('wind')
+    })
+
+    it('should compute rotation', () => {
+      wrapper = mount(DescriptionWarning, {
+        props: {
+          input: mockWarning,
+          language: 'fi' as Language,
+        },
+      })
+
+      expect((wrapper.vm as ComponentInstance).rotation).toBe(270)
+    })
+
+    it('should compute invertedRotation', () => {
+      wrapper = mount(DescriptionWarning, {
+        props: {
+          input: mockWarning,
+          language: 'fi' as Language,
+        },
+      })
+
+      expect((wrapper.vm as ComponentInstance).invertedRotation).toBe(90)
+    })
+  })
+
+  describe('Content rendering', () => {
+    it('should render valid interval', () => {
+      wrapper = mount(DescriptionWarning, {
+        props: {
+          input: mockWarning,
+          language: 'fi' as Language,
+        },
+      })
+
+      expect(wrapper.html()).toContain(mockWarning.validInterval)
+    })
+
+    it('should render warning text in symbol', () => {
+      wrapper = mount(DescriptionWarning, {
+        props: {
+          input: mockWarning,
+          language: 'fi' as Language,
+        },
+      })
+
+      expect(wrapper.find('.symbol-text').text()).toBe('25')
+    })
+
+    it('should render link when provided', () => {
+      wrapper = mount(DescriptionWarning, {
+        props: {
+          input: mockWarning,
+          language: 'fi' as Language,
+        },
+      })
+
+      const link = wrapper.find('.ext-link')
+      expect(link.exists()).toBe(true)
+      expect(link.attributes('href')).toBe('https://example.com')
+    })
+
+    it('should hide link when not provided', () => {
+      const warningNoLink: Warning = {
+        ...mockWarning,
+        link: '',
+      }
+
+      wrapper = mount(DescriptionWarning, {
+        props: {
+          input: warningNoLink,
+          language: 'fi' as Language,
+        },
+      })
+
+      const link = wrapper.find('.ext-link')
+      expect(link.classes()).toContain('d-none')
+    })
+  })
+
+  describe('CSS classes', () => {
+    it('should apply severity level class to image', () => {
+      wrapper = mount(DescriptionWarning, {
+        props: {
+          input: mockWarning,
+          language: 'fi' as Language,
+        },
+      })
+
+      const image = wrapper.find('.current-description-image')
+      expect(image.classes()).toContain('level-3')
+    })
+
+    it('should apply type class to image', () => {
+      wrapper = mount(DescriptionWarning, {
+        props: {
+          input: mockWarning,
+          language: 'fi' as Language,
+        },
+      })
+
+      const image = wrapper.find('.current-description-image')
+      expect(image.classes()).toContain('wind')
+    })
+
+    it('should apply rotation class', () => {
+      wrapper = mount(DescriptionWarning, {
+        props: {
+          input: mockWarning,
+          language: 'fi' as Language,
+        },
+      })
+
+      const image = wrapper.find('.current-description-image')
+      expect(image.classes()).toContain('transform-rotate-270')
+    })
+
+    it('should apply severity class to description rectangle', () => {
+      wrapper = mount(DescriptionWarning, {
+        props: {
+          input: mockWarning,
+          language: 'fi' as Language,
+        },
+      })
+
+      const rectangle = wrapper.find('.description-rectangle')
+      expect(rectangle.classes()).toContain('level-3')
+    })
+  })
+
+  describe('Theme support', () => {
+    it('should apply theme class', () => {
+      wrapper = mount(DescriptionWarning, {
+        props: {
+          input: mockWarning,
+          language: 'fi' as Language,
+          theme: 'dark-theme' as Theme,
+        },
+      })
+
+      expect(wrapper.find('.current-description-row').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(DescriptionWarning, {
+          props: {
+            input: mockWarning,
+            language: 'fi' as Language,
+            theme,
+          },
+        })
+
+        expect(wrapper.find('.current-description-row').classes()).toContain(
+          theme
+        )
+      })
+    })
+  })
+})

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

@@ -0,0 +1,318 @@
+import { describe, it, expect, afterEach, vi } from 'vitest'
+import { mount, VueWrapper } from '@vue/test-utils'
+import GrayScaleToggle from '@/components/GrayScaleToggle.vue'
+import type { Theme, Language } from '@/types'
+
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+type ComponentInstance = any
+
+describe('GrayScaleToggle.vue', () => {
+  let wrapper: VueWrapper | null = null
+
+  afterEach(() => {
+    if (wrapper) {
+      wrapper.unmount()
+      wrapper = null
+    }
+  })
+
+  describe('Component mounting', () => {
+    it('should mount with required props', () => {
+      wrapper = mount(GrayScaleToggle, {
+        props: {
+          language: 'fi' as Language,
+          grayScaleSelector: true,
+        },
+      })
+
+      expect(wrapper.exists()).toBe(true)
+    })
+
+    it('should not render when grayScaleSelector is false', () => {
+      wrapper = mount(GrayScaleToggle, {
+        props: {
+          language: 'fi' as Language,
+          grayScaleSelector: false,
+        },
+      })
+
+      expect(wrapper.find('#gray-scale-select-row').exists()).toBe(false)
+    })
+
+    it('should render when grayScaleSelector is true', () => {
+      wrapper = mount(GrayScaleToggle, {
+        props: {
+          language: 'fi' as Language,
+          grayScaleSelector: true,
+        },
+      })
+
+      expect(wrapper.find('#gray-scale-select-row').exists()).toBe(true)
+    })
+  })
+
+  describe('Computed properties', () => {
+    it('should detect gray scale from theme', () => {
+      wrapper = mount(GrayScaleToggle, {
+        props: {
+          language: 'fi' as Language,
+          grayScaleSelector: true,
+          theme: 'light-gray-theme' as Theme,
+        },
+      })
+
+      expect((wrapper.vm as ComponentInstance).grayScale).toBe(true)
+    })
+
+    it('should detect non-gray theme', () => {
+      wrapper = mount(GrayScaleToggle, {
+        props: {
+          language: 'fi' as Language,
+          grayScaleSelector: true,
+          theme: 'light-theme' as Theme,
+        },
+      })
+
+      expect((wrapper.vm as ComponentInstance).grayScale).toBe(false)
+    })
+
+    it('should handle dark-gray theme', () => {
+      wrapper = mount(GrayScaleToggle, {
+        props: {
+          language: 'fi' as Language,
+          grayScaleSelector: true,
+          theme: 'dark-gray-theme' as Theme,
+        },
+      })
+
+      expect((wrapper.vm as ComponentInstance).grayScale).toBe(true)
+    })
+
+    it('should return false for empty theme', () => {
+      wrapper = mount(GrayScaleToggle, {
+        props: {
+          language: 'fi' as Language,
+          grayScaleSelector: true,
+          theme: '' as Theme,
+        },
+      })
+
+      expect((wrapper.vm as ComponentInstance).grayScale).toBe(false)
+    })
+
+    it('should return false for null theme', () => {
+      wrapper = mount(GrayScaleToggle, {
+        props: {
+          language: 'fi' as Language,
+          grayScaleSelector: true,
+          theme: null as unknown as Theme,
+        },
+      })
+
+      expect((wrapper.vm as ComponentInstance).grayScale).toBe(false)
+    })
+
+    it('should compute grayScaleText', () => {
+      wrapper = mount(GrayScaleToggle, {
+        props: {
+          language: 'fi' as Language,
+          grayScaleSelector: true,
+        },
+      })
+
+      expect(typeof (wrapper.vm as ComponentInstance).grayScaleText).toBe(
+        'string'
+      )
+    })
+
+    it('should show toggleOn text when gray scale is active', () => {
+      wrapper = mount(GrayScaleToggle, {
+        props: {
+          language: 'fi' as Language,
+          grayScaleSelector: true,
+          theme: 'light-gray-theme' as Theme,
+        },
+      })
+
+      expect(typeof (wrapper.vm as ComponentInstance).toggleText).toBe('string')
+    })
+
+    it('should show toggleOff text when gray scale is inactive', () => {
+      wrapper = mount(GrayScaleToggle, {
+        props: {
+          language: 'fi' as Language,
+          grayScaleSelector: true,
+          theme: 'light-theme' as Theme,
+        },
+      })
+
+      expect(typeof (wrapper.vm as ComponentInstance).toggleText).toBe('string')
+    })
+  })
+
+  describe('Toggle functionality', () => {
+    it('should emit themeChanged when toggling from normal to gray', () => {
+      wrapper = mount(GrayScaleToggle, {
+        props: {
+          language: 'fi' as Language,
+          grayScaleSelector: true,
+          theme: 'light-theme' as Theme,
+        },
+      })
+
+      const event = { preventDefault: vi.fn() }
+      ;(wrapper.vm as ComponentInstance).toggleGrayScale(event)
+
+      expect(wrapper.emitted('themeChanged')).toBeTruthy()
+      expect(wrapper.emitted('themeChanged')![0]).toEqual(['light-gray'])
+      expect(event.preventDefault).toHaveBeenCalled()
+    })
+
+    it('should emit themeChanged when toggling from gray to normal', () => {
+      wrapper = mount(GrayScaleToggle, {
+        props: {
+          language: 'fi' as Language,
+          grayScaleSelector: true,
+          theme: 'light-gray-theme' as Theme,
+        },
+      })
+
+      const event = { preventDefault: vi.fn() }
+      ;(wrapper.vm as ComponentInstance).toggleGrayScale(event)
+
+      expect(wrapper.emitted('themeChanged')).toBeTruthy()
+      expect(wrapper.emitted('themeChanged')![0]).toEqual(['light'])
+    })
+
+    it('should handle dark theme toggle', () => {
+      wrapper = mount(GrayScaleToggle, {
+        props: {
+          language: 'fi' as Language,
+          grayScaleSelector: true,
+          theme: 'dark-theme' as Theme,
+        },
+      })
+
+      const event = { preventDefault: vi.fn() }
+      ;(wrapper.vm as ComponentInstance).toggleGrayScale(event)
+
+      expect(wrapper.emitted('themeChanged')![0]).toEqual(['dark-gray'])
+    })
+
+    it('should not emit when theme is empty', () => {
+      wrapper = mount(GrayScaleToggle, {
+        props: {
+          language: 'fi' as Language,
+          grayScaleSelector: true,
+          theme: '' as Theme,
+        },
+      })
+
+      const event = { preventDefault: vi.fn() }
+      ;(wrapper.vm as ComponentInstance).toggleGrayScale(event)
+
+      expect(wrapper.emitted('themeChanged')).toBeFalsy()
+    })
+
+    it('should prevent default event', () => {
+      wrapper = mount(GrayScaleToggle, {
+        props: {
+          language: 'fi' as Language,
+          grayScaleSelector: true,
+          theme: 'light-theme' as Theme,
+        },
+      })
+
+      const event = { preventDefault: vi.fn() }
+      ;(wrapper.vm as ComponentInstance).preventEvents(event)
+
+      expect(event.preventDefault).toHaveBeenCalled()
+    })
+  })
+
+  describe('CSS classes', () => {
+    it('should apply gray-scale-selected class when active', () => {
+      wrapper = mount(GrayScaleToggle, {
+        props: {
+          language: 'fi' as Language,
+          grayScaleSelector: true,
+          theme: 'light-gray-theme' as Theme,
+        },
+      })
+
+      expect(wrapper.find('#gray-scale-select').classes()).toContain(
+        'gray-scale-selected'
+      )
+    })
+
+    it('should apply gray-scale-unselected class when inactive', () => {
+      wrapper = mount(GrayScaleToggle, {
+        props: {
+          language: 'fi' as Language,
+          grayScaleSelector: true,
+          theme: 'light-theme' as Theme,
+        },
+      })
+
+      expect(wrapper.find('#gray-scale-select').classes()).toContain(
+        'gray-scale-unselected'
+      )
+    })
+
+    it('should apply theme class to container', () => {
+      wrapper = mount(GrayScaleToggle, {
+        props: {
+          language: 'fi' as Language,
+          grayScaleSelector: true,
+          theme: 'dark-theme' as Theme,
+        },
+      })
+
+      expect(wrapper.find('#gray-scale-select-row').classes()).toContain(
+        'dark-theme'
+      )
+    })
+  })
+
+  describe('Accessibility', () => {
+    it('should have correct ARIA attributes when inactive', () => {
+      wrapper = mount(GrayScaleToggle, {
+        props: {
+          language: 'fi' as Language,
+          grayScaleSelector: true,
+          theme: 'light-theme' as Theme,
+        },
+      })
+
+      const toggle = wrapper.find('#gray-scale-select')
+      expect(toggle.attributes('role')).toBe('button')
+      expect(toggle.attributes('tabindex')).toBe('0')
+      expect(toggle.attributes('aria-pressed')).toBe('false')
+    })
+
+    it('should have correct ARIA attributes when active', () => {
+      wrapper = mount(GrayScaleToggle, {
+        props: {
+          language: 'fi' as Language,
+          grayScaleSelector: true,
+          theme: 'light-gray-theme' as Theme,
+        },
+      })
+
+      const toggle = wrapper.find('#gray-scale-select')
+      expect(toggle.attributes('aria-pressed')).toBe('true')
+    })
+
+    it('should have aria-label', () => {
+      wrapper = mount(GrayScaleToggle, {
+        props: {
+          language: 'fi' as Language,
+          grayScaleSelector: true,
+        },
+      })
+
+      const toggle = wrapper.find('#gray-scale-select')
+      expect(toggle.attributes('aria-label')).toBeDefined()
+    })
+  })
+})