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

package/tests/README.md

@@ -0,0 +1,430 @@
+# SmartMet Alert Client - Tests
+
+This directory contains unit and integration tests for the SmartMet Alert Client project.
+
+## Test Environment
+
+- **Vitest**: Modern, fast testing framework for Vue 3
+- **@vue/test-utils**: Official Vue component testing library
+- **@testing-library/vue**: User-centric testing library
+- **jsdom**: DOM simulation in Node.js environment
+
+## Running Tests
+
+```bash
+# Run all tests
+npm test
+
+# Run tests in watch mode
+npm test
+
+# Run tests once (CI/CD)
+npm run test:run
+
+# Run tests in UI
+npm run test:ui
+
+# Generate coverage report
+npm run test:coverage
+```
+
+## Test Structure
+
+```
+tests/
+├── unit/                        # Unit tests
+│   ├── mixins/                 # Mixin tests
+│   │   ├── config.spec.js      # ✅ 30 tests
+│   │   ├── utils.spec.js       # ✅ 59 tests
+│   │   ├── i18n.spec.js        # ✅ 9 tests
+│   │   └── keycodes.spec.js    # ✅ 5 tests
+│   └── components/             # Component tests
+│       ├── AlertClient.spec.js # ✅ 28 tests
+│       ├── Days.spec.js        # ✅ 21 tests
+│       ├── DaySmall.spec.js    # ✅ 14 tests
+│       ├── DayLarge.spec.js    # ✅ 16 tests
+│       ├── Legend.spec.js      # ✅ 14 tests
+│       ├── GrayScaleToggle.spec.js # ✅ 22 tests
+│       ├── Warnings.spec.js    # ✅ 19 tests
+│       ├── Warning.spec.js     # ✅ 28 tests
+│       ├── MapLarge.spec.js    # ✅ 14 tests
+│       ├── MapSmall.spec.js    # ✅ 12 tests
+│       ├── Regions.spec.js     # ✅ 15 tests
+│       ├── Region.spec.js      # ✅ 20 tests
+│       ├── DescriptionWarning.spec.js # ✅ 29 tests
+│       ├── PopupRow.spec.js    # ✅ 20 tests
+│       └── RegionWarning.spec.js # ✅ 27 tests
+├── integration/                # Integration tests
+│   └── warning-flow.spec.js    # ✅ 17 tests
+├── fixtures/                   # Test data
+│   └── mockWarningData.js      # ✅ Implemented
+├── setup.js                    # ✅ Test environment configuration
+└── README.md                   # This file
+```
+
+## Implemented Tests (419 tests) ✅
+
+### Mixins
+
+#### utils.js (59 tests) ✅
+
+**Tested functionality:**
+
+- `uncapitalize()` - String manipulation
+- `warningType()` - Warning type parsing
+- `regionFromReference()` - Region ID parsing
+- `relativeCoverageFromReference()` - Coverage percentage parsing
+- `twoDigits()` - Number formatting
+- `text()` - Text extraction from warnings
+- `toTimeZone()` - Timezone conversion
+- `msSinceStartOfDay()` - Milliseconds since start of day
+- `validInterval()` - Time interval formatting
+- `effectiveDays()` - Effective days calculation
+- `createWeatherWarning()` - Weather warning creation
+- `createFloodWarning()` - Flood warning creation
+- `isValid()` - Warning validation
+- `createDays()` - Days creation
+- `getMaxSeverities()` - Maximum severity calculation
+- `createLegend()` - Legend creation
+- Test coverage: ~85%
+
+#### i18n.js (9 tests) ✅
+
+**Tested functionality:**
+
+- `t()` - Translation retrieval
+- Multi-language support (fi, sv, en)
+- HTML sanitization
+- Error handling (null, undefined, unknown keys)
+- Test coverage: ~90%
+
+#### config.js (30 tests) ✅
+
+**Tested functionality:**
+
+- Configuration constants (timezone, locales, limits)
+- `warningTypes` Map (land/sea regions)
+- `regionIds` array
+- Geometry data structure
+- Color definitions (light/dark, gray themes)
+- `warningIcon()` - Warning icon generation
+- Test coverage: ~90%
+
+#### keycodes.js (5 tests) ✅
+
+**Tested functionality:**
+
+- Key code definitions (Arrow keys, Home, End)
+- Test coverage: 100%
+
+### Components
+
+#### AlertClient.vue (28 tests) ✅
+
+**Tested functionality:**
+
+- Component mounting and initialization
+- Props validation
+- Timer functionality (initTimer, cancelTimer, update)
+- Event emissions (loaded, themeChanged, update-warnings)
+- Data processing
+- Day selection
+- Warnings toggle
+- Error handling
+- Computed properties
+- Visibility change handling
+- Test coverage: ~70%
+
+#### Days.vue (21 tests) ✅
+
+**Tested functionality:**
+
+- Component mounting
+- Props validation (selectedDay, staticDays, timeOffset)
+- Day selection and event emissions
+- Keyboard navigation (Arrow keys, Home, End)
+- Boundary handling (0-4 days)
+- Theme support
+- Test coverage: ~80%
+
+#### DaySmall.vue (14 tests) ✅
+
+**Tested functionality:**
+
+- Computed properties (weekday, severity, date)
+- Static vs. dynamic date display
+- Time ranges (0...24h, 24...48h, etc.)
+- Aria-label generation
+- Theme and severity classes
+- Content rendering
+- Test coverage: ~75%
+
+#### DayLarge.vue (16 tests) ✅
+
+**Tested functionality:**
+
+- Computed properties (warningsTitle, updatedTitle, atTime)
+- Date formatting (static/dynamic)
+- Event handling (loaded)
+- Props validation
+- Content rendering
+- Test coverage: ~70%
+
+#### Legend.vue (14 tests) ✅
+
+**Tested functionality:**
+
+- Component mounting
+- Computed properties (warnings, texts)
+- Toggle functionality
+- Event emissions (warningsToggled, themeChanged, showAllWarnings)
+- Props validation (grayScaleSelector, theme)
+- Window resize handling
+- Test coverage: ~75%
+
+#### GrayScaleToggle.vue (22 tests) ✅
+
+**Tested functionality:**
+
+- Conditional rendering (grayScaleSelector)
+- Theme detection (gray/normal)
+- Toggle functionality
+- Event emissions (themeChanged)
+- CSS classes (selected/unselected)
+- Accessibility (ARIA attributes)
+- Test coverage: ~85%
+
+#### Warnings.vue (19 tests) ✅
+
+**Tested functionality:**
+
+- Component mounting (empty/full warnings)
+- Computed properties (warnings, hiddenWarnings, noWarnings)
+- Event handling (warningsToggled, showAllWarnings)
+- Theme support for all 4 themes
+- Warning components rendering
+- Test coverage: ~75%
+
+#### Warning.vue (28 tests) ✅
+
+**Tested functionality:**
+
+- Computed properties (id, title, warningLevelText, toggleText)
+- Fields mixin (typeClass, rotation, invertedRotation, severity)
+- Toggle functionality (on/off)
+- CSS classes (severity, type, flag-selected/unselected)
+- Accessibility (ARIA attributes)
+- Severity level validation (2-4)
+- Test coverage: ~80%
+
+#### Regions.vue (15 tests) ✅
+
+**Tested functionality:**
+
+- Component mounting (with stubbed Region component)
+- Computed properties (landText, seaText, regions filtering)
+- Warning detection (anyLandWarnings, anySeaWarnings)
+- Navigation href calculation
+- Conditional header rendering
+- Navigation methods
+- Test coverage: ~70%
+
+#### Region.vue (20 tests) ✅
+
+**Tested functionality:**
+
+- Component mounting and initialization (open: false)
+- Computed properties (identifier, regionName, warningsSummary, reducedWarnings)
+- Coverage filtering (>= 20%)
+- Toggle functionality (accordion)
+- ARIA attributes (aria-expanded, aria-controls, aria-labelledby)
+- Panel visibility (hidden attribute)
+- RegionWarning component rendering
+- Test coverage: ~75%
+
+#### MapLarge.vue (14 tests) ✅
+
+**Tested functionality:**
+
+- SVG rendering and viewBox (0 0 440 550)
+- Loading state and spinner
+- Computed properties (size: Large, strokeWidth, strokeOpacity, mapText)
+- Theme support
+- Accessibility (ARIA attributes, focus, role)
+- Test coverage: ~60%
+
+#### MapSmall.vue (12 tests) ✅
+
+**Tested functionality:**
+
+- SVG rendering and dimensions (75x120)
+- Computed properties (size: Small, strokeWidth: 0.6, pathsNeeded)
+- Unique ID per day index
+- CSS classes (finland-small, map-small)
+- Test coverage: ~60%
+
+### Integration Tests
+
+#### warning-flow.spec.js (17 tests) ✅
+
+**Tested functionality:**
+
+- Complete warning data processing
+- Weather and flood warning parsing
+- Legend creation and ordering
+- Region creation with warnings
+- Parent-child hierarchy
+- Coverage handling
+- Multi-language support
+- HTML decoding
+- Time interval calculations
+- Severity calculation per day
+- Test coverage: ~80%
+
+#### DescriptionWarning.vue (29 tests) ✅
+
+**Tested functionality:**
+
+- Computed properties (warningTitle, warningLevel, warningDetails, info, validText)
+- Fields mixin integration (typeClass, rotation, invertedRotation, severity)
+- Multi-language info display (fi, sv, en)
+- External link rendering and hiding
+- Content rendering (title, interval, description, link)
+- CSS classes (severity, type, rotation, theme)
+- Accessibility (aria-label, aria-hidden, target="\_blank")
+- Test coverage: ~80%
+
+#### PopupRow.vue (20 tests) ✅
+
+**Tested functionality:**
+
+- Component mounting with default props
+- Fields mixin integration (typeClass, rotation, invertedRotation, severity)
+- Content rendering (interval, symbol text)
+- CSS classes (severity, type, rotation, text-level)
+- Table structure (row, cells)
+- Level-0 warning hiding
+- Test coverage: ~85%
+
+#### RegionWarning.vue (27 tests) ✅
+
+**Tested functionality:**
+
+- Computed properties (warningLevel, warningTypeText, warningDetails)
+- Fields mixin integration (typeClass, rotation, severity)
+- Direction and text handling (null safety)
+- Different warning types (wind, seaWind, rain, thunderStorm)
+- CSS classes (all required classes, rotation)
+- Accessibility (aria-label with details, aria-hidden)
+- Test coverage: ~85%
+
+## Overall Summary
+
+- **Test files**: 20
+- **Total tests**: 419
+- **Passed**: 419 (100%)
+- **Failed**: 0
+- **Overall coverage**: ~70-80%
+- **Critical parts coverage**: 85-90%
+
+### Tested Files Breakdown:
+
+**Mixins (4/4):**
+
+- ✅ utils.js - 59 tests
+- ✅ config.js - 30 tests
+- ✅ i18n.js - 9 tests
+- ✅ keycodes.js - 5 tests
+
+**Components (15/15):**
+
+- ✅ AlertClient.vue - 28 tests
+- ✅ Days.vue - 21 tests
+- ✅ DaySmall.vue - 14 tests
+- ✅ DayLarge.vue - 16 tests
+- ✅ Legend.vue - 14 tests
+- ✅ GrayScaleToggle.vue - 22 tests
+- ✅ Warnings.vue - 19 tests
+- ✅ Warning.vue - 28 tests
+- ✅ Regions.vue - 15 tests
+- ✅ Region.vue - 20 tests
+- ✅ MapLarge.vue - 14 tests
+- ✅ MapSmall.vue - 12 tests
+- ✅ RegionWarning.vue - 27 tests
+- ✅ DescriptionWarning.vue - 29 tests
+- ✅ PopupRow.vue - 20 tests
+
+**Integration Tests (1/1):**
+
+- ✅ warning-flow.spec.js - 17 tests
+
+## Mock Data Structure
+
+### mockWarningData.js
+
+Contains sample data for testing:
+
+- `mockWeatherUpdateTime` - Weather warnings update time
+- `mockFloodUpdateTime` - Flood warnings update time
+- `mockWeatherWarning` - Wind warning
+- `mockThunderStormWarning` - Thunderstorm warning
+- `mockSeaWindWarning` - Sea wind warning
+- `mockFloodWarning` - Flood warning
+- `mockCoverageWarning` - Coverage warning
+- `mockWarningsData` - Complete warning dataset
+
+## Testing Strategies
+
+### Unit Tests
+
+- Test individual functions and methods separately
+- Mock dependencies
+- Focus on logic and calculations
+
+### Component Tests
+
+- Test component behavior
+- Test props, events, slots
+- Test computed properties and watchers
+- Mock external dependencies (API calls, DOM)
+
+### Integration Tests
+
+- Test component interactions
+- Test data flows through the application
+- Test user scenarios
+
+## Important Notes
+
+- Tests use jsdom environment for DOM simulation
+- Timezone tests assume Europe/Helsinki timezone
+- GeoJSON and SVG tests require geometry data mocking
+- Fetch calls are mocked
+
+## Writing a Test
+
+Example of a simple test:
+
+```javascript
+import { describe, it, expect } from 'vitest'
+import { mount } from '@vue/test-utils'
+import MyComponent from '@/components/MyComponent.vue'
+
+describe('MyComponent', () => {
+  it('should render correctly', () => {
+    const wrapper = mount(MyComponent, {
+      props: {
+        title: 'Test Title',
+      },
+    })
+
+    expect(wrapper.text()).toContain('Test Title')
+  })
+})
+```
+
+## Further Information
+
+- [Vitest Documentation](https://vitest.dev/)
+- [Vue Test Utils Documentation](https://test-utils.vuejs.org/)
+- [Testing Library Documentation](https://testing-library.com/docs/vue-testing-library/intro/)

package/tests/fixtures/mockWarningData.ts

@@ -0,0 +1,152 @@
+import type {
+  GeoJSONFeature,
+  GeoJSONFeatureCollection,
+  WarningsData,
+} from '@/types'
+
+interface MockUpdateTime {
+  features: Array<{
+    properties: {
+      update_time: string
+    }
+  }>
+}
+
+export const mockWeatherUpdateTime: MockUpdateTime = {
+  features: [
+    {
+      properties: {
+        update_time: '2025-10-31T12:00:00Z',
+      },
+    },
+  ],
+}
+
+export const mockFloodUpdateTime: MockUpdateTime = {
+  features: [
+    {
+      properties: {
+        update_time: '2025-10-31T11:00:00Z',
+      },
+    },
+  ],
+}
+
+export const mockWeatherWarning: GeoJSONFeature = {
+  type: 'Feature',
+  properties: {
+    identifier: 'test-warning-wind-1',
+    warning_context: 'wind',
+    severity: 'level-3',
+    effective_from: '2025-10-31T12:00:00Z',
+    effective_until: '2025-11-01T12:00:00Z',
+    reference: 'fi-warning#county.1',
+    physical_direction: 270,
+    physical_value: 25,
+    info_fi: 'Kovaa tuulta',
+    info_sv: 'Hårt blåsväder',
+    info_en: 'Strong wind',
+  },
+  geometry: null,
+}
+
+export const mockThunderStormWarning: GeoJSONFeature = {
+  type: 'Feature',
+  properties: {
+    identifier: 'test-warning-thunder-1',
+    warning_context: 'thunder-storm',
+    severity: 'level-4',
+    effective_from: '2025-10-31T14:00:00Z',
+    effective_until: '2025-10-31T20:00:00Z',
+    reference: 'fi-warning#county.2',
+    info_fi: 'Ukkosmyrsky',
+    info_sv: 'Åskväder',
+    info_en: 'Thunderstorm',
+  },
+  geometry: null,
+}
+
+export const mockSeaWindWarning: GeoJSONFeature = {
+  type: 'Feature',
+  properties: {
+    identifier: 'test-warning-seawind-1',
+    warning_context: 'sea-wind',
+    severity: 'level-2',
+    effective_from: '2025-10-31T12:00:00Z',
+    effective_until: '2025-11-01T12:00:00Z',
+    reference: 'fi-warning#sea_region.B1N',
+    physical_direction: 180,
+    physical_value: '15',
+    info_fi: 'Kovaa tuulta merellä',
+    info_sv: 'Hårt blåsväder på havet',
+    info_en: 'Strong wind at sea',
+  },
+  geometry: null,
+}
+
+export const mockFloodWarning: GeoJSONFeature = {
+  type: 'Feature',
+  properties: {
+    identifier: 'test-warning-flood-1',
+    severity: 'Severe',
+    onset: '2025-10-31T12:00:00Z',
+    expires: '2025-11-02T12:00:00Z',
+    reference: 'fi-warning#county.5',
+    description: encodeURIComponent(JSON.stringify(['Tulvavaara'])),
+    language: 'fi-FI',
+  },
+  geometry: null,
+}
+
+export const mockCoverageWarning: GeoJSONFeature = {
+  type: 'Feature',
+  properties: {
+    identifier: 'test-warning-coverage-1',
+    warning_context: 'rain',
+    severity: 'level-3',
+    effective_from: '2025-10-31T12:00:00Z',
+    effective_until: '2025-11-01T12:00:00Z',
+    reference: 'fi-warning#county.6',
+    coverage_references: 'fi-warning#county.6?c=75',
+    representative_x: 300000,
+    representative_y: 7000000,
+    info_fi: 'Runsasta sadetta',
+    info_sv: 'Kraftigt regn',
+    info_en: 'Heavy rain',
+  },
+  geometry: {
+    type: 'Polygon',
+    coordinates: [
+      [
+        [300000, 7000000],
+        [310000, 7000000],
+        [310000, 7010000],
+        [300000, 7010000],
+        [300000, 7000000],
+      ],
+    ],
+  },
+}
+
+export const mockWeatherWarnings: GeoJSONFeatureCollection = {
+  type: 'FeatureCollection',
+  features: [
+    mockWeatherWarning,
+    mockThunderStormWarning,
+    mockSeaWindWarning,
+    mockCoverageWarning,
+  ],
+}
+
+export const mockFloodWarnings: GeoJSONFeatureCollection = {
+  type: 'FeatureCollection',
+  features: [mockFloodWarning],
+}
+
+export const mockWarningsData: WarningsData = {
+  weather_update_time:
+    mockWeatherUpdateTime as unknown as GeoJSONFeatureCollection,
+  flood_update_time: mockFloodUpdateTime as unknown as GeoJSONFeatureCollection,
+  weather_finland_active_all: mockWeatherWarnings,
+  flood_finland_active_all: mockFloodWarnings,
+}