@mappedin/viewer 0.32.1-6eb62a3.0 → 0.32.1-e9092a6.0

package/dist/types/src/components/async-image/index.d.ts

@@ -2,6 +2,7 @@ type TAsyncImageProps = {
     src?: string | string[];
     alt?: string;
     style?: React.CSSProperties;
+    role?: string;
 };
 declare const AsyncImage: React.FC<TAsyncImageProps>;
 export default AsyncImage;

package/e2e-tests/directions-state.spec.ts

@@ -0,0 +1,74 @@
+import { expect } from '@playwright/test';
+import { testDefaultAndEmbedded } from './test-utils';
+
+testDefaultAndEmbedded(
+	'DIRECTIONS state',
+	async ({ page }) => {
+		await expect(page).toHaveScreenshot();
+	},
+	{
+		params: {
+			location: 's_89fd600b7990d544',
+		},
+		state: '/directions',
+	},
+);
+
+testDefaultAndEmbedded(
+	'DIRECTIONS state: level selector open',
+	async ({ page }) => {
+		await page.locator('#level-selector').first().click();
+		await expect(page).toHaveScreenshot();
+	},
+	{
+		params: {
+			location: 's_89fd600b7990d544',
+		},
+		state: '/directions',
+	},
+);
+
+testDefaultAndEmbedded(
+	'DIRECTIONS state: from selection',
+	async ({ page }) => {
+		await page.waitForTimeout(500);
+		await expect(page).toHaveScreenshot();
+	},
+	{
+		params: {
+			location: 's_89fd600b7990d544',
+			departure: 's_353c086e223c6984',
+		},
+		state: '/directions',
+	},
+);
+
+testDefaultAndEmbedded(
+	'DIRECTIONS state: from dropped pin',
+	async ({ page }) => {
+		await page.waitForTimeout(500);
+		await expect(page).toHaveScreenshot();
+	},
+	{
+		params: {
+			location: 's_89fd600b7990d544',
+			departure: '-29.22599807556308,-51.35458385297357,m_8d8b9669cc38f561',
+		},
+		state: '/directions',
+	},
+);
+
+testDefaultAndEmbedded(
+	'DIRECTIONS state: from nearest entrance',
+	async ({ page }) => {
+		await page.waitForTimeout(500);
+		await expect(page).toHaveScreenshot();
+	},
+	{
+		params: {
+			location: 's_89fd600b7990d544',
+			departure: 'e_1dcf257acc86da27+e_563524d9b2a2e04f+e_a9ce9893f5fbe9c6',
+		},
+		state: '/directions',
+	},
+);

package/e2e-tests/playwright.config.ts

@@ -0,0 +1,77 @@
+import { defineConfig, devices } from '@playwright/test';
+import dotenv from 'dotenv';
+import path from 'path';
+import url from 'url';
+
+// Node.js modules don't have __dirname or __filename
+const __filename = url.fileURLToPath(import.meta.url);
+const __dirname = path.dirname(__filename);
+dotenv.config({ path: path.resolve(__dirname, '../.env') });
+
+const APP_PORT = process.env.PORT || 5173;
+
+/**
+ * See https://playwright.dev/docs/test-configuration.
+ */
+export default defineConfig({
+	testDir: '.',
+	/* Run tests in files in parallel */
+	fullyParallel: true,
+	/* Fail the build on CI if you accidentally left test.only in the source code. */
+	forbidOnly: !!process.env.CI,
+	/* Retry on CI only */
+	retries: process.env.CI ? 2 : 0,
+	/* Opt out of parallel tests on CI. */
+	workers: process.env.CI ? 1 : undefined,
+	outputDir: '../../../coverage/viewer-playwright',
+	/* Reporter to use. See https://playwright.dev/docs/test-reporters */
+	reporter: [['json', { outputFile: '../../coverage/viewer-playwright/report.json' }]],
+	/* Shared settings for all the projects below. See https://playwright.dev/docs/api/class-testoptions. */
+	use: {
+		/* Base URL to use in actions like `await page.goto('/')`. */
+		// baseURL: 'http://127.0.0.1:3000',
+
+		/* Collect trace when retrying the failed test. See https://playwright.dev/docs/trace-viewer */
+		trace: 'on-first-retry',
+	},
+
+	/* Road labels are especially flaky, so we allow more pixels to be different */
+	expect: {
+		toHaveScreenshot: { maxDiffPixels: 1000 },
+	},
+
+	/* Configure projects for major browsers */
+	projects: [
+		{
+			name: 'chromium',
+			use: { ...devices['Desktop Chrome'] },
+		},
+
+		{
+			name: 'firefox',
+			use: { ...devices['Desktop Firefox'] },
+		},
+
+		{
+			name: 'webkit',
+			use: { ...devices['Desktop Safari'] },
+		},
+
+		/* Test against mobile viewports. */
+		{
+			name: 'Mobile Chrome',
+			use: { ...devices['Pixel 5'] },
+		},
+		{
+			name: 'Mobile Safari',
+			use: { ...devices['iPhone 12'] },
+		},
+	],
+
+	/* Run your local dev server before starting the tests */
+	webServer: {
+		command: 'pnpm dev:playwright',
+		url: `http://localhost:${APP_PORT}`,
+		reuseExistingServer: !process.env.CI,
+	},
+});

