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
steezplusplus · Sep 19, 2023 · 807316a · 807316a
1 parent 5b78acc
commit 807316a
Show file tree

Hide file tree

Showing 13 changed files with 59 additions and 32 deletions.
diff --git 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
@@ -5,7 +5,7 @@ const props = {
   href: 'mailto:[email protected]',
   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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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',