@guardian/stand 0.0.2 → 0.0.4

package/src/byline/Byline.stories.tsx

@@ -1,186 +0,0 @@
-import type { Meta, StoryObj } from '@storybook/react-vite';
-import { Byline } from './Byline';
-import { contributors } from './contributors-fixture';
-import type { TaggedContributor } from './lib';
-
-const searchContributors = (
-	selectedText: string,
-): Promise<TaggedContributor[]> => {
-	return new Promise<TaggedContributor[]>((resolve) => {
-		const results = contributors
-			.filter((name) =>
-				name.toLowerCase().includes(selectedText.toLowerCase()),
-			)
-			.map((name, index) => ({
-				path: `profile/${name.toLowerCase().replace(/\s/g, '-')}`,
-				label: name,
-				type: 'Contributor',
-				tagId: `${index + 1}`,
-				// show internal label for every 5th contributor for testing internalLabel
-				internalLabel:
-					index % 5 === 0 ? `${name} (internal)` : undefined,
-			}))
-			.slice(0, 20);
-
-		return resolve(results);
-	});
-};
-
-const disableSnapshot = {
-	parameters: {
-		chromatic: { disableSnapshot: true },
-	},
-};
-
-const meta = {
-	title: 'Stand/Byline',
-	component: Byline,
-	parameters: {},
-	args: {
-		handleSave: () => {},
-		initialValue: [],
-		searchContributors,
-		enablePreview: true,
-	},
-} satisfies Meta<typeof Byline>;
-
-type Story = StoryObj<typeof Byline>;
-
-export const Default = {} satisfies Story;
-
-export const WithTheme = {
-	args: {
-		allowUntaggedContributors: true,
-		searchContributors,
-		theme: {
-			editor: {
-				invisibles: {
-					color: 'lightblue',
-				},
-				color: 'rgba(255, 255, 255, 0.87)',
-				background: 'rgb(51, 51, 51)',
-				border: '1px solid rgb(173, 216, 230)',
-				chip: {
-					color: 'initial',
-					taggedBackground: 'rgb(173, 216, 230)',
-					border: '1px solid rgb(173, 216, 230)',
-					borderRadius: '3px',
-					padding: '5.5px 7px',
-					untagged: {
-						color: 'rgba(255, 255, 255, 0.87)',
-					},
-				},
-			},
-			dropdown: {
-				background: 'rgb(36, 36, 36)',
-				li: {
-					color: 'rgba(255, 255, 255, 0.87)',
-					borderBottom: 'none',
-					selected: {
-						color: 'rgba(255, 255, 255, 0.87)',
-						background: 'rgb(51, 51, 51)',
-					},
-				},
-			},
-		},
-	},
-} satisfies Story;
-
-export const WithUntaggedContributors = {
-	args: {
-		allowUntaggedContributors: true,
-	},
-	...disableSnapshot,
-} satisfies Story;
-
-export const WithInitialValue = {
-	args: {
-		allowUntaggedContributors: true,
-		initialValue: [
-			{
-				type: 'contributor',
-				value: 'Joe Bloggs',
-				tagId: '1',
-				path: 'profile/joebloggs',
-			},
-			{
-				type: 'text',
-				value: ' in London, ',
-			},
-			{
-				type: 'contributor',
-				value: 'Jane Doe',
-			},
-			{
-				type: 'text',
-				value: ' in New York',
-			},
-		],
-	},
-} satisfies Story;
-
-export const WithNoSearch = {
-	args: {
-		allowUntaggedContributors: true,
-		searchContributors: undefined,
-	},
-	...disableSnapshot,
-} satisfies Story;
-
-export const WithNoSearchAndNoUntagged = {
-	args: {
-		allowUntaggedContributors: false,
-		searchContributors: undefined,
-	},
-	...disableSnapshot,
-} satisfies Story;
-
-export const WithCustomPlaceholder = {
-	args: {
-		allowUntaggedContributors: true,
-		placeholder: 'A custom placeholder...',
-	},
-} satisfies Story;
-
-export const WithContributorLimit = {
-	args: { contributorLimit: 1 },
-	...disableSnapshot,
-} satisfies Story;
-
-export const WithoutPreview = {
-	args: {
-		allowUntaggedContributors: true,
-		enablePreview: false,
-	},
-	...disableSnapshot,
-} satisfies Story;
-
-export const ReadOnly = {
-	args: {
-		readOnly: true,
-		allowUntaggedContributors: true,
-		enablePreview: true,
-		initialValue: [
-			{
-				type: 'contributor',
-				value: 'Joe Bloggs',
-				tagId: '1',
-				path: 'profile/joebloggs',
-			},
-			{
-				type: 'text',
-				value: ' in London and ',
-			},
-			{
-				type: 'contributor',
-				value: 'Jane Doe',
-			},
-			{
-				type: 'text',
-				value: ' in New York',
-			},
-		],
-	},
-} satisfies Story;
-
-export default meta;