package/e2e-tests/start-state.spec.ts

@@ -0,0 +1,42 @@
+import { expect } from '@playwright/test';
+import { testDefaultAndEmbedded } from './test-utils';
+
+testDefaultAndEmbedded('START state', async ({ page }) => {
+	await expect(page).toHaveScreenshot();
+});
+
+testDefaultAndEmbedded(
+	'START state: location selected',
+	async ({ page }) => {
+		await expect(page).toHaveScreenshot();
+	},
+	{
+		params: { location: 's_89fd600b7990d544' },
+	},
+);
+
+testDefaultAndEmbedded(
+	'START state: location image fullscreen',
+	async ({ page }) => {
+		await page.locator('#image-carousel').getByRole('option').click();
+		await expect(page).toHaveScreenshot();
+	},
+	{
+		params: { location: 's_89fd600b7990d544' },
+	},
+);
+
+testDefaultAndEmbedded('START state: search bar focused', async ({ page }) => {
+	await page.locator('input[type="search"]').click();
+	await expect(page).toHaveScreenshot();
+});
+
+testDefaultAndEmbedded('START state: search query typed', async ({ page }) => {
+	await page.locator('input[type="search"]').fill('bedroom');
+	await expect(page).toHaveScreenshot();
+});
+
+testDefaultAndEmbedded('START state: level selector open', async ({ page }) => {
+	await page.locator('#level-selector').first().click();
+	await expect(page).toHaveScreenshot();
+});

package/e2e-tests/test-utils.ts

@@ -0,0 +1,53 @@
+import { Page, test } from '@playwright/test';
+
+type TWaitForPageLoadOptions = {
+	params?: Record<string, string>;
+	state?: string;
+	embedded?: boolean;
+	featureFlags?: Record<string, unknown>;
+};
+
+export const waitForPageLoad = async (page: Page, options: TWaitForPageLoadOptions = {}) => {
+	// Mock feature flags from posthog
+	await page.route('https://ph-api.mappedin.com/**/*', (route) => {
+		route.fulfill({
+			body: JSON.stringify({
+				featureFlags: options.featureFlags ?? {},
+			}),
+			headers: {
+				'Content-Type': 'application/json',
+			},
+		});
+	});
+
+	const params = new URLSearchParams();
+	for (const [key, value] of Object.entries(options.params ?? {})) {
+		params.set(key, value.toString());
+	}
+	if (options.embedded) {
+		params.set('embedded', 'true');
+	}
+	const state = options.state ?? '/';
+	const url = 'http://localhost:5173/map/test-map' + state + '?' + params.toString();
+
+	await page.goto(url);
+	const spinner = page.locator('#app-loading-spinner');
+	await spinner.waitFor({ state: 'visible' });
+	await spinner.waitFor({ state: 'hidden' });
+};
+
+export const testDefaultAndEmbedded = (
+	title: string,
+	body: ({ page }: { page: Page }) => Promise<void>,
+	options: TWaitForPageLoadOptions = {},
+) => {
+	test(title, async ({ page }) => {
+		await waitForPageLoad(page, options);
+		await body({ page });
+	});
+
+	test(title + ' (embedded)', async ({ page }) => {
+		await waitForPageLoad(page, { ...options, embedded: true });
+		await body({ page });
+	});
+};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mappedin/viewer",
-  "version": "0.32.1-6eb62a3.0",
+  "version": "0.32.1-e9092a6.0",
   "type": "module",
   "browser": "./dist/index.js",
   "license": "UNLICENSED",
@@ -64,12 +64,9 @@
     "react-transition-group": "^4.4.5",
     "react-window": "^1.8.10",
     "styled-components": "6.0.7",
-    "tsx": "^4.7.1",
-    "typescript": "^5.3.0",
     "vite": "^5.4.10",
     "vite-plugin-css-injected-by-js": "^3.4.0",
     "vite-plugin-mkcert": "^1.17.4",
-    "vitest": "^1.4.0",
     "yargs": "^17.7.2",
     "zod": "^3.23.8"
   },
@@ -77,6 +74,7 @@
     "dev": "vite --host",
     "dev:yalc": "vite --host --force",
     "dev:test": "MOCK_DATA=true vite --host",
+    "dev:playwright": "PLAYWRIGHT=true vite --host",
     "build": "vite build && tsc --project tsconfig.build.json",
     "build:watch": "vite build --watch",
     "lint": "eslint . --ext ts,tsx --report-unused-disable-directives --max-warnings 0",
@@ -87,6 +85,8 @@
     "test:watch": "cross-env NODE_ENV=test vitest --typecheck",
     "test:cover": "cross-env NODE_ENV=test vitest run --coverage --typecheck",
     "test:update": "cross-env NODE_ENV=test vitest run -u --typecheck",
+    "test:playwright": "pnpm exec playwright test --config ./e2e-tests/playwright.config.ts",
+    "test:playwright:ui": "pnpm test:playwright --ui --output=../../coverage/viewer-playwright --reporter=null",
     "save-fixture": "tsx ./scripts/update-fixture.ts"
   }
 }