@getmicdrop/svelte-components 1.0.2 → 1.0.3

package/dist/components/pages/performers/ShowItemCard.svelte.d.ts

@@ -0,0 +1,54 @@
+/** @typedef {typeof __propDef.props}  ShowItemCardProps */
+/** @typedef {typeof __propDef.events}  ShowItemCardEvents */
+/** @typedef {typeof __propDef.slots}  ShowItemCardSlots */
+export default class ShowItemCard extends SvelteComponent<{
+    title: any;
+    details: any;
+    image: any;
+    status: any;
+    id: any;
+    location: any;
+    lastUpdated: any;
+    venueName: any;
+    role: any;
+    venueId: any;
+    startDateTime: any;
+    doorsOpenTime: any;
+    spotDuration: any;
+    invitationAccepted?: boolean | undefined;
+    hasAvailability?: boolean | undefined;
+}, {
+    [evt: string]: CustomEvent<any>;
+}, {}> {
+}
+export type ShowItemCardProps = typeof __propDef.props;
+export type ShowItemCardEvents = typeof __propDef.events;
+export type ShowItemCardSlots = typeof __propDef.slots;
+import { SvelteComponent } from "svelte";
+declare const __propDef: {
+    props: {
+        title: any;
+        details: any;
+        image: any;
+        status: any;
+        id: any;
+        location: any;
+        lastUpdated: any;
+        venueName: any;
+        role: any;
+        venueId: any;
+        startDateTime: any;
+        doorsOpenTime: any;
+        spotDuration: any;
+        invitationAccepted?: boolean | undefined;
+        hasAvailability?: boolean | undefined;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+    exports?: undefined;
+    bindings?: undefined;
+};
+export {};
+//# sourceMappingURL=ShowItemCard.svelte.d.ts.map

package/dist/components/pages/performers/ShowItemCard.svelte.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ShowItemCard.svelte.d.ts","sourceRoot":"","sources":["../../../../src/lib/components/pages/performers/ShowItemCard.svelte.js"],"names":[],"mappings":"AAsoBA,2DAA2D;AAC3D,6DAA6D;AAC7D,2DAA2D;AAE3D;;;;;;;;;;;;;;;;;;;CACC;gCALa,OAAO,SAAS,CAAC,KAAK;iCACtB,OAAO,SAAS,CAAC,MAAM;gCACvB,OAAO,SAAS,CAAC,KAAK;gCAxoBJ,QAAQ;AAqoBxC;;;;;;;;;;;;;;;;;;;;;;;;EAA0H"}

package/dist/components/pages/performers/SwitchOption.spec.d.ts

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=SwitchOption.spec.d.ts.map

package/dist/components/pages/performers/SwitchOption.spec.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"SwitchOption.spec.d.ts","sourceRoot":"","sources":["../../../../src/lib/components/pages/performers/SwitchOption.spec.js"],"names":[],"mappings":""}

package/dist/components/pages/performers/SwitchOption.spec.js

