@atlaskit/navigation-system 0.182.0 → 1.0.0

package/src/ui/page-layout/__tests__/informational-vr-tests/page-layout.vr.tsx

@@ -1,53 +0,0 @@
-import { Device, snapshotInformational } from '@af/visual-regression';
-
-import {
-	CompanyHubMockExample,
-	CompanyHubMockSmallDefaultPanelWidthExample,
-} from '../../../../../examples/company-hub-mock';
-
-/**
- * With the flag on, the small panel is not forced to be larger on mobile.
- */
-snapshotInformational(CompanyHubMockSmallDefaultPanelWidthExample, {
-	description: 'small panel default width on mobile',
-	featureFlags: {
-		platform_design_system_nav4_panel_mobile_width_fix: [true, false],
-	},
-	variants: [
-		{
-			device: Device.DESKTOP_CHROME,
-			environment: { colorScheme: 'light' },
-			name: 'desktop',
-		},
-	],
-	async prepare(page) {
-		// The important part is that the viewport width is below `768px`
-		// Not using Device.MOBILE_CHROME because it would start shrinking the panel because it's so narrow,
-		// so the snapshot result isn't as clear.
-		await page.setViewportSize({ width: 700, height: 700 });
-	},
-});
-
-/**
- * With the flag on, the large panel is shrunk to `400px` (its minimum resizing width)
- * instead of `365px`.
- */
-snapshotInformational(CompanyHubMockExample, {
-	description: 'large panel default width on mobile',
-	featureFlags: {
-		platform_design_system_nav4_panel_mobile_width_fix: [true, false],
-	},
-	variants: [
-		{
-			device: Device.DESKTOP_CHROME,
-			environment: { colorScheme: 'light' },
-			name: 'desktop',
-		},
-	],
-	async prepare(page) {
-		// The important part is that the viewport width is below `768px`
-		// Not using Device.MOBILE_CHROME because it would start shrinking the panel because it's so narrow,
-		// so the snapshot result isn't as clear.
-		await page.setViewportSize({ width: 700, height: 700 });
-	},
-});

package/src/ui/page-layout/__tests__/informational-vr-tests/slot-borders.vr.tsx

@@ -1,54 +0,0 @@
-import type { Page } from '@playwright/test';
-
-import { snapshotInformational } from '@af/visual-regression';
-
-import { CompositionVR } from '../../../../../examples/composition';
-
-snapshotInformational(CompositionVR, {
-	description: 'above md breakpoint - side nav expanded',
-	featureFlags: {
-		platform_design_system_nav4_panel_default_border: [false, true],
-		platform_design_system_nav4_sidenav_border: [false, true],
-	},
-	prepare: async (page: Page) => {
-		await page.setViewportSize({
-			width: 1024,
-			height: 768,
-		});
-	},
-});
-
-snapshotInformational(CompositionVR, {
-	description: 'above md breakpoint - side nav flyout',
-	featureFlags: {
-		platform_design_system_nav4_panel_default_border: [false, true],
-		platform_design_system_nav4_sidenav_border: [false, true],
-	},
-	prepare: async (page: Page) => {
-		await page.setViewportSize({
-			width: 1024,
-			height: 768,
-		});
-
-		await page.getByRole('button', { name: 'Collapse sidebar' }).click();
-		await page.getByRole('search').hover();
-		await page.getByRole('button', { name: 'Expand sidebar' }).hover();
-		await page.getByLabel('Sidebar').waitFor({ state: 'visible' });
-	},
-});
-
-snapshotInformational(CompositionVR, {
-	description: 'below md breakpoint - side nav expanded',
-	featureFlags: {
-		platform_design_system_nav4_panel_default_border: [false, true],
-		platform_design_system_nav4_sidenav_border: [false, true],
-	},
-	prepare: async (page: Page) => {
-		await page.setViewportSize({
-			width: 1023,
-			height: 768,
-		});
-
-		await page.getByRole('button', { name: 'Expand sidebar' }).click();
-	},
-});

