@atlaskit/navigation-system 0.182.0 → 1.0.0

package/src/__tests__/playwright/side-nav-flyout.spec.tsx

@@ -1,223 +0,0 @@
-import { expect, test } from '@af/integration-testing';
-
-import { sideNavFlyoutCloseDelayMs } from '../../ui/page-layout/side-nav/flyout-close-delay-ms';
-
-const mobileViewport = { width: 360, height: 800 };
-
-test.describe('side nav flyout', () => {
-	test.beforeEach(async ({ page }) => {
-		await page.visitExample('design-system', 'navigation-system', 'side-nav-flyout');
-	});
-
-	test('should not show flyout when hovering on toggle button right after collapsing', async ({
-		page,
-	}) => {
-		const sideNav = page.getByRole('navigation', { name: /Sidebar/ });
-		await expect(sideNav).toBeVisible();
-
-		// Collapse side nav
-		await page.getByRole('button', { name: /Collapse sidebar/ }).click();
-		await expect(sideNav).toBeHidden();
-
-		// Hover on the toggle button to [attempt to] show the flyout
-		await page.getByRole('button', { name: /Expand sidebar/ }).hover();
-
-		// Side nav should NOT be visible - the flyout should not have opened.
-		// This is because the user needs to mouse out of and then back into the toggle button before the flyout can open.
-		await expect(sideNav).toBeHidden();
-	});
-
-	test('should show flyout after mousing out of and then back into toggle button after collapsing', async ({
-		page,
-	}) => {
-		const sideNav = page.getByRole('navigation', { name: /Sidebar/ });
-		await expect(sideNav).toBeVisible();
-
-		// Collapse side nav
-		await page.getByRole('button', { name: /Collapse sidebar/ }).click();
-		await expect(sideNav).toBeHidden();
-
-		// Move mouse somewhere else to re-activate the flyout mouse listeners
-		await page.getByRole('button', { name: /Switch apps/ }).hover();
-
-		// Hover on the toggle button to show the flyout
-		await page.getByRole('button', { name: /Expand sidebar/ }).hover();
-
-		// Side nav (flyout) should be visible
-		await expect(sideNav).toBeVisible();
-	});
-
-	test('should keep the flyout open when mousing over the side nav', async ({ page }) => {
-		const sideNav = page.getByRole('navigation', { name: /Sidebar/ });
-		await expect(sideNav).toBeVisible();
-
-		// Collapse side nav
-		await page.getByRole('button', { name: /Collapse sidebar/ }).click();
-		await expect(sideNav).toBeHidden();
-
-		// Move mouse somewhere else to re-activate the flyout mouse listeners
-		await page.getByRole('button', { name: /Switch apps/ }).hover();
-
-		// Hover on the toggle button to show the flyout
-		await page.getByRole('button', { name: /Expand sidebar/ }).hover();
-
-		// Side nav (flyout) should be visible
-		await expect(sideNav).toBeVisible();
-
-		// Hover over a menu item within the side nav
-		await page.getByRole('link', { name: /Projects/ }).hover();
-
-		// Wait for the flyout "collapse" timeout to have finished.
-		// Waiting for a period of time is appropriate in this case,
-		// as the logic we are testing is timeout based.
-		// eslint-disable-next-line playwright/no-wait-for-timeout
-		await page.waitForTimeout(sideNavFlyoutCloseDelayMs * 2);
-
-		// Side nav (flyout) should still be visible
-		await expect(sideNav).toBeVisible();
-	});
-
-	test('should stop showing the flyout when mousing outside the side nav', async ({ page }) => {
-		const sideNav = page.getByRole('navigation', { name: /Sidebar/ });
-		await expect(sideNav).toBeVisible();
-
-		// Collapse side nav
-		await page.getByRole('button', { name: /Collapse sidebar/ }).click();
-		await expect(sideNav).toBeHidden();
-
-		// Move mouse somewhere else to re-activate the flyout mouse listeners
-		await page.getByRole('button', { name: /Switch apps/ }).hover();
-
-		// Hover on the toggle button to show the flyout
-		await page.getByRole('button', { name: /Expand sidebar/ }).hover();
-
-		// Side nav (flyout) should be visible
-		await expect(sideNav).toBeVisible();
-
-		// Move mouse outside the side nav
-		await page.getByRole('button', { name: /More settings/ }).hover();
-
-		// Side nav (flyout) should be hidden
-		await expect(sideNav).toBeHidden();
-	});
-
-	test('should keep the flyout open when mousing out of the side nav and then back in before timer expires', async ({
-		page,
-	}) => {
-		const sideNav = page.getByRole('navigation', { name: /Sidebar/ });
-		await expect(sideNav).toBeVisible();
-
-		// Collapse side nav
-		await page.getByRole('button', { name: /Collapse sidebar/ }).click();
-		await expect(sideNav).toBeHidden();
-
-		// Move mouse somewhere else to re-activate the flyout mouse listeners
-		await page.getByRole('button', { name: /Switch apps/ }).hover();
-
-		// Hover on the toggle button to show the flyout
-		await page.getByRole('button', { name: /Expand sidebar/ }).hover();
-
-		// Side nav (flyout) should be visible
-		await expect(sideNav).toBeVisible();
-
-		// Move mouse outside the side nav
-		await page.getByRole('button', { name: /More settings/ }).hover();
-
-		// Move mouse back into the side nav before the flyout "collapse" timeout has finished
-		await page.getByRole('link', { name: /Your work/ }).hover();
-
-		// Wait for the flyout "collapse" timeout to have finished to make sure the flyout stays open.
-		// Waiting for a period of time is appropriate in this case,
-		// as the logic we are testing is timeout based.
-		// eslint-disable-next-line playwright/no-wait-for-timeout
-		await page.waitForTimeout(sideNavFlyoutCloseDelayMs * 2);
-
-		// Side nav (flyout) should still be visible
-		await expect(sideNav).toBeVisible();
-	});
-
-	test('should lock the flyout open when a child layer is open', async ({ page }) => {
-		const sideNav = page.getByRole('navigation', { name: /Sidebar/ });
-		await expect(sideNav).toBeVisible();
-
-		// Collapse side nav
-		await page.getByRole('button', { name: /Collapse sidebar/ }).click();
-		await expect(sideNav).toBeHidden();
-
-		// Move mouse somewhere else to re-activate the flyout mouse listeners
-		await page.getByRole('button', { name: /Switch apps/ }).hover();
-
-		// Hover on the toggle button to show the flyout
-		await page.getByRole('button', { name: /Expand sidebar/ }).hover();
-
-		// Side nav (flyout) should be visible
-		await expect(sideNav).toBeVisible();
-
-		// Open a child layer
-		await page.getByRole('button', { name: /Starred more menu/ }).click();
-
-		// Move mouse outside the side nav
-		await page.getByRole('button', { name: /More settings/ }).hover();
-
-		// Wait for the flyout "collapse" timeout to have finished.
-		// Waiting for a period of time is appropriate in this case,
-		// as the logic we are testing is timeout based.
-		// eslint-disable-next-line playwright/no-wait-for-timeout
-		await page.waitForTimeout(sideNavFlyoutCloseDelayMs * 2);
-
-		// Side nav (flyout) should still be visible
-		await expect(sideNav).toBeVisible();
-	});
-
-	test('should close the flyout after the open child layer is closed', async ({ page }) => {
-		const sideNav = page.getByRole('navigation', { name: /Sidebar/ });
-		await expect(sideNav).toBeVisible();
-
-		// Collapse side nav
-		await page.getByRole('button', { name: /Collapse sidebar/ }).click();
-		await expect(sideNav).toBeHidden();
-
-		// Move mouse somewhere else to re-activate the flyout mouse listeners
-		await page.getByRole('button', { name: /Switch apps/ }).hover();
-
-		// Hover on the toggle button to show the flyout
-		await page.getByRole('button', { name: /Expand sidebar/ }).hover();
-
-		// Side nav (flyout) should be visible
-		await expect(sideNav).toBeVisible();
-
-		// Open a child layer
-		await page.getByRole('button', { name: /Starred more menu/ }).click();
-
-		// Move mouse outside the side nav
-		await page.getByRole('button', { name: /More settings/ }).hover();
-
-		// Wait for the flyout "collapse" timeout to have finished.
-		// Waiting for a period of time is appropriate in this case,
-		// as the logic we are testing is timeout based.
-		// eslint-disable-next-line playwright/no-wait-for-timeout
-		await page.waitForTimeout(sideNavFlyoutCloseDelayMs * 2);
-
-		// Side nav (flyout) should still be visible
-		await expect(sideNav).toBeVisible();
-
-		// Click something outside of the side nav to close the child layer
-		await page.getByRole('button', { name: /More settings/ }).click();
-
-		await expect(sideNav).toBeHidden();
-	});
-
-	test('should not show the flyout on small viewports', async ({ page }) => {
-		await page.setViewportSize(mobileViewport);
-
-		const sideNav = page.getByRole('navigation', { name: /Sidebar/ });
-		// Side nav is collapsed by default on small viewports
-		await expect(sideNav).toBeHidden();
-
-		// Hover on the toggle button to attempt to show the flyout
-		await page.getByRole('button', { name: /Expand sidebar/ }).hover();
-
-		// Side nav should not be visible
-		await expect(sideNav).toBeHidden();
-	});
-});

