Testing

// The harnesses live beside the components they drive, one entry point each.
// 72 so far, publishing 106 harness classes: every form control,
// every overlay, the three data views, the whole navigation / disclosure set,
// every chart, eighteen of the twenty-one animations, <wr-markdown>, and the
// standalone widgets — calendar, event-calendar, window, image-cropper, tour,
// lightbox, speed-dial, splitter.
import { WrButtonHarness } from 'ngwr/button/testing';
import { WrInputHarness } from 'ngwr/input/testing';
import { WrCheckboxHarness } from 'ngwr/checkbox/testing';
import { WrRadioGroupHarness } from 'ngwr/radio/testing';
import { WrFormFieldHarness } from 'ngwr/form/testing';
import { WrEditorHarness } from 'ngwr/editor/testing';

// The overlay ones — panels that render outside your fixture.
import { WrSelectHarness } from 'ngwr/select/testing';
import { WrDialogHarness } from 'ngwr/dialog/testing';
import { WrContextMenuHarness } from 'ngwr/context-menu/testing';
import { WrCommandPaletteHarness } from 'ngwr/command-palette/testing';

// The data views come as families.
import { WrTableHarness, WrTableRowHarness } from 'ngwr/table/testing';
import { WrTreeHarness, WrTreeNodeHarness } from 'ngwr/tree/testing';
import { WrGraphHarness, WrGraphNodeHarness } from 'ngwr/graph/testing';

// The environment comes from the CDK, which is already a peer dependency.
import { TestbedHarnessEnvironment } from '@angular/cdk/testing/testbed';

import { TestbedHarnessEnvironment } from '@angular/cdk/testing/testbed';
import { TestBed } from '@angular/core/testing';
import { WrButtonHarness } from 'ngwr/button/testing';

it('saves the form', async () => {
  const fixture = TestBed.createComponent(CheckoutPage);
  fixture.detectChanges();

  const loader = TestbedHarnessEnvironment.loader(fixture);
  const save = await loader.getHarness(WrButtonHarness.with({ text: 'Save' }));

  expect(await save.isDisabled()).toBe(true);   // nothing filled in yet
});

// Every harness ships a `with()` predicate. A string is an exact match, a
// RegExp is tested, and several options AND together.
await loader.getHarness(WrButtonHarness.with({ text: 'Save' }));
await loader.getAllHarnesses(WrButtonHarness.with({ text: /^S/ }));
await loader.getAllHarnesses(WrButtonHarness.with({ disabled: true }));

await loader.getHarness(WrCheckboxHarness.with({ label: 'I agree' }));
await loader.getHarness(WrInputHarness.with({ placeholder: 'Email' }));
await loader.getHarness(WrSwitchHarness.with({ label: 'Dark mode', on: false }));

it('enables Save once the form is valid', async () => {
  const loader = TestbedHarnessEnvironment.loader(fixture);

  const email = await loader.getHarness(WrInputHarness.with({ placeholder: 'Email' }));
  const terms = await loader.getHarness(WrCheckboxHarness.with({ label: 'I agree' }));
  const save = await loader.getHarness(WrButtonHarness.with({ text: 'Save' }));

  await email.setValue('[email protected]');
  await terms.check();

  expect(await save.isDisabled()).toBe(false);
});

// A component that renders into an overlay is NOT inside the fixture, so load
// it from the document root instead.
const rootLoader = TestbedHarnessEnvironment.documentRootLoader(fixture);

it('confirms before deleting', async () => {
  await (await loader.getHarness(WrButtonHarness.with({ text: 'Delete' }))).click();

  const dialog = await rootLoader.getHarness(WrDialogHarness);
  expect(await dialog.getTitleText()).toBe('Delete item');

  // A dialog is a content CONTAINER: harnesses resolve inside it, so a second
  // dialog's buttons can't be picked up by mistake.
  await (await dialog.getHarness(WrButtonHarness.with({ text: 'Confirm' }))).click();

  const toast = await rootLoader.getHarness(WrToastHarness.with({ type: 'success' }));
  expect(await toast.getMessage()).toBe('Item deleted');
});

