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

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

@@ -0,0 +1,329 @@
+import { describe, it, expect, afterEach } from 'vitest'
+import { mount } from '@vue/test-utils'
+import Warnings from '@/components/Warnings.vue'
+
+const mockWarnings = [
+  {
+    type: 'wind',
+    severity: 4,
+    visible: true,
+  },
+  {
+    type: 'thunderStorm',
+    severity: 3,
+    visible: true,
+  },
+  {
+    type: 'rain',
+    severity: 2,
+    visible: false,
+  },
+]
+
+describe('Warnings.vue', () => {
+  let wrapper
+
+  afterEach(() => {
+    if (wrapper) {
+      wrapper.unmount()
+    }
+  })
+
+  describe('Component mounting', () => {
+    it('should mount with required props', () => {
+      wrapper = mount(Warnings, {
+        props: {
+          input: mockWarnings,
+          visibleWarnings: ['wind', 'thunderStorm'],
+          language: 'fi',
+          theme: 'light-theme',
+        },
+      })
+
+      expect(wrapper.exists()).toBe(true)
+    })
+
+    it('should mount with empty warnings', () => {
+      wrapper = mount(Warnings, {
+        props: {
+          input: [],
+          visibleWarnings: [],
+          language: 'fi',
+          theme: 'light-theme',
+        },
+      })
+
+      expect(wrapper.exists()).toBe(true)
+    })
+  })
+
+  describe('Computed properties', () => {
+    it('should compute warnings from input', () => {
+      wrapper = mount(Warnings, {
+        props: {
+          input: mockWarnings,
+          visibleWarnings: [],
+          language: 'fi',
+          theme: 'light-theme',
+        },
+      })
+
+      expect(wrapper.vm.warnings).toEqual(mockWarnings)
+    })
+
+    it('should detect hidden warnings', () => {
+      wrapper = mount(Warnings, {
+        props: {
+          input: mockWarnings,
+          visibleWarnings: ['wind'],
+          language: 'fi',
+          theme: 'light-theme',
+        },
+      })
+
+      expect(wrapper.vm.hiddenWarnings).toBe(true)
+    })
+
+    it('should detect no hidden warnings when all visible', () => {
+      wrapper = mount(Warnings, {
+        props: {
+          input: mockWarnings,
+          visibleWarnings: ['wind', 'thunderStorm', 'rain'],
+          language: 'fi',
+          theme: 'light-theme',
+        },
+      })
+
+      expect(wrapper.vm.hiddenWarnings).toBe(false)
+    })
+
+    it('should detect no warnings state', () => {
+      wrapper = mount(Warnings, {
+        props: {
+          input: [],
+          visibleWarnings: [],
+          language: 'fi',
+          theme: 'light-theme',
+        },
+      })
+
+      expect(wrapper.vm.noWarnings).toBe(true)
+    })
+
+    it('should compute warningSymbolsText for warnings', () => {
+      wrapper = mount(Warnings, {
+        props: {
+          input: mockWarnings,
+          visibleWarnings: [],
+          language: 'fi',
+          theme: 'light-theme',
+        },
+      })
+
+      expect(typeof wrapper.vm.warningSymbolsText).toBe('string')
+    })
+
+    it('should compute noWarnings text when empty', () => {
+      wrapper = mount(Warnings, {
+        props: {
+          input: [],
+          visibleWarnings: [],
+          language: 'fi',
+          theme: 'light-theme',
+        },
+      })
+
+      expect(typeof wrapper.vm.warningSymbolsText).toBe('string')
+    })
+
+    it('should compute showWarningsText', () => {
+      wrapper = mount(Warnings, {
+        props: {
+          input: mockWarnings,
+          visibleWarnings: [],
+          language: 'fi',
+          theme: 'light-theme',
+        },
+      })
+
+      expect(typeof wrapper.vm.showWarningsText).toBe('string')
+    })
+
+    it('should compute severity level texts', () => {
+      wrapper = mount(Warnings, {
+        props: {
+          input: mockWarnings,
+          visibleWarnings: [],
+          language: 'fi',
+          theme: 'light-theme',
+        },
+      })
+
+      expect(typeof wrapper.vm.warningLevel1Text).toBe('string')
+      expect(typeof wrapper.vm.warningLevel2Text).toBe('string')
+      expect(typeof wrapper.vm.warningLevel3Text).toBe('string')
+      expect(typeof wrapper.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',
+          theme: 'light-theme',
+        },
+      })
+
+      wrapper.vm.onWarningToggled({
+        warning: 'rain',
+        visible: true,
+      })
+
+      expect(wrapper.emitted('warningsToggled')).toBeTruthy()
+      const emittedWarnings = wrapper.emitted('warningsToggled')[0][0]
+      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',
+          theme: 'light-theme',
+        },
+      })
+
+      wrapper.vm.onWarningToggled({
+        warning: 'rain',
+        visible: false,
+      })
+
+      expect(wrapper.emitted('warningsToggled')).toBeTruthy()
+      const emittedWarnings = wrapper.emitted('warningsToggled')[0][0]
+      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',
+          theme: 'light-theme',
+        },
+      })
+
+      wrapper.vm.onWarningToggled({
+        warning: 'wind',
+        visible: true,
+      })
+
+      const emittedWarnings = wrapper.emitted('warningsToggled')[0][0]
+      expect(emittedWarnings.filter((w) => w === 'wind').length).toBe(1)
+    })
+
+    it('should emit showAllWarnings event', () => {
+      wrapper = mount(Warnings, {
+        props: {
+          input: mockWarnings,
+          visibleWarnings: [],
+          language: 'fi',
+          theme: 'light-theme',
+        },
+      })
+
+      wrapper.vm.showAll()
+
+      expect(wrapper.emitted('showAllWarnings')).toBeTruthy()
+    })
+  })
+
+  describe('Theme support', () => {
+    it('should apply theme class', () => {
+      wrapper = mount(Warnings, {
+        props: {
+          input: mockWarnings,
+          visibleWarnings: [],
+          language: 'fi',
+          theme: 'dark-theme',
+        },
+      })
+
+      expect(wrapper.find('#fmi-warnings-view').classes()).toContain(
+        'dark-theme'
+      )
+    })
+
+    it('should support all theme variants', () => {
+      const themes = [
+        'light-theme',
+        'dark-theme',
+        'light-gray-theme',
+        'dark-gray-theme',
+      ]
+
+      themes.forEach((theme) => {
+        wrapper = mount(Warnings, {
+          props: {
+            input: mockWarnings,
+            visibleWarnings: [],
+            language: 'fi',
+            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',
+          theme: 'light-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',
+          theme: 'light-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',
+          theme: 'light-theme',
+        },
+      })
+
+      const separator = wrapper.find('.legend-separator')
+      expect(separator.classes()).not.toContain('no-warnings')
+    })
+  })
+})

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

