@atlaskit/navigation-system 0.182.0 → 1.0.0

package/src/__tests__/playwright/legacy-vars.spec.tsx

@@ -1,298 +0,0 @@
-/* eslint-disable testing-library/prefer-screen-queries */
-import invariant from 'tiny-invariant';
-
-import { expect, type Locator, type Page, test } from '@af/integration-testing';
-
-/**
- * Waits for a single frame.
- *
- * This is helpful for avoiding flake by ensuring that drag events have been processed,
- * because `pragmatic-drag-and-drop` will schedule updates into frames.
- */
-async function waitForFrame(page: Page) {
-	await page.evaluate(() => new Promise((resolve) => requestAnimationFrame(resolve)));
-}
-
-/**
- * Drags the `locator` by the given `offset`.
- */
-async function dragByOffset({
-	page,
-	locator,
-	offset,
-	shouldDrop,
-}: {
-	page: Page;
-	locator: Locator;
-	offset: {
-		x: number;
-		y: number;
-	};
-	shouldDrop: boolean;
-}) {
-	await locator.hover();
-
-	const rect = await locator.boundingBox();
-	invariant(rect, 'Could not obtain bounding box');
-
-	// Start drag from top left of element
-	const dragStartPosition = {
-		x: rect.x,
-		y: rect.y,
-	};
-
-	const dragEndPosition = {
-		x: dragStartPosition.x + offset.x,
-		y: dragStartPosition.y + offset.y,
-	};
-
-	await page.mouse.move(dragStartPosition.x, dragStartPosition.y);
-	await page.mouse.down();
-	/**
-	 * Two mouse moves are required for reliable `dragover` dispatch.
-	 * https://playwright.dev/docs/input#dragging-manually
-	 */
-	await page.mouse.move(dragEndPosition.x, dragEndPosition.y);
-	await page.mouse.move(dragEndPosition.x, dragEndPosition.y);
-	/**
-	 * Waiting for a frame so Pragmatic drag and drop events are dispatched.
-	 */
-	await waitForFrame(page);
-
-	if (shouldDrop) {
-		await page.mouse.up();
-	}
-}
-
-const viewportSize = {
-	large: {
-		width: 1480,
-		height: 720,
-	},
-	small: {
-		width: 768,
-		height: 720,
-	},
-};
-
-/**
- * Set a consistent viewport size that's large enough that no slots are overlays.
- */
-test.beforeEach(async ({ page }) => {
-	await page.setViewportSize(viewportSize.large);
-});
-
-test.describe('legacy CSS variables', () => {
-	test.beforeEach(async ({ page }) => {
-		await page.visitExample('design-system', 'navigation-system', 'legacy-var-testing');
-	});
-
-	test('panel CSS variable updates during a drag', async ({ page }) => {
-		// Only Main + Panel will be mounted
-		await page.getByRole('radio', { name: 'Panel' }).click();
-
-		const panel = page.getByRole('region', { name: 'Panel' });
-		const legacyVarSpy = page.getByTestId('legacy-var-spy');
-
-		// Width should be 350px by default (defined in the example)
-		await expect(panel).toHaveWidth(350);
-
-		// The legacy var should have the same width as the panel
-		await expect(legacyVarSpy).toHaveWidth(350);
-
-		// Resize the panel `100px` left
-		await dragByOffset({
-			page,
-			locator: page.getByTestId('panel-slot-panel-splitter'),
-			offset: { x: -100, y: 0 },
-			shouldDrop: false,
-		});
-
-		// The legacy var has already been updated
-		await expect(legacyVarSpy).toHaveWidth(450);
-
-		// End the drag
-		await page.mouse.up();
-
-		// The legacy var has not changed
-		await expect(legacyVarSpy).toHaveWidth(450);
-	});
-
-	test('aside CSS variable updates during a drag', async ({ page }) => {
-		// Only Main + Aside will be mounted
-		await page.getByRole('radio', { name: 'Aside' }).click();
-
-		const aside = page.getByRole('complementary', { name: 'Aside' });
-		const legacyVarSpy = page.getByTestId('legacy-var-spy');
-
-		// Width should be 400px by default (defined in the example)
-		await expect(aside).toHaveWidth(400);
-
-		// The legacy var should have the same width as the aside
-		await expect(legacyVarSpy).toHaveWidth(400);
-
-		// Resize the aside `100px` left
-		await dragByOffset({
-			page,
-			locator: page.getByTestId('aside-slot-panel-splitter'),
-			offset: { x: -100, y: 0 },
-			shouldDrop: false,
-		});
-
-		// The legacy var has already been updated
-		await expect(legacyVarSpy).toHaveWidth(500);
-
-		// End the drag
-		await page.mouse.up();
-
-		// The legacy var has not changed
-		await expect(legacyVarSpy).toHaveWidth(500);
-	});
-
-	test('panel CSS variable resolves to 0px when it is an overlay', async ({ page }) => {
-		// Small viewport so that the Panel is an overlay
-		await page.setViewportSize(viewportSize.small);
-
-		// Only Main + Panel will be mounted
-		await page.getByRole('radio', { name: 'Panel' }).click();
-
-		const panel = page.getByRole('region', { name: 'Panel' });
-		const legacyVarSpy = page.getByTestId('legacy-var-spy');
-
-		// Width should be 350px by default (defined in the example)
-		await expect(panel).toHaveWidth(350);
-
-		// The legacy var resolves to 0px because the Panel is an overlay
-		await expect(legacyVarSpy).toHaveWidth(0);
-
-		// Resize the panel `100px` left
-		await dragByOffset({
-			page,
-			locator: page.getByTestId('panel-slot-panel-splitter'),
-			offset: { x: -100, y: 0 },
-			shouldDrop: false,
-		});
-
-		// The legacy var resolves to 0px because the Panel is an overlay
-		await expect(legacyVarSpy).toHaveWidth(0);
-
-		// End the drag
-		await page.mouse.up();
-
-		// The legacy var resolves to 0px because the Panel is an overlay
-		await expect(legacyVarSpy).toHaveWidth(0);
-	});
-
-	test('aside CSS variable resolves to 0px when it is below main', async ({ page }) => {
-		// Small viewport so that the Aside is below Main
-		await page.setViewportSize(viewportSize.small);
-
-		// Only Main + Aside will be mounted
-		await page.getByRole('radio', { name: 'Aside' }).click();
-
-		const aside = page.getByRole('complementary', { name: 'Aside' });
-		const legacyVarSpy = page.getByTestId('legacy-var-spy');
-
-		// Aside is full width because it is under main
-		await expect(aside).toHaveWidth(viewportSize.small.width);
-
-		// The legacy var resolves to 0px because Aside is under main
-		await expect(legacyVarSpy).toHaveWidth(0);
-
-		// Make the panel splitter grab-able by Playwright
-		// A real user can still drag it without this
-		await aside.evaluate((aside) => {
-			aside.style.marginLeft = '24px';
-		});
-
-		// Resize the panel `100px` left
-		// Note: resizing while aside is under main does nothing, but the splitter is still rendered
-		// We can update this test if/when we remove the splitter on smaller viewports
-		await dragByOffset({
-			page,
-			locator: page.getByTestId('aside-slot-panel-splitter'),
-			offset: { x: 100, y: 0 },
-			shouldDrop: false,
-		});
-
-		// The legacy var resolves to 0px because Aside is under main
-		await expect(legacyVarSpy).toHaveWidth(0);
-
-		// End the drag
-		await page.mouse.up();
-
-		// The legacy var resolves to 0px because Aside is under main
-		await expect(legacyVarSpy).toHaveWidth(0);
-	});
-
-	test('sidenav CSS variable does not update until drag finishes', async ({ page }) => {
-		await page.visitExample('design-system', 'navigation-system', 'legacy-var-testing');
-
-		// Only Main + SideNav will be mounted
-		await page.getByRole('radio', { name: 'SideNav' }).click();
-
-		const sideNav = page.getByRole('navigation', { name: 'Side navigation' });
-		const legacyVarSpy = page.getByTestId('legacy-var-spy');
-
-		// Width should be 320px by default (defined in the example)
-		await expect(sideNav).toHaveWidth(320);
-
-		// The legacy var should have the same width as the panel
-		await expect(legacyVarSpy).toHaveWidth(320);
-
-		// Resize the aside `100px` right
-		await dragByOffset({
-			page,
-			locator: page.getByTestId('side-nav-slot-panel-splitter'),
-			offset: { x: 100, y: 0 },
-			shouldDrop: false,
-		});
-
-		// The legacy var has already been updated
-		await expect(legacyVarSpy).toHaveWidth(420);
-
-		// End the drag
-		await page.mouse.up();
-
-		// The legacy var has not changed
-		await expect(legacyVarSpy).toHaveWidth(420);
-	});
-
-	test('sidenav CSS variable resolves to 0px when it is an overlay', async ({ page }) => {
-		// Small viewport so that the SideNav is an overlay
-		await page.setViewportSize(viewportSize.small);
-
-		await page.visitExample('design-system', 'navigation-system', 'legacy-var-testing');
-
-		// Only Main + SideNav will be mounted
-		await page.getByRole('radio', { name: 'SideNav' }).click();
-
-		const sideNav = page.getByRole('navigation', { name: 'Side navigation' });
-		const legacyVarSpy = page.getByTestId('legacy-var-spy');
-
-		await page.getByRole('button', { name: 'Expand sidebar' }).click();
-
-		// Width should be 320px by default (defined in the example)
-		await expect(sideNav).toHaveWidth(320);
-
-		// The legacy var resolves to 0px because the SideNav is an overlay
-		await expect(legacyVarSpy).toHaveWidth(0);
-
-		// Resize the panel `100px` right
-		await dragByOffset({
-			page,
-			locator: page.getByTestId('side-nav-slot-panel-splitter'),
-			offset: { x: 100, y: 0 },
-			shouldDrop: false,
-		});
-
-		// The legacy var resolves to 0px because the SideNav is an overlay
-		await expect(legacyVarSpy).toHaveWidth(0);
-
-		// End the drag
-		await page.mouse.up();
-
-		// The legacy var resolves to 0px because the SideNav is an overlay
-		await expect(legacyVarSpy).toHaveWidth(0);
-	});
-});

