@getmicdrop/svelte-components 5.5.4 → 5.6.0

package/dist/calendar/AboutShow/AboutShow.spec.js

@@ -0,0 +1,791 @@
+import { describe, it, expect, vi, afterEach } from 'vitest';
+import { render, screen, cleanup, fireEvent } from '@testing-library/svelte';
+import AboutShow from './AboutShow.svelte';
+
+describe('AboutShow Component', () => {
+  afterEach(() => {
+    cleanup();
+  });
+
+  describe('basic rendering', () => {
+    it('renders with default props', () => {
+      render(AboutShow);
+      expect(screen.getByText('About the Show')).toBeInTheDocument();
+    });
+
+    it('renders custom title', () => {
+      render(AboutShow, { props: { title: 'Show Details' } });
+      expect(screen.getByText('Show Details')).toBeInTheDocument();
+    });
+
+    it('hides title when showTitle is false', () => {
+      render(AboutShow, { props: { showTitle: false } });
+      expect(screen.queryByText('About the Show')).not.toBeInTheDocument();
+    });
+
+    it('renders without crashing with empty props', () => {
+      const { container } = render(AboutShow);
+      expect(container.querySelector('.flex.flex-col.gap-3')).toBeInTheDocument();
+    });
+  });
+
+  describe('show image', () => {
+    it('renders show image when ShowImage and description are provided', () => {
+      render(AboutShow, {
+        props: {
+          ShowImage: 'https://example.com/image.jpg',
+          description: 'Test description'
+        }
+      });
+      const img = screen.getByAltText('');
+      expect(img).toBeInTheDocument();
+      expect(img).toHaveAttribute('src', 'https://example.com/image.jpg');
+    });
+
+    it('does not render image when ShowImage is empty', () => {
+      render(AboutShow, {
+        props: {
+          ShowImage: '',
+          description: 'Test description'
+        }
+      });
+      expect(screen.queryByRole('img')).not.toBeInTheDocument();
+    });
+
+    it('does not render image when description is empty', () => {
+      render(AboutShow, {
+        props: {
+          ShowImage: 'https://example.com/image.jpg',
+          description: ''
+        }
+      });
+      expect(screen.queryByRole('img', { name: '' })).not.toBeInTheDocument();
+    });
+
+    it('applies correct styling to show image', () => {
+      render(AboutShow, {
+        props: {
+          ShowImage: 'https://example.com/image.jpg',
+          description: 'Test description'
+        }
+      });
+      const img = screen.getByAltText('');
+      expect(img.className).toContain('rounded-lg');
+      expect(img.className).toContain('object-contain');
+      expect(img.className).toContain('w-full');
+    });
+  });
+
+  describe('description display', () => {
+    it('renders short description without read more', () => {
+      const shortDescription = 'This is a short description';
+      render(AboutShow, { props: { description: shortDescription } });
+      expect(screen.getByText(shortDescription)).toBeInTheDocument();
+      expect(screen.queryByText('Show more')).not.toBeInTheDocument();
+    });
+
+    it('renders truncated long description with show more button', () => {
+      const longDescription = 'a'.repeat(1600);
+      render(AboutShow, { props: { description: longDescription } });
+      expect(screen.getByText(/^a+\.\.\.$/)).toBeInTheDocument();
+      expect(screen.getByText('Show more')).toBeInTheDocument();
+    });
+
+    it('expands description when show more is clicked', async () => {
+      const longDescription = 'a'.repeat(1600);
+      render(AboutShow, { props: { description: longDescription } });
+
+      const showMoreButton = screen.getByText('Show more');
+      await fireEvent.click(showMoreButton);
+
+      expect(screen.getByText('Show less')).toBeInTheDocument();
+      expect(screen.queryByText('Show more')).not.toBeInTheDocument();
+    });
+
+    it('collapses description when show less is clicked', async () => {
+      const longDescription = 'a'.repeat(1600);
+      render(AboutShow, { props: { description: longDescription } });
+
+      const showMoreButton = screen.getByText('Show more');
+      await fireEvent.click(showMoreButton);
+
+      const showLessButton = screen.getByText('Show less');
+      await fireEvent.click(showLessButton);
+
+      expect(screen.getByText('Show more')).toBeInTheDocument();
+      expect(screen.queryByText('Show less')).not.toBeInTheDocument();
+    });
+
+    it('does not show read more when showReadMore is false', () => {
+      const longDescription = 'a'.repeat(1600);
+      render(AboutShow, {
+        props: {
+          description: longDescription,
+          showReadMore: false
+        }
+      });
+      expect(screen.queryByText('Show more')).not.toBeInTheDocument();
+      expect(screen.getByText(longDescription)).toBeInTheDocument();
+    });
+
+    it('preserves whitespace in description with whitespace-pre-line', () => {
+      const descriptionWithNewlines = 'Line 1\nLine 2\nLine 3';
+      const { container } = render(AboutShow, {
+        props: { description: descriptionWithNewlines }
+      });
+      const paragraph = container.querySelector('p');
+      expect(paragraph.className).toContain('whitespace-pre-line');
+    });
+
+    it('does not render description when empty', () => {
+      const { container } = render(AboutShow, { props: { description: '' } });
+      const paragraphs = container.querySelectorAll('p');
+      const descriptionParagraphs = Array.from(paragraphs).filter(p =>
+        p.className.includes('whitespace-pre-line')
+      );
+      expect(descriptionParagraphs.length).toBe(0);
+    });
+  });
+
+  describe('performers filtering', () => {
+    it('filters out unconfirmed performers', () => {
+      const performers = [
+        {
+          ID: 1,
+          acceptedState: 1,
+          shouldBeHidden: false,
+          RosterPerformer: {
+            User: {
+              performerProfile: {
+                firstName: 'John',
+                lastName: 'Doe',
+                profileImage: 'image1.jpg'
+              }
+            }
+          }
+        }
+      ];
+      render(AboutShow, { props: { performers } });
+      expect(screen.queryByText('John Doe')).not.toBeInTheDocument();
+    });
+
+    it('filters out hidden performers', () => {
+      const performers = [
+        {
+          ID: 1,
+          acceptedState: 2,
+          shouldBeHidden: true,
+          RosterPerformer: {
+            User: {
+              performerProfile: {
+                firstName: 'Jane',
+                lastName: 'Smith',
+                profileImage: 'image2.jpg'
+              }
+            }
+          }
+        }
+      ];
+      render(AboutShow, { props: { performers } });
+      expect(screen.queryByText('Jane Smith')).not.toBeInTheDocument();
+    });
+
+    it('filters out performers without names', () => {
+      const performers = [
+        {
+          ID: 1,
+          acceptedState: 2,
+          shouldBeHidden: false,
+          RosterPerformer: {
+            User: {
+              performerProfile: {
+                profileImage: 'image3.jpg'
+              }
+            }
+          }
+        }
+      ];
+      render(AboutShow, { props: { performers } });
+      const performerCards = screen.queryAllByRole('img');
+      expect(performerCards.length).toBe(0);
+    });
+
+    it('shows confirmed, non-hidden performers with names', () => {
+      const performers = [
+        {
+          ID: 1,
+          acceptedState: 2,
+          shouldBeHidden: false,
+          RosterPerformer: {
+            User: {
+              performerProfile: {
+                firstName: 'Alice',
+                lastName: 'Wonder',
+                profileImage: 'alice.jpg'
+              }
+            }
+          }
+        }
+      ];
+      render(AboutShow, { props: { performers } });
+      expect(screen.getByText('Alice Wonder')).toBeInTheDocument();
+    });
+
+    it('does not render performers section when no valid performers', () => {
+      const { container } = render(AboutShow, { props: { performers: [] } });
+      const performerSection = container.querySelector('.py-2');
+      expect(performerSection).not.toBeInTheDocument();
+    });
+  });
+
+  describe('performer display', () => {
+    const validPerformer = {
+      ID: 1,
+      acceptedState: 2,
+      shouldBeHidden: false,
+      RosterPerformer: {
+        User: {
+          performerProfile: {
+            firstName: 'Bob',
+            lastName: 'Builder',
+            profileImage: 'bob.jpg'
+          }
+        }
+      }
+    };
+
+    it('displays performer name', () => {
+      render(AboutShow, { props: { performers: [validPerformer] } });
+      expect(screen.getByText('Bob Builder')).toBeInTheDocument();
+    });
+
+    it('uses stage name when useStageName is true', () => {
+      const performerWithStageName = {
+        ...validPerformer,
+        RosterPerformer: {
+          User: {
+            performerProfile: {
+              firstName: 'Bob',
+              lastName: 'Builder',
+              stageName: 'The Builder',
+              useStageName: true,
+              profileImage: 'bob.jpg'
+            }
+          }
+        }
+      };
+      render(AboutShow, { props: { performers: [performerWithStageName] } });
+      expect(screen.getByText('The Builder')).toBeInTheDocument();
+      expect(screen.queryByText('Bob Builder')).not.toBeInTheDocument();
+    });
+
+    it('uses first and last name when useStageName is false', () => {
+      const performerWithStageName = {
+        ...validPerformer,
+        RosterPerformer: {
+          User: {
+            performerProfile: {
+              firstName: 'Bob',
+              lastName: 'Builder',
+              stageName: 'The Builder',
+              useStageName: false,
+              profileImage: 'bob.jpg'
+            }
+          }
+        }
+      };
+      render(AboutShow, { props: { performers: [performerWithStageName] } });
+      expect(screen.getByText('Bob Builder')).toBeInTheDocument();
+      expect(screen.queryByText('The Builder')).not.toBeInTheDocument();
+    });
+
+    it('uses getImageUrl function for performer images', () => {
+      const mockGetImageUrl = vi.fn((url) => `https://cdn.example.com/${url}`);
+      render(AboutShow, {
+        props: {
+          performers: [validPerformer],
+          getImageUrl: mockGetImageUrl
+        }
+      });
+      expect(mockGetImageUrl).toHaveBeenCalledWith('bob.jpg');
+    });
+
+    it('handles performer without profileImage', () => {
+      const performerNoImage = {
+        ...validPerformer,
+        RosterPerformer: {
+          User: {
+            performerProfile: {
+              firstName: 'Charlie',
+              lastName: 'Brown'
+            }
+          }
+        }
+      };
+      const { container } = render(AboutShow, {
+        props: { performers: [performerNoImage] }
+      });
+      const img = screen.getByAltText('Charlie Brown');
+      expect(img).toHaveAttribute('src', '');
+      expect(img.className).toContain('bg-gray-50');
+    });
+
+    it('renders multiple performers', () => {
+      const performers = [
+        validPerformer,
+        {
+          ID: 2,
+          acceptedState: 2,
+          shouldBeHidden: false,
+          RosterPerformer: {
+            User: {
+              performerProfile: {
+                firstName: 'Alice',
+                lastName: 'Wonder',
+                profileImage: 'alice.jpg'
+              }
+            }
+          }
+        }
+      ];
+      render(AboutShow, { props: { performers } });
+      expect(screen.getByText('Bob Builder')).toBeInTheDocument();
+      expect(screen.getByText('Alice Wonder')).toBeInTheDocument();
+    });
+  });
+
+  describe('performer interaction', () => {
+    const validPerformer = {
+      ID: 1,
+      acceptedState: 2,
+      shouldBeHidden: false,
+      RosterPerformer: {
+        User: {
+          performerProfile: {
+            firstName: 'Bob',
+            lastName: 'Builder',
+            biography: 'Bob is a builder who builds things.',
+            instagram: 'https://instagram.com/bob',
+            twitter: 'https://twitter.com/bob',
+            profileImage: 'bob.jpg'
+          }
+        }
+      }
+    };
+
+    it('shows performer biography when clicked', async () => {
+      render(AboutShow, { props: { performers: [validPerformer] } });
+
+      const performerCard = screen.getByText('Bob Builder').closest('.cursor-pointer');
+      await fireEvent.click(performerCard);
+
+      expect(screen.getByText('Bob is a builder who builds things.')).toBeInTheDocument();
+    });
+
+    it('hides performer biography when clicked again', async () => {
+      render(AboutShow, { props: { performers: [validPerformer] } });
+
+      const performerCard = screen.getByText('Bob Builder').closest('.cursor-pointer');
+      await fireEvent.click(performerCard);
+      expect(screen.getByText('Bob is a builder who builds things.')).toBeInTheDocument();
+
+      await fireEvent.click(performerCard);
+      expect(screen.queryByText('Bob is a builder who builds things.')).not.toBeInTheDocument();
+    });
+
+    it('closes performer popup when close button is clicked', async () => {
+      render(AboutShow, { props: { performers: [validPerformer] } });
+
+      const performerCard = screen.getByText('Bob Builder').closest('.cursor-pointer');
+      await fireEvent.click(performerCard);
+
+      const closeButton = screen.getByLabelText('Close');
+      await fireEvent.click(closeButton);
+
+      expect(screen.queryByText('Bob is a builder who builds things.')).not.toBeInTheDocument();
+    });
+
+    it('closes performer popup when backdrop is clicked', async () => {
+      const { container } = render(AboutShow, { props: { performers: [validPerformer] } });
+
+      const performerCard = screen.getByText('Bob Builder').closest('.cursor-pointer');
+      await fireEvent.click(performerCard);
+
+      const backdrop = container.querySelector('.fixed.inset-0.z-40');
+      await fireEvent.click(backdrop);
+
+      expect(screen.queryByText('Bob is a builder who builds things.')).not.toBeInTheDocument();
+    });
+
+    it('stops propagation when clicking inside popup', async () => {
+      const { container } = render(AboutShow, { props: { performers: [validPerformer] } });
+
+      const performerCard = screen.getByText('Bob Builder').closest('.cursor-pointer');
+      await fireEvent.click(performerCard);
+
+      const popup = screen.getByText('Bob is a builder who builds things.').closest('.absolute');
+      await fireEvent.click(popup);
+
+      // Popup should still be visible
+      expect(screen.getByText('Bob is a builder who builds things.')).toBeInTheDocument();
+    });
+
+    it('highlights active performer card', async () => {
+      render(AboutShow, { props: { performers: [validPerformer] } });
+
+      const performerCard = screen.getByText('Bob Builder').closest('.cursor-pointer');
+      expect(performerCard.className).toContain('border-gray-200');
+
+      await fireEvent.click(performerCard);
+      // Check for the active state border (not the hover state)
+      const activeClassPattern = /border-blue-700(?!\s*dark:hover)/;
+      expect(performerCard.className).toMatch(activeClassPattern);
+    });
+
+    it('closes other performer when new one is opened', async () => {
+      const performers = [
+        validPerformer,
+        {
+          ID: 2,
+          acceptedState: 2,
+          shouldBeHidden: false,
+          RosterPerformer: {
+            User: {
+              performerProfile: {
+                firstName: 'Alice',
+                lastName: 'Wonder',
+                biography: 'Alice wonders about things.',
+                profileImage: 'alice.jpg'
+              }
+            }
+          }
+        }
+      ];
+      render(AboutShow, { props: { performers } });
+
+      const bobCard = screen.getByText('Bob Builder').closest('.cursor-pointer');
+      const aliceCard = screen.getByText('Alice Wonder').closest('.cursor-pointer');
+
+      await fireEvent.click(bobCard);
+      expect(screen.getByText('Bob is a builder who builds things.')).toBeInTheDocument();
+
+      await fireEvent.click(aliceCard);
+      expect(screen.queryByText('Bob is a builder who builds things.')).not.toBeInTheDocument();
+      expect(screen.getByText('Alice wonders about things.')).toBeInTheDocument();
+    });
+  });
+
+  describe('social media links', () => {
+    const performerWithSocials = {
+      ID: 1,
+      acceptedState: 2,
+      shouldBeHidden: false,
+      RosterPerformer: {
+        User: {
+          performerProfile: {
+            firstName: 'Bob',
+            lastName: 'Builder',
+            biography: 'Bob is a builder.',
+            instagram: 'https://instagram.com/bob',
+            twitter: 'https://twitter.com/bob',
+            profileImage: 'bob.jpg'
+          }
+        }
+      }
+    };
+
+    it('displays instagram link when available', async () => {
+      render(AboutShow, { props: { performers: [performerWithSocials] } });
+
+      const performerCard = screen.getByText('Bob Builder').closest('.cursor-pointer');
+      await fireEvent.click(performerCard);
+
+      const instagramLink = screen.getByLabelText('Instagram profile');
+      expect(instagramLink).toBeInTheDocument();
+      expect(instagramLink).toHaveAttribute('href', 'https://instagram.com/bob');
+      expect(instagramLink).toHaveAttribute('target', '_blank');
+      expect(instagramLink).toHaveAttribute('rel', 'noopener noreferrer');
+    });
+
+    it('displays twitter link when available', async () => {
+      render(AboutShow, { props: { performers: [performerWithSocials] } });
+
+      const performerCard = screen.getByText('Bob Builder').closest('.cursor-pointer');
+      await fireEvent.click(performerCard);
+
+      const twitterLink = screen.getByLabelText('Twitter profile');
+      expect(twitterLink).toBeInTheDocument();
+      expect(twitterLink).toHaveAttribute('href', 'https://twitter.com/bob');
+      expect(twitterLink).toHaveAttribute('target', '_blank');
+      expect(twitterLink).toHaveAttribute('rel', 'noopener noreferrer');
+    });
+
+    it('does not display social section when no socials available', async () => {
+      const performerNoSocials = {
+        ...performerWithSocials,
+        RosterPerformer: {
+          User: {
+            performerProfile: {
+              firstName: 'Bob',
+              lastName: 'Builder',
+              biography: 'Bob is a builder.',
+              profileImage: 'bob.jpg'
+            }
+          }
+        }
+      };
+      render(AboutShow, { props: { performers: [performerNoSocials] } });
+
+      const performerCard = screen.getByText('Bob Builder').closest('.cursor-pointer');
+      await fireEvent.click(performerCard);
+
+      expect(screen.queryByText(/Follow/)).not.toBeInTheDocument();
+    });
+
+    it('displays only instagram when twitter not available', async () => {
+      const performerInstagramOnly = {
+        ...performerWithSocials,
+        RosterPerformer: {
+          User: {
+            performerProfile: {
+              firstName: 'Bob',
+              lastName: 'Builder',
+              biography: 'Bob is a builder.',
+              instagram: 'https://instagram.com/bob',
+              profileImage: 'bob.jpg'
+            }
+          }
+        }
+      };
+      render(AboutShow, { props: { performers: [performerInstagramOnly] } });
+
+      const performerCard = screen.getByText('Bob Builder').closest('.cursor-pointer');
+      await fireEvent.click(performerCard);
+
+      expect(screen.getByLabelText('Instagram profile')).toBeInTheDocument();
+      expect(screen.queryByLabelText('Twitter profile')).not.toBeInTheDocument();
+    });
+
+    it('displays only twitter when instagram not available', async () => {
+      const performerTwitterOnly = {
+        ...performerWithSocials,
+        RosterPerformer: {
+          User: {
+            performerProfile: {
+              firstName: 'Bob',
+              lastName: 'Builder',
+              biography: 'Bob is a builder.',
+              twitter: 'https://twitter.com/bob',
+              profileImage: 'bob.jpg'
+            }
+          }
+        }
+      };
+      render(AboutShow, { props: { performers: [performerTwitterOnly] } });
+
+      const performerCard = screen.getByText('Bob Builder').closest('.cursor-pointer');
+      await fireEvent.click(performerCard);
+
+      expect(screen.getByLabelText('Twitter profile')).toBeInTheDocument();
+      expect(screen.queryByLabelText('Instagram profile')).not.toBeInTheDocument();
+    });
+
+    it('displays follow text with performer first name', async () => {
+      render(AboutShow, { props: { performers: [performerWithSocials] } });
+
+      const performerCard = screen.getByText('Bob Builder').closest('.cursor-pointer');
+      await fireEvent.click(performerCard);
+
+      expect(screen.getByText('Follow Bob:')).toBeInTheDocument();
+    });
+  });
+
+  describe('popup positioning', () => {
+    const performers = [
+      {
+        ID: 1,
+        acceptedState: 2,
+        shouldBeHidden: false,
+        RosterPerformer: {
+          User: {
+            performerProfile: {
+              firstName: 'First',
+              lastName: 'Performer',
+              biography: 'First performer bio.',
+              profileImage: 'first.jpg'
+            }
+          }
+        }
+      },
+      {
+        ID: 2,
+        acceptedState: 2,
+        shouldBeHidden: false,
+        RosterPerformer: {
+          User: {
+            performerProfile: {
+              firstName: 'Second',
+              lastName: 'Performer',
+              biography: 'Second performer bio.',
+              profileImage: 'second.jpg'
+            }
+          }
+        }
+      }
+    ];
+
+    it('positions first performer popup differently', async () => {
+      const { container } = render(AboutShow, { props: { performers } });
+
+      const firstCard = screen.getByText('First Performer').closest('.cursor-pointer');
+      await fireEvent.click(firstCard);
+
+      const popup = screen.getByText('First performer bio.').closest('.absolute');
+      expect(popup.className).toContain('left-[190%]');
+    });
+
+    it('positions non-first performer popup centered', async () => {
+      const { container } = render(AboutShow, { props: { performers } });
+
+      const secondCard = screen.getByText('Second Performer').closest('.cursor-pointer');
+      await fireEvent.click(secondCard);
+
+      const popup = screen.getByText('Second performer bio.').closest('.absolute');
+      expect(popup.className).toContain('left-1/2');
+      expect(popup.className).toContain('-translate-x-1/2');
+    });
+  });
+
+  describe('dark mode styling', () => {
+    it('has dark mode classes for title', () => {
+      const { container } = render(AboutShow);
+      const title = screen.getByText('About the Show');
+      expect(title.className).toContain('dark:text-white');
+    });
+
+    it('has dark mode classes for show image background', () => {
+      render(AboutShow, {
+        props: {
+          ShowImage: 'https://example.com/image.jpg',
+          description: 'Test description'
+        }
+      });
+      const img = screen.getByAltText('');
+      expect(img.className).toContain('dark:bg-gray-800');
+    });
+
+    it('has dark mode classes for description', () => {
+      const { container } = render(AboutShow, {
+        props: { description: 'Test description' }
+      });
+      const paragraph = screen.getByText('Test description');
+      expect(paragraph.className).toContain('dark:text-white');
+    });
+
+    it('has dark mode classes for read more button', () => {
+      const longDescription = 'a'.repeat(1600);
+      render(AboutShow, { props: { description: longDescription } });
+      const button = screen.getByText('Show more');
+      expect(button.className).toContain('dark:text-blue-500');
+    });
+
+    it('has dark mode classes for performer card', () => {
+      const performer = {
+        ID: 1,
+        acceptedState: 2,
+        shouldBeHidden: false,
+        RosterPerformer: {
+          User: {
+            performerProfile: {
+              firstName: 'Bob',
+              lastName: 'Builder',
+              profileImage: 'bob.jpg'
+            }
+          }
+        }
+      };
+      render(AboutShow, { props: { performers: [performer] } });
+      const card = screen.getByText('Bob Builder').closest('.cursor-pointer');
+      expect(card.className).toContain('dark:bg-gray-800');
+      expect(card.className).toContain('dark:border-gray-600');
+      expect(card.className).toContain('dark:hover:border-blue-500');
+    });
+  });
+
+  describe('accessibility', () => {
+    it('uses semantic heading for title', () => {
+      render(AboutShow);
+      expect(screen.getByRole('heading', { name: 'About the Show' })).toBeInTheDocument();
+    });
+
+    it('has proper alt text for performer images', () => {
+      const performer = {
+        ID: 1,
+        acceptedState: 2,
+        shouldBeHidden: false,
+        RosterPerformer: {
+          User: {
+            performerProfile: {
+              firstName: 'Bob',
+              lastName: 'Builder',
+              profileImage: 'bob.jpg'
+            }
+          }
+        }
+      };
+      render(AboutShow, { props: { performers: [performer] } });
+      expect(screen.getByAltText('Bob Builder')).toBeInTheDocument();
+    });
+
+    it('has aria-label for close button', async () => {
+      const performer = {
+        ID: 1,
+        acceptedState: 2,
+        shouldBeHidden: false,
+        RosterPerformer: {
+          User: {
+            performerProfile: {
+              firstName: 'Bob',
+              lastName: 'Builder',
+              biography: 'Bio',
+              profileImage: 'bob.jpg'
+            }
+          }
+        }
+      };
+      render(AboutShow, { props: { performers: [performer] } });
+
+      const performerCard = screen.getByText('Bob Builder').closest('.cursor-pointer');
+      await fireEvent.click(performerCard);
+
+      expect(screen.getByLabelText('Close')).toBeInTheDocument();
+    });
+
+    it('has aria-label for social media links', async () => {
+      const performer = {
+        ID: 1,
+        acceptedState: 2,
+        shouldBeHidden: false,
+        RosterPerformer: {
+          User: {
+            performerProfile: {
+              firstName: 'Bob',
+              lastName: 'Builder',
+              biography: 'Bio',
+              instagram: 'https://instagram.com/bob',
+              twitter: 'https://twitter.com/bob',
+              profileImage: 'bob.jpg'
+            }
+          }
+        }
+      };
+      render(AboutShow, { props: { performers: [performer] } });
+
+      const performerCard = screen.getByText('Bob Builder').closest('.cursor-pointer');
+      await fireEvent.click(performerCard);
+
+      expect(screen.getByLabelText('Instagram profile')).toBeInTheDocument();
+      expect(screen.getByLabelText('Twitter profile')).toBeInTheDocument();
+    });
+  });
+});