@@ -0,0 +1,21 @@
+// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
+
+exports[`RegionWarning.vue snapshots > should match snapshot for all severity levels > severity-1 1`] = `"<div data-v-77d0cfc0="" class="symbol-image warning-image current-warning-image transform-rotate-180 symbol-rotate-180 level-1 wind" aria-label="Ei vaaraa tuulivaroitus maa‑alueille (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 > should match snapshot for all severity levels > severity-2 1`] = `"<div data-v-77d0cfc0="" class="symbol-image warning-image current-warning-image transform-rotate-180 symbol-rotate-180 level-2 wind" aria-label="Mahdollisesti vaarallinen tuulivaroitus maa‑alueille (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 > should match snapshot for all severity levels > severity-3 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 (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 > should match snapshot for all severity levels > severity-4 1`] = `"<div data-v-77d0cfc0="" class="symbol-image warning-image current-warning-image transform-rotate-180 symbol-rotate-180 level-4 wind" aria-label="Hyvin vaarallinen tuulivaroitus maa‑alueille (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 > should match snapshot for different warning types > type-forestFire 1`] = `"<div data-v-77d0cfc0="" class="symbol-image warning-image current-warning-image transform-rotate-180 symbol-rotate-180 level-3 forest-fire" aria-label="Vaarallinen  (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 > should match snapshot for different warning types > type-rain 1`] = `"<div data-v-77d0cfc0="" class="symbol-image warning-image current-warning-image transform-rotate-180 symbol-rotate-180 level-3 rain" aria-label="Vaarallinen sadevaroitus (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 > should match snapshot for different warning types > type-thunderstorm 1`] = `"<div data-v-77d0cfc0="" class="symbol-image warning-image current-warning-image transform-rotate-180 symbol-rotate-180 level-3 thunderstorm" aria-label="Vaarallinen  (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 > should match snapshot for different warning types > type-wind 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 (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 > should match snapshot for wind warning 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 (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 > should match snapshot without wind speed 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>"`;

