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

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

@@ -0,0 +1,311 @@
+import { describe, it, expect, afterEach, vi } from 'vitest'
+import { mount } from '@vue/test-utils'
+import GrayScaleToggle from '@/components/GrayScaleToggle.vue'
+
+describe('GrayScaleToggle.vue', () => {
+  let wrapper
+
+  afterEach(() => {
+    if (wrapper) {
+      wrapper.unmount()
+    }
+  })
+
+  describe('Component mounting', () => {
+    it('should mount with required props', () => {
+      wrapper = mount(GrayScaleToggle, {
+        props: {
+          language: 'fi',
+          grayScaleSelector: true,
+        },
+      })
+
+      expect(wrapper.exists()).toBe(true)
+    })
+
+    it('should not render when grayScaleSelector is false', () => {
+      wrapper = mount(GrayScaleToggle, {
+        props: {
+          language: 'fi',
+          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',
+          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',
+          grayScaleSelector: true,
+          theme: 'light-gray-theme',
+        },
+      })
+
+      expect(wrapper.vm.grayScale).toBe(true)
+    })
+
+    it('should detect non-gray theme', () => {
+      wrapper = mount(GrayScaleToggle, {
+        props: {
+          language: 'fi',
+          grayScaleSelector: true,
+          theme: 'light-theme',
+        },
+      })
+
+      expect(wrapper.vm.grayScale).toBe(false)
+    })
+
+    it('should handle dark-gray theme', () => {
+      wrapper = mount(GrayScaleToggle, {
+        props: {
+          language: 'fi',
+          grayScaleSelector: true,
+          theme: 'dark-gray-theme',
+        },
+      })
+
+      expect(wrapper.vm.grayScale).toBe(true)
+    })
+
+    it('should return false for empty theme', () => {
+      wrapper = mount(GrayScaleToggle, {
+        props: {
+          language: 'fi',
+          grayScaleSelector: true,
+          theme: '',
+        },
+      })
+
+      expect(wrapper.vm.grayScale).toBe(false)
+    })
+
+    it('should return false for null theme', () => {
+      wrapper = mount(GrayScaleToggle, {
+        props: {
+          language: 'fi',
+          grayScaleSelector: true,
+          theme: null,
+        },
+      })
+
+      expect(wrapper.vm.grayScale).toBe(false)
+    })
+
+    it('should compute grayScaleText', () => {
+      wrapper = mount(GrayScaleToggle, {
+        props: {
+          language: 'fi',
+          grayScaleSelector: true,
+        },
+      })
+
+      expect(typeof wrapper.vm.grayScaleText).toBe('string')
+    })
+
+    it('should show toggleOn text when gray scale is active', () => {
+      wrapper = mount(GrayScaleToggle, {
+        props: {
+          language: 'fi',
+          grayScaleSelector: true,
+          theme: 'light-gray-theme',
+        },
+      })
+
+      expect(typeof wrapper.vm.toggleText).toBe('string')
+    })
+
+    it('should show toggleOff text when gray scale is inactive', () => {
+      wrapper = mount(GrayScaleToggle, {
+        props: {
+          language: 'fi',
+          grayScaleSelector: true,
+          theme: 'light-theme',
+        },
+      })
+
+      expect(typeof wrapper.vm.toggleText).toBe('string')
+    })
+  })
+
+  describe('Toggle functionality', () => {
+    it('should emit themeChanged when toggling from normal to gray', () => {
+      wrapper = mount(GrayScaleToggle, {
+        props: {
+          language: 'fi',
+          grayScaleSelector: true,
+          theme: 'light-theme',
+        },
+      })
+
+      const event = { preventDefault: vi.fn() }
+      wrapper.vm.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',
+          grayScaleSelector: true,
+          theme: 'light-gray-theme',
+        },
+      })
+
+      const event = { preventDefault: vi.fn() }
+      wrapper.vm.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',
+          grayScaleSelector: true,
+          theme: 'dark-theme',
+        },
+      })
+
+      const event = { preventDefault: vi.fn() }
+      wrapper.vm.toggleGrayScale(event)
+
+      expect(wrapper.emitted('themeChanged')[0]).toEqual(['dark-gray'])
+    })
+
+    it('should not emit when theme is empty', () => {
+      wrapper = mount(GrayScaleToggle, {
+        props: {
+          language: 'fi',
+          grayScaleSelector: true,
+          theme: '',
+        },
+      })
+
+      const event = { preventDefault: vi.fn() }
+      wrapper.vm.toggleGrayScale(event)
+
+      expect(wrapper.emitted('themeChanged')).toBeFalsy()
+    })
+
+    it('should prevent default event', () => {
+      wrapper = mount(GrayScaleToggle, {
+        props: {
+          language: 'fi',
+          grayScaleSelector: true,
+          theme: 'light-theme',
+        },
+      })
+
+      const event = { preventDefault: vi.fn() }
+      wrapper.vm.preventEvents(event)
+
+      expect(event.preventDefault).toHaveBeenCalled()
+    })
+  })
+
+  describe('CSS classes', () => {
+    it('should apply gray-scale-selected class when active', () => {
+      wrapper = mount(GrayScaleToggle, {
+        props: {
+          language: 'fi',
+          grayScaleSelector: true,
+          theme: 'light-gray-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',
+          grayScaleSelector: true,
+          theme: 'light-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',
+          grayScaleSelector: true,
+          theme: 'dark-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',
+          grayScaleSelector: true,
+          theme: 'light-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',
+          grayScaleSelector: true,
+          theme: 'light-gray-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',
+          grayScaleSelector: true,
+        },
+      })
+
+      const toggle = wrapper.find('#gray-scale-select')
+      expect(toggle.attributes('aria-label')).toBeDefined()
+    })
+  })
+})

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