package/src/__tests__/playwright/menu-item-in-sidebar-drag-and-drop.spec.tsx

@@ -1,70 +0,0 @@
-import invariant from 'tiny-invariant';
-
-import { expect, type Locator, type Page, test } from '@af/integration-testing';
-
-/**
- * Drag to a `box` in a way that works for all browsers.
- * Assumes a drag has already started.
- */
-async function reorderAfter({
-	page,
-	draggable,
-	dropTarget,
-}: {
-	page: Page;
-	draggable: Locator;
-	dropTarget: Locator;
-}) {
-	const draggableBox = await draggable.boundingBox();
-	invariant(draggableBox, 'unable to get bounding box for draggable');
-
-	const dropTargetBox = await dropTarget.boundingBox();
-	invariant(dropTargetBox, 'unable to get bounding box for dropTarget');
-
-	// Start a drag
-	await page.mouse.move(draggableBox.x + 1, draggableBox.y + 1);
-	await page.mouse.down();
-	await page.mouse.move(draggableBox.y + 10, draggableBox.y + 1);
-
-	// Move over drop target
-	await page.mouse.move(dropTargetBox.x, dropTargetBox.y + dropTargetBox.height - 2);
-
-	// Second movement needed for Firefox
-	await page.mouse.move(dropTargetBox.x, dropTargetBox.y + dropTargetBox.height - 1);
-
-	// Finish the drop
-	await page.mouse.up();
-}
-
-test.describe('menu item drag and drop in the sidebar', () => {
-	test.beforeEach(async ({ page }) => {
-		await page.visitExample('design-system', 'navigation-system', 'drag-and-drop-jira');
-	});
-
-	// This test helps give us confidence that our end to end story is working correctly
-	test('smoke test (project reordering)', async ({ page }) => {
-		const group = page.locator('[data-testid="project-group-starred"]');
-
-		// Pulled this into a function as `allInnerTexts()` sometimes returned rouge
-		// newline characters on the end of strings while on CI.
-		async function getInnerTexts() {
-			return (await group.locator('a').allInnerTexts()).map((text) => text.trim());
-		}
-
-		expect(await getInnerTexts()).toEqual([
-			'Modernize typography',
-			'F1 sponsorship',
-			'Mobile application',
-		]);
-
-		const [first, _, last] = await group.locator('a').all();
-
-		await reorderAfter({ page, draggable: first, dropTarget: last });
-
-		expect(await getInnerTexts()).toEqual([
-			'F1 sponsorship',
-			'Mobile application',
-			'Modernize typography', // Moved after "Mobile application"
-		]);
-	});
-});