it('picks a size', async () => {
  const select = await loader.getHarness(WrSelectHarness);

  await select.open();
  expect(await select.getOptionLabels()).toEqual(['Small', 'Medium', 'Large']);

  await select.selectOption({ text: 'Medium' });
  expect(await select.getValueText()).toBe('Medium');
});

it('filters as you type', async () => {
  const select = await loader.getHarness(WrSelectHarness);

  await select.open();
  await select.typeSearch('la');

  // Filtered-out options stay in the DOM and collapse via CSS — the harness
  // drops them, so this is the list a user can actually reach.
  expect(await select.getOptionLabels()).toEqual(['Large']);
});

it('builds up a multi selection', async () => {
  const select = await loader.getHarness(WrSelectHarness);

  await select.selectOption({ text: 'Small' });
  await select.selectOption({ text: 'Large' });
  expect(await select.getChipLabels()).toEqual(['Small', 'Large']);

  await select.removeChip('Small');
  expect(await select.getChipLabels()).toEqual(['Large']);
});

it('renames from the menu', async () => {
  const menu = await loader.getHarness(WrDropdownHarness.with({ text: 'Actions' }));

  await menu.open();
  expect(await menu.getItemTexts()).toEqual(['Rename', 'Duplicate', 'Delete']);

  // Focus starts on the first ENABLED item and the arrows skip the rest.
  expect(await menu.getFocusedItemText()).toBe('Rename');

  await menu.clickItem({ text: 'Rename' });
  // Picking does not close the menu — there is no close-on-select.
  expect(await menu.isOpen()).toBe(true);
});

// A picker needs a date adapter, the same one your app provides.
TestBed.configureTestingModule({
  providers: [provideWrOverlay(), provideWrDateAdapter({ locale: 'en-US' })],
});

it('picks a departure date', async () => {
  const picker = await loader.getHarness(WrDatePickerHarness);

  await picker.open();
  expect(await picker.getPanelHeader()).toBe('January 2025');
  expect(await picker.getWeekdayLabels()).toEqual(['Su', 'Mo', 'Tu', 'We', 'Th', 'Fr', 'Sa']);

  await picker.selectDay(20);
  expect(await picker.getValueText()).toBe('20.01.2025');
});

it('reads the state of a day cell', async () => {
  const picker = await loader.getHarness(WrDatePickerHarness);
  await picker.open();

  const day = await picker.getDay(15);
  expect(await day.isSelected()).toBe(true);
  expect(await day.isToday()).toBe(false);

  // selectDay() refuses a disabled cell instead of clicking into the void.
  await expect(picker.selectDay(5)).rejects.toThrow(/disabled/);
});

it('sets a time and steps it', async () => {
  const picker = await loader.getHarness(WrDatePickerHarness);   // mode="datetime"
  await picker.open();

  await picker.setTime({ hours: 9, minutes: 30 });
  await picker.stepTime('minutes', 1);
  expect(await picker.getTime()).toBe('09:31');
});

it('explains itself on hover', async () => {
  const tip = await loader.getHarness(WrPopoverHarness.with({ mode: 'tooltip' }));

  await tip.open();                       // hover for a tooltip, click for a popover
  expect(await tip.getContentText()).toBe('Save changes');
  expect(await tip.getRole()).toBe('tooltip');

  await tip.close();
});

it('closes the drawer', async () => {
  const drawer = await rootLoader.getHarness(WrDrawerHarness);

  expect(await drawer.getTitleText()).toBe('Filters');
  expect(await drawer.getPosition()).toBe('end');
  expect(await drawer.isLabelledByTitle()).toBe(true);

  await drawer.close();
});

