klz-cables.com/tests/brochure-modal.test.ts

import { test, expect, beforeAll, afterAll } from 'vitest';
import puppeteer, { Browser, Page } from 'puppeteer';
import { createServer } from 'http';
import { parse } from 'url';
import next from 'next';

let browser: Browser;
let page: Page;

// The URL of the local Next.js server we are testing against.
// In CI, we expect the server to already be running at http://127.0.0.1:3000
const BASE_URL = process.env.TEST_URL || 'http://127.0.0.1:3000';

beforeAll(async () => {
  browser = await puppeteer.launch({
    headless: true,
    args: ['--no-sandbox', '--disable-setuid-sandbox'],
  });
});

afterAll(async () => {
  if (browser) {
    await browser.close();
  }
});

test('AutoBrochureModal should open after 5 seconds and submit email', async () => {
  // Set a long timeout for the test to prevent premature failure
  page = await browser.newPage();

  // Clear localStorage to ensure the auto-open logic fires
  await page.goto(BASE_URL);
  await page.evaluate(() => {
    localStorage.clear();
  });

  // Reload page to start the timer fresh
  await page.goto(BASE_URL, { waitUntil: 'networkidle0' });

  // Wait for auto-trigger (set to 5s in code, we wait up to 10s here)
  const modal = await page.waitForSelector('div[role="dialog"]', { timeout: 10000 });
  expect(modal).not.toBeNull();

  // Ensure the email input is present inside the modal (using the placeholder to be sure)
  const emailInput = await page.waitForSelector('#brochure-email', { visible: true });
  expect(emailInput).not.toBeNull();

  // Fill the form inside the modal
  await page.type('#brochure-email', 'test-brochure@mintel.me');

  // Submit the form inside the modal
  await page.click('div[role="dialog"] button[type="submit"]');

  // Wait for the success state UI to appear inside the modal
  await page.waitForFunction(
    () => {
      const modal = document.querySelector('div[role="dialog"]');
      return (
        modal &&
        (modal.innerHTML.includes('Successfully sent') ||
          modal.innerHTML.includes('Erfolgreich gesendet'))
      );
    },
    { timeout: 25000 },
  );

  // Verify localStorage was set correctly so it doesn't open again
  const hasSeenModal = await page.evaluate(() => localStorage.getItem('klz_brochure_modal_seen'));
  expect(hasSeenModal).toBe('true');
}, 60000);