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

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

@@ -0,0 +1,367 @@
+import { describe, it, expect, afterEach } from 'vitest'
+import { mount, VueWrapper } from '@vue/test-utils'
+import MapSmall from '@/components/MapSmall.vue'
+import type { DayRegions, WarningsMap, Theme } from '@/types'
+
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+type ComponentInstance = any
+
+const mockRegions: DayRegions = {
+  land: [],
+  sea: [],
+}
+
+describe('MapSmall.vue', () => {
+  let wrapper: VueWrapper | null = null
+
+  afterEach(() => {
+    if (wrapper) {
+      wrapper.unmount()
+      wrapper = null
+    }
+  })
+
+  describe('Component mounting', () => {
+    it('should mount with default props', () => {
+      wrapper = mount(MapSmall, {
+        props: {},
+      })
+
+      expect(wrapper.exists()).toBe(true)
+    })
+
+    it('should mount with all props', () => {
+      wrapper = mount(MapSmall, {
+        props: {
+          index: 0,
+          input: mockRegions,
+          visibleWarnings: [],
+          warnings: null,
+          geometryId: 2021,
+          loading: true,
+          theme: 'light-theme' as Theme,
+        },
+      })
+
+      expect(wrapper.exists()).toBe(true)
+    })
+  })
+
+  describe('Computed properties', () => {
+    it('should compute size as Small', () => {
+      wrapper = mount(MapSmall, {
+        props: {},
+      })
+
+      expect((wrapper.vm as ComponentInstance).size).toBe('Small')
+    })
+
+    it('should have strokeWidth property', () => {
+      wrapper = mount(MapSmall, {
+        props: {},
+      })
+
+      expect((wrapper.vm as ComponentInstance).strokeWidth).toBe(0.6)
+    })
+
+    it('should have pathsNeeded property', () => {
+      wrapper = mount(MapSmall, {
+        props: {},
+      })
+
+      expect(typeof (wrapper.vm as ComponentInstance).pathsNeeded).toBe(
+        'boolean'
+      )
+    })
+  })
+
+  describe('Props handling', () => {
+    it('should accept index prop', () => {
+      wrapper = mount(MapSmall, {
+        props: {
+          index: 2,
+        },
+      })
+
+      expect((wrapper.vm as ComponentInstance).index).toBe(2)
+    })
+
+    it('should accept loading prop', () => {
+      wrapper = mount(MapSmall, {
+        props: {
+          loading: false,
+        },
+      })
+
+      expect((wrapper.vm as ComponentInstance).loading).toBe(false)
+    })
+
+    it('should accept warnings prop', () => {
+      const mockWarnings: WarningsMap = {}
+
+      wrapper = mount(MapSmall, {
+        props: {
+          warnings: mockWarnings,
+        },
+      })
+
+      expect(wrapper.exists()).toBe(true)
+    })
+
+    it('should accept visibleWarnings prop', () => {
+      wrapper = mount(MapSmall, {
+        props: {
+          visibleWarnings: ['wind', 'rain'],
+        },
+      })
+
+      expect(wrapper.exists()).toBe(true)
+    })
+
+    it('should accept geometryId prop', () => {
+      wrapper = mount(MapSmall, {
+        props: {
+          geometryId: 2021,
+        },
+      })
+
+      expect((wrapper.vm as ComponentInstance).geometryId).toBe(2021)
+    })
+
+    it('should use default index of 0', () => {
+      wrapper = mount(MapSmall, {
+        props: {},
+      })
+
+      expect((wrapper.vm as ComponentInstance).index).toBe(0)
+    })
+
+    it('should use default geometryId of 2021', () => {
+      wrapper = mount(MapSmall, {
+        props: {},
+      })
+
+      expect((wrapper.vm as ComponentInstance).geometryId).toBe(2021)
+    })
+  })
+
+  describe('Theme support', () => {
+    it('should accept theme prop', () => {
+      wrapper = mount(MapSmall, {
+        props: {
+          theme: 'dark-theme' as Theme,
+        },
+      })
+
+      expect((wrapper.vm as ComponentInstance).theme).toBe('dark-theme')
+    })
+
+    it('should default to light-theme', () => {
+      wrapper = mount(MapSmall, {
+        props: {},
+      })
+
+      expect((wrapper.vm as ComponentInstance).theme).toBe('light-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(MapSmall, {
+          props: {
+            theme,
+          },
+        })
+
+        expect((wrapper.vm as ComponentInstance).theme).toBe(theme)
+      })
+    })
+  })
+
+  describe('SVG structure', () => {
+    it('should render map-small container', () => {
+      wrapper = mount(MapSmall, {
+        props: {},
+      })
+
+      expect(wrapper.find('.map-small').exists()).toBe(true)
+    })
+
+    it('should render SVG element', () => {
+      wrapper = mount(MapSmall, {
+        props: {},
+      })
+
+      expect(wrapper.find('svg.finland-small').exists()).toBe(true)
+    })
+
+    it('should have correct SVG dimensions', () => {
+      wrapper = mount(MapSmall, {
+        props: {},
+      })
+
+      const svg = wrapper.find('svg.finland-small')
+      expect(svg.attributes('width')).toBe('75')
+      expect(svg.attributes('height')).toBe('120')
+    })
+
+    it('should have correct viewBox', () => {
+      wrapper = mount(MapSmall, {
+        props: {},
+      })
+
+      expect(wrapper.find('svg.finland-small').attributes('viewBox')).toBe(
+        '0 0 75 120'
+      )
+    })
+
+    it('should render SVG group with correct id', () => {
+      wrapper = mount(MapSmall, {
+        props: {
+          index: 2,
+        },
+      })
+
+      // Group is conditionally rendered based on pathsNeeded
+      expect(wrapper.exists()).toBe(true)
+    })
+  })
+
+  describe('Map paths', () => {
+    it('should have access to strokeColor', () => {
+      wrapper = mount(MapSmall, {
+        props: {},
+      })
+
+      expect((wrapper.vm as ComponentInstance).strokeColor).toBeDefined()
+    })
+
+    it('should have access to bluePaths', () => {
+      wrapper = mount(MapSmall, {
+        props: {},
+      })
+
+      expect(Array.isArray((wrapper.vm as ComponentInstance).bluePaths)).toBe(
+        true
+      )
+    })
+
+    it('should have access to greenPaths', () => {
+      wrapper = mount(MapSmall, {
+        props: {},
+      })
+
+      expect(Array.isArray((wrapper.vm as ComponentInstance).greenPaths)).toBe(
+        true
+      )
+    })
+
+    it('should have access to yellowPaths', () => {
+      wrapper = mount(MapSmall, {
+        props: {},
+      })
+
+      expect(Array.isArray((wrapper.vm as ComponentInstance).yellowPaths)).toBe(
+        true
+      )
+    })
+
+    it('should have access to orangePaths', () => {
+      wrapper = mount(MapSmall, {
+        props: {},
+      })
+
+      expect(Array.isArray((wrapper.vm as ComponentInstance).orangePaths)).toBe(
+        true
+      )
+    })
+
+    it('should have access to redPaths', () => {
+      wrapper = mount(MapSmall, {
+        props: {},
+      })
+
+      expect(Array.isArray((wrapper.vm as ComponentInstance).redPaths)).toBe(
+        true
+      )
+    })
+
+    it('should have access to overlayPaths', () => {
+      wrapper = mount(MapSmall, {
+        props: {},
+      })
+
+      expect(
+        Array.isArray((wrapper.vm as ComponentInstance).overlayPaths)
+      ).toBe(true)
+    })
+
+    it('should have access to landBorders', () => {
+      wrapper = mount(MapSmall, {
+        props: {},
+      })
+
+      expect(Array.isArray((wrapper.vm as ComponentInstance).landBorders)).toBe(
+        true
+      )
+    })
+
+    it('should have access to seaBorders', () => {
+      wrapper = mount(MapSmall, {
+        props: {},
+      })
+
+      expect(Array.isArray((wrapper.vm as ComponentInstance).seaBorders)).toBe(
+        true
+      )
+    })
+  })
+
+  describe('Coverage data', () => {
+    it('should have access to yellowCoverages', () => {
+      wrapper = mount(MapSmall, {
+        props: {},
+      })
+
+      expect(
+        Array.isArray((wrapper.vm as ComponentInstance).yellowCoverages)
+      ).toBe(true)
+    })
+
+    it('should have access to orangeCoverages', () => {
+      wrapper = mount(MapSmall, {
+        props: {},
+      })
+
+      expect(
+        Array.isArray((wrapper.vm as ComponentInstance).orangeCoverages)
+      ).toBe(true)
+    })
+
+    it('should have access to redCoverages', () => {
+      wrapper = mount(MapSmall, {
+        props: {},
+      })
+
+      expect(
+        Array.isArray((wrapper.vm as ComponentInstance).redCoverages)
+      ).toBe(true)
+    })
+
+    it('should have access to overlayCoverages', () => {
+      wrapper = mount(MapSmall, {
+        props: {},
+      })
+
+      expect(
+        Array.isArray((wrapper.vm as ComponentInstance).overlayCoverages)
+      ).toBe(true)
+    })
+  })
+})

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