it('offers a choice, and names itself either way', async () => {
  const sheet = await rootLoader.getHarness(WrActionSheetHarness);

  // No visible title, so the name is the screen-reader-only fallback.
  expect(await sheet.getAccessibleName()).toBe('Actions');
  expect(await sheet.isNamed()).toBe(true);

  expect(await sheet.getActionGroups()).toEqual([
    ['Take Photo', 'Choose from Library', 'Delete'],
    ['Cancel'],
  ]);

  // Picking emits and closes in one call, so the harness goes stale after it.
  await sheet.select({ role: 'destructive' });
  expect(await sheet.isOpen()).toBe(false);
});

it('picks a colour through the fields, not a drag', async () => {
  const trigger = await loader.getHarness(WrColorPickerTriggerHarness);
  const picker = await trigger.open();

  await picker.setHex('#3969e2');
  expect(await picker.getHex()).toBe('#3969e2ff');

  await picker.setTab('rgb');
  expect(await picker.getRgb()).toEqual({ r: 57, g: 105, b: 226 });

  await picker.setAlphaPercent(50);
  // The surfaces followed, and the thumbs say so without any layout.
  expect((await picker.getThumbs()).alpha).toBe(50);
});

it('resizes from the keyboard', async () => {
  const splitter = await loader.getHarness(WrSplitterHarness);

  // Panes side by side; the divider drawn between them is a vertical line.
  expect(await splitter.getOrientation()).toBe('horizontal');
  expect(await splitter.getDividerOrientation()).toBe('vertical');

  await splitter.setPosition(70);
  expect(await splitter.getPaneSizes()).toEqual({ start: 70, end: 30 });

  // Home and End are semantic — they never mirror under RTL.
  await splitter.pressHome();
  expect(await splitter.getPosition()).toBe(await splitter.getMinPosition());
});

it('animates text without losing it', async () => {
  const headline = await loader.getHarness(WrBlurTextHarness);

  // Two questions, not one: what is announced, and what is drawn.
  expect(await headline.getAccessibleText()).toBe('Welcome to ngwr');
  expect(await headline.getPieces()).toEqual(['Welcome', 'to', 'ngwr']);
  expect(await headline.isTextHidden()).toBe(true);

  // And the split has to be lossless — this is what catches a dropped space.
  expect(await headline.getRenderedText()).toBe(await headline.getAccessibleText());
});

it('reads the data, not the drawing', async () => {
  const bars = await loader.getHarness(WrBarChartHarness);

  // The label row is aria-hidden; the column carries the real name.
  expect(await bars.getLabels()).toEqual(['Mon', 'Tue', 'Wed']);
  expect(await bars.getAccessibleNames()).toEqual(['Mon: 12', 'Tue: 24', 'Wed: 6']);
  expect((await bars.getBars()).map(b => b.heightPercent)).toEqual([50, 100, 25]);

  const donut = await loader.getHarness(WrDonutChartHarness);
  expect(await donut.getLegend()).toEqual([{ label: 'Direct', value: '30' }]);
});

it('moves an event with the keyboard', async () => {
  const calendar = await loader.getHarness(WrEventCalendarHarness);

  expect(await calendar.getView()).toBe('month');
  expect(await calendar.getChipLabels()).toHaveLength(3);

  const [standup] = await calendar.getChips({ title: 'Standup' });
  await standup.move('right');

  // The calendar only EMITS — applying the change is the host's job.
  expect(changed()?.kind).toBe('move');
  expect(changed()?.start.getDate()).toBe(15);
});

it('opens a crop window once the image is measured', async () => {
  const cropper = await loader.getHarness(WrImageCropperHarness);

  // jsdom loads nothing, so hand the <img> the two numbers the component reads.
  const img = fixture.nativeElement.querySelector('.wr-image-cropper__image');
  img.getBoundingClientRect = () => ({ width: 400, height: 400, x: 0, y: 0 });
  Object.defineProperty(img, 'naturalWidth', { value: 800 });
  Object.defineProperty(img, 'naturalHeight', { value: 800 });

  await cropper.dispatchImageLoad();

  expect(await cropper.getCropBox()).toEqual({ x: 80, y: 80, width: 240, height: 240 });
});