@@ -0,0 +1,127 @@
+import { render, screen, fireEvent } from "@testing-library/svelte";
+import userEvent from "@testing-library/user-event";
+import { expect, describe, test, vi } from "vitest";
+import SwitchOption from "./SwitchOption.svelte";
+
+function setupTest(args = {}) {
+  const user = userEvent.setup();
+  const onToggle = vi.fn();
+  const { component, container } = render(SwitchOption, {
+    props: {
+      label: "Test Switch",
+      checked: false,
+      onToggle,
+      ...args,
+    },
+  });
+  return { user, component, container, onToggle };
+}
+
+describe("SwitchOption Component Tests", () => {
+  test("Renders switch with label", () => {
+    setupTest({ label: "Enable Feature" });
+    expect(screen.getByText("Enable Feature")).toBeInTheDocument();
+  });
+
+  test("Renders checkbox input", () => {
+    setupTest();
+    const checkbox = screen.getByRole("checkbox");
+    expect(checkbox).toBeInTheDocument();
+  });
+
+  test("Checkbox is hidden for accessibility (sr-only)", () => {
+    setupTest();
+    const checkbox = screen.getByRole("checkbox");
+    expect(checkbox).toHaveClass("sr-only");
+  });
+
+  test("Checkbox is unchecked by default", () => {
+    setupTest({ checked: false });
+    const checkbox = screen.getByRole("checkbox");
+    expect(checkbox).not.toBeChecked();
+  });
+
+  test("Checkbox is checked when checked prop is true", () => {
+    setupTest({ checked: true });
+    const checkbox = screen.getByRole("checkbox");
+    expect(checkbox).toBeChecked();
+  });
+
+  test("Calls onToggle when clicked", async () => {
+    const { user, onToggle } = setupTest();
+    const checkbox = screen.getByRole("checkbox");
+
+    await user.click(checkbox);
+
+    expect(onToggle).toHaveBeenCalledTimes(1);
+  });
+
+  test("Passes checked state to onToggle", async () => {
+    const { user, onToggle } = setupTest({ checked: false });
+    const checkbox = screen.getByRole("checkbox");
+
+    await user.click(checkbox);
+
+    // After clicking, checkbox becomes checked (true)
+    expect(onToggle).toHaveBeenCalledWith(true);
+  });
+
+  test("Has full width container", () => {
+    const { container } = setupTest();
+    const wrapper = container.firstChild;
+    expect(wrapper).toHaveClass("w-full");
+  });
+
+  test("Uses flexbox layout", () => {
+    const { container } = setupTest();
+    const wrapper = container.firstChild;
+    expect(wrapper).toHaveClass("flex");
+    expect(wrapper).toHaveClass("items-center");
+    expect(wrapper).toHaveClass("justify-between");
+  });
+
+  test("Label has correct styling", () => {
+    setupTest({ label: "My Label" });
+    const label = screen.getByText("My Label");
+    expect(label).toHaveClass("text-sm");
+    expect(label).toHaveClass("font-medium");
+    expect(label).toHaveClass("text-gray-700");
+  });
+
+  test("Has pointer cursor on label", () => {
+    const { container } = setupTest();
+    const labelElement = container.querySelector("label");
+    expect(labelElement).toHaveClass("cursor-pointer");
+  });
+
+  test("Toggle track has correct base classes", () => {
+    const { container } = setupTest();
+    const track = container.querySelector(".bg-gray-200");
+    expect(track).toBeInTheDocument();
+    expect(track).toHaveClass("rounded-full");
+    expect(track).toHaveClass("w-11");
+    expect(track).toHaveClass("h-6");
+  });
+
+  test("Toggle knob has correct base classes", () => {
+    const { container } = setupTest();
+    const knob = container.querySelector(".bg-white");
+    expect(knob).toBeInTheDocument();
+    expect(knob).toHaveClass("rounded-full");
+    expect(knob).toHaveClass("w-5");
+    expect(knob).toHaveClass("h-5");
+  });
+
+  test("Updates visual state on toggle", async () => {
+    const { user, container, component } = setupTest({ checked: false });
+    const checkbox = screen.getByRole("checkbox");
+
+    // Initially unchecked
+    expect(checkbox).not.toBeChecked();
+
+    await user.click(checkbox);
+
+    // The component's checked state should update
+    expect(checkbox).toBeChecked();
+  });
+});

package/dist/components/pages/performers/SwitchOption.stories.svelte

