Add blink test + coverage improvements

7 files changed, 146 insertions, 8 deletions

diff --git a/src/animations/blink.js b/src/animations/blink.js
index 5515bb6..acf0dda 100644
--- a/src/animations/blink.js
+++ b/src/animations/blink.js
@@ -1,6 +1,6 @@
 import { sineOut } from 'svelte/easing';
 
-export const blink = function whoosh(node, params) {
+export const blink = function blink(node, params) {
 
   const originalWidth = parseFloat(getComputedStyle(node).width);
   const originalHeight = parseFloat(getComputedStyle(node).height);
@@ -14,10 +14,10 @@ export const blink = function whoosh(node, params) {
       const halfWidth = originalWidth / 2;
       const halfHeight = originalHeight / 2;
       // const padding = t < 0.8 ? halfWidth * (1 - t) / 0.8 : halfWidth / 2 + 1;
-      const height = t <= 0.2 ? (originalHeight * t) / 0.2 : originalHeight;
-      const marginY = t <= 0.2 ? halfHeight * (1 - t / 0.2) : 0;
-      const width = t > 0.2 ? ((t - 0.2) / 0.8) * originalWidth : 0;
-      const marginX = t > 0.2 ? (1 - (t - 0.2) / 0.8) * halfWidth : halfWidth;
+      const height = Math.round(t <= 0.2 ? (originalHeight * t) / 0.2 : originalHeight);
+      const marginY = Math.round(t <= 0.2 ? halfHeight * (1 - t / 0.2) : 0);
+      const width = Math.round(t > 0.2 ? ((t - 0.2) / 0.8) * originalWidth : 0);
+      const marginX = Math.round(t > 0.2 ? (1 - (t - 0.2) / 0.8) * halfWidth : halfWidth);
 
       return `width: ${width}px; height: ${height}px; margin: ${marginY}px ${marginX}px`;
     }
diff --git a/src/animations/blink.test.js b/src/animations/blink.test.js
new file mode 100644
index 0000000..9834100
--- /dev/null
+++ b/src/animations/blink.test.js
@@ -0,0 +1,103 @@
+import { blink } from './blink';
+import { sineOut } from 'svelte/easing';
+
+const internals = {
+  response: null
+};
+
+describe('blink', () => {
+
+  test('it has a default delay of 0ms', () => {
+
+    const response = blink(document.createElement('div'), {});
+
+    expect(response.delay).toBe(0);
+  });
+
+  test('it allows delay to be overridden', () => {
+
+    const response = blink(document.createElement('div'), {
+      delay: 300
+    });
+
+    expect(response.delay).toBe(300);
+  });
+
+  test('it has a default duration of 400ms', () => {
+
+    const response = blink(document.createElement('div'), {});
+
+    expect(response.duration).toBe(400);
+  });
+
+  test('it allows delay to be overridden', () => {
+
+    const response = blink(document.createElement('div'), {
+      duration: 999
+    });
+
+    expect(response.duration).toBe(999);
+  });
+
+  test('it uses sineOut as the default easing function', () => {
+
+    const response = blink(document.createElement('div'), {});
+
+    expect(response.easing).toBe(sineOut);
+  });
+
+  test('it allows easing function to be overridden', () => {
+
+    const response = blink(document.createElement('div'), {
+      easing: () => 'excellent'
+    });
+
+    expect(response.easing()).toBe('excellent');
+  });
+
+  describe('css animation function', () => {
+
+    beforeEach(() => {
+
+      const div = document.createElement('div');
+      div.style.width = '100px';
+      div.style.height = '200px';
+      internals.response = blink(div, {});
+    });
+
+    test('It starts with with zeroed width and height', () => {
+
+      const css = internals.response.css(0, 1);
+      expect(css).toContain('width: 0px');
+      expect(css).toContain('height: 0px');
+    });
+
+    test('It grows to full height and 0 width in first 20%', () => {
+
+      const css = internals.response.css(0.2, 0.8);
+      expect(css).toContain('width: 0px');
+      expect(css).toContain('height: 200px');
+    });
+
+    test('It expands to full height by the end', () => {
+
+      const css = internals.response.css(1, 0);
+      expect(css).toContain('width: 100px');
+      expect(css).toContain('height: 200px');
+    });
+
+    test('It keeps element vertically centered by adjusting the margin', () => {
+
+      const css = internals.response.css(0.1, 0.9);
+      expect(css).toContain('margin: 50px 50px');
+      expect(css).toContain('height: 100px');
+    });
+
+    test('It keeps element horizontally centered by adjusting the margin', () => {
+
+      const css = internals.response.css(0.6, 0.4);
+      expect(css).toContain('margin: 0px 25px');
+      expect(css).toContain('width: 50px');
+    });
+  });
+});
diff --git a/src/components/error_block/error_block.svelte b/src/components/error_block/error_block.svelte
index 3a43a1e..e38bfae 100644
--- a/src/components/error_block/error_block.svelte
+++ b/src/components/error_block/error_block.svelte
@@ -1,6 +1,6 @@
 <script>
 	import { _ } from 'svelte-i18n';
-	export let message;
+	export let message = null;
 
 	import { blink } from '$/animations/blink';
 </script>
diff --git a/src/components/error_block/error_block.test.js b/src/components/error_block/error_block.test.js
index 1d7a7ac..43c9331 100644
--- a/src/components/error_block/error_block.test.js
+++ b/src/components/error_block/error_block.test.js
@@ -7,7 +7,7 @@ import ErrorBlock from './error_block.svelte';
 
 describe('Error Block component', () => {
 
-  test('Should act as an image', () => {
+  test('Should display error message sent', () => {
 
     const results = render(ErrorBlock, { props: {
       message: 'An error has, sadly, destroyed everything.'
@@ -16,5 +16,13 @@ describe('Error Block component', () => {
     expect(results.getByText('An error has, sadly, destroyed everything.'))
       .toBeVisible();
   });
+
+  test('Should display default error message', () => {
+
+    const results = render(ErrorBlock);
+
+    expect(results.getByText('Unknown error has occurred. Panic!'))
+      .toBeVisible();
+  });
 });
 
diff --git a/src/components/post/post.test.js b/src/components/post/post.test.js
index 9ab4848..e158ce9 100644
--- a/src/components/post/post.test.js
+++ b/src/components/post/post.test.js
@@ -102,4 +102,23 @@ describe('Post component', () => {
     expect(internals.results.queryByText('Parent topic, yes'))
       .toBe(null);
   });
+
+  test('It should default to 1/1 when no index or count is passed', () => {
+
+    expect(internals.results.getByTitle('Post 1 of 1 by very_cool_user'))
+      .toBeVisible();
+  });
+
+  test('Parent topic title should have a permalink to topic', () => {
+
+    cleanup();
+    internals.results = render(Post, { props: {
+      index: 2,
+      count: 5,
+      post: internals.postWithoutTopic
+    } });
+
+    expect(internals.results.getByTitle('Post 3 of 5 by my_normal_user'))
+      .toBeVisible();
+  });
 });
diff --git a/src/components/topic/topic.svelte b/src/components/topic/topic.svelte
index 0b73d44..c0dbfbc 100644
--- a/src/components/topic/topic.svelte
+++ b/src/components/topic/topic.svelte
@@ -5,7 +5,7 @@
 	import Post from '$/components/post/post.svelte';
 	import { readableTime } from '$/utils/readable_time.js';
 
-	$: remainingTime = topic ? topic.updated_at + topic.ttl - Date.now() : 0;
+	$: remainingTime = topic.updated_at + topic.ttl - Date.now();
 	$: remaining = readableTime(remainingTime);
 </script>
 
diff --git a/src/components/topic/topic.test.js b/src/components/topic/topic.test.js
index 83eeba3..ca1abfb 100644
--- a/src/components/topic/topic.test.js
+++ b/src/components/topic/topic.test.js
@@ -105,6 +105,14 @@ describe('Topic component', () => {
       .toBeVisible();
   });
 
+  test('Should send index and countt to posts', () => {
+
+    expect(internals.results.getByTitle('Post 1 of 2 by past_user'))
+      .toBeVisible();
+    expect(internals.results.getByTitle('Post 2 of 2 by future_user'))
+      .toBeVisible();
+  });
+
   describe('Forum link', () => {
 
     test('Should show forum if the post has one', () => {