Merge pull request #1300 from capricorn86/1153-copy-to-clipboard-fails

fix: [#1153] Fixes problem with ClipboardItem not supporting text and…
capricorn86 · Mar 12, 2024 · 08cd426 · 08cd426
2 parents 8c56b04 + 03c7b92
commit 08cd426
Show file tree

Hide file tree

Showing 7 changed files with 104 additions and 15 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/packages/happy-dom/src/clipboard/Clipboard.ts b/packages/happy-dom/src/clipboard/Clipboard.ts
@@ -54,7 +54,13 @@ export default class Clipboard {
 		let text = '';
 		for (const item of this.#data) {
 			if (item.types.includes('text/plain')) {
-				text += await (await item.getType('text/plain')).text();
+				const data = await item.getType('text/plain');
+				if (typeof data === 'string') {
+					text += data;
+				} else {
+					// Instance of Blob
+					text += await data.text();
+				}
 			}
 		}
 		return text;

diff --git a/packages/happy-dom/src/clipboard/ClipboardItem.ts b/packages/happy-dom/src/clipboard/ClipboardItem.ts
@@ -9,7 +9,7 @@ import Blob from '../file/Blob.js';
  */
 export default class ClipboardItem {
 	public readonly presentationStyle: 'unspecified' | 'inline' | 'attachment' = 'unspecified';
-	#data: { [mimeType: string]: Blob };
+	#data: { [mimeType: string]: Blob | string | Promise<Blob | string> };
 
 	/**
 	 * Constructor.
@@ -19,14 +19,9 @@ export default class ClipboardItem {
 	 * @param [options.presentationStyle] Presentation style.
 	 */
 	constructor(
-		data: { [mimeType: string]: Blob },
+		data: { [mimeType: string]: Blob | string | Promise<Blob | string> },
 		options?: { presentationStyle?: 'unspecified' | 'inline' | 'attachment' }
 	) {
-		for (const mimeType of Object.keys(data)) {
-			if (mimeType !== data[mimeType].type) {
-				throw new DOMException(`Type ${mimeType} does not match the blob's type`);
-			}
-		}
 		this.#data = data;
 		if (options?.presentationStyle) {
 			this.presentationStyle = options.presentationStyle;
@@ -48,7 +43,7 @@ export default class ClipboardItem {
 	 * @param type Type.
 	 * @returns Data.
 	 */
-	public async getType(type: string): Promise<Blob> {
+	public async getType(type: string): Promise<Blob | string> {
 		if (!this.#data[type]) {
 			throw new DOMException(
 				`Failed to execute 'getType' on 'ClipboardItem': The type '${type}' was not found`

diff --git a/packages/happy-dom/test/clipboard/Clipboard.test.ts b/packages/happy-dom/test/clipboard/Clipboard.test.ts
@@ -15,15 +15,37 @@ describe('Clipboard', () => {
 		it('Reads from the clipboard.', async () => {
 			const items = [
 				new ClipboardItem({
-					'text/plain': new Blob(['test'], { type: 'text/plain' })
+					'text/plain': new Blob(['test-a'], { type: 'text/plain' })
 				}),
 				new ClipboardItem({
-					'text/html': new Blob(['<b>test</b>'], { type: 'text/html' })
+					'text/html': new Blob(['<b>test-b</b>'], { type: 'text/html' })
+				}),
+				new ClipboardItem({
+					'text/plain': 'test-c'
+				}),
+				new ClipboardItem({
+					'text/plain': Promise.resolve('test-d')
+				}),
+				new ClipboardItem({
+					'text/plain': Promise.resolve(new Blob(['test-e'], { type: 'text/plain' }))
 				})
 			];
 			await window.navigator.clipboard.write(items);
 			const data = await window.navigator.clipboard.read();
 			expect(data).toEqual(items);
+
+			let text = '';
+
+			for (const item of data) {
+				const data = await item.getType(item.types[0]);
+				if (typeof data === 'string') {
+					text += data;
+				} else {
+					text += await data.text();
+				}
+			}
+
+			expect(text).toBe('test-a<b>test-b</b>test-ctest-dtest-e');
 		});
 
 		it('Throws an error if the permission is denied.', async () => {
@@ -50,15 +72,24 @@ describe('Clipboard', () => {
 		it('Reads text from the clipboard.', async () => {
 			const items = [
 				new ClipboardItem({
-					'text/plain': new Blob(['test'], { type: 'text/plain' })
+					'text/plain': new Blob(['test-a'], { type: 'text/plain' })
 				}),
 				new ClipboardItem({
-					'text/html': new Blob(['<b>test</b>'], { type: 'text/html' })
+					'text/html': new Blob(['<b>test-b</b>'], { type: 'text/html' })
+				}),
+				new ClipboardItem({
+					'text/plain': 'test-c'
+				}),
+				new ClipboardItem({
+					'text/plain': Promise.resolve('test-d')
+				}),
+				new ClipboardItem({
+					'text/plain': Promise.resolve(new Blob(['test-e'], { type: 'text/plain' }))
 				})
 			];
 			await window.navigator.clipboard.write(items);
 			const data = await window.navigator.clipboard.readText();
-			expect(data).toBe('test');
+			expect(data).toBe('test-atest-ctest-dtest-e');
 		});
 
 		it('Throws an error if the permission is denied.', async () => {

diff --git a/packages/jest-environment/package.json b/packages/jest-environment/package.json
@@ -81,6 +81,7 @@
 		"prettier": "^2.6.0",
 		"react": "^18.2.0",
 		"react-dom": "^18.2.0",
+		"usehooks-ts": "^3.0.1",
 		"rxjs": "^6.5.3",
 		"ts-jest": "^29.1.1",
 		"typescript": "^5.0.4",

diff --git a/packages/jest-environment/test/react/React.test.tsx b/packages/jest-environment/test/react/React.test.tsx
@@ -3,7 +3,12 @@ import ReactDOM from 'react-dom/client';
 import * as ReactTestingLibrary from '@testing-library/react';
 import ReactTestingLibraryUserEvent from '@testing-library/user-event';
 import { act } from 'react-dom/test-utils';
-import { ReactDivComponent, ReactSelectComponent, ReactInputComponent } from './ReactComponents';
+import {
+	ReactDivComponent,
+	ReactSelectComponent,
+	ReactInputComponent,
+	ReactClipboardComponent
+} from './ReactComponents';
 import * as Select from '@radix-ui/react-select';
 
 /* eslint-disable @typescript-eslint/consistent-type-assertions */
@@ -97,4 +102,12 @@ describe('React', () => {
 			'<app><button type="button" role="combobox" aria-controls="radix-:r0:" aria-expanded="false" aria-autocomplete="none" dir="ltr" data-state="closed" data-placeholder=""><span style="pointer-events: none;"></span><span aria-hidden="true">▼</span></button></app>'
 		);
 	});
+
+	it('Can use copy to clipboard hook component', async () => {
+		const { getByRole } = ReactTestingLibrary.render(<ReactClipboardComponent />);
+		expect(document.querySelector('p span').textContent).toBe('Nothing');
+		const button: HTMLButtonElement = getByRole('button') as HTMLButtonElement;
+		await TESTING_LIBRARY_USER.click(button);
+		expect(document.querySelector('p span').textContent).toBe('test');
+	});
 });
diff --git a/packages/jest-environment/test/react/ReactComponents.tsx b/packages/jest-environment/test/react/ReactComponents.tsx
@@ -1,4 +1,5 @@
 import React from 'react';
+import { useCopyToClipboard } from 'usehooks-ts';
 
 /* eslint-disable @typescript-eslint/consistent-type-assertions */
 
@@ -73,3 +74,23 @@ export class ReactInputComponent extends React.Component<{}, {}> {
 		return <input placeholder="input field" />;
 	}
 }
+
+/**
+ *
+ */
+export function ReactClipboardComponent(): React.ReactElement {
+	const [copiedText, copy] = useCopyToClipboard();
+
+	const handleCopy = (text: string) => () => {
+		copy(text);
+	};
+
+	return (
+		<>
+			<button onClick={handleCopy('test')}>A</button>
+			<p>
+				Copied value: <span>{copiedText ?? 'Nothing'}</span>
+			</p>
+		</>
+	);
+}