package/src/__tests__/playwright/side-nav-responsiveness.spec.tsx

@@ -1,208 +0,0 @@
-import { expect, test } from '@af/integration-testing';
-
-const desktopViewport = { width: 1366, height: 768 };
-const mobileViewport = { width: 360, height: 800 };
-
-test.describe('side nav responsive behaviour', () => {
-	test.beforeEach(async ({ page }) => {
-		await page.visitExample('design-system', 'navigation-system', 'menu-item-integration');
-	});
-
-	test('should collapse side nav when resizing viewport from desktop to mobile', async ({
-		page,
-	}) => {
-		// Start at large viewport size
-		await page.setViewportSize(desktopViewport);
-
-		const sideNav = page.getByRole('navigation', { name: /Side navigation/ });
-
-		await expect(sideNav).toBeVisible();
-
-		// Resize to small viewport
-		await page.setViewportSize(mobileViewport);
-
-		// Side nav should be hidden on small viewports by default
-		await expect(sideNav).toBeHidden();
-	});
-
-	test('should expand side nav when resizing viewport from small to large', async ({ page }) => {
-		// Start at small viewport size
-		await page.setViewportSize(mobileViewport);
-
-		const sideNav = page.getByRole('navigation', { name: /Side navigation/ });
-
-		// Side nav should be hidden on small viewports by default
-		await expect(sideNav).toBeHidden();
-
-		// Resize to large viewport
-		await page.setViewportSize(desktopViewport);
-
-		await expect(sideNav).toBeVisible();
-	});
-
-	test('should maintain desktop expanded state when resizing viewport from large to small, then back to large', async ({
-		page,
-	}) => {
-		// Start at large viewport size
-		await page.setViewportSize(desktopViewport);
-
-		const sideNav = page.getByRole('navigation', { name: /Side navigation/ });
-
-		// Side nav should be expanded on large viewports by default
-		await expect(sideNav).toBeVisible();
-
-		// Resize to small viewport
-		await page.setViewportSize(mobileViewport);
-
-		await expect(sideNav).toBeHidden();
-
-		// Resize back to large viewport
-		await page.setViewportSize(desktopViewport);
-
-		await expect(sideNav).toBeVisible();
-	});
-
-	test('should maintain mobile expanded state when resizing viewport from small to large, then back to small', async ({
-		page,
-	}) => {
-		// Start at small viewport size
-		await page.setViewportSize(mobileViewport);
-
-		const sideNav = page.getByRole('navigation', { name: /Side navigation/ });
-
-		// Side nav should be collapsed on small viewports by default
-		await expect(sideNav).toBeHidden();
-
-		// Click toggle button to expand side nav
-		await page.getByRole('button', { name: /Expand sidebar/ }).click();
-
-		// Side nav should now be expanded
-		await expect(sideNav).toBeVisible();
-
-		// Resize to large viewport
-		await page.setViewportSize(desktopViewport);
-
-		await expect(sideNav).toBeVisible();
-
-		// Resize back to small viewport
-		await page.setViewportSize(mobileViewport);
-
-		// Side nav should still be expanded
-		await expect(sideNav).toBeVisible();
-	});
-
-	test('should expand the desktop side nav when expanded on mobile and resized to desktop', async ({
-		page,
-	}) => {
-		// Start at large viewport size
-		await page.setViewportSize(desktopViewport);
-
-		const sideNav = page.getByRole('navigation', { name: /Side navigation/ });
-
-		// Side nav should be expanded on large viewports by default
-		await expect(sideNav).toBeVisible();
-
-		// Collapse the side nav on desktop
-		await page.getByRole('button', { name: /Collapse sidebar/ }).click();
-
-		await expect(sideNav).toBeHidden();
-
-		// Resize to small viewport
-		await page.setViewportSize(mobileViewport);
-
-		// Side nav is always collapsed by default on small viewports
-		await expect(sideNav).toBeHidden();
-
-		// Expand the side nav on mobile
-		await page.getByRole('button', { name: /Expand sidebar/ }).click();
-
-		await expect(sideNav).toBeVisible();
-
-		// Resize back to large viewport
-		await page.setViewportSize(desktopViewport);
-
-		// Side nav should now be expanded on desktop too
-		await expect(sideNav).toBeVisible();
-	});
-
-	test.describe('click outside to close', () => {
-		test.beforeEach(async ({ page }) => {
-			await page.visitExample('design-system', 'navigation-system', 'menu-item-integration');
-		});
-
-		test('should not close when clicking outside on desktop', async ({ page }) => {
-			await page.setViewportSize(desktopViewport);
-
-			const sideNav = page.getByRole('navigation', { name: /Side navigation/ });
-
-			// Side nav should be expanded on large viewports by default
-			await expect(sideNav).toBeVisible();
-
-			// Click outside the side nav.
-			// Not using main because on mobile the side nav partially covers main, this keeps it simpler
-			await page.getByRole('banner').click();
-
-			// Side nav did not close because desktop viewport
-			await expect(sideNav).toBeVisible();
-		});
-
-		test('should close when clicking outside on mobile', async ({ page }) => {
-			await page.setViewportSize(mobileViewport);
-
-			const sideNav = page.getByRole('navigation', { name: /Side navigation/ });
-
-			// Closed by default on mobile
-			await expect(sideNav).toBeHidden();
-
-			// Expand the side nav
-			await page.getByRole('button', { name: /Expand sidebar/ }).click();
-			await expect(sideNav).toBeVisible();
-
-			// Click outside the side nav.
-			// Not using main because on mobile the side nav partially covers main, this keeps it simpler
-			await page.getByRole('banner').click();
-
-			// The side nav closed from the outside click
-			await expect(sideNav).toBeHidden();
-		});
-
-		test('should correctly handle resizing', async ({ page }) => {
-			await page.setViewportSize(mobileViewport);
-
-			const sideNav = page.getByRole('navigation', { name: /Side navigation/ });
-
-			// Closed by default on mobile
-			await expect(sideNav).toBeHidden();
-
-			// Expand the side nav
-			await page.getByRole('button', { name: /Expand sidebar/ }).click();
-			await expect(sideNav).toBeVisible();
-
-			// Resize to desktop size
-			await page.setViewportSize(desktopViewport);
-
-			// The side nav is open by default on desktop
-			await expect(sideNav).toBeVisible();
-
-			// Click outside the side nav.
-			// Not using main because on mobile the side nav partially covers main, this keeps it simpler
-			await page.getByRole('banner').click();
-
-			// The side nav is still open
-			await expect(sideNav).toBeVisible();
-
-			// Resize back to mobile size
-			await page.setViewportSize(mobileViewport);
-
-			// The side nav is still open from before
-			await expect(sideNav).toBeVisible();
-
-			// Click outside the side nav.
-			// Not using main because on mobile the side nav partially covers main, this keeps it simpler
-			await page.getByRole('banner').click();
-
-			// The side nav closed from the outside click
-			await expect(sideNav).toBeHidden();
-		});
-	});
-});

