update.spec.ts

import { test, expect } from '@sand4rt/experimental-ct-web';
import { Counter } from '@/components/Counter';

test('update props without remounting', async ({ mount }) => {
  const component = await mount(Counter, {
    props: { count: 9001 },
  });
  await expect(component.locator('#props')).toContainText('9001');

  await component.update({
    props: { count: 1337 },
  });
  await expect(component).not.toContainText('9001');
  await expect(component.locator('#props')).toContainText('1337');

  await expect(component.locator('#remount-count')).toContainText('1');
});

test('update event listeners without remounting', async ({ mount }) => {
  const messages: string[] = [];
  const component = await mount(Counter, {
    on: {
      submit: (data: string) => messages.push(data),
    },
  });

  await component.update({
    on: {
      submit: (data: string) => messages.push(data),
    },
  });
  await component.click();
  expect(messages).toEqual(['hello']);

  await expect(component.locator('#remount-count')).toContainText('1');
});

test('update slots without remounting', async ({ mount }) => {
  const component = await mount(Counter, {
    slots: { default: 'Default Slot' },
  });
  await expect(component).toContainText('Default Slot');

  await component.update({
    slots: { main: '<div>Test Slot<div>' },
  });
  await expect(component).toContainText('Default Slot');
  await expect(component).toContainText('Test Slot');

  await expect(component.locator('#remount-count')).toContainText('1');
});