package/src/ui/page-layout/__tests__/informational-vr-tests/top-nav.vr.tsx

@@ -1,170 +0,0 @@
-import type { Page } from '@playwright/test';
-
-import {
-	Device,
-	type Hooks,
-	snapshotInformational,
-	type SnapshotTestOptions,
-} from '@af/visual-regression';
-
-import { CompositionVR } from '../../../../../examples/composition';
-import TopNavigationStressExample from '../../../../../examples/top-navigation-stress';
-
-/**
- * There seems to be a bug with the grid layouts in the Chrome snapshots.
- *
- * The columns don't get calculated the same way they do in a real browser,
- * and there were incorrect snapshots.
- *
- * Using Firefox as a workaround because it matches what is actually seen by users.
- */
-const chromeBugWorkaroundVariants: SnapshotTestOptions<Hooks>['variants'] = [
-	{ name: 'Firefox', device: Device.DESKTOP_FIREFOX, environment: { colorScheme: 'light' } },
-];
-
-snapshotInformational(TopNavigationStressExample, {
-	description: 'breakpoint xs',
-	variants: chromeBugWorkaroundVariants,
-	prepare: async (page: Page) => {
-		await page.setViewportSize({
-			width: 480,
-			height: 720,
-		});
-	},
-});
-
-snapshotInformational(TopNavigationStressExample, {
-	description: 'breakpoint sm',
-	variants: chromeBugWorkaroundVariants,
-	prepare: async (page: Page) => {
-		await page.setViewportSize({
-			width: 768,
-			height: 720,
-		});
-	},
-});
-
-snapshotInformational(TopNavigationStressExample, {
-	description: 'breakpoint md',
-	variants: chromeBugWorkaroundVariants,
-	prepare: async (page: Page) => {
-		await page.setViewportSize({
-			width: 1024,
-			height: 720,
-		});
-	},
-});
-
-snapshotInformational(TopNavigationStressExample, {
-	description: 'breakpoint lg',
-	variants: chromeBugWorkaroundVariants,
-	prepare: async (page: Page) => {
-		await page.setViewportSize({
-			width: 1440,
-			height: 720,
-		});
-	},
-});
-
-snapshotInformational(TopNavigationStressExample, {
-	description: 'breakpoint xl',
-	variants: chromeBugWorkaroundVariants,
-	prepare: async (page: Page) => {
-		await page.setViewportSize({
-			width: 1768,
-			height: 720,
-		});
-	},
-});
-
-/**
- * Introducing column min widths
- */
-
-snapshotInformational(CompositionVR, {
-	description: 'breakpoint md - composition',
-	variants: chromeBugWorkaroundVariants,
-	prepare: async (page: Page) => {
-		await page.setViewportSize({
-			width: 1024,
-			height: 720,
-		});
-	},
-});
-
-snapshotInformational(CompositionVR, {
-	description: 'breakpoint lg - composition',
-	variants: chromeBugWorkaroundVariants,
-	prepare: async (page: Page) => {
-		await page.setViewportSize({
-			width: 1440,
-			height: 720,
-		});
-	},
-});
-
-snapshotInformational(CompositionVR, {
-	description: 'breakpoint xl - composition',
-	variants: chromeBugWorkaroundVariants,
-	prepare: async (page: Page) => {
-		await page.setViewportSize({
-			width: 1768,
-			height: 720,
-		});
-	},
-});
-
-snapshotInformational(TopNavigationStressExample, {
-	description: 'breakpoint xs - with min widths',
-	variants: chromeBugWorkaroundVariants,
-	prepare: async (page: Page) => {
-		await page.setViewportSize({
-			width: 480,
-			height: 720,
-		});
-	},
-});
-
-snapshotInformational(TopNavigationStressExample, {
-	description: 'breakpoint sm - with min widths',
-	variants: chromeBugWorkaroundVariants,
-	prepare: async (page: Page) => {
-		await page.setViewportSize({
-			width: 768,
-			height: 720,
-		});
-	},
-});
-
-snapshotInformational(TopNavigationStressExample, {
-	description: 'breakpoint md - with min widths',
-	variants: chromeBugWorkaroundVariants,
-	prepare: async (page: Page) => {
-		await page.setViewportSize({
-			width: 1024,
-			height: 720,
-		});
-	},
-});
-
-snapshotInformational(TopNavigationStressExample, {
-	description: 'breakpoint lg - with min widths',
-	variants: chromeBugWorkaroundVariants,
-	prepare: async (page: Page) => {
-		await page.setViewportSize({
-			width: 1440,
-			height: 720,
-		});
-	},
-});
-
-snapshotInformational(TopNavigationStressExample, {
-	description: 'breakpoint xl - with min widths',
-	variants: chromeBugWorkaroundVariants,
-	prepare: async (page: Page) => {
-		await page.setViewportSize({
-			width: 1768,
-			height: 720,
-		});
-	},
-});

