@times-components/ts-components 1.146.2-0f9388fe36c532b90db3f35d17847fc17a611f1e.44 → 1.146.2-784617dc4a33959b8795da1d7f425c9929322fae.24

package/src/components/travel-mini-cta/__tests__/__snapshots__/index.test.tsx.snap

@@ -0,0 +1,211 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`TravelMiniCTA should render with all props 1`] = `
+<div>
+  <div
+    class="sc-bwzfXH bFraBm"
+    data-testid="travel-mini-cta"
+  >
+    <div
+      class="sc-htpNat fDJQmH"
+    >
+      <div
+        class="sc-bxivhb fAMkx"
+      >
+        <div
+          class="sc-ifAKCX gShyuV"
+        >
+          <div
+            class="sc-EHOje bKLali"
+          >
+            <span
+              class="sc-bZQynM liwexI"
+            >
+              T
+            </span>
+          </div>
+          <div
+            class="sc-bdVaJa sc-dnqmqq eRKvHY"
+          >
+            VISIT TIMES HOLIDAYS
+          </div>
+        </div>
+        <div
+          class="sc-gzVnrw VgUMC"
+        >
+          <div
+            class="sc-bdVaJa sc-htoDjs kOOBoa"
+          >
+            VISIT TIMES HOLIDAYS
+          </div>
+          <div
+            class="sc-iwsKbI kpBVfB"
+          >
+            Begin your journey to Croatia with a holiday designed around you
+          </div>
+        </div>
+      </div>
+      <div
+        class="sc-gZMcBi eQUwuL"
+      >
+        <div
+          class="sc-gqjmRU eBVWqY"
+        >
+          <a
+            class="sc-VigVT dOCyED"
+            href="tel:08083049757"
+          >
+            Call us on
+             
+            <span
+              class="sc-jTzLTM OZjYU"
+            >
+              08083049757
+            </span>
+          </a>
+          <div
+            class="sc-fjdhpX KnCtx"
+          >
+            <div
+              class="sc-jzJRlG eEbwcv"
+            >
+              Mon - Fri: 9am - 6pm
+            </div>
+            <div
+              class="sc-jzJRlG eEbwcv"
+            >
+              Sat: 10am - 5pm
+            </div>
+          </div>
+        </div>
+        <div
+          class="sc-cSHVUG dAmHXf"
+        >
+          <button
+            class="sc-kAzzGY sc-chPdSV htelVJ"
+            disabled=""
+            type="button"
+          >
+            Loading chat...
+          </button>
+          <div
+            id="LP_DIV_TRAVEL_1239001"
+            style="display: none;"
+          />
+          <a
+            class="sc-kAzzGY sc-kgoBCf epsPGX"
+            href="/enquire"
+          >
+            Enquire now
+          </a>
+        </div>
+      </div>
+    </div>
+  </div>
+</div>
+`;
+
+exports[`TravelMiniCTA should render with isApp prop 1`] = `
+<div>
+  <div
+    class="sc-bwzfXH euaLVT"
+    data-testid="travel-mini-cta"
+  >
+    <div
+      class="sc-htpNat fDJQmH"
+    >
+      <div
+        class="sc-bxivhb fAMkx"
+      >
+        <div
+          class="sc-ifAKCX gShyuV"
+        >
+          <div
+            class="sc-EHOje bDGqOa"
+          >
+            <span
+              class="sc-bZQynM hVYjTG"
+            >
+              T
+            </span>
+          </div>
+          <div
+            class="sc-bdVaJa sc-dnqmqq dpftVr"
+          >
+            VISIT TIMES HOLIDAYS
+          </div>
+        </div>
+        <div
+          class="sc-gzVnrw VgUMC"
+        >
+          <div
+            class="sc-bdVaJa sc-htoDjs isYUYH"
+          >
+            VISIT TIMES HOLIDAYS
+          </div>
+          <div
+            class="sc-iwsKbI bGbdiO"
+          >
+            Begin your journey to Croatia with a holiday designed around you
+          </div>
+        </div>
+      </div>
+      <div
+        class="sc-gZMcBi eQUwuL"
+      >
+        <div
+          class="sc-gqjmRU eBVWqY"
+        >
+          <a
+            class="sc-VigVT HFijS"
+            href="tel:08083049757"
+          >
+            Call us on
+             
+            <span
+              class="sc-jTzLTM diHDON"
+            >
+              08083049757
+            </span>
+          </a>
+          <div
+            class="sc-fjdhpX KnCtx"
+          >
+            <div
+              class="sc-jzJRlG csKGWf"
+            >
+              Mon - Fri: 9am - 6pm
+            </div>
+            <div
+              class="sc-jzJRlG csKGWf"
+            >
+              Sat: 10am - 5pm
+            </div>
+          </div>
+        </div>
+        <div
+          class="sc-cSHVUG dAmHXf"
+        >
+          <button
+            class="sc-kAzzGY sc-chPdSV ddVxAZ"
+            disabled=""
+            type="button"
+          >
+            Loading chat...
+          </button>
+          <div
+            id="LP_DIV_TRAVEL_1239001"
+            style="display: none;"
+          />
+          <a
+            class="sc-kAzzGY sc-kgoBCf lnRSck"
+            href="/enquire"
+          >
+            Enquire now
+          </a>
+        </div>
+      </div>
+    </div>
+  </div>
+</div>
+`;

