git.r.bdr.sh - rbdr/forum/blob - src/components/topic/topic.test.js

   1 import '@testing-library/jest-dom/extend-expect';
   2
   3 import { addMessages } from 'svelte-i18n';
   4
   5 import { cleanup, render } from '@testing-library/svelte';
   6 import '$/config/i18n';
   7
   8 import Topic from './topic.svelte';
   9
  10 const internals = {
  11   results: null,
  12   basicTopic: {
  13     id: 'b1a4f8d1-4d16-4872-b391-fda6a0e9012d',
  14     title: 'I sure am a test topic',
  15     ttl: 160 * 1000,
  16     updated_at: Date.now(),
  17     forum: {
  18       id: 'diversion',
  19       glyph: '⏃',
  20       label: 'test_forums.diversion'
  21     },
  22     tags: [
  23       {
  24         id: 'fish',
  25         weight: 40
  26       },
  27       {
  28         id: 'statue',
  29         weight: 5
  30       }
  31     ],
  32     posts: [
  33       {
  34         id: '413a74db-9473-4bac-8698-da9452c05854',
  35         text: 'This is the first post',
  36         created_at: Date.UTC(1999, 7, 1, 8, 8, 2, 111).valueOf(),
  37         author: {
  38           handle: 'past_user',
  39           id: 'c76d3e51-76ac-4e84-a1b2-2eee9abd68b3'
  40         }
  41       },
  42       {
  43         id: '821ff177-5250-406f-9431-1a8097b35430',
  44         text: 'This response came later',
  45         created_at: Date.UTC(2038, 1, 2, 3, 4, 6, 789).valueOf(),
  46         author: {
  47           handle: 'future_user',
  48           id: 'cb9307cb-77e9-4c55-bbe7-dbbf88737358'
  49         }
  50       }
  51     ]
  52   },
  53   topicWithoutForum: {
  54     id: '9715e9ee-0d63-4b50-b613-826ef2791728',
  55     title: 'This topic, no forums',
  56     ttl: 160 * 1000,
  57     updated_at: Date.now(),
  58     tags: [
  59       {
  60         id: 'cauliflower',
  61         weight: 33
  62       }
  63     ],
  64     posts: []
  65   }
  66 };
  67
  68 describe('Topic component', () => {
  69
  70   beforeAll(() => {
  71
  72     addMessages('en', {
  73       'test_forums.diversion': 'Diversion'
  74     });
  75   });
  76
  77   beforeEach(() => {
  78
  79     internals.results = render(Topic, { props: {
  80       topic: internals.basicTopic
  81     } });
  82   });
  83
  84   test('Should show the topic title', () => {
  85
  86     expect(internals.results.getByText('I sure am a test topic'))
  87       .toBeVisible();
  88   });
  89   test('Should display remaining time in readable format', () => {
  90
  91     expect(internals.results.getByText(/2 minutes remaining/))
  92       .toBeVisible();
  93   });
  94   test('Remaining time should be a permalink to the topic', () => {
  95
  96     expect(internals.results.getByText(/2 minutes remaining/).closest('a'))
  97       .toHaveAttribute('href', '/t/b1a4f8d1-4d16-4872-b391-fda6a0e9012d');
  98   });
  99
 100   test('Should show text for all posts', () => {
 101
 102     expect(internals.results.getByText('This is the first post'))
 103       .toBeVisible();
 104     expect(internals.results.getByText('This response came later'))
 105       .toBeVisible();
 106   });
 107
 108   test('Should send index and countt to posts', () => {
 109
 110     expect(internals.results.getByTitle('Post 1 of 2 by past_user'))
 111       .toBeVisible();
 112     expect(internals.results.getByTitle('Post 2 of 2 by future_user'))
 113       .toBeVisible();
 114   });
 115
 116   describe('Forum link', () => {
 117
 118     test('Should show forum if the post has one', () => {
 119
 120       expect(internals.results.getByText(/^\s*⏃\s*Diversion\s*$/))
 121         .toBeVisible();
 122     });
 123
 124     test('Forum text should be a permalink to the forum', () => {
 125
 126       expect(internals.results.getByText(/^\s*⏃\s*Diversion\s*$/).closest('a'))
 127         .toHaveAttribute('href', '/f/diversion');
 128     });
 129
 130     test('Should not show forum if the post doesn\'t have one', () => {
 131
 132       cleanup();
 133       internals.results = render(Topic, { props: {
 134         topic: internals.topicWithoutForum
 135       } });
 136
 137       expect(internals.results.queryByText(/^\s*⏃\s*Diversion\s*$/))
 138         .toBe(null);
 139     });
 140   });
 141
 142   describe('Tag listing', () => {
 143
 144     test('Should show topic tags', () => {
 145
 146       expect(internals.results.getByText('fish'))
 147         .toBeVisible();
 148       expect(internals.results.getByText('fish'))
 149         .toHaveTextContent('fish(40)');
 150       expect(internals.results.getByText('statue'))
 151         .toBeVisible();
 152       expect(internals.results.getByText('statue'))
 153         .toHaveTextContent('statue(5)');
 154     });
 155
 156     test('Tag text should be a permalink to the tag', () => {
 157
 158       expect(internals.results.getByText('fish').closest('a'))
 159         .toHaveAttribute('href', '/g/fish');
 160       expect(internals.results.getByText('statue').closest('a'))
 161         .toHaveAttribute('href', '/g/statue');
 162     });
 163   });
 164 });