package/src/ui/page-layout/__tests__/unit/_test-utils.tsx

@@ -1,185 +0,0 @@
-export function resetMatchMedia() {
-	const mediaNoop: MediaQueryList = {
-		media: '',
-		addListener: () => {
-			throw new Error('invariant: unsupported');
-		},
-		removeListener: () => {
-			throw new Error('invariant: unsupported');
-		},
-		dispatchEvent: () => {
-			throw new Error('invariant: unsupported');
-		},
-		onchange: () => {
-			throw new Error('invariant: unsupported');
-		},
-		addEventListener: () => {},
-		removeEventListener: () => {},
-		matches: false,
-	};
-
-	Object.defineProperty(window, 'matchMedia', {
-		value: jest.fn(() => mediaNoop),
-		writable: true,
-	});
-}
-
-type MatchMediaCallback = (this: MediaQueryList, ev: MediaQueryListEventMap['change']) => any;
-type UpdateMediaQueryResult = (match: boolean) => void;
-
-/**
- * Mocks the `window.matchMedia` function to simulate a media query match.
- * It returns a function that can be called to update whether the media query matches.
- *
- * __Note: this does not mock CSS `@media` queries.__
- *
- * Example usage:
- * ```tsx
- * // Media query initially matches
- * const matches = setMediaQuery('(min-width: 64rem)', { initial: true });
- *
- * // Change the media query result
- * act(() => matches(false));
- * ```
- */
-export function setMediaQuery(
-	query: string,
-	opts: { initial: boolean } = { initial: true },
-): UpdateMediaQueryResult {
-	class MediaQueryListEvent extends Event {
-		readonly media: string;
-
-		readonly matches: boolean;
-
-		constructor(
-			type: 'change',
-			options: {
-				media?: string;
-				matches?: boolean;
-			} = {},
-		) {
-			super(type);
-			this.media = options.media || '';
-			this.matches = options.matches || false;
-		}
-	}
-
-	const listeners: MatchMediaCallback[] = [];
-	const media: MediaQueryList = {
-		media: query,
-		addListener: () => {
-			throw new Error('invariant: unsupported');
-		},
-		removeListener: () => {
-			throw new Error('invariant: unsupported');
-		},
-		dispatchEvent: () => {
-			throw new Error('invariant: unsupported');
-		},
-		onchange: () => {
-			throw new Error('invariant: unsupported');
-		},
-		addEventListener: (
-			_type: 'change',
-			cb: ((this: MediaQueryList, event: MediaQueryListEventMap['change']) => any) &
-				EventListenerOrEventListenerObject,
-			_options?: boolean | AddEventListenerOptions,
-		): void => {
-			listeners.push(cb);
-		},
-		removeEventListener: (
-			_type: 'change',
-			cb: ((this: MediaQueryList, event: MediaQueryListEventMap['change']) => any) &
-				EventListenerOrEventListenerObject,
-			_options?: boolean | AddEventListenerOptions,
-		) => {
-			listeners.splice(listeners.indexOf(cb), 1);
-		},
-		matches: opts.initial,
-	};
-	const mediaNoop: MediaQueryList = {
-		media: query,
-		addListener: () => {
-			throw new Error('invariant: unsupported');
-		},
-		removeListener: () => {
-			throw new Error('invariant: unsupported');
-		},
-		dispatchEvent: () => {
-			throw new Error('invariant: unsupported');
-		},
-		onchange: () => {
-			throw new Error('invariant: unsupported');
-		},
-		addEventListener: () => {
-			throw new Error(`match media for "${query}" not set up`);
-		},
-		removeEventListener: () => {
-			throw new Error(`match media for "${query}" not set up`);
-		},
-		matches: false,
-	};
-
-	Object.defineProperty(window, 'matchMedia', {
-		value: jest.fn((q) => (query === q ? media : mediaNoop)),
-		writable: true,
-	});
-
-	return (match: boolean) => {
-		Object.defineProperty(media, 'matches', {
-			value: match,
-			writable: true,
-		});
-
-		listeners.forEach((cb) =>
-			cb.call(media, new MediaQueryListEvent('change', { matches: media.matches, media: query })),
-		);
-	};
-}
-
-/**
- * A function that resets the console error mock.
- */
-export type ResetConsoleErrorFn = () => void;
-
-/**
- * Mocks console.error to filter out error messages that match the provided regex.
- *
- * @returns A function that resets the console error mock.
- *
- * @example
- * ```tsx
- * let resetConsoleErrorSpyFn: ResetConsoleErrorFn;
- * beforeAll(() => {
- *  resetConsoleErrorSpyFn = filterFromConsoleErrorOutput(parseCssErrorRegex);
- * });
- *
- * afterAll(() => {
- *   resetConsoleErrorSpyFn();
- * });
- * ```
- */
-export function filterFromConsoleErrorOutput(searchString: RegExp): ResetConsoleErrorFn {
-	const consoleErrorSpy = jest.spyOn(console, 'error').mockImplementation((...args) => {
-		// Filter out messages that match the regex
-		if (
-			typeof args[0] === 'object' &&
-			typeof args[0].message === 'string' &&
-			args[0].message.match(searchString)
-		) {
-			return;
-		}
-
-		// Log other messages
-		console.warn(...args);
-	});
-
-	// Restore the original console.error method
-	return function resetSpy() {
-		consoleErrorSpy.mockRestore();
-	};
-}
-
-// Expected error due to jsdom not knowing how to parse the `@starting-style` at-rule.
-// See: https://github.com/jsdom/jsdom/issues/3236
-export const parseCssErrorRegex = /Could not parse CSS stylesheet/;