@@ -0,0 +1,211 @@
+<script context="module">
+  import { Story, Template } from "@storybook/addon-svelte-csf";
+  import SwitchOption from "./SwitchOption.svelte";
+
+  export const meta = {
+    title: "Pages/Performers/SwitchOption",
+    component: SwitchOption,
+    argTypes: {
+      label: { control: "text" },
+      checked: { control: "boolean" },
+    },
+  };
+
+  const handleToggle = (value) => {
+    console.log("Toggle changed:", value);
+  };
+</script>
+
+<Template let:args>
+  <div class="max-w-md p-4 bg-white border border-gray-200 rounded-lg">
+    <SwitchOption {...args} />
+  </div>
+</Template>
+
+<Story
+  name="Email Notifications"
+  args={{
+    label: "Email Notifications",
+    checked: true,
+    onToggle: handleToggle,
+  }}
+/>
+
+<Story
+  name="SMS Alerts"
+  args={{
+    label: "SMS Alerts",
+    checked: false,
+    onToggle: handleToggle,
+  }}
+/>
+
+<Story
+  name="Available for Bookings"
+  args={{
+    label: "Available for Bookings",
+    checked: true,
+    onToggle: handleToggle,
+  }}
+/>
+
+<Story
+  name="Show Calendar on Profile"
+  args={{
+    label: "Show Calendar on Profile",
+    checked: false,
+    onToggle: handleToggle,
+  }}
+/>
+
+<Story name="Settings Panel">
+  <div class="max-w-2xl p-6 bg-white border border-gray-200 rounded-lg">
+    <h3 class="text-lg font-semibold mb-4">Notification Preferences</h3>
+    <div class="space-y-1 divide-y">
+      <SwitchOption
+        label="New show invitations"
+        checked={true}
+        onToggle={handleToggle}
+      />
+      <SwitchOption
+        label="Booking confirmations"
+        checked={true}
+        onToggle={handleToggle}
+      />
+      <SwitchOption
+        label="Availability reminders"
+        checked={true}
+        onToggle={handleToggle}
+      />
+      <SwitchOption
+        label="Payment notifications"
+        checked={true}
+        onToggle={handleToggle}
+      />
+      <SwitchOption
+        label="Venue messages"
+        checked={false}
+        onToggle={handleToggle}
+      />
+      <SwitchOption
+        label="Marketing emails"
+        checked={false}
+        onToggle={handleToggle}
+      />
+    </div>
+  </div>
+</Story>
+
+<Story name="Privacy Settings">
+  <div class="max-w-2xl p-6 bg-white border border-gray-200 rounded-lg">
+    <h3 class="text-lg font-semibold mb-2">Privacy Settings</h3>
+    <p class="text-sm text-gray-600 mb-4">Control what information is visible to venues</p>
+    <div class="space-y-1 divide-y">
+      <SwitchOption
+        label="Show profile picture publicly"
+        checked={true}
+        onToggle={handleToggle}
+      />
+      <SwitchOption
+        label="Display contact information"
+        checked={false}
+        onToggle={handleToggle}
+      />
+      <SwitchOption
+        label="Share performance history"
+        checked={true}
+        onToggle={handleToggle}
+      />
+      <SwitchOption
+        label="Allow venue reviews"
+        checked={true}
+        onToggle={handleToggle}
+      />
+    </div>
+  </div>
+</Story>
+
+<Story name="Availability Controls">
+  <div class="max-w-2xl p-6 bg-white border border-gray-200 rounded-lg">
+    <h3 class="text-lg font-semibold mb-2">Availability Controls</h3>
+    <p class="text-sm text-gray-600 mb-4">Manage your booking preferences</p>
+    <div class="space-y-1 divide-y">
+      <SwitchOption
+        label="Accept weekend bookings"
+        checked={true}
+        onToggle={handleToggle}
+      />
+      <SwitchOption
+        label="Accept weekday bookings"
+        checked={true}
+        onToggle={handleToggle}
+      />
+      <SwitchOption
+        label="Auto-accept from trusted venues"
+        checked={false}
+        onToggle={handleToggle}
+      />
+      <SwitchOption
+        label="Allow last-minute bookings"
+        checked={false}
+        onToggle={handleToggle}
+      />
+    </div>
+  </div>
+</Story>
+
+<Story name="Single Option Focus">
+  <div class="max-w-md p-6 bg-white border border-gray-200 rounded-lg">
+    <div class="mb-4">
+      <h4 class="text-base font-semibold mb-1">Push Notifications</h4>
+      <p class="text-sm text-gray-600">
+        Receive instant alerts about new bookings and messages
+      </p>
+    </div>
+    <SwitchOption
+      label="Enable push notifications"
+      checked={true}
+      onToggle={handleToggle}
+    />
+  </div>
+</Story>
+
+<Story name="Compact List">
+  <div class="max-w-md">
+    <SwitchOption
+      label="Monday"
+      checked={true}
+      onToggle={handleToggle}
+    />
+    <SwitchOption
+      label="Tuesday"
+      checked={true}
+      onToggle={handleToggle}
+    />
+    <SwitchOption
+      label="Wednesday"
+      checked={false}
+      onToggle={handleToggle}
+    />
+    <SwitchOption
+      label="Thursday"
+      checked={true}
+      onToggle={handleToggle}
+    />
+    <SwitchOption
+      label="Friday"
+      checked={true}
+      onToggle={handleToggle}
+    />
+    <SwitchOption
+      label="Saturday"
+      checked={false}
+      onToggle={handleToggle}
+    />
+    <SwitchOption
+      label="Sunday"
+      checked={false}
+      onToggle={handleToggle}
+    />
+  </div>
+</Story>

