import { test, expect } from './fixtures';

test.describe('Order history has a page of its own', () => {
  test('a signed-out visitor is sent to sign in', async ({ page, orders }) => {
    await orders.goto();

    await expect(page).toHaveURL(/\/login/, { timeout: 20000 });
  });

  // A page, not a modal: no dialog, and the storefront is not rendered behind
  // it. Putting /orders in MODAL_ROUTES would quietly undo the whole change,
  // and this is what would catch it.
  test('renders as a page rather than a modal over the storefront', async ({
    customer,
    orders,
    header
  }) => {
    await orders.goto();

    await expect(orders.heading).toBeVisible({ timeout: 20000 });
    await expect(orders.anyDialog).toHaveCount(0);
    await expect(header.siteTitle).toBeHidden();
  });

  test('says so when there are no orders, rather than showing an empty table', async ({
    customer,
    orders
  }) => {
    await orders.goto();

    await expect(orders.noOrdersNotice).toBeVisible({ timeout: 20000 });
    await expect(orders.continueShoppingButton).toBeVisible();
  });

  test('Back to Shop returns to the storefront', async ({ page, customer, orders, header }) => {
    await orders.goto();
    await expect(orders.heading).toBeVisible({ timeout: 20000 });

    await orders.backToShopButton.click();

    await expect(page).toHaveURL(/\/$/);
    await expect(header.siteTitle).toBeVisible();
  });

  // The account view is where a customer looks for their orders, so the route
  // out of it is the part that has to keep working now the table has gone.
  test('My Account links to it', async ({ page, customer, accountModal, orders }) => {
    await accountModal.open();

    await accountModal.orderHistoryButton.click();

    await expect(page).toHaveURL(/\/orders/);
    await expect(orders.heading).toBeVisible();
  });
});