it('minimizes to the taskbar and back', async () => {
  windows.open(EditorComponent, { title: 'Untitled.md' });
  await fixture.whenStable();

  const win = await rootLoader.getHarness(WrWindowHarness.with({ title: 'Untitled.md' }));
  await win.minimize();

  // Minimized is a state, not a dismissal.
  expect(await win.isOpen()).toBe(true);
  expect(await win.getState()).toBe('minimized');

  const taskbar = await loader.getHarness(WrWindowTaskbarHarness);
  expect(await taskbar.getTabTitles()).toEqual(['Untitled.md']);

  await taskbar.restore('Untitled.md');
  expect(await win.getState()).toBe('normal');
});

it('picks a day and walks the views', async () => {
  const calendar = await loader.getHarness(WrCalendarHarness);

  expect(await calendar.getHeaderLabel()).toBe('March 2026');
  await (await calendar.getDay(20)).click();
  expect(await calendar.getSelectedDayNumbers()).toEqual([20]);

  await calendar.clickHeader();               // day -> month
  await calendar.selectChip('Jun');           // and back down
  expect(await calendar.getHeaderLabel()).toBe('June 2026');
});

it('walks the tour', async () => {
  tour.start(steps);
  await fixture.whenStable();

  const first = await rootLoader.getHarness(WrTourHarness);
  expect(await first.getTitle()).toBe('Search');
  expect(await first.hasBack()).toBe(false);

  await first.next();

  // The card is rebuilt per step, so fetch a fresh harness rather than reusing one.
  const second = await rootLoader.getHarness(WrTourHarness);
  expect(await second.getProgress()).toEqual({ current: 2, total: 2 });
  expect(await second.getPrimaryLabel()).toBe('Done');
});

it('opens the full image', async () => {
  const lightbox = await loader.getHarness(WrLightboxHarness.with({ alt: 'Mountain' }));

  // Nothing to read yet — the viewer is an overlay that does not exist while shut.
  await expect(lightbox.getFullSrc()).rejects.toThrow();

  await lightbox.open();
  expect(await lightbox.isModal()).toBe(true);
  expect(await lightbox.getFullSrc()).toContain('/photo.jpg');

  await lightbox.sendEscape();
  expect(await lightbox.isOpen()).toBe(false);
});

it('fans out and picks', async () => {
  const dial = await loader.getHarness(WrSpeedDialHarness);

  // Closed, the buttons are in the DOM but unreachable — so the harness refuses.
  await expect(dial.getActions()).rejects.toThrow();

  await dial.open();
  expect(await dial.getActionLabels()).toEqual(['Share', 'Copy link']);

  await dial.sendEscape();
  expect(await dial.isTriggerFocused()).toBe(true);
});

it('turns the dial from the keyboard', async () => {
  const knob = await loader.getHarness(WrKnobHarness);

  await knob.setValue(60);

  // The announced number and the printed string are different questions.
  expect(await knob.getValue()).toBe(60);
  expect(await knob.getDisplayValue()).toBe('60%');

  await knob.pressEnd();
  expect(await knob.getValue()).toBe(await knob.getMax());
});

it('sorts, selects and expands', async () => {
  const table = await loader.getHarness(WrTableHarness);

  expect(await table.getHeaderTexts()).toEqual(['Name', 'Role']);
  expect(await table.getCellTexts()).toEqual([
    ['Ada', 'admin'],
    ['Grace', 'user'],
  ]);

  await table.sortByColumn('Name');
  expect(await table.getSortDirection('Name')).toBe('ascending');

  const [first] = await table.getRows();
  await first.select();
  expect(await first.isSelected()).toBe(true);
  expect(await table.isPartiallySelected()).toBe(true);

  await first.toggleExpand();
  expect(await table.getDetailTexts()).toEqual(['Joined 2024']);
});

it('announces a tree', async () => {
  const table = await loader.getHarness(WrTableHarness);   // childrenKey set

  expect(await table.getRole()).toBe('treegrid');

  const [root] = await table.getRows();
  expect(await root.getLevel()).toBe(1);
  expect(await root.isExpandable()).toBe(true);
});

