Chore(button): Button should pass onClick to its "a" render and suppo…

…rt "rel"

.gitignore

@@ -1,2 +1,3 @@
 /node_modules
 .DS_Store
+.idea

core/src/button/button.tsx

@@ -52,6 +52,13 @@ export interface ButtonProps {
 	 * [1]: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a#attr-href
 	 */
 	href?: string;
+	/**
+	 * The [HTML `rel`][1] attribute defines the relationship between a
+	 * linked resource and the current document. Require the `href` attribute.
+	 *
+	 * [1]: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a#attr-rel
+	 */
+	rel?: string;
 	/**
 	 * The [HTML `target`][1] attribute. Require the `href` attribute.
 	 *
@@ -267,10 +274,11 @@ const buttonRender = (
 	return props.href ? (
 		<a
 			{...common}
+			onClick={props.onClick}
 			href={props.href}
-			target={props.target}
 			download={props.download}
-			rel="noopener noreferrer"
+			target={props.target}
+			rel={props.rel || "noopener noreferrer"}
 		/>
 	) : (
 		<button

test/package.json

@@ -9,10 +9,10 @@
 	},
 	"devDependencies": {
 		"@moai/core": "*",
+		"@testing-library/dom": "^8.1.0",
 		"@testing-library/jest-dom": "^5.14.1",
 		"@testing-library/react": "^12.0.0",
 		"@testing-library/user-event": "^13.2.0",
-		"@testing-library/dom": "^8.1.0",
 		"@types/jest": "^26.0.24",
 		"jest": "^27.0.6",
 		"react": "^17.0.2",

test/src/button.test.tsx

@@ -13,39 +13,72 @@ describe("Button", () => {
 
 	const defaultName = "Pikachu";
 	const newName = "Eevee";
+	const buttonLabel = "Change";
 	const Test = ({ button }: { button: ButtonProps }) => {
 		const [name, setName] = useState(defaultName);
 		return (
 			<div>
 				<div>Name is {name}</div>
 				<Button onClick={() => setName(newName)} {...button}>
-					Change
+					{buttonLabel}
 				</Button>
 			</div>
 		);
 	};
 
 	test("Should trigger `onClick` handler", () => {
 		render(<Test button={{}} />);
-		const button = screen.getByRole("button", { name: "Change" });
+		const button = screen.getByRole("button", { name: buttonLabel });
 		userEvent.click(button);
 		const div = screen.getByText("Name is", { exact: false });
 		expect(div).toHaveTextContent("Name is Eevee");
 	});
 	test("Should not trigger `onClick` when `disabled` is set", () => {
 		render(<Test button={{ disabled: true }} />);
-		const button = screen.getByRole("button", { name: "Change" });
+		const button = screen.getByRole("button", { name: buttonLabel });
 		expect(button).toBeDisabled();
 		userEvent.click(button);
 		const div = screen.getByText("Name is", { exact: false });
 		expect(div).toHaveTextContent("Name is Pikachu");
 	});
 	test("Should be disabled when `busy` is set", () => {
 		render(<Test button={{ busy: true }} />);
-		const button = screen.getByRole("button", { name: "Change" });
+		const button = screen.getByRole("button", { name: buttonLabel });
 		expect(button).toBeDisabled();
 		userEvent.click(button);
 		const div = screen.getByText("Name is", { exact: false });
 		expect(div).toHaveTextContent("Name is Pikachu");
 	});
+
+	describe("Render an a if `href` is provided", () => {
+		test("Renders correctly", () => {
+			render(
+				<Test
+					button={{ href: "https://moaijs.com/", rel: "noopener" }}
+				/>
+			);
+
+			expect(
+				screen.queryByRole("button", { name: buttonLabel })
+			).not.toBeInTheDocument();
+			const link = screen.getByRole("link", { name: buttonLabel });
+			expect(link).toHaveAttribute("rel", "noopener");
+		});
+
+		test("Should trigger `onClick` event", () => {
+			const onCLickMockFn = jest.fn();
+			render(
+				<Test
+					button={{
+						href: "https://moaijs.com/",
+						rel: "noopener",
+						onClick: onCLickMockFn,
+					}}
+				/>
+			);
+			const link = screen.getByRole("link", { name: buttonLabel });
+			userEvent.click(link);
+			expect(onCLickMockFn).toHaveBeenCalledTimes(1);
+		});
+	});
 });