@mappedin/viewer 0.32.1-fb06d51.0 → 0.32.2-a6589fc.0

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-fb06d51.0",
+  "version": "0.32.2-a6589fc.0",
   "type": "module",
   "browser": "./dist/index.js",
   "license": "UNLICENSED",
@@ -18,7 +18,7 @@
   },
   "devDependencies": {
     "@ladle/react": "^2.17.2",
-    "@mappedin/mappedin-js": "6.0.1-beta.19",
+    "@mappedin/mappedin-js": "6.0.1-canary-v6-384dc34.347",
     "@mappedin/mvf": "2.0.1-a2db810.0",
     "@mappedin/self-serve-icons": "1.65.0-alpha.SRV-1916-new-iot-icons.1734461649",
     "@testing-library/jest-dom": "^6.6.2",
@@ -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"
   }
 }

package/dist/types/src/components/metadata-card/carousel.d.ts

@@ -1,6 +0,0 @@
-type TCarouselProps = {
-    imageURLs: string[];
-    onFullScreenGalleryOpen?: () => void;
-};
-export declare const Carousel: React.FC<TCarouselProps>;
-export {};