package/src/__tests__/playwright/page-layout.spec.tsx

@@ -1,23 +0,0 @@
-import { expect, test } from '@af/integration-testing';
-
-test.describe('page layout', () => {
-	test('should use slots for scroll', async ({ page }) => {
-		await page.visitExample(
-			'design-system',
-			'navigation-system',
-			'page-layout-all-slots-scrollable',
-		);
-
-		const main = page.getByTestId('main');
-		const aside = page.getByTestId('aside');
-		// Aside's scroll container is a child rather than the slot itself
-		const asideInner = page.getByTestId('aside--inner');
-
-		// Main is a scroll container
-		await expect(main).toHaveCSS('overflow-y', 'auto');
-
-		// Aside's scroll container is a child rather than the slot itself
-		await expect(aside).not.toHaveCSS('overflow-y', 'auto');
-		await expect(asideInner).toHaveCSS('overflow-y', 'auto');
-	});
-});

package/src/__tests__/playwright/panel.spec.tsx

@@ -1,241 +0,0 @@
-import invariant from 'tiny-invariant';
-
-import { expect, type Locator, type Page, test } from '@af/integration-testing';
-
-const viewport = {
-	small: { width: 768, height: 768 },
-	medium: { width: 1024, height: 768 },
-	large: { width: 1440, height: 768 },
-};
-
-async function getBrowserTypeName(page: Page) {
-	const browser = page.context().browser();
-	invariant(browser);
-	return browser.browserType().name();
-}
-
-/**
- * Waits for a single frame.
- *
- * This is helpful for avoiding flake by ensuring that drag events have been processed,
- * because `pragmatic-drag-and-drop` will schedule updates into frames.
- */
-async function waitForFrame(page: Page) {
-	await page.evaluate(() => new Promise((resolve) => requestAnimationFrame(resolve)));
-}
-
-async function getLocatorWidth(locator: Locator): Promise<number> {
-	const boundingBox = await locator.boundingBox();
-	invariant(boundingBox !== null);
-	return boundingBox.width;
-}
-
-async function dragAndDrop({
-	page,
-	locator,
-	target,
-}: {
-	page: Page;
-	locator: Locator;
-	target: { x: number; y: number };
-}) {
-	await locator.hover();
-	await page.mouse.down();
-	await page.mouse.move(target.x, target.y);
-	await page.mouse.move(target.x, target.y);
-	await waitForFrame(page);
-	await page.mouse.up();
-}
-
-const steppedDrag = {
-	async start({ page, locator }: { page: Page; locator: Locator }) {
-		await locator.hover();
-		await page.mouse.down();
-	},
-	async moveTo({ page, target }: { page: Page; target: { x: number; y: number } }) {
-		await page.mouse.move(target.x, target.y);
-		await page.mouse.move(target.x, target.y);
-
-		await waitForFrame(page);
-	},
-	async drop({ page }: { page: Page }) {
-		await page.mouse.up();
-	},
-};
-
-const defaultSideNavWidth = 320;
-
-test.describe('resizing', () => {
-	test.beforeEach(async ({ page, skipAxeCheck }) => {
-		skipAxeCheck();
-
-		await page.visitExample('design-system', 'navigation-system', 'resizable-slots');
-	});
-
-	test('should maintain proportional width as the side nav grows', async ({ page }) => {
-		const panel = page.getByTestId('panel');
-		const panelSplitter = page.getByTestId('panel-slot-panel-splitter');
-		const sideNav = page.getByTestId('side-nav');
-
-		await page.setViewportSize(viewport.large);
-
-		await expect(sideNav).toHaveWidth(defaultSideNavWidth);
-
-		const expectedPanelMaxWidth = (viewport.large.width - defaultSideNavWidth) / 2;
-
-		// Resize the panel to its maximum size
-		await dragAndDrop({ page, locator: panelSplitter, target: { x: 0, y: 0 } });
-
-		await expect(panel).toHaveWidth(expectedPanelMaxWidth);
-
-		const sideNavSplitter = page.getByTestId('side-nav-slot-panel-splitter');
-
-		const isWebkit = (await getBrowserTypeName(page)) === 'webkit';
-
-		// Resize the side nav to max width
-		await steppedDrag.start({ page, locator: sideNavSplitter });
-
-		await steppedDrag.moveTo({
-			page,
-			target: { x: viewport.large.width / 4, y: 0 },
-		});
-
-		{
-			const expectedPanelWidth = (viewport.large.width - viewport.large.width / 4) / 2;
-			await expect(panel).toHaveWidth(
-				/**
-				 * In Webkit the panel is 1px smaller than expected.
-				 */
-				isWebkit ? expectedPanelWidth - 1 : expectedPanelWidth,
-			);
-		}
-
-		await steppedDrag.moveTo({
-			page,
-			target: { x: viewport.large.width / 3, y: 0 },
-		});
-
-		{
-			const expectedPanelWidth = (viewport.large.width - viewport.large.width / 3) / 2;
-			await expect(panel).toHaveWidth(
-				/**
-				 * In Webkit the panel is 1px smaller than expected.
-				 */
-				isWebkit ? expectedPanelWidth - 1 : expectedPanelWidth,
-			);
-		}
-
-		await steppedDrag.moveTo({
-			page,
-			target: { x: viewport.large.width / 2, y: 0 },
-		});
-
-		await expect(panel).toHaveWidth((viewport.large.width - viewport.large.width / 2) / 2);
-
-		await steppedDrag.drop({ page });
-
-		await expect(panel).toHaveWidth((viewport.large.width - viewport.large.width / 2) / 2);
-	});
-
-	test('should maintain proportional width as the window shrinks', async ({ page }) => {
-		const panel = page.getByTestId('panel');
-		const panelSplitter = page.getByTestId('panel-slot-panel-splitter');
-
-		await page.setViewportSize(viewport.large);
-
-		// Resize the panel to max width
-		await dragAndDrop({ page, locator: panelSplitter, target: { x: 0, y: 0 } });
-
-		await expect(panel).toHaveWidth((viewport.large.width - defaultSideNavWidth) / 2);
-
-		await page.setViewportSize(viewport.medium);
-		await expect(panel).toHaveWidth((viewport.medium.width - defaultSideNavWidth) / 2);
-	});
-
-	test.describe('mouse resizing', () => {
-		test('should use initial width as the resizing minimum', async ({ page }) => {
-			const panel = page.getByTestId('panel');
-			const panelSplitter = page.getByTestId('panel-slot-panel-splitter');
-
-			await page.setViewportSize(viewport.large);
-
-			const panelInitialWidth = await getLocatorWidth(panel);
-
-			// Resize the panel to min width
-			await dragAndDrop({
-				page,
-				locator: panelSplitter,
-				target: { x: viewport.large.width, y: 0 },
-			});
-
-			await expect(panel).toHaveWidth(panelInitialWidth);
-		});
-
-		test('should use half the content area as the resizing maximum', async ({ page }) => {
-			const panel = page.getByTestId('panel');
-			const panelSplitter = page.getByTestId('panel-slot-panel-splitter');
-			const sideNav = page.getByTestId('side-nav');
-
-			await page.setViewportSize(viewport.large);
-
-			await expect(sideNav).toHaveWidth(defaultSideNavWidth);
-			const expectedPanelMaxWidth = (viewport.large.width - defaultSideNavWidth) / 2;
-
-			await dragAndDrop({ page, locator: panelSplitter, target: { x: 0, y: 0 } });
-
-			await expect(panel).toHaveWidth(expectedPanelMaxWidth);
-		});
-	});
-
-	test.describe('keyboard resizing', () => {
-		test('should use initial width as the resizing minimum', async ({ page }) => {
-			await page.setViewportSize(viewport.large);
-
-			const panelInitialWidth = await getLocatorWidth(page.getByTestId('panel'));
-
-			const inputRange = page.getByRole('slider', { name: 'Resize panel' });
-			// Focus on the input range to ensure the minimum value is calculated and updated
-			await inputRange.focus();
-			await expect(inputRange).toHaveAttribute('min', panelInitialWidth.toString());
-		});
-
-		test('should use half the content area as the resizing maximum', async ({ page }) => {
-			await page.setViewportSize(viewport.large);
-
-			const sideNavWidth = await getLocatorWidth(page.getByTestId('side-nav'));
-			const expectedPanelMaxWidth = (viewport.large.width - sideNavWidth) / 2;
-
-			const inputRange = page.getByRole('slider', { name: 'Resize panel' });
-			// Focus on the input range to ensure the minimum value is calculated and updated
-			await inputRange.focus();
-			await expect(inputRange).toHaveAttribute('max', expectedPanelMaxWidth.toString());
-		});
-
-		test('should update the resize bounds and value text when the viewport is resized and the slider element is focused', async ({
-			page,
-		}) => {
-			await page.setViewportSize(viewport.large);
-
-			const viewportLargeExpectedBounds = {
-				max: (viewport.large.width - defaultSideNavWidth) / 2, // Comes from max-width constraint in panel.tsx
-				min: 350, // From the `defaultWidth` in resizable-slots.tsx
-			};
-
-			const inputRange = page.getByRole('slider', { name: 'Resize panel' });
-			// Focus on the input range to ensure the max value is recalculated when the viewport is resized
-			await inputRange.focus();
-			await expect(inputRange).toHaveAttribute('max', viewportLargeExpectedBounds.max.toString());
-			await expect(inputRange).toHaveAttribute('min', viewportLargeExpectedBounds.min.toString());
-
-			// Resize the viewport to a smaller size
-			await page.setViewportSize(viewport.medium);
-			const viewportMediumExpectedBounds = {
-				max: (viewport.medium.width - defaultSideNavWidth) / 2, // Comes from max-width constraint in panel.tsx
-				min: 350, // From the `defaultWidth` in resizable-slots.tsx
-			};
-
-			await expect(inputRange).toHaveAttribute('max', viewportMediumExpectedBounds.max.toString());
-			await expect(inputRange).toHaveAttribute('min', viewportMediumExpectedBounds.min.toString());
-		});
-	});
-});