Add tests to second batch of components

[rbdr/forum] / src / components / topic / topic.test.js

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

import { addMessages } from 'svelte-i18n';

import { cleanup, render } from '@testing-library/svelte';
import '$/config/i18n';

import Topic from './topic.svelte';

const internals = {
  results: null,
  basicTopic: {
    id: 'b1a4f8d1-4d16-4872-b391-fda6a0e9012d',
    title: 'I sure am a test topic',
    ttl: 160 * 1000,
    updated_at: Date.now(),
    forum: {
      id: 'diversion',
      glyph: '⏃',
      label: 'test_forums.diversion'
    },
    tags: [
      {
        id: 'fish',
        weight: 40
      },
      {
        id: 'statue',
        weight: 5
      }
    ],
    posts: [
      {
        id: '413a74db-9473-4bac-8698-da9452c05854',
        text: 'This is the first post',
        created_at: Date.UTC(1999, 7, 1, 8, 8, 2, 111).valueOf(),
        author: {
          handle: 'past_user',
          id: 'c76d3e51-76ac-4e84-a1b2-2eee9abd68b3'
        }
      },
      {
        id: '821ff177-5250-406f-9431-1a8097b35430',
        text: 'This response came later',
        created_at: Date.UTC(2038, 1, 2, 3, 4, 6, 789).valueOf(),
        author: {
          handle: 'future_user',
          id: 'cb9307cb-77e9-4c55-bbe7-dbbf88737358'
        }
      }
    ]
  },
  topicWithoutForum: {
    id: '9715e9ee-0d63-4b50-b613-826ef2791728',
    title: 'This topic, no forums',
    ttl: 160 * 1000,
    updated_at: Date.now(),
    tags: [
      {
        id: 'cauliflower',
        weight: 33
      }
    ],
    posts: []
  }
};

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

  beforeAll(() => {

    addMessages('en', {
      'test_forums.diversion': 'Diversion'
    });
  });

  beforeEach(() => {

    internals.results = render(Topic, { props: {
      topic: internals.basicTopic
    } });
  });

  test('Should show the topic title', () => {

    expect(internals.results.getByText('I sure am a test topic'))
      .toBeVisible();
  });
  test('Should display remaining time in readable format', () => {

    expect(internals.results.getByText(/2 minutes remaining/))
      .toBeVisible();
  });
  test('Remaining time should be a permalink to the topic', () => {

    expect(internals.results.getByText(/2 minutes remaining/).closest('a'))
      .toHaveAttribute('href', '/t/b1a4f8d1-4d16-4872-b391-fda6a0e9012d');
  });

  test('Should show text for all posts', () => {

    expect(internals.results.getByText('This is the first post'))
      .toBeVisible();
    expect(internals.results.getByText('This response came later'))
      .toBeVisible();
  });

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

    test('Should show forum if the post has one', () => {

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

    test('Forum text should be a permalink to the forum', () => {

      expect(internals.results.getByText(/^\s*⏃\s*Diversion\s*$/).closest('a'))
        .toHaveAttribute('href', '/f/diversion');
    });

    test('Should not show forum if the post doesn\'t have one', () => {

      cleanup();
      internals.results = render(Topic, { props: {
        topic: internals.topicWithoutForum
      } });

      expect(internals.results.queryByText(/^\s*⏃\s*Diversion\s*$/))
        .toBe(null);
    });
  });

  describe('Tag listing', () => {

    test('Should show topic tags', () => {

      expect(internals.results.getByText('fish'))
        .toBeVisible();
      expect(internals.results.getByText('fish'))
        .toHaveTextContent('fish(40)');
      expect(internals.results.getByText('statue'))
        .toBeVisible();
      expect(internals.results.getByText('statue'))
        .toHaveTextContent('statue(5)');
    });

    test('Tag text should be a permalink to the tag', () => {

      expect(internals.results.getByText('fish').closest('a'))
        .toHaveAttribute('href', '/g/fish');
      expect(internals.results.getByText('statue').closest('a'))
        .toHaveAttribute('href', '/g/statue');
    });
  });
});