Adds playwright component fixture tests

test/componentFixtures/playwright/tests/imageCarousel.spec.ts

@@ -0,0 +1,123 @@
+/*---------------------------------------------------------------------------------------------
+ *  Copyright (c) Microsoft Corporation. All rights reserved.
+ *  Licensed under the MIT License. See License.txt in the project root for license information.
+ *--------------------------------------------------------------------------------------------*/
+
+import { test, expect } from '@playwright/test';
+import { openFixture } from './utils.js';
+
+test.describe('Image Carousel', () => {
+
+	test('clicking next arrow advances to the next image', async ({ page }) => {
+		await openFixture(page, 'imageCarousel/imageCarousel/SingleSection/Dark');
+
+		const counter = page.locator('.image-counter');
+		await expect(counter).toHaveText('1 / 5');
+
+		const nextBtn = page.locator('button.next-arrow');
+		await nextBtn.click();
+
+		await expect(counter).toHaveText('2 / 5');
+	});
+
+	test('clicking previous arrow goes back', async ({ page }) => {
+		await openFixture(page, 'imageCarousel/imageCarousel/SingleSectionMiddleImage/Dark');
+
+		const counter = page.locator('.image-counter');
+		// Starts at image 3 (index 2)
+		await expect(counter).toHaveText('3 / 5');
+
+		const prevBtn = page.locator('button.prev-arrow');
+		await prevBtn.click();
+
+		await expect(counter).toHaveText('2 / 5');
+	});
+
+	test('previous button is disabled on first image', async ({ page }) => {
+		await openFixture(page, 'imageCarousel/imageCarousel/SingleSection/Dark');
+
+		const prevBtn = page.locator('button.prev-arrow');
+		await expect(prevBtn).toBeDisabled();
+
+		const nextBtn = page.locator('button.next-arrow');
+		await expect(nextBtn).toBeEnabled();
+	});
+
+	test('next button is disabled on last image', async ({ page }) => {
+		await openFixture(page, 'imageCarousel/imageCarousel/SingleSection/Dark');
+
+		const nextBtn = page.locator('button.next-arrow');
+
+		// Click through to the last image (5 images, need 4 clicks)
+		for (let i = 0; i < 4; i++) {
+			await nextBtn.click();
+		}
+
+		await expect(nextBtn).toBeDisabled();
+
+		const counter = page.locator('.image-counter');
+		await expect(counter).toHaveText('5 / 5');
+	});
+
+	test('caption updates when navigating', async ({ page }) => {
+		await openFixture(page, 'imageCarousel/imageCarousel/SingleSection/Dark');
+
+		const caption = page.locator('.caption-text');
+		// First image: "A red image"
+		await expect(caption).toHaveText('A red image');
+
+		await page.locator('button.next-arrow').click();
+		// Second image: "A green image"
+		await expect(caption).toHaveText('A green image');
+
+		await page.locator('button.next-arrow').click();
+		// Third image has no caption — element should be hidden
+		await expect(caption).toBeHidden();
+	});
+
+	test('clicking a thumbnail selects that image', async ({ page }) => {
+		await openFixture(page, 'imageCarousel/imageCarousel/SingleSection/Dark');
+
+		const thumbnails = page.locator('button.thumbnail');
+		const counter = page.locator('.image-counter');
+
+		// Click the third thumbnail
+		await thumbnails.nth(2).click();
+		await expect(counter).toHaveText('3 / 5');
+
+		// The clicked thumbnail should be active
+		await expect(thumbnails.nth(2)).toHaveClass(/active/);
+	});
+
+	test('keyboard left/right arrow navigation works', async ({ page }) => {
+		await openFixture(page, 'imageCarousel/imageCarousel/SingleSection/Dark');
+
+		const counter = page.locator('.image-counter');
+		await expect(counter).toHaveText('1 / 5');
+
+		// Focus the slideshow container for keyboard events
+		await page.locator('.slideshow-container').focus();
+
+		await page.keyboard.press('ArrowRight');
+		await expect(counter).toHaveText('2 / 5');
+
+		await page.keyboard.press('ArrowRight');
+		await expect(counter).toHaveText('3 / 5');
+
+		await page.keyboard.press('ArrowLeft');
+		await expect(counter).toHaveText('2 / 5');
+	});
+
+	test('single image carousel disables both nav buttons', async ({ page }) => {
+		await openFixture(page, 'imageCarousel/imageCarousel/SingleImage/Dark');
+
+		const prevBtn = page.locator('button.prev-arrow');
+		const nextBtn = page.locator('button.next-arrow');
+
+		await expect(prevBtn).toBeDisabled();
+		await expect(nextBtn).toBeDisabled();
+
+		const counter = page.locator('.image-counter');
+		await expect(counter).toHaveText('1 / 1');
+	});
+});

test/componentFixtures/playwright/tests/utils.ts

@@ -0,0 +1,24 @@
+/*---------------------------------------------------------------------------------------------
+ *  Copyright (c) Microsoft Corporation. All rights reserved.
+ *  Licensed under the MIT License. See License.txt in the project root for license information.
+ *--------------------------------------------------------------------------------------------*/
+
+import { Page } from '@playwright/test';
+
+function getBaseURL(): string {
+	const port = process.env['COMPONENT_EXPLORER_PORT'];
+	if (!port) {
+		throw new Error('COMPONENT_EXPLORER_PORT is not set. Is the webServer running?');
+	}
+	return `http://localhost:${port}`;
+}
+
+/**
+ * Navigates to a component fixture in embedded mode and waits for it to render.
+ * @param waitForSelector - A CSS selector to wait for after navigation, indicating the fixture has rendered.
+ */
+export async function openFixture(page: Page, fixtureId: string, waitForSelector = '.image-carousel-editor'): Promise<void> {
+	const url = `${getBaseURL()}/___explorer?mode=embedded&fixture=${encodeURIComponent(fixtureId)}`;
+	await page.goto(url, { waitUntil: 'load' });
+	await page.locator(waitForSelector).waitFor({ state: 'visible', timeout: 20_000 });
+}