package/src/ui/page-layout/__tests__/unit/aside.test.tsx

@@ -1,21 +0,0 @@
-import React from 'react';
-
-import { render, screen } from '@testing-library/react';
-
-import { Aside } from '../../aside';
-
-it('should set the default aside width to the default value if width is not provided', () => {
-	render(<Aside testId="aside">aside</Aside>);
-
-	expect(screen.getByTestId('aside')).toHaveStyle({ '--n_asDw': 'clamp(0px, 330px, 50vw)' });
-});
-
-it('should set the default aside width to the provided value', () => {
-	render(
-		<Aside testId="aside" defaultWidth={199}>
-			aside
-		</Aside>,
-	);
-
-	expect(screen.getByTestId('aside')).toHaveStyle({ '--n_asDw': 'clamp(0px, 199px, 50vw)' });
-});

package/src/ui/page-layout/__tests__/unit/banner.test.tsx

@@ -1,31 +0,0 @@
-import React from 'react';
-
-import { render, screen } from '@testing-library/react';
-
-import { Banner } from '../../banner';
-
-it('should set the height to the default value if height is not provided', () => {
-	render(<Banner>banner</Banner>);
-
-	expect(screen.getByText('banner')).toHaveTextContent(
-		'#unsafe-design-system-page-layout-root { --n_bnrM: 48px }',
-	);
-});
-
-it('should set the height to the provided value', () => {
-	render(<Banner height={122}>banner</Banner>);
-
-	expect(screen.getByText('banner')).toHaveTextContent(
-		'#unsafe-design-system-page-layout-root { --n_bnrM: 122px }',
-	);
-});
-
-// The top bar uses `<header>` which implicitly has `role="banner"`
-// Each page should only have one `banner` role
-// Top bar is more suitable for this role
-it('should not have role="banner"', () => {
-	render(<Banner testId="banner">banner</Banner>);
-
-	expect(screen.getByTestId('banner')).toHaveTextContent('banner');
-	expect(screen.queryByRole('banner')).not.toBeInTheDocument();
-});

