feat: add weather Edge App with hourly forecast

.gitignore

@@ -0,0 +1,8 @@
+node_modules/
+dist/
+*.log
+.DS_Store
+mock-data.yml
+static/js/*.js
+static/js/*.js.map
+screenshots/*.png

.ignore

@@ -0,0 +1 @@
+node_modules/

.prettierrc.json

@@ -0,0 +1,6 @@
+{
+  "$schema": "https://json.schemastore.org/prettierrc",
+  "semi": false,
+  "singleQuote": true,
+  "printWidth": 80
+}

e2e/screenshots.spec.ts

@@ -0,0 +1,96 @@
+import { test } from '@playwright/test'
+import {
+  createMockScreenlyForScreenshots,
+  getScreenshotsDir,
+  RESOLUTIONS,
+  setupClockMock,
+  setupOpenWeatherMocks,
+  setupScreenlyJsMock,
+} from '@screenly/edge-apps/test/screenshots'
+import {
+  mockForecastResponse,
+  mockGeocodingResponse,
+  mockWeatherResponse,
+} from './weather-mocks'
+import path from 'path'
+
+const { screenlyJsContent } = createMockScreenlyForScreenshots(
+  {
+    coordinates: [37.3893889, -122.0832101],
+    location: 'Mountain View, CA',
+  },
+  {
+    display_errors: 'false',
+    override_timezone: 'America/Los_Angeles',
+    override_locale: 'en',
+    openweathermap_api_key: 'mock-api-key',
+  },
+)
+
+const { screenlyJsContent: screenlyJsContentNoApiKey } =
+  createMockScreenlyForScreenshots(
+    {
+      coordinates: [37.3893889, -122.0832101],
+      location: 'Mountain View, CA',
+    },
+    {
+      display_errors: 'false',
+      override_timezone: 'America/Los_Angeles',
+      override_locale: 'en',
+    },
+  )
+
+for (const { width, height } of RESOLUTIONS) {
+  test(`screenshot ${width}x${height}`, async ({ browser }) => {
+    const screenshotsDir = getScreenshotsDir()
+
+    const context = await browser.newContext({ viewport: { width, height } })
+    const page = await context.newPage()
+
+    // Setup mocks
+    await setupClockMock(page)
+    await setupScreenlyJsMock(page, screenlyJsContent)
+    await setupOpenWeatherMocks(page, {
+      geocoding: mockGeocodingResponse,
+      weather: mockWeatherResponse,
+      forecast: mockForecastResponse,
+    })
+
+    await page.goto('/')
+    await page.waitForLoadState('networkidle')
+
+    await page.screenshot({
+      path: path.join(screenshotsDir, `${width}x${height}.png`),
+      fullPage: false,
+    })
+
+    await context.close()
+  })
+}
+
+const NO_API_KEY_RESOLUTIONS = [
+  { width: 3840, height: 2160 },
+  { width: 2160, height: 3840 },
+]
+
+for (const { width, height } of NO_API_KEY_RESOLUTIONS) {
+  test(`screenshot no-api-key ${width}x${height}`, async ({ browser }) => {
+    const screenshotsDir = getScreenshotsDir()
+
+    const context = await browser.newContext({ viewport: { width, height } })
+    const page = await context.newPage()
+
+    await setupClockMock(page)
+    await setupScreenlyJsMock(page, screenlyJsContentNoApiKey)
+
+    await page.goto('/')
+    await page.waitForLoadState('networkidle')
+
+    await page.screenshot({
+      path: path.join(screenshotsDir, `no-api-key-${width}x${height}.png`),
+      fullPage: false,
+    })
+
+    await context.close()
+  })
+}