package/src/byline/Byline.test.tsx

@@ -1,450 +0,0 @@
-import { act, render } from '@testing-library/react';
-import { screen } from '@testing-library/react';
-import userEvent from '@testing-library/user-event';
-import type { EditorView } from 'prosemirror-view';
-import { mockEditorViewMethods } from '../mocks/prosemirror-view';
-import { Byline } from './Byline';
-import type { BylineModel, TaggedContributor } from './lib';
-
-jest.mock('prosemirror-view', () => {
-	const actualProsemirrorView = jest.requireActual('prosemirror-view');
-	const Class = actualProsemirrorView.EditorView as typeof EditorView;
-	class MockEditorView extends Class {
-		posAtCoords = mockEditorViewMethods.posAtCoords;
-		coordsAtPos = mockEditorViewMethods.coordsAtPos;
-	}
-	return {
-		...actualProsemirrorView,
-		EditorView: MockEditorView,
-	};
-});
-
-// Mock the offsetParent used for visibility in the test dom
-// See https://github.com/jsdom/jsdom/issues/1261
-Object.defineProperty(HTMLElement.prototype, 'offsetParent', {
-	get() {
-		return this.parentNode;
-	},
-});
-
-// Mock scrollIntoView for testing, else we get `TypeError: selectedOption.scrollIntoView is not a function` errors
-Element.prototype.scrollIntoView = jest.fn();
-
-const mockSearchContributors: (
-	selectedText: string,
-) => Promise<TaggedContributor[]> = (selectedText: string) => {
-	const allContributors: TaggedContributor[] = [
-		{
-			path: 'profile/mahesh-makani',
-			label: 'Mahesh Makani',
-			internalLabel: 'Mahesh Makani (Software Engineer)',
-			tagId: '1',
-		},
-		{
-			path: 'profile/andrew-howe-ely',
-			label: 'Andrew Howe-Ely',
-			tagId: '2',
-		},
-		{
-			path: 'profile/jane-smith',
-			label: 'Jane Smith',
-			internalLabel: 'Jane Smith (Journalist)',
-			tagId: '3',
-		},
-		{
-			path: 'profile/john-doe',
-			label: 'John Doe',
-			tagId: '4',
-		},
-	];
-
-	const filteredContributors = allContributors.filter((contributor) =>
-		contributor.label
-			.toLowerCase()
-			.startsWith(selectedText.toLowerCase().trim()),
-	);
-
-	return Promise.resolve(filteredContributors);
-};
-
-describe('Byline editor', () => {
-	it('shows dropdown with untagged contributor suggestion, hides when click away', async () => {
-		const user = userEvent.setup();
-		render(
-			<Byline allowUntaggedContributors={true} handleSave={() => {}} />,
-		);
-
-		await act(async () => {
-			await user.type(screen.getByRole('combobox'), 'Test');
-		});
-
-		const dropdown = screen.getByRole('listbox');
-		expect(dropdown).toHaveTextContent(
-			'Add "Test" as untagged contributor',
-		);
-
-		await act(async () => {
-			await user.click(document.body);
-		});
-		expect(dropdown).not.toBeVisible();
-	});
-	it('adds a chip from the dropdown', async () => {
-		const user = userEvent.setup();
-		render(
-			<Byline allowUntaggedContributors={true} handleSave={() => {}} />,
-		);
-
-		const editor = screen.getByRole('combobox');
-		await act(async () => {
-			await user.type(screen.getByRole('combobox'), 'Test');
-			await user.click(screen.getByRole('option'));
-		});
-
-		const chip = editor.querySelector('chip[data-label="Test"]');
-		expect(chip).toBeInTheDocument();
-		expect(chip).toHaveTextContent('Test');
-	});
-	it('deletes a chip when clicking x', async () => {
-		const user = userEvent.setup();
-		render(
-			<Byline allowUntaggedContributors={true} handleSave={() => {}} />,
-		);
-
-		const editor = screen.getByRole('combobox');
-		await act(async () => {
-			await user.type(screen.getByRole('combobox'), 'Test');
-			await user.click(screen.getByRole('option'));
-		});
-
-		const chip = editor.querySelector('chip[data-label="Test"]');
-		expect(chip).toBeInTheDocument();
-
-		const deleteHander = screen.getByTitle('Delete Test');
-
-		await act(async () => {
-			await user.click(deleteHander);
-		});
-		expect(chip).not.toBeInTheDocument();
-	});
-	it('hides dropdown with escape key', async () => {
-		const user = userEvent.setup();
-		render(
-			<Byline allowUntaggedContributors={true} handleSave={() => {}} />,
-		);
-
-		await act(async () => {
-			await user.type(screen.getByRole('combobox'), 'Test');
-		});
-
-		const dropdown = screen.getByRole('listbox');
-		expect(dropdown).toHaveTextContent(
-			'Add "Test" as untagged contributor',
-		);
-
-		await act(async () => {
-			await user.type(screen.getByRole('combobox'), '{Escape}');
-		});
-		expect(dropdown).not.toBeVisible();
-	});
-	it('displays placeholder text when no content is present', async () => {
-		const user = userEvent.setup();
-		render(
-			<Byline
-				allowUntaggedContributors={true}
-				placeholder="Placeholder"
-				handleSave={() => {}}
-			/>,
-		);
-
-		const placeholder = await screen.findByText('Placeholder');
-		expect(placeholder).toBeInTheDocument();
-
-		await act(async () => {
-			await user.type(screen.getByRole('combobox'), 'Test');
-		});
-
-		expect(placeholder).not.toBeVisible();
-	});
-	it('renders search options in dropdown', async () => {
-		const user = userEvent.setup();
-		render(
-			<Byline
-				allowUntaggedContributors={true}
-				placeholder="Placeholder"
-				handleSave={() => {}}
-				searchContributors={mockSearchContributors}
-			/>,
-		);
-
-		await act(async () => {
-			await user.click(screen.getByRole('combobox'));
-			await user.type(screen.getByRole('combobox'), 'Ma'); // Type "Ma" to match "Mahesh Makani"
-		});
-
-		// testing internalLabel
-		const mahesh = screen.getByText('Mahesh Makani (Software Engineer)');
-		expect(mahesh).toBeInTheDocument();
-
-		await act(async () => {
-			await user.clear(screen.getByRole('combobox'));
-			await user.type(screen.getByRole('combobox'), 'A');
-		});
-
-		// testing label
-		const andrew = screen.getByText('Andrew Howe-Ely');
-		expect(andrew).toBeInTheDocument();
-	});
-	it('moves the selected option in dropdown with arrow keys', async () => {
-		const user = userEvent.setup();
-		render(
-			<Byline
-				allowUntaggedContributors={true}
-				placeholder="Placeholder"
-				handleSave={() => {}}
-				searchContributors={mockSearchContributors}
-			/>,
-		);
-
-		await act(async () => {
-			await user.click(screen.getByRole('combobox'));
-			await user.type(screen.getByRole('combobox'), 'J'); // Type "J" to match both "Jane Smith" and "John Doe"
-			await user.type(screen.getByRole('combobox'), '{ArrowDown}');
-			await user.type(screen.getByRole('combobox'), '{ArrowDown}');
-		});
-
-		const lastOption = screen.getAllByRole('option').pop();
-		expect(lastOption).toHaveAttribute('aria-selected', 'true');
-	});
-	it('adds a chip with the Enter key', async () => {
-		const user = userEvent.setup();
-		render(
-			<Byline
-				allowUntaggedContributors={true}
-				placeholder="Placeholder"
-				handleSave={() => {}}
-				searchContributors={mockSearchContributors}
-			/>,
-		);
-		const editor = screen.getByRole('combobox');
-
-		await act(async () => {
-			await user.click(editor);
-			await user.type(screen.getByRole('combobox'), 'Andrew'); // Type full name to ensure it's found
-		});
-
-		// Wait for the dropdown to appear and verify the option exists
-		const andrewOption = await screen.findByText('Andrew Howe-Ely');
-		expect(andrewOption).toBeInTheDocument();
-
-		await act(async () => {
-			await user.type(screen.getByRole('combobox'), '{Enter}'); // Select the first option
-		});
-
-		const chip = editor.querySelector('chip[data-label="Andrew Howe-Ely"]');
-		expect(chip).toBeInTheDocument();
-		expect(chip).toHaveTextContent('Andrew Howe-Ely');
-	});
-	it('executes save function on every keypress', async () => {
-		const user = userEvent.setup();
-		const mockHandleSave = jest.fn();
-		render(
-			<Byline
-				allowUntaggedContributors={true}
-				placeholder="Placeholder"
-				handleSave={mockHandleSave}
-				searchContributors={mockSearchContributors}
-			/>,
-		);
-		const editor = screen.getByRole('combobox');
-
-		await act(async () => {
-			await user.type(editor, 'T');
-			await user.type(editor, 'e');
-			await user.type(editor, 's');
-			await user.type(editor, 't');
-		});
-
-		expect(mockHandleSave).toHaveBeenCalledTimes(4);
-	});
-	it('executes save function with correct input at each keypress', async () => {
-		const user = userEvent.setup();
-		const saveLog: BylineModel[] = [];
-		const mockHandleSave = (value: BylineModel) => {
-			saveLog.push(value);
-		};
-		render(
-			<Byline
-				allowUntaggedContributors={true}
-				placeholder="Placeholder"
-				handleSave={mockHandleSave}
-				searchContributors={mockSearchContributors}
-			/>,
-		);
-		const editor = screen.getByRole('combobox');
-
-		await act(async () => {
-			await user.type(editor, 'T');
-			await user.type(editor, 'e');
-			await user.type(editor, 's');
-			await user.type(editor, 't');
-		});
-
-		expect(saveLog.at(0)?.pop()?.value).toBe('T');
-		expect(saveLog.at(1)?.pop()?.value).toBe('Te');
-		expect(saveLog.at(2)?.pop()?.value).toBe('Tes');
-		expect(saveLog.at(3)?.pop()?.value).toBe('Test');
-	});
-	it('passes * character to search function', async () => {
-		const user = userEvent.setup();
-		const mockSearch = jest.fn().mockImplementation(mockSearchContributors);
-		render(
-			<Byline
-				allowUntaggedContributors={true}
-				placeholder="Placeholder"
-				handleSave={() => {}}
-				searchContributors={mockSearch}
-			/>,
-		);
-		const editor = screen.getByRole('combobox');
-
-		await act(async () => {
-			await user.type(editor, '*Test');
-		});
-
-		expect(mockSearch).toHaveBeenLastCalledWith('*Test');
-
-		await act(async () => {
-			await user.clear(editor);
-			await user.type(editor, 'T*est');
-		});
-
-		expect(mockSearch).toHaveBeenLastCalledWith('T*est');
-
-		await act(async () => {
-			await user.clear(editor);
-			await user.type(editor, 'Te-St*');
-		});
-
-		expect(mockSearch).toHaveBeenLastCalledWith('Te-St*');
-	});
-});
-
-describe('trackTypingFromStart behavior', () => {
-	it('starts tracking when typing from start', async () => {
-		const user = userEvent.setup();
-		const mockHandleSave = jest.fn();
-
-		render(
-			<Byline
-				allowUntaggedContributors={true}
-				handleSave={mockHandleSave}
-				searchContributors={mockSearchContributors}
-				initialValue={[
-					{ type: 'text', value: 'Existing content and more text' },
-				]}
-			/>,
-		);
-
-		const editor = screen.getByRole('combobox');
-
-		// Start typing from the beginning
-		await act(async () => {
-			await user.click(editor);
-			await user.keyboard('{Home}J');
-		});
-
-		expect(
-			screen.queryByText('JExisting content and more text'),
-		).toBeInTheDocument();
-
-		expect(screen.getByRole('listbox')).toBeVisible();
-		expect(screen.getByText('Jane Smith (Journalist)')).toBeInTheDocument();
-		expect(screen.getByText('John Doe')).toBeInTheDocument();
-
-		await act(async () => {
-			await user.keyboard('ohn');
-		});
-
-		expect(
-			screen.queryByText('JohnExisting content and more text'),
-		).toBeInTheDocument();
-		expect(screen.getByRole('listbox')).toBeVisible();
-		expect(screen.getByText('John Doe')).toBeInTheDocument();
-		expect(
-			screen.queryByText('Jane Smith (Journalist)'),
-		).not.toBeInTheDocument();
-
-		await act(async () => {
-			await user.click(screen.getByText('John Doe'));
-		});
-
-		const chip = editor.querySelector('chip[data-label="John Doe"]');
-		expect(chip).toBeInTheDocument();
-
-		expect(
-			screen.queryByText('Existing content and more text'),
-		).toBeInTheDocument();
-	});
-
-	it('handles backspace correctly within tracked range', async () => {
-		const user = userEvent.setup();
-		const mockHandleSave = jest.fn();
-
-		render(
-			<Byline
-				allowUntaggedContributors={true}
-				handleSave={mockHandleSave}
-				searchContributors={mockSearchContributors}
-				initialValue={[
-					{ type: 'text', value: 'Existing content and more text' },
-				]}
-			/>,
-		);
-
-		const editor = screen.getByRole('combobox');
-
-		// Type some text
-		await act(async () => {
-			await user.click(editor);
-			await user.keyboard('{Home}John');
-		});
-
-		expect(screen.getByRole('listbox')).toBeVisible();
-		expect(screen.getByText('John Doe')).toBeInTheDocument();
-
-		// backspace to fix a typo
-		await act(async () => {
-			await user.keyboard('{Backspace}'.repeat(2));
-		});
-
-		// should still be tracking (within range) and show contributors starting with "Jo"
-		expect(screen.getByRole('listbox')).toBeVisible();
-		expect(screen.getByText('John Doe')).toBeInTheDocument();
-
-		// backspace and edit name
-		await act(async () => {
-			await user.keyboard('{Backspace}ane');
-		});
-
-		expect(
-			screen.queryByText('JaneExisting content and more text'),
-		).toBeInTheDocument();
-
-		expect(screen.getByRole('listbox')).toBeVisible();
-		expect(
-			screen.queryByText('Jane Smith (Journalist)'),
-		).toBeInTheDocument();
-		expect(screen.queryByText('John Doe')).not.toBeInTheDocument();
-
-		await act(async () => {
-			await user.click(screen.getByText('Jane Smith (Journalist)'));
-		});
-
-		const chip = editor.querySelector('chip[data-label="Jane Smith"]');
-		expect(chip).toBeInTheDocument();
-
-		expect(
-			screen.queryByText('Existing content and more text'),
-		).toBeInTheDocument();
-	});
-});