2 files changed, 70 insertions, 0 deletions
diff --git a/src/lib/components/topic_summary/topic_summary.svelte b/src/lib/components/topic_summary/topic_summary.svelte
new file mode 100644
index 0000000..bfcf8ab
--- /dev/null
+++ b/src/lib/components/topic_summary/topic_summary.svelte
@@ -0,0 +1,23 @@
+<script lang="ts">
+	export let topic;
+
+	import { _ } from 'svelte-i18n';
+	import { readableTime } from '$lib/utils/readable_time';
+
+	$: remainingTime = topic.updated_at + topic.ttl - Date.now();
+	$: remaining = readableTime(remainingTime);
+</script>
+
+<li class="h-entry" title={$_('topic.title')}>
+  <span class="p-name">
+    <a class="u-url u-uid" title={$_('topic.permalink_title')} href="/t/{topic.id}">
+      {topic.title}
+  </a></span>
+    <span class="topic-ttl">({$_('topic.remaining_time', {
+			values: { remaining: $_(remaining.label, { values: { count: remaining.count } }) }
+      })})
+    </span>
+</li>
+
+<style>
+</style>
diff --git a/src/lib/components/topic_summary/topic_summary.test.ts b/src/lib/components/topic_summary/topic_summary.test.ts
new file mode 100644
index 0000000..a4c46bf
--- /dev/null
+++ b/src/lib/components/topic_summary/topic_summary.test.ts
@@ -0,0 +1,47 @@
+/**
+ * @jest-environment jsdom
+ */
+
+import '@testing-library/jest-dom/extend-expect';
+
+import { render } from '@testing-library/svelte';
+import '$lib/i18n';
+
+import TopicSummary from './topic_summary.svelte';
+
+const internals = {
+  results: null
+};
+
+describe('Topic Summary component', () => {
+
+  beforeEach(() => {
+
+    internals.results = render(TopicSummary, { props: {
+      topic: {
+        id: 'ea2431c8-5c1c-4ed0-907a-45e012696ab8',
+        title: 'I sure am a test topic',
+        ttl: 160 * 1000,
+        updated_at: Date.now()
+      }
+    } });
+  });
+
+  test('It should display the title', () => {
+
+    expect(internals.results.getByText('I sure am a test topic'))
+      .toBeVisible();
+  });
+
+  test('Topic title should be a permalink', () => {
+
+    expect(internals.results.getByText('I sure am a test topic').closest('a'))
+      .toHaveAttribute('href', '/t/ea2431c8-5c1c-4ed0-907a-45e012696ab8');
+  });
+
+  test('It should display remaining time in readable format', () => {
+
+    expect(internals.results.getByText(/2 minutes remaining/))
+      .toBeVisible();
+  });
+});