package/dist/components/pages/performers/SwitchOption.stories.svelte.d.ts

@@ -0,0 +1,40 @@
+export namespace meta {
+    export let title: string;
+    export { SwitchOption as component };
+    export namespace argTypes {
+        namespace label {
+            let control: string;
+        }
+        namespace checked {
+            let control_1: string;
+            export { control_1 as control };
+        }
+    }
+}
+/** @typedef {typeof __propDef.props}  SwitchOptionProps */
+/** @typedef {typeof __propDef.events}  SwitchOptionEvents */
+/** @typedef {typeof __propDef.slots}  SwitchOptionSlots */
+export default class SwitchOption extends SvelteComponent<{
+    [x: string]: never;
+}, {
+    [evt: string]: CustomEvent<any>;
+}, {}> {
+}
+export type SwitchOptionProps = typeof __propDef.props;
+export type SwitchOptionEvents = typeof __propDef.events;
+export type SwitchOptionSlots = typeof __propDef.slots;
+import SwitchOption from "./SwitchOption.svelte";
+import { SvelteComponent } from "svelte";
+declare const __propDef: {
+    props: {
+        [x: string]: never;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+    exports?: undefined;
+    bindings?: undefined;
+};
+export {};
+//# sourceMappingURL=SwitchOption.stories.svelte.d.ts.map

package/dist/components/pages/performers/SwitchOption.stories.svelte.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"SwitchOption.stories.svelte.d.ts","sourceRoot":"","sources":["../../../../src/lib/components/pages/performers/SwitchOption.stories.svelte.js"],"names":[],"mappings":";;;;;;;;;;;;;AAqHA,2DAA2D;AAC3D,6DAA6D;AAC7D,2DAA2D;AAE3D;;;;;CACC;gCALa,OAAO,SAAS,CAAC,KAAK;iCACtB,OAAO,SAAS,CAAC,MAAM;gCACvB,OAAO,SAAS,CAAC,KAAK;yBAnHT,uBAAuB;gCAJlB,QAAQ;AAoHxC;;;;;;;;;;EAAgF"}

package/dist/components/pages/performers/SwitchOption.svelte

@@ -0,0 +1,24 @@
+<script>
+    export let label = "";
+    export let checked = false;
+    export let onToggle;
+</script>
+
+<div class="w-full flex items-center justify-between gap-4 py-2">
+    <span class="text-sm font-medium text-gray-700">{label}</span>
+    <label class="inline-flex relative items-center cursor-pointer">
+        <input
+            type="checkbox"
+            class="sr-only peer"
+            bind:checked
+            on:change={() => onToggle(checked)}
+        />
+        <div
+            class="w-11 h-6 bg-gray-200 rounded-full peer peer-checked:bg-blue-600 peer-focus:ring-2 peer-focus:ring-blue-300 dark:peer-focus:ring-blue-800"
+        />
+        <div
+            class="w-5 h-5 bg-white rounded-full peer-checked:translate-x-5 absolute left-0.5 top-0.5 transform transition-transform"
+        />
+    </label>
+</div>
+  

package/dist/components/pages/performers/SwitchOption.svelte.d.ts

