Update / use typescript

[rbdr/forum] / src / lib / components / forum / forum.test.ts

/**
 * @jest-environment jsdom
 */

import '@testing-library/jest-dom/extend-expect';

import { addMessages } from 'svelte-i18n';

import { render } from '@testing-library/svelte';
import '$lib/i18n';

import Forum from './forum.svelte';

const internals = {
  results: null
};

describe('Forum component', () => {

  beforeAll(() => {

    addMessages('en', {
      'test_forums.oleo': 'Oleo'
    });
  });

  beforeEach(() => {

    internals.results = render(Forum, { props: {
      forum: {
        id: 'oleo',
        glyph: '☽',
        label: 'test_forums.oleo',
        topics: [
          {
            id: '0575d375-5bea-44df-a597-bee3adda624d',
            title: 'Very forumy topic',
            ttl: 160 * 1000,
            updated_at: Date.now()
          },
          {
            id: 'aeeb56e4-751d-4400-8aa7-d0f3a20d4e25',
            title: 'Only mildly forum-like',
            ttl: 160 * 1000,
            updated_at: Date.now()
          }
        ]
      }
    } });
  });

  test('It should display the forum glyph and label', () => {

    expect(internals.results.getByText(/^\s*☽\s*Oleo\s*$/))
      .toBeVisible();
  });

  test('It should display the topics', () => {

    expect(internals.results.getByText('Very forumy topic'))
      .toBeVisible();
    expect(internals.results.getByText('Only mildly forum-like'))
      .toBeVisible();
  });

  test('It should link to the topics', () => {

    expect(internals.results.getByText('Very forumy topic').closest('a'))
      .toHaveAttribute('href', '/t/0575d375-5bea-44df-a597-bee3adda624d');
    expect(internals.results.getByText('Only mildly forum-like').closest('a'))
      .toHaveAttribute('href', '/t/aeeb56e4-751d-4400-8aa7-d0f3a20d4e25');
  });
});