package/src/ui/page-layout/__tests__/unit/get-width.test.tsx

@@ -1,12 +0,0 @@
-import { getPixelWidth } from '../../panel-splitter/get-width';
-
-describe('getPixelWidth', () => {
-	it('should return the computed width of an element in pixels', () => {
-		const element = document.createElement('div');
-		element.style.width = '100px';
-
-		const result = getPixelWidth(element);
-
-		expect(result).toEqual(100);
-	});
-});

package/src/ui/page-layout/__tests__/unit/hoist-utils.test.tsx

@@ -1,85 +0,0 @@
-import React from 'react';
-
-import { render, screen } from '@testing-library/react';
-
-import { media } from '@atlaskit/primitives/responsive';
-
-import { DangerouslyHoistCssVarToDocumentRoot, HoistCssVarToLocalGrid } from '../../hoist-utils';
-
-describe('HoistCssVarToLocalGrid', () => {
-	it('should add the correct style rule', () => {
-		render(
-			<div data-testid="test-wrapper">
-				<HoistCssVarToLocalGrid variableName="--test-variable" value={100} />
-			</div>,
-		);
-
-		expect(screen.getByTestId('test-wrapper')).toHaveTextContent(
-			'#unsafe-design-system-page-layout-root { --test-variable: 100px }',
-		);
-	});
-});
-
-describe('DangerouslyHoistCssVarToDocumentRoot', () => {
-	it('should add the correct style rule when the value is a number', () => {
-		render(
-			<div data-testid="test-wrapper">
-				<DangerouslyHoistCssVarToDocumentRoot variableName="--test-variable" value={100} />
-			</div>,
-		);
-
-		expect(screen.getByTestId('test-wrapper')).toHaveTextContent(
-			':root { --test-variable: 100px }',
-		);
-	});
-
-	it('should add the correct style rule when the value is a string', () => {
-		render(
-			<div data-testid="test-wrapper">
-				<DangerouslyHoistCssVarToDocumentRoot variableName="--test-variable" value="100px" />
-			</div>,
-		);
-
-		expect(screen.getByTestId('test-wrapper')).toHaveTextContent(
-			':root { --test-variable: 100px }',
-		);
-	});
-
-	it('should add media query when mediaQuery and responsiveValue are provided', () => {
-		render(
-			<div data-testid="test-wrapper">
-				<DangerouslyHoistCssVarToDocumentRoot
-					variableName="--test-variable"
-					value={100}
-					mediaQuery={media.above.sm}
-					responsiveValue={200}
-				/>
-			</div>,
-		);
-
-		expect(screen.getByTestId('test-wrapper')).toHaveTextContent(
-			':root { --test-variable: 100px }',
-		);
-		expect(screen.getByTestId('test-wrapper')).toHaveTextContent(
-			'@media (min-width: 48rem) { :root { --test-variable: 200px } }',
-		);
-	});
-
-	it('should not add media query when media query is provided but responsive value is not provided', () => {
-		render(
-			<div data-testid="test-wrapper">
-				<DangerouslyHoistCssVarToDocumentRoot
-					variableName="--test-variable"
-					value={100}
-					mediaQuery={media.above.sm}
-				/>
-			</div>,
-		);
-
-		expect(screen.getByTestId('test-wrapper')).toHaveTextContent(
-			':root { --test-variable: 100px }',
-		);
-
-		expect(screen.getByTestId('test-wrapper')).not.toHaveTextContent('@media (min-width: 48rem)');
-	});
-});