Testing routes

1. Setup your test suite

import { screen } from '@testing-library/dom';
import { html, render, Component} from 'vistajs/dom';

const home = Component('app-home', () => {
    return () =>  html`Hello from homepage`
})

const about = Component('app-about', () => {
   return () =>  html`Hello from about page`
})


describe('Router Rendering', () => {
    beforeAll(() => {
      // Start up routes
      routeTesting([
        {
          path: '',
          component: () => home,
        },
        {
          path: 'about',
          component: () => about,
        },
      ]);
  });

  it('should render about page', async () => {});
);

1. Then, make your assertions

import { screen } from '@testing-library/dom';
import { html, render, Component} from 'vistajs/dom';
import { router } from 'vistajs/router';

const home = Component('app-home', () => {
    return () =>  html`Hello from homepage`
})

const about = Component('app-about', () => {
   return () =>  html`Hello from about page`
})

describe('Router Rendering', () => {
    beforeAll(() => {
      // Start up routes
      routeTesting([
        {
          path: '',
          component: () => home,
        },
        {
          path: 'about',
          component: () => about,
        },
      ]);
  });

  it('should render about page', async () => {
      const route = router();
      route.navigateByUrl('/about');

      const about = await screen.findByText('Hello from about page');

      expect(about).toBeInTheDocument();
  });
);

Going further

With route events it's possible to test your app's routing throughout diferent moments of the routing cycle

Example with CHANGE_END:

import { screen } from '@testing-library/dom';
import { html, render, Component} from 'vistajs/dom';
import { 
  router, 
  routeTesting, 
  RouterEvents, 
  routingEventListener 
} from 'vistajs/router';

const home = Component('app-home', () => {
    return () =>  html`Hello from homepage`
})

const post = Component('app-about', () => {
   return () =>  html`Hello from about page`
})

describe('Router Rendering', () => {
    beforeAll(() => {
      // Start up routes
      routeTesting([
        {
          path: '',
          component: () => home,
        },
        {
          path: 'post/:id',
          component: () => about,
        },
      ]);
  });

  // Route events can be useful when you need to interact with params
  it('should render about page', async () => {
      const route = router();
      
      routingEventListener.on(RouterEvents.CHANGE_END, () => {
        const params = route.snapshot.params;
        expect(params.id).toBe('1');
      });

      route.navigateByUrl('/about/1');
  });
);