@@ -0,0 +1,223 @@
+import { describe, it, expect, afterEach } from 'vitest'
+import { mount } from '@vue/test-utils'
+import Legend from '@/components/Legend.vue'
+
+const mockLegend = [
+  {
+    type: 'wind',
+    severity: 4,
+    visible: true,
+  },
+  {
+    type: 'thunderStorm',
+    severity: 3,
+    visible: true,
+  },
+  {
+    type: 'rain',
+    severity: 2,
+    visible: false,
+  },
+]
+
+describe('Legend.vue', () => {
+  let wrapper
+
+  afterEach(() => {
+    if (wrapper) {
+      wrapper.unmount()
+    }
+  })
+
+  describe('Component mounting', () => {
+    it('should mount with required props', () => {
+      wrapper = mount(Legend, {
+        props: {
+          input: mockLegend,
+          language: 'fi',
+        },
+      })
+
+      expect(wrapper.exists()).toBe(true)
+    })
+
+    it('should initialize with visible false', () => {
+      wrapper = mount(Legend, {
+        props: {
+          input: mockLegend,
+          language: 'fi',
+        },
+      })
+
+      expect(wrapper.vm.visible).toBe(false)
+    })
+  })
+
+  describe('Computed properties', () => {
+    it('should compute warnings from input', () => {
+      wrapper = mount(Legend, {
+        props: {
+          input: mockLegend,
+          language: 'fi',
+        },
+      })
+
+      expect(wrapper.vm.warnings).toEqual(mockLegend)
+    })
+
+    it('should compute warningSymbolsText', () => {
+      wrapper = mount(Legend, {
+        props: {
+          input: mockLegend,
+          language: 'fi',
+        },
+      })
+
+      expect(typeof wrapper.vm.warningSymbolsText).toBe('string')
+    })
+
+    it('should compute toggleLegendsText based on visibility', () => {
+      wrapper = mount(Legend, {
+        props: {
+          input: mockLegend,
+          language: 'fi',
+        },
+      })
+
+      const closedText = wrapper.vm.toggleLegendsText
+      wrapper.vm.visible = true
+
+      const openText = wrapper.vm.toggleLegendsText
+
+      expect(closedText).not.toBe(openText)
+    })
+  })
+
+  describe('Event handling', () => {
+    it('should toggle visible state on legend toggle', () => {
+      wrapper = mount(Legend, {
+        props: {
+          input: mockLegend,
+          language: 'fi',
+        },
+      })
+
+      const initialVisible = wrapper.vm.visible
+      wrapper.vm.onLegendToggle()
+
+      expect(wrapper.vm.visible).toBe(!initialVisible)
+    })
+
+    it('should emit warningsToggled event', () => {
+      wrapper = mount(Legend, {
+        props: {
+          input: mockLegend,
+          language: 'fi',
+        },
+      })
+
+      const newVisibleWarnings = ['wind', 'rain']
+      wrapper.vm.onWarningsToggled(newVisibleWarnings)
+
+      expect(wrapper.emitted('warningsToggled')).toBeTruthy()
+      expect(wrapper.emitted('warningsToggled')[0]).toEqual([
+        newVisibleWarnings,
+      ])
+    })
+
+    it('should emit themeChanged event', () => {
+      wrapper = mount(Legend, {
+        props: {
+          input: mockLegend,
+          language: 'fi',
+        },
+      })
+
+      wrapper.vm.onThemeChanged('dark-theme')
+
+      expect(wrapper.emitted('themeChanged')).toBeTruthy()
+      expect(wrapper.emitted('themeChanged')[0]).toEqual(['dark-theme'])
+    })
+
+    it('should not emit themeChanged if theme is same', () => {
+      wrapper = mount(Legend, {
+        props: {
+          input: mockLegend,
+          theme: 'light-theme',
+          language: 'fi',
+        },
+      })
+
+      wrapper.vm.onThemeChanged('light-theme')
+
+      expect(wrapper.emitted('themeChanged')).toBeFalsy()
+    })
+
+    it('should emit warningsToggled with all warning types on showAll', () => {
+      wrapper = mount(Legend, {
+        props: {
+          input: mockLegend,
+          language: 'fi',
+        },
+      })
+
+      wrapper.vm.onShowAllWarnings()
+
+      expect(wrapper.emitted('warningsToggled')).toBeTruthy()
+      const emittedWarnings = wrapper.emitted('warningsToggled')[0][0]
+      expect(emittedWarnings).toContain('wind')
+      expect(emittedWarnings).toContain('thunderStorm')
+      expect(emittedWarnings).toContain('rain')
+    })
+  })
+
+  describe('Props validation', () => {
+    it('should accept grayScaleSelector prop', () => {
+      wrapper = mount(Legend, {
+        props: {
+          input: mockLegend,
+          grayScaleSelector: true,
+          language: 'fi',
+        },
+      })
+
+      expect(wrapper.vm.grayScaleSelector).toBe(true)
+    })
+
+    it('should use default grayScaleSelector false', () => {
+      wrapper = mount(Legend, {
+        props: {
+          input: mockLegend,
+          language: 'fi',
+        },
+      })
+
+      expect(wrapper.vm.grayScaleSelector).toBe(false)
+    })
+
+    it('should accept theme prop', () => {
+      wrapper = mount(Legend, {
+        props: {
+          input: mockLegend,
+          theme: 'dark-theme',
+          language: 'fi',
+        },
+      })
+
+      expect(wrapper.vm.theme).toBe('dark-theme')
+    })
+  })
+
+  describe('Window resize handling', () => {
+    it('should initialize windowWidth', () => {
+      wrapper = mount(Legend, {
+        props: {
+          input: mockLegend,
+          language: 'fi',
+        },
+      })
+
+      expect(typeof wrapper.vm.windowWidth).toBe('number')
+    })
+  })
+})