From 9062fa7ec4e96206786c06ade96ac9e3aa988951 Mon Sep 17 00:00:00 2001
From: Wojciech Maj <kontakt@wojtekmaj.pl>
Date: Mon, 9 Oct 2023 23:19:49 +0200
Subject: [PATCH] Add unit tests for styled-components

---
 packages/react-async-button/package.json      |  2 +
 .../src/AsyncButton.spec.tsx                  | 56 +++++++++++++++++++
 yarn.lock                                     |  2 +
 3 files changed, 60 insertions(+)

diff --git a/packages/react-async-button/package.json b/packages/react-async-button/package.json
index e67fc75..febea4c 100644
--- a/packages/react-async-button/package.json
+++ b/packages/react-async-button/package.json
@@ -46,6 +46,7 @@
     "@testing-library/react": "^14.0.0",
     "@testing-library/user-event": "^14.4.0",
     "@types/react": "*",
+    "@types/styled-components": "^5.1.26",
     "eslint": "^8.26.0",
     "eslint-config-wojtekmaj": "^0.9.0",
     "happy-dom": "^12.6.0",
@@ -53,6 +54,7 @@
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "rimraf": "^3.0.0",
+    "styled-components": "^5.3.0",
     "typescript": "^5.0.0",
     "vitest": "^0.34.0"
   },
diff --git a/packages/react-async-button/src/AsyncButton.spec.tsx b/packages/react-async-button/src/AsyncButton.spec.tsx
index d094ac6..ba7f667 100644
--- a/packages/react-async-button/src/AsyncButton.spec.tsx
+++ b/packages/react-async-button/src/AsyncButton.spec.tsx
@@ -2,6 +2,7 @@ import { beforeEach, describe, expect, it, vi } from 'vitest';
 import React, { createRef } from 'react';
 import { act, render, screen } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
+import styled from 'styled-components';
 
 import AsyncButton from './index.js';
 
@@ -230,6 +231,24 @@ describe('<AsyncButton /> component', () => {
     </a>;
   });
 
+  it('should allow button props to be passed given as={styled.button}', () => {
+    const Button = styled.button``;
+
+    // @ts-expect-no-error
+    <AsyncButton {...defaultProps} as={Button} disabled />;
+  });
+
+  it('should not allow link props to be passed given as={styled.button}', () => {
+    const Button = styled.button``;
+
+    // @ts-expect-error-next-line
+    <AsyncButton {...defaultProps} as={Button} href="https://example.com" />;
+
+    // Sanity check
+    // @ts-expect-error-next-line
+    <button href="https://example.com"></button>;
+  });
+
   it('should not allow button props to be passed given as={MyButton}', () => {
     function MyButton() {
       return <button type="submit"></button>;
@@ -353,6 +372,43 @@ describe('<AsyncButton /> component', () => {
     </a>;
   });
 
+  it('should allow sync HTMLButtonElement event handlers to be passed given as={styled.button}', () => {
+    const Button = styled.button``;
+
+    function onClick(event: React.MouseEvent<HTMLButtonElement>) {
+      event.preventDefault();
+    }
+
+    // @ts-expect-no-error
+    <AsyncButton {...defaultProps} as={Button} onClick={onClick} />;
+  });
+
+  it('should allow async HTMLButtonElement event handlers to be passed given as={styled.button}', () => {
+    const Button = styled.button``;
+
+    async function onClick(event: React.MouseEvent<HTMLButtonElement>) {
+      event.preventDefault();
+    }
+
+    // @ts-expect-no-error
+    <AsyncButton {...defaultProps} as={Button} onClick={onClick} />;
+  });
+
+  it('should not allow HTMLAnchorElement event handlers to be passed given as={styled.button}', () => {
+    const Button = styled.button``;
+
+    function onClick(event: React.MouseEvent<HTMLAnchorElement>) {
+      event.preventDefault();
+    }
+
+    // @ts-expect-error-next-line
+    <AsyncButton {...defaultProps} as={Button} onClick={onClick} />;
+
+    // Sanity check
+    // @ts-expect-error-next-line
+    <button onClick={onClick}></button>;
+  });
+
   it('should allow sync HTMLButtonElement event handlers to be passed given as={MyButton} that handles onClick', () => {
     function MyButton({
       onClick,
diff --git a/yarn.lock b/yarn.lock
index 9b6ee3e..9f634be 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -1197,6 +1197,7 @@ __metadata:
     "@testing-library/react": ^14.0.0
     "@testing-library/user-event": ^14.4.0
     "@types/react": "*"
+    "@types/styled-components": ^5.1.26
     eslint: ^8.26.0
     eslint-config-wojtekmaj: ^0.9.0
     happy-dom: ^12.6.0
@@ -1206,6 +1207,7 @@ __metadata:
     react: ^18.2.0
     react-dom: ^18.2.0
     rimraf: ^3.0.0
+    styled-components: ^5.3.0
     typescript: ^5.0.0
     vitest: ^0.34.0
   peerDependencies:
-- 
2.51.2