const { test, expect } = require('playwright/test');
const { BASE_URL, waitForSxReady, loadPage } = require('./helpers');

test.describe('SPA morph swap', () => {

  test('old content removed after SPA nav', async ({ page }) => {
    await loadPage(page, '');  // home
    expect(await page.$('#main-content')).not.toBeNull();

    await page.click('a[sx-get*="(geography)"]');
    await expect(page).toHaveURL(/geography/, { timeout: 5000 });
    await page.waitForTimeout(1500);

    expect(await page.$('#main-content'), '#main-content should be removed').toBeNull();
  });

  test('stepper island removed after SPA nav', async ({ page }) => {
    await loadPage(page, '');
    expect(await page.$('[data-sx-island="home/stepper"]')).not.toBeNull();

    await page.click('a[sx-get*="(geography)"]');
    await expect(page).toHaveURL(/geography/, { timeout: 5000 });
    await page.waitForTimeout(1500);

    expect(await page.$('[data-sx-island="home/stepper"]'), 'stepper should be gone').toBeNull();
  });

  test('header state updates after SPA nav', async ({ page }) => {
    await loadPage(page, '');
    await page.click('a[sx-get*="(geography)"]');
    await expect(page).toHaveURL(/geography/, { timeout: 5000 });
    await page.waitForTimeout(1500);

    const state = await page.$eval('[data-sx-island="layouts/header"]',
      el => el.getAttribute('data-sx-state'));
    expect(state, 'header state should have geography path').toContain('geography');
  });
});