Initial bun testing implementation (blocked by oven-sh/bun#198)

Author: EvHaus

benchmarks/bun/bunfig.toml

@@ -0,0 +1,2 @@
+[test]
+preload = ["./helpers/happydom.ts"]

benchmarks/bun/helpers/happydom.ts

@@ -0,0 +1,3 @@
+import { GlobalRegistrator } from "@happy-dom/global-registrator";
+
+GlobalRegistrator.register();

benchmarks/bun/package.json

@@ -0,0 +1,25 @@
+{
+  "name": "bun",
+  "version": "0.2.0",
+  "description": "",
+  "scripts": {
+    "test": "TZ=UTC bun test"
+  },
+  "author": "",
+  "license": "MIT",
+  "dependencies": {
+    "@blueprintjs/icons": "4.6.3",
+    "@floating-ui/react-dom-interactions": "0.10.1",
+    "clsx": "1.2.1",
+    "date-fns": "2.29.3",
+    "framer-motion": "7.5.3",
+    "react": "18.2.0",
+    "react-dom": "18.2.0"
+  },
+  "devDependencies": {
+    "@happy-dom/global-registrator": "9.19.2",
+    "happy-dom": "7.4.0",
+    "jsdom": "22.0.0",
+    "sinon": "15.1.0"
+  }
+}

benchmarks/bun/tests/.gitignore

@@ -0,0 +1 @@
+replica*

benchmarks/bun/tests/original/Alert/Alert.module.css

@@ -0,0 +1,60 @@
+.main {
+	border: 1px solid transparent;
+	border-radius: 8px;
+	display: flex;
+	font-size: 14px;
+	padding: 16px;
+}
+
+.error {
+	background: var(--R50);
+	border-color: var(--R400);
+	color: var(--R400);
+}
+
+/* stylelint-disable-next-line selector-max-type, selector-max-combinators */
+.error a, .error strong { color: inherit }
+
+.info {
+	background: var(--N50);
+	border-color: var(--N400);
+	color: var(--N400);
+}
+
+/* stylelint-disable-next-line selector-max-type, selector-max-combinators */
+.info a, .info strong { color: inherit }
+
+.success {
+	background: var(--G50);
+	border-color: var(--G400);
+	color: var(--G400);
+}
+
+/* stylelint-disable-next-line selector-max-type, selector-max-combinators */
+.success a, .success strong { color: inherit }
+
+.warning {
+	background: var(--Y50);
+	border-color: var(--Y400);
+	color: var(--Y500);
+}
+
+/* stylelint-disable-next-line selector-max-type, selector-max-combinators */
+.warning a, .warning strong { color: inherit }
+
+.icon {
+	margin-right: 16px;
+}
+
+.title {
+	color: inherit;
+	font-weight: bold;
+	margin: 0 0 8px;
+}
+
+.text {
+	display: flex;
+	flex-direction: column;
+}
+
+.children { color: var(--COLOR-GRAY-800) }

benchmarks/bun/tests/original/Alert/Alert.test.tsx

@@ -0,0 +1,30 @@
+import Alert from '.';
+import {cleanup, render} from '@testing-library/react';
+import {afterEach, describe, expect, it} from "bun:test";
+import React from 'react';
+
+describe('<Alert />', () => {
+	// Ideally Bun can give us a way to set this globally
+	afterEach(cleanup);
+
+	it('should render the given message', () => {
+		const {getByText} = render(<Alert>Hello World</Alert>);
+		expect(getByText('Hello World')).toBeDefined();
+	});
+
+	it('should render with only a title', () => {
+		const {getByText} = render(<Alert title='Hello World' />);
+		expect(getByText('Hello World')).toBeDefined();
+	});
+
+	it('should support all the different icons', () => {
+		const {getByLabelText, rerender} = render(<Alert intent='warning' />);
+		expect(getByLabelText('warning-sign')).toBeDefined();
+
+		rerender(<Alert intent='info' />)
+		expect(getByLabelText('info-sign')).toBeDefined();
+
+		rerender(<Alert intent='success' />)
+		expect(getByLabelText('tick-circle')).toBeDefined();
+	});
+});

benchmarks/bun/tests/original/Alert/Alert.tsx

@@ -0,0 +1,48 @@
+import Icon, {IconNames} from '../Icon';
+import clsx from 'clsx';
+import React from 'react';
+import styles from './Alert.module.css';
+
+type IntentType = 'error' | 'info' | 'success' | 'warning';
+
+type PropsType = {
+	className?: string | null,
+	children?: React.ReactNode,
+	intent?: IntentType,
+	title?: string | null,
+}
+
+const getIcon = (intent: IntentType) => {
+	switch (intent) {
+		case 'info': return IconNames.InfoSign;
+		case 'success': return IconNames.TickCircle;
+		case 'warning': return IconNames.WarningSign;
+		case 'error': return IconNames.Error;
+	}
+	return IconNames.Error;
+};
+
+const Alert = ({
+	className,
+	children,
+	intent = 'error',
+	title,
+}: PropsType) => {
+	const classes = clsx(styles.main, styles[intent], className);
+
+	return (
+		<div className={classes} role='alert'>
+			<Icon
+				className={styles.icon}
+				name={getIcon(intent)} />
+			<div className={styles.text}>
+				{title ? <h4 className={styles.title}>{title}</h4> : null}
+				{children ? (
+					<div className={styles.children}>{children}</div>
+				) : null}
+			</div>
+		</div>
+	);
+};
+
+export default Alert;

benchmarks/bun/tests/original/Alert/index.ts

@@ -0,0 +1 @@
+export {default} from './Alert';

benchmarks/bun/tests/original/Avatar/Avatar.module.css

@@ -0,0 +1,9 @@
+.main {
+	align-items: center;
+	border-radius: 100%;
+	display: inline-flex;
+	font-size: 15px;
+	height: 40px;
+	justify-content: center;
+	width: 40px;
+}

benchmarks/bun/tests/original/Avatar/Avatar.test.tsx

@@ -0,0 +1,14 @@
+import Avatar from '.';
+import {cleanup, render} from '@testing-library/react';
+import {afterEach, describe, expect, it} from "bun:test";
+import React from 'react';
+
+describe('<Avatar />', () => {
+	// Ideally Bun can give us a way to set this globally
+	afterEach(cleanup);
+
+	it('should render the avatar with the initials of the title', () => {
+		const {getByText} = render(<Avatar title='Hello World' />);
+		expect(getByText('HW')).toBeDefined();
+	});
+});

benchmarks/bun/tests/original/Avatar/Avatar.tsx

@@ -0,0 +1,60 @@
+import clsx from 'clsx';
+import React from 'react';
+import styles from './Avatar.module.css';
+
+type PropsType = {
+	className?: string | null,
+	colorKey?: SupportedColorsType | null,
+	title?: string | null,
+}
+
+type SupportedColorsType = typeof SUPPORTED_COLORS[number];
+
+const SUPPORTED_COLORS = [
+	'N', 'B', 'G', 'Y', 'R', 'V', 'T', 'P', 'O',
+] as const;
+
+const stringToColorIndex = (str: string) => {
+	// This gives us a number between 0 and 41
+	const chr = (str.length ? str.charCodeAt(0) : 0) - 49;
+
+	// This gives us an index in our supported color range
+	return Math.floor(chr / (41 / SUPPORTED_COLORS.length));
+};
+
+const getColor = (initials: string, colorKey?: string | null) => {
+	const colorIndex = stringToColorIndex(initials);
+	const key = colorKey || SUPPORTED_COLORS[colorIndex];
+	const background = `var(--${key}100)`;
+	const color = `var(--${key}600)`;
+	return {background, color};
+};
+
+const Avatar = ({
+	className,
+	colorKey,
+	title,
+}: PropsType) => {
+	const classes = clsx(styles.main, className);
+	const initials = title?.length ?
+		title
+			.trim()
+			.split(' ')
+			.map((word) => word[0].toUpperCase())
+			.slice(0, 2)
+			.join('') :
+		null;
+	const {background, color} = getColor(initials || '', colorKey);
+	const style = {background, color};
+
+	return (
+		<div
+			className={classes}
+			style={style}
+			title={title || ''}>
+			{initials}
+		</div>
+	);
+};
+
+export default Avatar;

benchmarks/bun/tests/original/Avatar/index.ts

@@ -0,0 +1 @@
+export {default} from './Avatar';

benchmarks/bun/tests/original/Badge/Badge.module.css

@@ -0,0 +1,53 @@
+.main {
+	align-items: center;
+	border-radius: 4px;
+	display: inline-flex;
+	font-size: 11px;
+	height: 16px;
+	padding: 0 6px;
+}
+
+.blue {
+	background: var(--B200);
+	color: var(--B600);
+}
+
+.green {
+	background: var(--G300);
+	color: var(--G600);
+}
+
+.neutral {
+	background: var(--N300);
+	color: var(--N800);
+}
+
+.orange {
+	background: var(--O200);
+	color: var(--O600);
+}
+
+.purple {
+	background: var(--P200);
+	color: var(--P600);
+}
+
+.red {
+	background: var(--R200);
+	color: var(--R600);
+}
+
+.turquoise {
+	background: var(--T200);
+	color: var(--T600);
+}
+
+.violet {
+	background: var(--V200);
+	color: var(--V600);
+}
+
+.yellow {
+	background: var(--Y200);
+	color: var(--Y600);
+}

benchmarks/bun/tests/original/Badge/Badge.test.tsx

@@ -0,0 +1,14 @@
+import Badge from '.';
+import {cleanup, render} from '@testing-library/react';
+import {afterEach, describe, expect, it} from "bun:test";
+import React from 'react';
+
+describe('<Badge />', () => {
+	// Ideally Bun can give us a way to set this globally
+	afterEach(cleanup);
+
+	it('should render the given badge', () => {
+		const {getByText} = render(<Badge>Hello World</Badge>);
+		expect(getByText('Hello World')).toBeDefined();
+	});
+});

benchmarks/bun/tests/original/Badge/Badge.tsx

@@ -0,0 +1,23 @@
+import clsx from 'clsx';
+import React from 'react';
+import styles from './Badge.module.css';
+
+type PropsType = {
+	className?: string | null,
+	children: string,
+	color?: 'blue' | 'green' | 'neutral' | 'orange' | 'purple' | 'red' | 'turquoise' | 'violet' | 'yellow',
+}
+
+const Badge = ({
+	className,
+	children,
+	color = 'neutral',
+}: PropsType) => (
+	<strong
+		className={clsx(styles.main, styles[color], className)}
+		title={children}>
+		{children}
+	</strong>
+);
+
+export default Badge;

benchmarks/bun/tests/original/Badge/index.ts

@@ -0,0 +1 @@
+export {default} from './Badge';