Unit testing

In latest version, the testing setup is moved to @plumejs/testing package. It has all the dependencies mentioned to address any hiccup in writing unit tests.

Example testing repos: plumejs-vite-testing, plumejs-webpack-testing.

The testbed is so versatile that you can either do just functional testing like how you do in angular OR you can do DOM testing just like react-testing-library.

For DOM testing, one small difference when compared to RTL is all the screen. apis need to be used as screen.getByShadowTestId etc., because PlumeJS employes ShadowRoot for encapsulation that prevents DOM traversal. You can find more information about this at here

Testing Component

import { TestBed, Fixture, fireEvent, flushMicroTasks, screen, waitFor } from '@plumejs/testing';
import { TestEle } from 'src';

describe('Plumejs Component', () => {
  let appRoot: Fixture<TestEle>;
  let model: TestEle;

  beforeEach(async () => {
    appRoot = await TestBed.MockComponent(TestEle);
    model = appRoot.componentInstance;
  });

  it('should render h1 element', () => {
    expect(screen.getByShadowTestId('container')).toBeInTheDocument();
    expect(screen.getByShadowText('Hello World!')).toBeInTheDocument();
  });

  it('should display "hello" on button click', async () => {
    const btn = screen.getByShadowTestId('btn-greet');
    fireEvent.click(btn);
    await waitFor(flushMicroTasks());
    expect(screen.getByShadowText(model.greeting)).toBeInTheDocument(); 
  });

  afterEach(() => {
    TestBed.RemoveComponent(appRoot);
  });
});