Add blink test + coverage improvements

diff --git a/.eslintrc.cjs b/.eslintrc.cjs
index 8b5da173bfea8f70a58a38bc6314cf4eb2372cc4..a50862b92e991a3fd58286095eb5ff176f2f3bf3 100644 (file)
--- a/.eslintrc.cjs
+++ b/.eslintrc.cjs
@@ -21,6 +21,8 @@ module.exports = {
   globals: {
     test: true,
     describe: true,
   globals: {
     test: true,
     describe: true,

-    expect: true
+    expect: true,
+    beforeEach: true,
+    beforeAll: true

   }
 };
   }
 };

diff --git a/.gitignore b/.gitignore
index 0beb8fa98ddb44b0d70afca61eb27c84dcf1b2ca..372d3a57bda91b27186f8e619ea5d346a1fbb485 100644 (file)
--- a/.gitignore
+++ b/.gitignore
@@ -4,3 +4,4 @@ node_modules
 /.svelte
 /build
 /functions
 /.svelte
 /build
 /functions

+coverage

diff --git a/src/animations/blink.js b/src/animations/blink.js
index 5515bb62d112153f4bb2a35b6ca591d0627ca9e9..acf0dda3e493bb85f6cfa0fbc0036d6fae268c7f 100644 (file)
--- a/src/animations/blink.js
+++ b/src/animations/blink.js
@@ -1,6 +1,6 @@
 import { sineOut } from 'svelte/easing';
 
 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);
 
   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 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`;
     }
 
       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 (file)
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 3a43a1ead80a78238d3f9a9d02d07b9556ae3243..e38bfaeccc364de20e915d93e214fd46c720d5d1 100644 (file)
--- 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';
 <script>
        import { _ } from 'svelte-i18n';

-       export let message;
+       export let message = null;

 
        import { blink } from '$/animations/blink';
 </script>
 
        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 1d7a7ac9a426a22aff5fd23d99582bb508d0c4ea..43c9331a75f461c0ab7b58f38f78535d3085c00c 100644 (file)
--- 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', () => {
 
 
 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.'
 
     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();
   });
     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 9ab4848bb3f842dd51b2526d8ea03fa21793a1d9..e158ce9948154e7aef709bf0f6fd72f4a08a7b29 100644 (file)
--- 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);
   });
     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 0b73d44e322ff505a75bf126d1d7447d2a86b2a8..c0dbfbc4b23755754a2103b1619ac756a7b30961 100644 (file)
--- 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';
 
        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>
 
        $: remaining = readableTime(remainingTime);
 </script>
 

diff --git a/src/components/topic/topic.test.js b/src/components/topic/topic.test.js
index 83eeba3cbc611e4f04267a26d549c1cf6abeca79..ca1abfbaa4958e8a3a518f1c9bed1cb7c3e2119f 100644 (file)
--- a/src/components/topic/topic.test.js
+++ b/src/components/topic/topic.test.js
@@ -105,6 +105,14 @@ describe('Topic component', () => {
       .toBeVisible();
   });
 
       .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', () => {
   describe('Forum link', () => {
 
     test('Should show forum if the post has one', () => {