package/src/__tests__/playwright/skip-links.spec.tsx

@@ -1,111 +0,0 @@
-import { expect, test } from '@af/integration-testing';
-
-test.describe('skip links', () => {
-	test.beforeEach(({ page }) => {
-		// Rethrowing uncaught errors from the page, otherwise they don't seem to get surfaced
-		page.on('pageerror', (error) => {
-			throw error;
-		});
-	});
-
-	test('should move focus after clicking the skip link', async ({ page }) => {
-		await page.visitExample('design-system', 'navigation-system', 'composition');
-
-		const bannerSkipLink = page.getByRole('link', { name: 'Banner', includeHidden: true });
-
-		await bannerSkipLink.focus();
-		await bannerSkipLink.click();
-
-		const skipLinkHref = await bannerSkipLink.getAttribute('href');
-		const activeElementId = await page.evaluate(() => document.activeElement?.id);
-
-		expect(`#${activeElementId}`).toEqual(skipLinkHref);
-	});
-
-	test('should move focus after clicking the skip link (with React 18 useId)', async ({ page }) => {
-		/**
-		 * This test case exists because the `useId()` hook in React 18 has ids with `:` characters.
-		 *
-		 * This previously broke our skip links.
-		 */
-		await page.visitExample('design-system', 'navigation-system', 'composition', {
-			featureFlag: 'platform-dst-react-18-use-id',
-		});
-
-		const bannerSkipLink = page.getByRole('link', { name: 'Banner', includeHidden: true });
-
-		await bannerSkipLink.focus();
-		await bannerSkipLink.click();
-
-		const skipLinkHref = await bannerSkipLink.getAttribute('href');
-		const activeElementId = await page.evaluate(() => document.activeElement?.id);
-
-		expect(`#${activeElementId}`).toEqual(skipLinkHref);
-	});
-
-	test('should not be visible until it has focus', async ({ page }) => {
-		await page.visitExample('design-system', 'navigation-system', 'composition');
-
-		const skipLinkContainer = page.getByTestId('root--skip-links-container');
-		const firstSkipLink = skipLinkContainer.getByRole('link').first();
-
-		/**
-		 * Using `opacity` checks to see if the skip links are visible because `.toBeVisible()` does not consider opacity.
-		 *
-		 * We don't use `display: none` because we want it to still be interactive.
-		 */
-		await expect(skipLinkContainer).toHaveCSS('opacity', '0');
-		await firstSkipLink.focus();
-		await expect(skipLinkContainer).toHaveCSS('opacity', '1');
-	});
-
-	test('should be hidden when pressing escape while focus is inside', async ({ page }) => {
-		await page.visitExample('design-system', 'navigation-system', 'composition');
-
-		const skipLinkContainer = page.getByTestId('root--skip-links-container');
-		const firstSkipLink = skipLinkContainer.getByRole('link').first();
-
-		/**
-		 * Using `opacity` checks to see if the skip links are visible because `.toBeVisible()` does not consider opacity.
-		 *
-		 * We don't use `display: none` because we want it to still be interactive.
-		 */
-		await firstSkipLink.focus();
-		await expect(skipLinkContainer).toHaveCSS('opacity', '1');
-		await firstSkipLink.press('Escape');
-		await expect(skipLinkContainer).toHaveCSS('opacity', '0');
-	});
-
-	test('should expand side navigation when navigating by skip link on desktop', async ({
-		page,
-	}) => {
-		await page.visitExample('design-system', 'navigation-system', 'composition');
-
-		const collapseSidebarButton = page.getByRole('button', { name: 'Collapse sidebar' });
-		const sidebar = page.getByLabel('Sidebar');
-		const sidebarSkipLink = page.getByRole('link', { name: 'Sidebar' });
-
-		await collapseSidebarButton.click();
-		await expect(sidebar).toBeHidden();
-
-		await sidebarSkipLink.press('Enter');
-		await expect(sidebar).toBeVisible();
-		await expect(sidebar).toBeFocused();
-	});
-
-	test('should expand side navigation when navigating by skip link on mobile', async ({ page }) => {
-		await page.visitExample('design-system', 'navigation-system', 'composition');
-
-		const sidebar = page.getByLabel('Sidebar');
-		const sidebarSkipLink = page.getByRole('link', { name: 'Sidebar' });
-
-		page.setViewportSize({ width: 400, height: 780 });
-
-		// Sidebar is collapsed by default on mobile
-		await expect(sidebar).toBeHidden();
-
-		await sidebarSkipLink.press('Enter');
-		await expect(sidebar).toBeVisible();
-		await expect(sidebar).toBeFocused();
-	});
-});