@@ -0,0 +1,270 @@
+import { describe, it, expect, afterEach } from 'vitest'
+import { mount, VueWrapper } from '@vue/test-utils'
+import PopupRow from '@/components/PopupRow.vue'
+import type { PopupRowInput } from '@/types'
+
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+type ComponentInstance = any
+
+const mockWarning: PopupRowInput = {
+  type: 'wind',
+  severity: 3,
+  direction: 270,
+  text: '15',
+  interval: '14:00 – 18:00',
+}
+
+describe('PopupRow.vue', () => {
+  let wrapper: VueWrapper | null = null
+
+  afterEach(() => {
+    if (wrapper) {
+      wrapper.unmount()
+      wrapper = null
+    }
+  })
+
+  describe('Component mounting', () => {
+    it('should mount with required props', () => {
+      wrapper = mount(PopupRow, {
+        props: {
+          input: mockWarning,
+        },
+      })
+
+      expect(wrapper.exists()).toBe(true)
+    })
+
+    it('should use default empty object for input prop', () => {
+      wrapper = mount(PopupRow, {
+        props: {
+          input: {
+            type: 'rain',
+            severity: 2,
+            interval: '',
+          },
+        },
+      })
+
+      expect(wrapper.exists()).toBe(true)
+      expect((wrapper.vm as ComponentInstance).input).toBeDefined()
+    })
+  })
+
+  describe('Fields mixin integration', () => {
+    it('should compute typeClass from warning type', () => {
+      wrapper = mount(PopupRow, {
+        props: {
+          input: mockWarning,
+        },
+      })
+
+      expect((wrapper.vm as ComponentInstance).typeClass).toBe('wind')
+    })
+
+    it('should compute typeClass for thunderStorm', () => {
+      wrapper = mount(PopupRow, {
+        props: {
+          input: {
+            type: 'thunderStorm',
+            severity: 4,
+            interval: '',
+          },
+        },
+      })
+
+      expect((wrapper.vm as ComponentInstance).typeClass).toBe('thunder-storm')
+    })
+
+    it('should compute rotation from direction', () => {
+      wrapper = mount(PopupRow, {
+        props: {
+          input: mockWarning,
+        },
+      })
+
+      expect((wrapper.vm as ComponentInstance).rotation).toBe(270)
+    })
+
+    it('should compute invertedRotation', () => {
+      wrapper = mount(PopupRow, {
+        props: {
+          input: mockWarning,
+        },
+      })
+
+      expect((wrapper.vm as ComponentInstance).invertedRotation).toBe(90)
+    })
+
+    it('should compute severity', () => {
+      wrapper = mount(PopupRow, {
+        props: {
+          input: mockWarning,
+        },
+      })
+
+      expect((wrapper.vm as ComponentInstance).severity).toBe(3)
+    })
+
+    it('should return 0 for invalid severity', () => {
+      wrapper = mount(PopupRow, {
+        props: {
+          input: {
+            type: 'wind',
+            severity: 1,
+            interval: '',
+          },
+        },
+      })
+
+      expect((wrapper.vm as ComponentInstance).severity).toBe(0)
+    })
+  })
+
+  describe('Content rendering', () => {
+    it('should render interval text', () => {
+      wrapper = mount(PopupRow, {
+        props: {
+          input: mockWarning,
+        },
+      })
+
+      expect(wrapper.text()).toContain('14:00 – 18:00')
+    })
+
+    it('should render warning text in symbol', () => {
+      wrapper = mount(PopupRow, {
+        props: {
+          input: mockWarning,
+        },
+      })
+
+      expect(wrapper.find('.symbol-text').text()).toBe('15')
+    })
+
+    it('should render empty text when not provided', () => {
+      const warningNoText: PopupRowInput = {
+        type: 'rain',
+        severity: 2,
+        interval: '10:00 – 12:00',
+      }
+
+      wrapper = mount(PopupRow, {
+        props: {
+          input: warningNoText,
+        },
+      })
+
+      expect(wrapper.find('.symbol-text').text()).toBe('')
+    })
+  })
+
+  describe('CSS classes', () => {
+    it('should apply severity level class to symbol', () => {
+      wrapper = mount(PopupRow, {
+        props: {
+          input: mockWarning,
+        },
+      })
+
+      const symbol = wrapper.find('.popup-table-symbol-cell')
+      expect(symbol.classes()).toContain('level-3')
+    })
+
+    it('should apply type class to symbol', () => {
+      wrapper = mount(PopupRow, {
+        props: {
+          input: mockWarning,
+        },
+      })
+
+      const symbol = wrapper.find('.popup-table-symbol-cell')
+      expect(symbol.classes()).toContain('wind')
+    })
+
+    it('should apply rotation class', () => {
+      wrapper = mount(PopupRow, {
+        props: {
+          input: mockWarning,
+        },
+      })
+
+      const symbol = wrapper.find('.popup-table-symbol-cell')
+      expect(symbol.classes()).toContain('transform-rotate-270')
+    })
+
+    it('should apply inverted rotation to text', () => {
+      wrapper = mount(PopupRow, {
+        props: {
+          input: mockWarning,
+        },
+      })
+
+      const text = wrapper.find('.symbol-text')
+      expect(text.classes()).toContain('transform-rotate-90')
+    })
+
+    it('should apply text level class to interval cell', () => {
+      wrapper = mount(PopupRow, {
+        props: {
+          input: mockWarning,
+        },
+      })
+
+      const textCell = wrapper.find('.popup-table-text-cell')
+      expect(textCell.classes()).toContain('text-level-3')
+    })
+
+    it('should hide level-0 warnings', () => {
+      const warningLevel0: PopupRowInput = {
+        type: 'wind',
+        severity: 0,
+        interval: '',
+      }
+
+      wrapper = mount(PopupRow, {
+        props: {
+          input: warningLevel0,
+        },
+      })
+
+      // Level-0 warning images should have display: none via CSS
+      const symbol = wrapper.find('.popup-table-symbol-cell')
+      expect(symbol.classes()).toContain('level-0')
+    })
+  })
+
+  describe('Table structure', () => {
+    it('should render as table row', () => {
+      wrapper = mount(PopupRow, {
+        props: {
+          input: mockWarning,
+        },
+      })
+
+      expect(wrapper.find('.popup-table-row').exists()).toBe(true)
+    })
+
+    it('should have two table cells', () => {
+      wrapper = mount(PopupRow, {
+        props: {
+          input: mockWarning,
+        },
+      })
+
+      const cells = wrapper.findAll('.popup-table-cell')
+      expect(cells).toHaveLength(2)
+    })
+
+    it('should have symbol cell and text cell', () => {
+      wrapper = mount(PopupRow, {
+        props: {
+          input: mockWarning,
+        },
+      })
+
+      expect(wrapper.find('.popup-table-symbol-cell').exists()).toBe(true)
+      expect(wrapper.find('.popup-table-text-cell').exists()).toBe(true)
+    })
+  })
+})