redefined-designs/frontend/tests/e2e/account-modal.spec.ts

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

test.describe('My Account opens as a modal', () => {
  test('opens over the storefront and closes back to it, filters and all', async ({
    page,
    customer,
    accountModal,
    header
  }) => {
    // A filtered view, to prove closing restores where the customer actually
    // was rather than a bare storefront.
    await page.goto('/?max_price=50000');
    await header.waitForSignedIn();

    await accountModal.openFromHeader();
    // Still a real, linkable URL rather than hidden view state.
    await expect(page).toHaveURL(/\/account/);

    await accountModal.close();
    await expect(page).toHaveURL(/max_price=50000/);
  });

  test('the browser back button closes it, the same as the close control', async ({
    page,
    customer,
    accountModal,
    header
  }) => {
    await page.goto('/?max_price=50000');
    await header.waitForSignedIn();
    await accountModal.openFromHeader();

    await page.goBack();

    await expect(accountModal.dialog).toBeHidden();
    await expect(page).toHaveURL(/max_price=50000/);
  });

  test('a direct visit renders the storefront behind it, so closing lands somewhere real', async ({
    page,
    customer,
    accountModal,
    header
  }) => {
    // A bookmark, or the link in a verification email. There is no page behind
    // in this case, which is what used to make /account a dead end.
    await accountModal.open();

    await expect(header.siteTitle).toBeVisible();

    await accountModal.close();
    await expect(page).toHaveURL(/\/$/);
    await expect(header.myAccountButton).toBeVisible();
  });

  test('survives a reload, since it is a route rather than view state', async ({
    page,
    customer,
    accountModal,
    header
  }) => {
    await page.goto('/?max_price=50000');
    await header.waitForSignedIn();
    await accountModal.openFromHeader();

    await page.reload();

    await expect(accountModal.dialog).toBeVisible();
    await expect(accountModal.dialog).toContainText(customer.email);
  });

  test('shows the signed-in account and its settings', async ({ customer, accountModal }) => {
    await accountModal.open();

    await expect(accountModal.dialog).toContainText(customer.email);
    // The orders table lives at /orders now. What the account view still owes
    // the customer is a way to reach it.
    await expect(accountModal.orderHistoryButton).toBeVisible();
    // Scoped to the modal: the storefront behind it has a theme switch of its
    // own, so an unscoped switch locator would be ambiguous.
    //
    // Three since #56 added analytics consent: marketing email, favourite
    // alerts, analytics. The count is a guard against one appearing or
    // vanishing unnoticed, so it is asserted alongside naming each of them —
    // a count alone would pass if two were swapped for each other.
    await expect(accountModal.themeSwitches).toHaveCount(3);
    await expect(accountModal.marketingConsentSwitch).toBeVisible();
    await expect(accountModal.favoriteAlertsSwitch).toBeVisible();
    await expect(accountModal.analyticsConsentSwitch).toBeVisible();
  });

  // Quebec's Law 25 s.8.1 requires profiling to be off until the person turns
  // it on. The server defaults the column to false and the integration suite
  // asserts that; this is the half of the promise the customer can actually
  // see, and the two have to agree.
  test('analytics consent is off until the customer turns it on', async ({
    customer,
    accountModal
  }) => {
    await accountModal.open();

    await expect(accountModal.analyticsConsentSwitch).not.toBeChecked();
  });

  test('deleting the account does not leave the page behind it looking signed in', async ({
    page,
    customer,
    accountModal,
    header
  }) => {
    await accountModal.open();
    await accountModal.deleteAccount();

    // The storefront is rendered behind the modal, so a session left in place
    // would visibly go on offering My Account for an account that is gone.
    await expect(header.signUpButton).toBeVisible();
    await expect(header.myAccountButton).toBeHidden();
    await expect(page).toHaveURL(/\/$/);
  });

  test('stays usable on a phone, with the close control in reach', async ({
    page,
    customer,
    accountModal
  }) => {
    await page.setViewportSize({ width: 390, height: 664 });
    await accountModal.open();

    // The view is taller than the viewport, so the body scrolls rather than
    // pushing the title and close control off-screen.
    await expect(accountModal.closeButton).toBeInViewport();
    await expect(accountModal.orderHistoryButton).toBeVisible();

    await accountModal.close();
    await expect(page).toHaveURL(/\/$/);
  });
});