package/src/components/travel-mini-cta/__tests__/index.test.tsx

@@ -0,0 +1,330 @@
+import React from 'react';
+import '@testing-library/jest-dom';
+import {
+  render,
+  screen,
+  act,
+  fireEvent,
+  waitFor
+} from '@testing-library/react';
+import { TravelMiniCTA } from '../index';
+
+describe('TravelMiniCTA', () => {
+  const defaultProps = {
+    description:
+      'Begin your journey to Croatia with a holiday designed around you',
+    phoneLabel: 'Call us on',
+    phoneNumber: '08083049757',
+    workingHours: ['Mon - Fri: 9am - 6pm', 'Sat: 10am - 5pm'],
+    primaryButtonText: 'Chat with us',
+    secondaryButtonText: 'Enquire now',
+    secondaryButtonUrl: '/enquire'
+  };
+
+  let mockObserve: jest.Mock;
+  let mockDisconnect: jest.Mock;
+  let mutationCallback: MutationCallback;
+
+  beforeEach(() => {
+    jest.clearAllMocks();
+    jest.useFakeTimers();
+
+    // Mock MutationObserver
+    mockObserve = jest.fn();
+    mockDisconnect = jest.fn();
+
+    const MockMutationObserver: typeof MutationObserver = jest.fn(
+      (callback: MutationCallback) => {
+        mutationCallback = callback;
+
+        const observer: MutationObserver = {
+          observe: mockObserve,
+          disconnect: mockDisconnect,
+          takeRecords: jest.fn()
+        };
+
+        return observer;
+      }
+    );
+
+    global.MutationObserver = MockMutationObserver;
+
+    // Mock lpTag
+    (global as any).lpTag = {
+      newPage: jest.fn()
+    };
+  });
+
+  afterEach(() => {
+    jest.runOnlyPendingTimers();
+    jest.useRealTimers();
+    delete (global as any).lpTag;
+  });
+
+  it('should render with all props', () => {
+    const { container } = render(<TravelMiniCTA {...defaultProps} />);
+    expect(container).toMatchSnapshot();
+  });
+
+  it('should render the logo with "T" text', () => {
+    render(<TravelMiniCTA {...defaultProps} />);
+    expect(screen.getByText('T')).toBeInTheDocument();
+  });
+
+  it('should render the label "VISIT TIMES HOLIDAYS"', () => {
+    render(<TravelMiniCTA {...defaultProps} />);
+    const labels = screen.getAllByText('VISIT TIMES HOLIDAYS');
+    expect(labels.length).toBe(2); // Desktop and mobile labels
+  });
+
+  it('should render the description', () => {
+    render(<TravelMiniCTA {...defaultProps} />);
+    expect(screen.getByText(defaultProps.description)).toBeInTheDocument();
+  });
+
+  it('should render phone label and number', () => {
+    render(<TravelMiniCTA {...defaultProps} />);
+    expect(screen.getByText('Call us on')).toBeInTheDocument();
+    expect(screen.getByText('08083049757')).toBeInTheDocument();
+  });
+
+  it('should render phone number as a tel link', () => {
+    render(<TravelMiniCTA {...defaultProps} />);
+    const phoneLink = screen.getByText('Call us on').closest('a');
+    expect(phoneLink).toHaveAttribute('href', 'tel:08083049757');
+  });
+
+  it('should render working hours', () => {
+    render(<TravelMiniCTA {...defaultProps} />);
+    expect(screen.getByText('Mon - Fri: 9am - 6pm')).toBeInTheDocument();
+    expect(screen.getByText('Sat: 10am - 5pm')).toBeInTheDocument();
+  });
+
+  it('should render primary button with loading text initially', () => {
+    render(<TravelMiniCTA {...defaultProps} />);
+    expect(screen.getByText('Loading chat...')).toBeInTheDocument();
+  });
+
+  it('should render secondary button with correct text and URL', () => {
+    render(<TravelMiniCTA {...defaultProps} />);
+    const secondaryButton = screen.getByText('Enquire now');
+    expect(secondaryButton).toBeInTheDocument();
+  });
+
+  it('should render with minimal props', () => {
+    render(<TravelMiniCTA />);
+    expect(screen.getByTestId('travel-mini-cta')).toBeInTheDocument();
+  });
+
+  it('should render without working hours if not provided', () => {
+    const propsWithoutWorkingHours = {
+      ...defaultProps,
+      workingHours: undefined
+    };
+    render(<TravelMiniCTA {...propsWithoutWorkingHours} />);
+    expect(screen.queryByText('Mon - Fri: 9am - 6pm')).not.toBeInTheDocument();
+  });
+
+  it('should render empty working hours array', () => {
+    const propsWithEmptyWorkingHours = {
+      ...defaultProps,
+      workingHours: []
+    };
+    const { container } = render(
+      <TravelMiniCTA {...propsWithEmptyWorkingHours} />
+    );
+    expect(
+      container.querySelector('[data-testid="travel-mini-cta"]')
+    ).toBeInTheDocument();
+  });
+
+  it('should render with custom description', () => {
+    const customDescription = 'Explore the world with our expert guidance';
+    render(<TravelMiniCTA {...defaultProps} description={customDescription} />);
+    expect(screen.getByText(customDescription)).toBeInTheDocument();
+  });
+
+  it('should render with custom phone details', () => {
+    const customProps = {
+      ...defaultProps,
+      phoneLabel: 'Contact us at',
+      phoneNumber: '0123456789'
+    };
+    render(<TravelMiniCTA {...customProps} />);
+    expect(screen.getByText('Contact us at')).toBeInTheDocument();
+    expect(screen.getByText('0123456789')).toBeInTheDocument();
+  });
+
+  it('should have correct container test id', () => {
+    render(<TravelMiniCTA {...defaultProps} />);
+    expect(screen.getByTestId('travel-mini-cta')).toBeInTheDocument();
+  });
+
+  it('should render with isApp prop', () => {
+    const { container } = render(
+      <TravelMiniCTA {...defaultProps} isApp={true} />
+    );
+    expect(container).toMatchSnapshot();
+  });
+
+  it('should pass isApp prop to styled components', () => {
+    render(<TravelMiniCTA {...defaultProps} isApp={true} />);
+    const container = screen.getByTestId('travel-mini-cta');
+    expect(container).toBeInTheDocument();
+  });
+
+  describe('LivePerson Chat Integration', () => {
+    it('should render LivePerson container div with correct ID', () => {
+      render(<TravelMiniCTA {...defaultProps} />);
+      const chatDiv = document.getElementById('LP_DIV_TRAVEL_1239001');
+      expect(chatDiv).toBeInTheDocument();
+    });
+
+    it('should show loading text initially', () => {
+      render(<TravelMiniCTA {...defaultProps} />);
+      expect(screen.getByText('Loading chat...')).toBeInTheDocument();
+    });
+
+    it('should setup MutationObserver on mount', () => {
+      render(<TravelMiniCTA {...defaultProps} />);
+      expect(global.MutationObserver).toHaveBeenCalled();
+      expect(mockObserve).toHaveBeenCalledWith(expect.any(HTMLElement), {
+        childList: true,
+        subtree: true
+      });
+    });
+
+    it('should set chat ready when LivePerson element is detected', async () => {
+      render(<TravelMiniCTA {...defaultProps} />);
+
+      // Simulate LivePerson injecting the chat element
+      const chatDiv = document.getElementById('LP_DIV_TRAVEL_1239001');
+      const lpElement = document.createElement('div');
+      lpElement.setAttribute('data-lp-event', 'click');
+      lpElement.textContent = 'Chat';
+      chatDiv && chatDiv.appendChild(lpElement);
+
+      // Trigger the mutation observer callback
+      const observer: MutationObserver = {
+        observe: mockObserve,
+        disconnect: mockDisconnect,
+        takeRecords: jest.fn()
+      };
+      act(() => {
+        mutationCallback([], observer);
+      });
+
+      await waitFor(() => {
+        expect(screen.queryByText('Loading chat...')).not.toBeInTheDocument();
+      });
+    });
+
+    it('should clear timeout when chat loads successfully', async () => {
+      const clearTimeoutSpy = jest.spyOn(global, 'clearTimeout');
+      render(<TravelMiniCTA {...defaultProps} />);
+
+      const chatDiv = document.getElementById('LP_DIV_TRAVEL_1239001');
+      const lpElement = document.createElement('div');
+      lpElement.setAttribute('data-lp-event', 'click');
+      chatDiv && chatDiv.appendChild(lpElement);
+
+      const observer: MutationObserver = {
+        observe: mockObserve,
+        disconnect: mockDisconnect,
+        takeRecords: jest.fn()
+      };
+      act(() => {
+        mutationCallback([], observer);
+      });
+
+      await waitFor(() => {
+        expect(clearTimeoutSpy).toHaveBeenCalled();
+      });
+
+      // Timeout should not fire
+      act(() => {
+        jest.advanceTimersByTime(15000);
+      });
+
+      expect(screen.queryByText('Chat unavailable')).not.toBeInTheDocument();
+      clearTimeoutSpy.mockRestore();
+    });
+
+    it('should disconnect observer on unmount', () => {
+      const { unmount } = render(<TravelMiniCTA {...defaultProps} />);
+      unmount();
+      expect(mockDisconnect).toHaveBeenCalled();
+    });
+
+    it('should clear timeout on unmount', () => {
+      const clearTimeoutSpy = jest.spyOn(global, 'clearTimeout');
+      const { unmount } = render(<TravelMiniCTA {...defaultProps} />);
+      unmount();
+      expect(clearTimeoutSpy).toHaveBeenCalled();
+      clearTimeoutSpy.mockRestore();
+    });
+
+    it('should trigger LivePerson element click when primary button is clicked', async () => {
+      render(<TravelMiniCTA {...defaultProps} />);
+
+      // Simulate chat loaded
+      const chatDiv = document.getElementById('LP_DIV_TRAVEL_1239001');
+      const lpElement = document.createElement('button');
+      lpElement.setAttribute('data-lp-event', 'click');
+
+      // Mock click on the LivePerson element
+      const lpClickSpy = jest.fn();
+      lpElement.onclick = lpClickSpy;
+
+      chatDiv && chatDiv.appendChild(lpElement);
+
+      const observer: MutationObserver = {
+        observe: mockObserve,
+        disconnect: mockDisconnect,
+        takeRecords: jest.fn()
+      };
+      act(() => {
+        mutationCallback([], observer);
+      });
+
+      await waitFor(() => {
+        expect(screen.queryByText('Loading chat...')).not.toBeInTheDocument();
+      });
+
+      // Get and click the primary button
+      const parentElement = chatDiv ? chatDiv.parentElement : null;
+      if (parentElement instanceof HTMLButtonElement) {
+        fireEvent.click(parentElement);
+        expect(lpClickSpy).toHaveBeenCalled();
+      }
+    });
+
+    it('should handle button click without errors when chat is ready', async () => {
+      render(<TravelMiniCTA {...defaultProps} />);
+
+      const chatDiv = document.getElementById('LP_DIV_TRAVEL_1239001');
+      const lpElement = document.createElement('button');
+      lpElement.setAttribute('data-lp-event', 'click');
+      chatDiv && chatDiv.appendChild(lpElement);
+
+      const observer: MutationObserver = {
+        observe: mockObserve,
+        disconnect: mockDisconnect,
+        takeRecords: jest.fn()
+      };
+      act(() => {
+        mutationCallback([], observer);
+      });
+
+      await waitFor(() => {
+        expect(screen.queryByText('Loading chat...')).not.toBeInTheDocument();
+      });
+
+      // Click button should not throw error
+      const parentElement = chatDiv ? chatDiv.parentElement : null;
+      if (parentElement instanceof HTMLButtonElement) {
+        expect(() => fireEvent.click(parentElement)).not.toThrow();
+      }
+    });
+  });
+});