@@ -0,0 +1,30 @@
+/** @typedef {typeof __propDef.props}  SwitchOptionProps */
+/** @typedef {typeof __propDef.events}  SwitchOptionEvents */
+/** @typedef {typeof __propDef.slots}  SwitchOptionSlots */
+export default class SwitchOption extends SvelteComponent<{
+    onToggle: any;
+    label?: string | undefined;
+    checked?: boolean | undefined;
+}, {
+    [evt: string]: CustomEvent<any>;
+}, {}> {
+}
+export type SwitchOptionProps = typeof __propDef.props;
+export type SwitchOptionEvents = typeof __propDef.events;
+export type SwitchOptionSlots = typeof __propDef.slots;
+import { SvelteComponent } from "svelte";
+declare const __propDef: {
+    props: {
+        onToggle: any;
+        label?: string | undefined;
+        checked?: boolean | undefined;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+    exports?: undefined;
+    bindings?: undefined;
+};
+export {};
+//# sourceMappingURL=SwitchOption.svelte.d.ts.map

package/dist/components/pages/performers/SwitchOption.svelte.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"SwitchOption.svelte.d.ts","sourceRoot":"","sources":["../../../../src/lib/components/pages/performers/SwitchOption.svelte.js"],"names":[],"mappings":"AAqBA,2DAA2D;AAC3D,6DAA6D;AAC7D,2DAA2D;AAE3D;;;;;;;CACC;gCALa,OAAO,SAAS,CAAC,KAAK;iCACtB,OAAO,SAAS,CAAC,MAAM;gCACvB,OAAO,SAAS,CAAC,KAAK;gCAvBJ,QAAQ;AAoBxC;;;;;;;;;;;;EAAqG"}

package/dist/components/pages/performers/VenueInfo.spec.d.ts

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=VenueInfo.spec.d.ts.map

package/dist/components/pages/performers/VenueInfo.spec.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"VenueInfo.spec.d.ts","sourceRoot":"","sources":["../../../../src/lib/components/pages/performers/VenueInfo.spec.js"],"names":[],"mappings":""}

package/dist/components/pages/performers/VenueInfo.spec.js