package/src/__tests__/playwright/top-nav-end.spec.tsx

@@ -1,96 +0,0 @@
-import { expect, test } from '@af/integration-testing';
-
-const desktopViewport = { width: 1366, height: 768 };
-const mobileViewport = { width: 360, height: 800 };
-
-test.describe('top nav end', () => {
-	test('should display the items in a popup on small viewports', async ({ page }) => {
-		// Start at large viewport size
-		await page.setViewportSize(desktopViewport);
-
-		await page.visitExample('design-system', 'navigation-system', 'top-navigation');
-
-		const chatButton = page.getByRole('button', { name: /Chat/ });
-		const aiButton = page.getByRole('button', { name: /Atlassian Intelligence/ });
-		const helpButton = page.getByRole('button', { name: /Help/ });
-		const notificationsButton = page.getByRole('button', { name: /Notifications/ });
-		const settingsButton = page.getByRole('button', { name: /Settings/ });
-		const profileButton = page.getByRole('button', { name: /Your profile/ });
-
-		// Items should be visible on large viewports
-		await expect(chatButton).toBeVisible();
-		await expect(aiButton).toBeVisible();
-		await expect(helpButton).toBeVisible();
-		await expect(notificationsButton).toBeVisible();
-		await expect(settingsButton).toBeVisible();
-		await expect(profileButton).toBeVisible();
-
-		// Resize to small viewport
-		await page.setViewportSize(mobileViewport);
-
-		// Items should not be visible
-		await expect(chatButton).toBeHidden();
-		await expect(aiButton).toBeHidden();
-		await expect(helpButton).toBeHidden();
-		await expect(notificationsButton).toBeHidden();
-		await expect(settingsButton).toBeHidden();
-		await expect(profileButton).toBeHidden();
-
-		// Open the "Show more" popup
-		const showMoreButton = page.getByRole('button', { name: /Show more/ });
-		await showMoreButton.click();
-
-		// Items should now be visible in the popup
-		await expect(chatButton).toBeVisible();
-		await expect(aiButton).toBeVisible();
-		await expect(helpButton).toBeVisible();
-		await expect(notificationsButton).toBeVisible();
-		await expect(settingsButton).toBeVisible();
-		await expect(profileButton).toBeVisible();
-	});
-
-	test('should close the items popup when viewport size changes from small to large', async ({
-		page,
-	}) => {
-		await page.setViewportSize(mobileViewport);
-
-		await page.visitExample('design-system', 'navigation-system', 'top-navigation');
-
-		// Open the "Show more" popup
-		const showMoreButton = page.getByRole('button', { name: /Show more/ });
-		await showMoreButton.click();
-
-		const chatButton = page.getByRole('button', { name: /Chat/ });
-		const aiButton = page.getByRole('button', { name: /Atlassian Intelligence/ });
-		const helpButton = page.getByRole('button', { name: /Help/ });
-		const notificationsButton = page.getByRole('button', { name: /Notifications/ });
-		const settingsButton = page.getByRole('button', { name: /Settings/ });
-		const profileButton = page.getByRole('button', { name: /Your profile/ });
-
-		await expect(chatButton).toBeVisible();
-		await expect(aiButton).toBeVisible();
-		await expect(helpButton).toBeVisible();
-		await expect(notificationsButton).toBeVisible();
-		await expect(settingsButton).toBeVisible();
-		await expect(profileButton).toBeVisible();
-
-		// Resize to large viewport
-		await page.setViewportSize(desktopViewport);
-
-		// Wait for the resize to complete before resizing again (the "Show more" button gets hidden on large viewports).
-		// This is to ensure that the browser registers that the viewport had changed - as otherwise the test can flake if we instantly
-		// resize from small to large to small again, as the browser might not have time to update and respond to the viewport size changing.
-		await expect(showMoreButton).toBeHidden();
-
-		// Resize back to small viewport
-		await page.setViewportSize(mobileViewport);
-
-		// Items should not be visible
-		await expect(chatButton).toBeHidden();
-		await expect(aiButton).toBeHidden();
-		await expect(helpButton).toBeHidden();
-		await expect(notificationsButton).toBeHidden();
-		await expect(settingsButton).toBeHidden();
-		await expect(profileButton).toBeHidden();
-	});
-});