it('answers the size question', async () => {
  const group = await loader.getHarness(WrRadioGroupHarness);

  expect(await group.getRadioLabels()).toEqual(['Small', 'Medium', 'Large']);
  expect(await group.getSelectedLabel()).toBeNull();

  // Nothing is picked yet, so the tab stop is option one — NOT the selection.
  expect(await group.getTabStopLabel()).toBe('Small');

  await group.select({ label: 'Large' });
  expect(await group.getSelectedLabel()).toBe('Large');
  expect(await group.getTabStopLabel()).toBe('Large');
});

it('clamps at the maximum', async () => {
  const qty = await loader.getHarness(WrInputNumberHarness);

  await qty.setValue(3);
  expect(await qty.getValue()).toBe(3);

  await qty.increment();                    // step is 1, max is 4
  await qty.increment();
  expect(await qty.getValue()).toBe(4);
  expect(await qty.isIncrementDisabled()).toBe(true);
});

it('separates the field text from the value', async () => {
  const price = await loader.getHarness(WrInputNumberHarness);

  await price.setValueText('1 234,5');      // mid-type, not committed
  expect(await price.getValueText()).toBe('1 234,5');
  expect(await price.getValue()).toBe(1234.5);
});

it('takes a pasted code', async () => {
  const otp = await loader.getHarness(WrInputOtpHarness);

  await otp.paste('123456');
  expect(await otp.getValue()).toBe('123456');
  expect(await otp.isComplete()).toBe(true);

  await otp.backspace();
  expect(await otp.getBoxValues()).toEqual(['1', '2', '3', '4', '5', '']);
  expect(await otp.getFocusedIndex()).toBe(5);
});

it('moves the slider', async () => {
  const slider = await loader.getHarness(WrSliderHarness);

  // Keyboard-driven on purpose: a unit test has no layout, so a drag would write
  // the wrong number or NaN. This is the accessible path anyway.
  await slider.setValue(70);
  expect(await slider.getValue()).toBe(70);

  await slider.stepUp();
  await slider.toMax();
  expect(await slider.getValue()).toBe(await slider.getMax());
});

it('moves the far end of a range first', async () => {
  const slider = await loader.getHarness(WrSliderHarness);   // range

  await slider.setRange(90, 95);
  expect(await slider.getValue()).toEqual([90, 95]);
});

it('takes a rating', async () => {
  const rating = await loader.getHarness(WrRatingHarness);

  await rating.setValue(4);
  expect(await rating.getValue()).toBe(4);

  const items = await rating.getItems();
  expect(await items[3].isFilled()).toBe(true);
  expect(await items[4].isFilled()).toBe(false);

  await rating.clear();
  expect(await rating.getValue()).toBe(0);
});

it('takes a dropped file and drops a rejected one', async () => {
  const upload = await loader.getHarness(WrFileUploadHarness);

  await upload.dropFiles([new File(['hello'], 'notes.txt', { type: 'text/plain' })]);
  expect(await upload.getFileNames()).toEqual(['notes.txt']);

  await upload.removeFileNamed('notes.txt');
  expect(await upload.getFileCount()).toBe(0);
});

it('copies from the context menu', async () => {
  const menu = await loader.getHarness(WrContextMenuHarness);

  await menu.open();                        // a real `contextmenu` event, not a click
  expect(await menu.getItemTexts()).toEqual(['Copy', 'Cut', 'Paste']);

  await menu.clickItem({ text: 'Copy' });
  expect(await menu.isOpen()).toBe(false);
});

it('walks into a submenu', async () => {
  const menu = await loader.getHarness(WrContextMenuHarness);
  await menu.open();

  const [more] = await menu.getItems({ hasSubmenu: true });
  await more.openSubmenu();
  expect(await more.isSubmenuOpen()).toBe(true);

  await more.clickSubmenuItem({ text: 'As PNG' });
});