@@ -0,0 +1,167 @@
+import { describe, it, expect, vi, beforeEach } from 'vitest';
+import { render } from '@testing-library/svelte';
+import VenueInfo from './VenueInfo.svelte';
+
+// Mock the utils
+vi.mock('@/utils/utils', () => ({
+  microphonePlaceholder: '/placeholder-mic.png',
+  parseLocation: vi.fn((location) => {
+    if (!location) return { street: '', cityStateZip: '' };
+    const parts = location.split(',').map((s) => s.trim());
+    if (parts.length >= 2) {
+      return {
+        street: parts[0],
+        cityStateZip: parts.slice(1).join(', '),
+      };
+    }
+    return { street: location, cityStateZip: '' };
+  }),
+}));
+
+describe('VenueInfo Component', () => {
+  const defaultProps = {
+    name: 'Comedy Club',
+    image: '/venue-image.jpg',
+    location: '123 Main St, Los Angeles, CA 90001',
+  };
+
+  beforeEach(() => {
+    vi.clearAllMocks();
+  });
+
+  it('renders the component', () => {
+    const { container } = render(VenueInfo, { props: defaultProps });
+    expect(container.querySelector('.venue-info')).toBeDefined();
+  });
+
+  it('renders the venue name', () => {
+    const { container } = render(VenueInfo, { props: defaultProps });
+    expect(container.querySelector('.venue-name').textContent).toBe('Comedy Club');
+  });
+
+  it('renders venue image with CDN URL for relative paths', () => {
+    const { container } = render(VenueInfo, { props: defaultProps });
+    const img = container.querySelector('.venue-image img');
+    expect(img.src).toBe('https://moxy.sfo3.digitaloceanspaces.com/venue-image.jpg');
+  });
+
+  it('renders venue image directly for http URLs', () => {
+    const props = { ...defaultProps, image: 'https://example.com/image.jpg' };
+    const { container } = render(VenueInfo, { props });
+    const img = container.querySelector('.venue-image img');
+    expect(img.src).toBe('https://example.com/image.jpg');
+  });
+
+  it('uses placeholder when image is empty', () => {
+    const props = { ...defaultProps, image: '' };
+    const { container } = render(VenueInfo, { props });
+    const img = container.querySelector('.venue-image img');
+    expect(img.src).toContain('placeholder-mic.png');
+  });
+
+  it('uses placeholder when image is whitespace only', () => {
+    const props = { ...defaultProps, image: '   ' };
+    const { container } = render(VenueInfo, { props });
+    const img = container.querySelector('.venue-image img');
+    expect(img.src).toContain('placeholder-mic.png');
+  });
+
+  it('renders street address', () => {
+    const { container } = render(VenueInfo, { props: defaultProps });
+    const locations = container.querySelectorAll('.venue-location');
+    expect(locations.length).toBeGreaterThan(0);
+    expect(locations[0].textContent).toBe('123 Main St');
+  });
+
+  it('renders city state zip', () => {
+    const { container } = render(VenueInfo, { props: defaultProps });
+    const locations = container.querySelectorAll('.venue-location');
+    expect(locations.length).toBe(2);
+    expect(locations[1].textContent).toBe('Los Angeles, CA 90001');
+  });
+
+  it('handles empty location', () => {
+    const props = { ...defaultProps, location: '' };
+    const { container } = render(VenueInfo, { props });
+    const locations = container.querySelectorAll('.venue-location');
+    expect(locations.length).toBe(0);
+  });
+
+  it('handles null location', () => {
+    const props = { ...defaultProps, location: null };
+    const { container } = render(VenueInfo, { props });
+    expect(container.querySelector('.venue-info')).toBeDefined();
+  });
+
+  it('handles undefined location', () => {
+    const props = { ...defaultProps, location: undefined };
+    const { container } = render(VenueInfo, { props });
+    expect(container.querySelector('.venue-info')).toBeDefined();
+  });
+
+  it('sets image alt text to venue name', () => {
+    const { container } = render(VenueInfo, { props: defaultProps });
+    const img = container.querySelector('.venue-image img');
+    expect(img.alt).toBe('Comedy Club');
+  });
+
+  it('renders with default size', () => {
+    const { container } = render(VenueInfo, { props: defaultProps });
+    expect(container.querySelector('.venue-info--small')).toBeNull();
+  });
+
+  it('renders with small size', () => {
+    const props = { ...defaultProps, size: 'small' };
+    const { container } = render(VenueInfo, { props });
+    expect(container.querySelector('.venue-info--small')).toBeDefined();
+  });
+
+  it('renders venue-image container', () => {
+    const { container } = render(VenueInfo, { props: defaultProps });
+    expect(container.querySelector('.venue-image')).toBeDefined();
+  });
+
+  it('renders venue-details container', () => {
+    const { container } = render(VenueInfo, { props: defaultProps });
+    expect(container.querySelector('.venue-details')).toBeDefined();
+  });
+
+  it('handles empty name', () => {
+    const props = { ...defaultProps, name: '' };
+    const { container } = render(VenueInfo, { props });
+    expect(container.querySelector('.venue-name').textContent).toBe('');
+  });
+
+  it('handles location with single part', () => {
+    const props = { ...defaultProps, location: 'Los Angeles' };
+    const { container } = render(VenueInfo, { props });
+    const locations = container.querySelectorAll('.venue-location');
+    expect(locations.length).toBeGreaterThan(0);
+  });
+
+  it('handles https image URLs', () => {
+    const props = { ...defaultProps, image: 'https://secure.example.com/image.jpg' };
+    const { container } = render(VenueInfo, { props });
+    const img = container.querySelector('.venue-image img');
+    expect(img.src).toBe('https://secure.example.com/image.jpg');
+  });
+
+  it('handles http image URLs', () => {
+    const props = { ...defaultProps, image: 'http://example.com/image.jpg' };
+    const { container } = render(VenueInfo, { props });
+    const img = container.querySelector('.venue-image img');
+    expect(img.src).toBe('http://example.com/image.jpg');
+  });
+
+  it('renders with very long name', () => {
+    const props = { ...defaultProps, name: 'A Very Long Venue Name That Might Need To Be Truncated In The UI' };
+    const { container } = render(VenueInfo, { props });
+    expect(container.querySelector('.venue-name').textContent).toBe('A Very Long Venue Name That Might Need To Be Truncated In The UI');
+  });
+
+  it('renders with special characters in name', () => {
+    const props = { ...defaultProps, name: "Joe's Comedy & Bar" };
+    const { container } = render(VenueInfo, { props });
+    expect(container.querySelector('.venue-name').textContent).toBe("Joe's Comedy & Bar");
+  });
+});