package/tests/unit/components/__snapshots__/Warning.snapshot.spec.js.snap

@@ -0,0 +1,199 @@
+// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
+
+exports[`Warning.vue snapshots > should match snapshot for dark theme 1`] = `
+"<div data-v-bd8e0e21="" class="symbol-list-table dark-theme">
+  <div data-v-bd8e0e21="" class="symbol-list-cell symbol-list-cell-image">
+    <div data-v-bd8e0e21="" class="level-3 wind symbol-list-image-column symbol-list-image warning-image" aria-label="Vaarallinen tuulivaroitus maa‑alueille"></div>
+  </div>
+  <div data-v-bd8e0e21="" class="symbol-list-cell symbol-list-cell-text">
+    <div data-v-bd8e0e21="" class="symbol-list-text-select">
+      <!-- eslint-disable-next-line vue/no-v-html -->
+      <div data-v-bd8e0e21="" class="item-text symbol-list-text">Tuulivaroitus maa‑alueille</div>
+      <div data-v-bd8e0e21="" class="symbol-list-select-container d-none d-md-table-cell">
+        <div data-v-bd8e0e21="" id="fmi-warnings-flag-wind" class="symbol-list-select flag-selected d-md-block focus-ring d-none" role="button" tabindex="0" aria-pressed="true" aria-label="Tuulivaroitus maa‑alueille"><span data-v-bd8e0e21="">On</span></div>
+      </div>
+    </div>
+    <hr data-v-bd8e0e21="">
+  </div>
+</div>"
+`;
+
+exports[`Warning.vue snapshots > should match snapshot for default state 1`] = `
+"<div data-v-bd8e0e21="" class="symbol-list-table light-theme">
+  <div data-v-bd8e0e21="" class="symbol-list-cell symbol-list-cell-image">
+    <div data-v-bd8e0e21="" class="level-3 wind symbol-list-image-column symbol-list-image warning-image" aria-label="Vaarallinen tuulivaroitus maa‑alueille"></div>
+  </div>
+  <div data-v-bd8e0e21="" class="symbol-list-cell symbol-list-cell-text">
+    <div data-v-bd8e0e21="" class="symbol-list-text-select">
+      <!-- eslint-disable-next-line vue/no-v-html -->
+      <div data-v-bd8e0e21="" class="item-text symbol-list-text">Tuulivaroitus maa‑alueille</div>
+      <div data-v-bd8e0e21="" class="symbol-list-select-container d-none d-md-table-cell">
+        <div data-v-bd8e0e21="" id="fmi-warnings-flag-wind" class="symbol-list-select flag-selected d-md-block focus-ring d-none" role="button" tabindex="0" aria-pressed="true" aria-label="Tuulivaroitus maa‑alueille"><span data-v-bd8e0e21="">On</span></div>
+      </div>
+    </div>
+    <hr data-v-bd8e0e21="">
+  </div>
+</div>"
+`;
+
+exports[`Warning.vue snapshots > should match snapshot for different languages > language-en 1`] = `
+"<div data-v-bd8e0e21="" class="symbol-list-table light-theme">
+  <div data-v-bd8e0e21="" class="symbol-list-cell symbol-list-cell-image">
+    <div data-v-bd8e0e21="" class="level-3 wind symbol-list-image-column symbol-list-image warning-image" aria-label="Dangerous wind warning for land areas"></div>
+  </div>
+  <div data-v-bd8e0e21="" class="symbol-list-cell symbol-list-cell-text">
+    <div data-v-bd8e0e21="" class="symbol-list-text-select">
+      <!-- eslint-disable-next-line vue/no-v-html -->
+      <div data-v-bd8e0e21="" class="item-text symbol-list-text">Wind warning for land areas</div>
+      <div data-v-bd8e0e21="" class="symbol-list-select-container d-none d-md-table-cell">
+        <div data-v-bd8e0e21="" id="fmi-warnings-flag-wind" class="symbol-list-select flag-selected d-md-block focus-ring d-none" role="button" tabindex="0" aria-pressed="true" aria-label="Wind warning for land areas"><span data-v-bd8e0e21="">On</span></div>
+      </div>
+    </div>
+    <hr data-v-bd8e0e21="">
+  </div>
+</div>"
+`;
+
+exports[`Warning.vue snapshots > should match snapshot for different languages > language-fi 1`] = `
+"<div data-v-bd8e0e21="" class="symbol-list-table light-theme">
+  <div data-v-bd8e0e21="" class="symbol-list-cell symbol-list-cell-image">
+    <div data-v-bd8e0e21="" class="level-3 wind symbol-list-image-column symbol-list-image warning-image" aria-label="Vaarallinen tuulivaroitus maa‑alueille"></div>
+  </div>
+  <div data-v-bd8e0e21="" class="symbol-list-cell symbol-list-cell-text">
+    <div data-v-bd8e0e21="" class="symbol-list-text-select">
+      <!-- eslint-disable-next-line vue/no-v-html -->
+      <div data-v-bd8e0e21="" class="item-text symbol-list-text">Tuulivaroitus maa‑alueille</div>
+      <div data-v-bd8e0e21="" class="symbol-list-select-container d-none d-md-table-cell">
+        <div data-v-bd8e0e21="" id="fmi-warnings-flag-wind" class="symbol-list-select flag-selected d-md-block focus-ring d-none" role="button" tabindex="0" aria-pressed="true" aria-label="Tuulivaroitus maa‑alueille"><span data-v-bd8e0e21="">On</span></div>
+      </div>
+    </div>
+    <hr data-v-bd8e0e21="">
+  </div>
+</div>"
+`;
+
+exports[`Warning.vue snapshots > should match snapshot for different languages > language-sv 1`] = `
+"<div data-v-bd8e0e21="" class="symbol-list-table light-theme">
+  <div data-v-bd8e0e21="" class="symbol-list-cell symbol-list-cell-image">
+    <div data-v-bd8e0e21="" class="level-3 wind symbol-list-image-column symbol-list-image warning-image" aria-label="Farlig vindvarning för landområden"></div>
+  </div>
+  <div data-v-bd8e0e21="" class="symbol-list-cell symbol-list-cell-text">
+    <div data-v-bd8e0e21="" class="symbol-list-text-select">
+      <!-- eslint-disable-next-line vue/no-v-html -->
+      <div data-v-bd8e0e21="" class="item-text symbol-list-text">Vindvarning för landområden</div>
+      <div data-v-bd8e0e21="" class="symbol-list-select-container d-none d-md-table-cell">
+        <div data-v-bd8e0e21="" id="fmi-warnings-flag-wind" class="symbol-list-select flag-selected d-md-block focus-ring d-none" role="button" tabindex="0" aria-pressed="true" aria-label="Vindvarning för landområden"><span data-v-bd8e0e21="">On</span></div>
+      </div>
+    </div>
+    <hr data-v-bd8e0e21="">
+  </div>
+</div>"
+`;
+
+exports[`Warning.vue snapshots > should match snapshot for different severity levels > severity-1 1`] = `
+"<div data-v-bd8e0e21="" class="symbol-list-table light-theme">
+  <div data-v-bd8e0e21="" class="symbol-list-cell symbol-list-cell-image">
+    <div data-v-bd8e0e21="" class="level-0 wind symbol-list-image-column symbol-list-image warning-image" aria-label=" tuulivaroitus maa‑alueille"></div>
+  </div>
+  <div data-v-bd8e0e21="" class="symbol-list-cell symbol-list-cell-text">
+    <div data-v-bd8e0e21="" class="symbol-list-text-select">
+      <!-- eslint-disable-next-line vue/no-v-html -->
+      <div data-v-bd8e0e21="" class="item-text symbol-list-text">Tuulivaroitus maa‑alueille</div>
+      <div data-v-bd8e0e21="" class="symbol-list-select-container d-none d-md-table-cell">
+        <div data-v-bd8e0e21="" id="fmi-warnings-flag-wind" class="symbol-list-select flag-selected d-md-block focus-ring d-none" role="button" tabindex="0" aria-pressed="true" aria-label="Tuulivaroitus maa‑alueille"><span data-v-bd8e0e21="">On</span></div>
+      </div>
+    </div>
+    <hr data-v-bd8e0e21="">
+  </div>
+</div>"
+`;
+
+exports[`Warning.vue snapshots > should match snapshot for different severity levels > severity-2 1`] = `
+"<div data-v-bd8e0e21="" class="symbol-list-table light-theme">
+  <div data-v-bd8e0e21="" class="symbol-list-cell symbol-list-cell-image">
+    <div data-v-bd8e0e21="" class="level-2 wind symbol-list-image-column symbol-list-image warning-image" aria-label="Mahdollisesti vaarallinen tuulivaroitus maa‑alueille"></div>
+  </div>
+  <div data-v-bd8e0e21="" class="symbol-list-cell symbol-list-cell-text">
+    <div data-v-bd8e0e21="" class="symbol-list-text-select">
+      <!-- eslint-disable-next-line vue/no-v-html -->
+      <div data-v-bd8e0e21="" class="item-text symbol-list-text">Tuulivaroitus maa‑alueille</div>
+      <div data-v-bd8e0e21="" class="symbol-list-select-container d-none d-md-table-cell">
+        <div data-v-bd8e0e21="" id="fmi-warnings-flag-wind" class="symbol-list-select flag-selected d-md-block focus-ring d-none" role="button" tabindex="0" aria-pressed="true" aria-label="Tuulivaroitus maa‑alueille"><span data-v-bd8e0e21="">On</span></div>
+      </div>
+    </div>
+    <hr data-v-bd8e0e21="">
+  </div>
+</div>"
+`;
+
+exports[`Warning.vue snapshots > should match snapshot for different severity levels > severity-3 1`] = `
+"<div data-v-bd8e0e21="" class="symbol-list-table light-theme">
+  <div data-v-bd8e0e21="" class="symbol-list-cell symbol-list-cell-image">
+    <div data-v-bd8e0e21="" class="level-3 wind symbol-list-image-column symbol-list-image warning-image" aria-label="Vaarallinen tuulivaroitus maa‑alueille"></div>
+  </div>
+  <div data-v-bd8e0e21="" class="symbol-list-cell symbol-list-cell-text">
+    <div data-v-bd8e0e21="" class="symbol-list-text-select">
+      <!-- eslint-disable-next-line vue/no-v-html -->
+      <div data-v-bd8e0e21="" class="item-text symbol-list-text">Tuulivaroitus maa‑alueille</div>
+      <div data-v-bd8e0e21="" class="symbol-list-select-container d-none d-md-table-cell">
+        <div data-v-bd8e0e21="" id="fmi-warnings-flag-wind" class="symbol-list-select flag-selected d-md-block focus-ring d-none" role="button" tabindex="0" aria-pressed="true" aria-label="Tuulivaroitus maa‑alueille"><span data-v-bd8e0e21="">On</span></div>
+      </div>
+    </div>
+    <hr data-v-bd8e0e21="">
+  </div>
+</div>"
+`;
+
+exports[`Warning.vue snapshots > should match snapshot for different severity levels > severity-4 1`] = `
+"<div data-v-bd8e0e21="" class="symbol-list-table light-theme">
+  <div data-v-bd8e0e21="" class="symbol-list-cell symbol-list-cell-image">
+    <div data-v-bd8e0e21="" class="level-4 wind symbol-list-image-column symbol-list-image warning-image" aria-label="Hyvin vaarallinen tuulivaroitus maa‑alueille"></div>
+  </div>
+  <div data-v-bd8e0e21="" class="symbol-list-cell symbol-list-cell-text">
+    <div data-v-bd8e0e21="" class="symbol-list-text-select">
+      <!-- eslint-disable-next-line vue/no-v-html -->
+      <div data-v-bd8e0e21="" class="item-text symbol-list-text">Tuulivaroitus maa‑alueille</div>
+      <div data-v-bd8e0e21="" class="symbol-list-select-container d-none d-md-table-cell">
+        <div data-v-bd8e0e21="" id="fmi-warnings-flag-wind" class="symbol-list-select flag-selected d-md-block focus-ring d-none" role="button" tabindex="0" aria-pressed="true" aria-label="Tuulivaroitus maa‑alueille"><span data-v-bd8e0e21="">On</span></div>
+      </div>
+    </div>
+    <hr data-v-bd8e0e21="">
+  </div>
+</div>"
+`;
+
+exports[`Warning.vue snapshots > should match snapshot for hidden warning 1`] = `
+"<div data-v-bd8e0e21="" class="symbol-list-table light-theme">
+  <div data-v-bd8e0e21="" class="symbol-list-cell symbol-list-cell-image">
+    <div data-v-bd8e0e21="" class="level-3 wind symbol-list-image-column symbol-list-image warning-image" aria-label="Vaarallinen tuulivaroitus maa‑alueille"></div>
+  </div>
+  <div data-v-bd8e0e21="" class="symbol-list-cell symbol-list-cell-text">
+    <div data-v-bd8e0e21="" class="symbol-list-text-select">
+      <!-- eslint-disable-next-line vue/no-v-html -->
+      <div data-v-bd8e0e21="" class="item-text symbol-list-text">Tuulivaroitus maa‑alueille</div>
+      <div data-v-bd8e0e21="" class="symbol-list-select-container d-none d-md-table-cell">
+        <div data-v-bd8e0e21="" id="fmi-warnings-flag-wind" class="symbol-list-select flag-unselected d-md-block focus-ring d-none" role="button" tabindex="0" aria-pressed="false" aria-label="Tuulivaroitus maa‑alueille"><span data-v-bd8e0e21="">Off</span></div>
+      </div>
+    </div>
+    <hr data-v-bd8e0e21="">
+  </div>
+</div>"
+`;
+
+exports[`Warning.vue snapshots > should match snapshot when not hideable 1`] = `
+"<div data-v-bd8e0e21="" class="symbol-list-table light-theme">
+  <div data-v-bd8e0e21="" class="symbol-list-cell symbol-list-cell-image">
+    <div data-v-bd8e0e21="" class="level-3 wind symbol-list-image-column symbol-list-image warning-image" aria-label="Vaarallinen tuulivaroitus maa‑alueille"></div>
+  </div>
+  <div data-v-bd8e0e21="" class="symbol-list-cell symbol-list-cell-text">
+    <div data-v-bd8e0e21="" class="symbol-list-text-select">
+      <!-- eslint-disable-next-line vue/no-v-html -->
+      <div data-v-bd8e0e21="" class="item-text symbol-list-text">Tuulivaroitus maa‑alueille</div>
+      <div data-v-bd8e0e21="" class="symbol-list-select-container d-none d-md-table-cell">
+        <div data-v-bd8e0e21="" id="fmi-warnings-flag-wind" class="symbol-list-select flag-selected focus-ring d-none" role="button" tabindex="0" aria-pressed="true" aria-label="Tuulivaroitus maa‑alueille"><span data-v-bd8e0e21="">On</span></div>
+      </div>
+    </div>
+    <hr data-v-bd8e0e21="">
+  </div>
+</div>"
+`;