it('asks before deleting', async () => {
  const ask = await loader.getHarness(WrPopconfirmHarness);

  await ask.open();
  expect(await ask.getMessage()).toBe('Delete this item?');
  expect(await ask.getActionLabels()).toEqual(['Cancel', 'Delete']);

  await ask.confirm();
  expect(await ask.isOpen()).toBe(false);
  expect(host.deleted()).toBe(true);
});

it('runs a command', async () => {
  const palette = await loader.getHarness(WrCommandPaletteHarness);

  await palette.open();
  await palette.setQuery('set');
  expect(await palette.getItemLabels()).toEqual(['Settings', 'Set theme']);

  await palette.moveToNextItem();
  expect(await palette.getActiveItemLabel()).toBe('Set theme');

  // The query field owns the list through aria-activedescendant, so the
  // highlighted row is announced without focus ever leaving the input.
  expect(await palette.isActiveItemAnnounced()).toBe(true);

  await palette.runActiveItem();
});

it('picks a path', async () => {
  const cascader = await loader.getHarness(WrCascaderHarness);

  await cascader.open();
  expect(await cascader.getColumnCount()).toBe(1);

  // Each column is one level, and opening a parent is what creates the next.
  await cascader.selectPath(['Europe', 'Portugal', 'Lisbon']);

  expect(await cascader.getValueText()).toBe('Europe / Portugal / Lisbon');
  expect(await cascader.isOpen()).toBe(false);
});

it('expands and selects', async () => {
  const tree = await loader.getHarness(WrTreeHarness);

  const root = await tree.getNode({ label: 'src' });
  expect(await root.isExpandable()).toBe(true);
  await root.expand();

  expect(await tree.getNodeLabels()).toEqual(['src', 'app', 'main.ts', 'README.md']);

  await tree.selectNode({ label: 'main.ts' });
  expect(await tree.getSelectedLabels()).toEqual(['main.ts']);
});

it('announces the hierarchy', async () => {
  const tree = await loader.getHarness(WrTreeHarness);
  const app = await tree.getNode({ label: 'app' });

  expect(await app.getLevel()).toBe(2);
  // Per SIBLING GROUP, not per flat list — 'app' and 'main.ts' are the two
  // children of 'src'.
  expect(await app.getSetSize()).toBe(2);
  expect(await app.getPosInSet()).toBe(1);
});

it('reads the structure, not the drawing', async () => {
  const graph = await loader.getHarness(WrGraphHarness.with({ ariaLabel: 'Team structure' }));

  // Lines speak in ids — the only place the DOM writes one — in the order given.
  expect(await graph.getEdges()).toEqual([
    { from: 'lead', to: 'design' },
    { from: 'lead', to: 'build' },
  ]);

  // Two questions, not one: what the node draws, and what it announces.
  const design = await graph.getNode({ label: 'Design' });
  expect(await design.getText()).toBe('Design');
  expect(await design.getRelationText()).toBe('Parents: Lead');
});

it('mentions a teammate', async () => {
  const mention = await loader.getHarness(WrMentionHarness);

  await mention.type('hey @ad');
  expect(await mention.isOpen()).toBe(true);
  expect(await mention.getOptionLabels()).toEqual(['Ada Lovelace']);

  await mention.commit();
  expect(await mention.getValue()).toBe('hey @ada ');
});

it('writes through the editor, and reads the value from the model', async () => {
  const body = await loader.getHarness(WrEditorHarness.with({ label: 'Body' }));

  await body.setText('Release notes');
  await body.selectAll();
  await (await body.getTool('Bold')).click();

  // Two questions: what the surface draws, and what the model holds.
  expect(await body.getText()).toBe('Release notes');
  expect(await body.isToolPressed('Bold')).toBe(true);
  expect(fixture.componentInstance.body()).toBe('<p><strong>Release notes</strong></p>');

  // A refused address leaves the panel open with its message.
  await body.setLink('javascript:alert(1)');
  expect(await body.getLinkError()).toBe('This address cannot be used as a link.');
});