From 807316aa601c54452472acdff0fe623e8c5eae6f Mon Sep 17 00:00:00 2001
From: Jesse Breuer <penelloj2@gmail.com>
Date: Tue, 19 Sep 2023 12:06:51 -0400
Subject: [PATCH] Feat: Hover styles for anchors & unit tests (#18)

* add todos

* style: Add group hover styles to cards with anchors

* chore: Remove unused import

* test: Increase coverage for GithubCard

* test: Update coverage for twitter card

* test: Increase coverage for linkedin card

* test: Increase coverage for contact card

* test: Mock audio api

* chore: Add todo

* test: Add test for music player
---
 TODO.md                                         |  7 ++++---
 .../cards/contact-card/contact-card.test.tsx    |  4 +++-
 .../cards/contact-card/contact-card.tsx         |  8 ++++----
 .../cards/github-card/github-card.test.tsx      |  4 +++-
 .../cards/github-card/github-card.tsx           |  8 ++++----
 .../cards/linkedin-card/linkedin-card.test.tsx  |  4 +++-
 .../cards/linkedin-card/linkedin-card.tsx       |  8 ++++----
 .../cards/music-card/music-card.test.tsx        |  9 +++++----
 .../music-player/music-player.test.tsx          | 17 +++++++++++++++++
 .../cards/support-card/support-card.tsx         |  8 ++++----
 .../cards/twitter-card/twitter-card.test.tsx    |  4 +++-
 .../cards/twitter-card/twitter-card.tsx         |  8 ++++----
 app/_schema/schema.tsx                          |  2 +-
 13 files changed, 59 insertions(+), 32 deletions(-)
 create mode 100644 app/_components/cards/music-card/music-player/music-player.test.tsx

diff --git a/TODO.md b/TODO.md
index f98461e..bdce48d 100644
--- a/TODO.md
+++ b/TODO.md
@@ -1,8 +1,9 @@
 # TODO
 
-- Root loading.tsx with a <Skeleton> component.
-  - https://delba.dev/blog/animated-loading-skeletons-with-tailwind
 - Dependabot
 - Observation Observer, animations
-- Scrollbar color pseudo
+- Unit test Audio component
+- RepoCard styling
 - Validator functions with ZOD
+- Hover animations on all links
+- <MusicPlayer> should reset when song ends
diff --git a/app/_components/cards/contact-card/contact-card.test.tsx b/app/_components/cards/contact-card/contact-card.test.tsx
index 5ea4d5d..d0c2241 100644
--- a/app/_components/cards/contact-card/contact-card.test.tsx
+++ b/app/_components/cards/contact-card/contact-card.test.tsx
@@ -5,7 +5,7 @@ const props = {
   href: 'mailto:not-real@example.com',
   label: 'label',
   subLabel: 'subLabel',
-  icon: <div></div>,
+  icon: <svg data-testid="icon" />,
 };
 
 describe('<ContactCard />', () => {
@@ -14,8 +14,10 @@ describe('<ContactCard />', () => {
     const anchor = screen.getByRole('link');
     const heading2 = screen.getByRole('heading', { level: 2 });
     const heading3 = screen.getByRole('heading', { level: 3 });
+    const icon = screen.getByTestId('icon');
     expect(anchor).toHaveAttribute('href', props.href);
     expect(heading2).toHaveTextContent(props.label);
     expect(heading3).toHaveTextContent(props.subLabel);
+    expect(icon).toBeInTheDocument();
   });
 });
diff --git a/app/_components/cards/contact-card/contact-card.tsx b/app/_components/cards/contact-card/contact-card.tsx
index 6986478..99a4dfd 100644
--- a/app/_components/cards/contact-card/contact-card.tsx
+++ b/app/_components/cards/contact-card/contact-card.tsx
@@ -14,13 +14,13 @@ export function ContactCard(props: ContactCardProps) {
       href={href}
       target="_blank"
       className="
-        flex aspect-square flex-col rounded-xl
-        border border-stone-400 bg-white/50
-        p-4 dark:bg-indigo-100/5
+        group flex aspect-square flex-col
+        rounded-xl border border-stone-400
+        bg-white/50 p-4 dark:bg-indigo-100/5
       "
     >
       <div className="mb-auto self-start">{icon}</div>
-      <h2 className="mb-1 self-end text-lg">{label}</h2>
+      <h2 className="mb-1 self-end text-lg group-hover:underline">{label}</h2>
       <h3 className="self-end text-sm italic">{subLabel}</h3>
     </Link>
   );
diff --git a/app/_components/cards/github-card/github-card.test.tsx b/app/_components/cards/github-card/github-card.test.tsx
index 49ef565..a0ddd19 100644
--- a/app/_components/cards/github-card/github-card.test.tsx
+++ b/app/_components/cards/github-card/github-card.test.tsx
@@ -5,7 +5,7 @@ const props = {
   href: 'https://www.not-real.com',
   label: 'label',
   subLabel: 'subLabel',
-  icon: <div></div>,
+  icon: <svg data-testid="icon" />,
 };
 
 describe('<GithubCard />', () => {
@@ -14,8 +14,10 @@ describe('<GithubCard />', () => {
     const anchor = screen.getByRole('link');
     const heading2 = screen.getByRole('heading', { level: 2 });
     const heading3 = screen.getByRole('heading', { level: 3 });
+    const icon = screen.getByTestId('icon');
     expect(anchor).toHaveAttribute('href', props.href);
     expect(heading2).toHaveTextContent(props.label);
     expect(heading3).toHaveTextContent(props.subLabel);
+    expect(icon).toBeInTheDocument();
   });
 });
diff --git a/app/_components/cards/github-card/github-card.tsx b/app/_components/cards/github-card/github-card.tsx
index 1ef94ba..1842684 100644
--- a/app/_components/cards/github-card/github-card.tsx
+++ b/app/_components/cards/github-card/github-card.tsx
@@ -14,12 +14,12 @@ export function GithubCard(props: GithubCardProps) {
       href={href}
       target="_blank"
       className="
-        flex aspect-square flex-col rounded-xl
-        border border-stone-400 bg-white/50
-        p-4 dark:bg-indigo-100/5
+        group flex aspect-square flex-col
+        rounded-xl border border-stone-400
+        bg-white/50 p-4 dark:bg-indigo-100/5
       "
     >
-      <h2 className="mb-1 text-lg">{label}</h2>
+      <h2 className="mb-1 text-lg group-hover:underline">{label}</h2>
       <h3 className="text-sm italic">{subLabel}</h3>
       <div className="mt-auto self-end">{icon}</div>
     </Link>
diff --git a/app/_components/cards/linkedin-card/linkedin-card.test.tsx b/app/_components/cards/linkedin-card/linkedin-card.test.tsx
index 8746572..4bf034e 100644
--- a/app/_components/cards/linkedin-card/linkedin-card.test.tsx
+++ b/app/_components/cards/linkedin-card/linkedin-card.test.tsx
@@ -5,7 +5,7 @@ const props = {
   href: 'https://www.not-real.com',
   label: 'label',
   subLabel: 'subLabel',
-  icon: <div></div>,
+  icon: <svg data-testid="icon" />,
 };
 
 describe('<LinkedinCard />', () => {
@@ -14,8 +14,10 @@ describe('<LinkedinCard />', () => {
     const anchor = screen.getByRole('link');
     const heading2 = screen.getByRole('heading', { level: 2 });
     const heading3 = screen.getByRole('heading', { level: 3 });
+    const icon = screen.getByTestId('icon');
     expect(anchor).toHaveAttribute('href', props.href);
     expect(heading2).toHaveTextContent(props.label);
     expect(heading3).toHaveTextContent(props.subLabel);
+    expect(icon).toBeInTheDocument();
   });
 });
diff --git a/app/_components/cards/linkedin-card/linkedin-card.tsx b/app/_components/cards/linkedin-card/linkedin-card.tsx
index cd6efc9..e70a055 100644
--- a/app/_components/cards/linkedin-card/linkedin-card.tsx
+++ b/app/_components/cards/linkedin-card/linkedin-card.tsx
@@ -14,13 +14,13 @@ export function LinkedinCard(props: LinkedinCardProps) {
       href={href}
       target="_blank"
       className="
-        flex aspect-square flex-col rounded-xl
-        border border-stone-400 bg-white/50
-        p-4 dark:bg-indigo-100/5
+        group flex aspect-square flex-col
+        rounded-xl border border-stone-400
+        bg-white/50 p-4 dark:bg-indigo-100/5
       "
     >
       <div className="mb-auto self-end">{icon}</div>
-      <h2 className="mb-1 text-lg">{label}</h2>
+      <h2 className="mb-1 text-lg group-hover:underline">{label}</h2>
       <h3 className="text-sm italic">{subLabel}</h3>
     </Link>
   );
diff --git a/app/_components/cards/music-card/music-card.test.tsx b/app/_components/cards/music-card/music-card.test.tsx
index fc50f6d..d3b738a 100644
--- a/app/_components/cards/music-card/music-card.test.tsx
+++ b/app/_components/cards/music-card/music-card.test.tsx
@@ -8,10 +8,11 @@ const props = {
 
 describe('<MusicCard />', () => {
   it('Should expected elements', () => {
+    window.HTMLMediaElement.prototype.pause = jest.fn().mockImplementation(() => {}); // Mock pause fn
     render(<MusicCard {...props} />);
-    const h2 = screen.getByRole('heading', { level: 2 });
-    const h3 = screen.getByRole('heading', { level: 3 });
-    expect(h2).toHaveTextContent(props.label);
-    expect(h3).toHaveTextContent(props.subLabel);
+    const h2 = screen.getByRole('heading', { level: 2, name: props.label });
+    const h3 = screen.getByRole('heading', { level: 3, name: props.subLabel });
+    expect(h2).toBeInTheDocument();
+    expect(h3).toBeInTheDocument();
   });
 });
diff --git a/app/_components/cards/music-card/music-player/music-player.test.tsx b/app/_components/cards/music-card/music-player/music-player.test.tsx
new file mode 100644
index 0000000..8c2f14a
--- /dev/null
+++ b/app/_components/cards/music-card/music-player/music-player.test.tsx
@@ -0,0 +1,17 @@
+import { render, screen } from '@testing-library/react';
+import { MusicPlayer } from './music-player';
+
+const props = {
+  songPath: '/not-real.mp3',
+};
+
+describe('<MusicPlayer />', () => {
+  it('Should expected elements', () => {
+    window.HTMLMediaElement.prototype.pause = jest.fn().mockImplementation(() => {}); // Mock pause fn
+    render(<MusicPlayer {...props} />);
+    const button = screen.getByRole('button');
+    const slider = screen.getByRole('slider');
+    expect(button).toBeInTheDocument();
+    expect(slider).toBeInTheDocument();
+  });
+});
diff --git a/app/_components/cards/support-card/support-card.tsx b/app/_components/cards/support-card/support-card.tsx
index e4958df..8a68cbf 100644
--- a/app/_components/cards/support-card/support-card.tsx
+++ b/app/_components/cards/support-card/support-card.tsx
@@ -14,12 +14,12 @@ export function SupportCard(props: SupportCardProps) {
       href={href}
       target="_blank"
       className="
-        col-span-2 flex aspect-auto flex-col rounded-xl
-        border border-stone-400 bg-white/50
-        p-4 dark:bg-indigo-100/5
+        group col-span-2 flex aspect-auto flex-col
+        rounded-xl border border-stone-400
+        bg-white/50 p-4 dark:bg-indigo-100/5
       "
     >
-      <h2 className="mb-1 text-lg">{label}</h2>
+      <h2 className="mb-1 text-lg group-hover:underline">{label}</h2>
       <div className="mt-2 self-center">{icon}</div>
       <h3 className="self-end text-sm italic">{subLabel}</h3>
     </Link>
diff --git a/app/_components/cards/twitter-card/twitter-card.test.tsx b/app/_components/cards/twitter-card/twitter-card.test.tsx
index 3be08e5..7545ff9 100644
--- a/app/_components/cards/twitter-card/twitter-card.test.tsx
+++ b/app/_components/cards/twitter-card/twitter-card.test.tsx
@@ -5,7 +5,7 @@ const props = {
   href: 'https://www.not-real.com',
   label: 'label',
   subLabel: 'subLabel',
-  icon: <div></div>,
+  icon: <svg data-testid="icon" />,
 };
 
 describe('<TwitterCard />', () => {
@@ -14,8 +14,10 @@ describe('<TwitterCard />', () => {
     const anchor = screen.getByRole('link');
     const heading2 = screen.getByRole('heading', { level: 2 });
     const heading3 = screen.getByRole('heading', { level: 3 });
+    const icon = screen.getByTestId('icon');
     expect(anchor).toHaveAttribute('href', props.href);
     expect(heading2).toHaveTextContent(props.label);
     expect(heading3).toHaveTextContent(props.subLabel);
+    expect(icon).toBeInTheDocument();
   });
 });
diff --git a/app/_components/cards/twitter-card/twitter-card.tsx b/app/_components/cards/twitter-card/twitter-card.tsx
index 7729910..267d184 100644
--- a/app/_components/cards/twitter-card/twitter-card.tsx
+++ b/app/_components/cards/twitter-card/twitter-card.tsx
@@ -14,12 +14,12 @@ export function TwitterCard(props: TwitterCardProps) {
       href={href}
       target="_blank"
       className="
-        flex aspect-square flex-col rounded-xl
-        border border-stone-400 bg-white/50
-        p-4 dark:bg-indigo-100/5
+        group flex aspect-square flex-col
+        rounded-xl border border-stone-400
+        bg-white/50 p-4 dark:bg-indigo-100/5
       "
     >
-      <h2 className="mb-1 self-end text-lg">{label}</h2>
+      <h2 className="mb-1 self-end text-lg group-hover:underline">{label}</h2>
       <h3 className="self-end text-sm italic">{subLabel}</h3>
       <div className="mt-auto self-start">{icon}</div>
     </Link>
diff --git a/app/_schema/schema.tsx b/app/_schema/schema.tsx
index f162e45..19c13d2 100644
--- a/app/_schema/schema.tsx
+++ b/app/_schema/schema.tsx
@@ -1,4 +1,4 @@
-import { GithubIcon, Twitter, Linkedin, Mail, Music, Coffee, SunMoon } from 'lucide-react';
+import { GithubIcon, Twitter, Linkedin, Mail, Coffee, SunMoon } from 'lucide-react';
 
 export const githubSchema = {
   href: 'https://github.com/steezplusplus',