From 96ad0dfc39385c35bcb63343d6c6bdb0d0e6f108 Mon Sep 17 00:00:00 2001
From: Alain Galvan <hi@alain.xyz>
Date: Sun, 14 Mar 2021 09:59:52 -0400
Subject: [PATCH] Added more tests, better type checks

---
 .npmignore                                    |  5 +--
 src/types.ts                                  |  4 +--
 tests/__snapshots__/basic.tsx.snap            |  7 +---
 .../__snapshots__/custom-components.tsx.snap  | 34 +++++++++++++++++++
 tests/custom-components.tsx                   | 27 +++++++++++++++
 tests/svg-paths.tsx                           |  1 -
 6 files changed, 67 insertions(+), 11 deletions(-)
 create mode 100644 tests/__snapshots__/custom-components.tsx.snap
 create mode 100644 tests/custom-components.tsx

diff --git a/.npmignore b/.npmignore
index a359515..f7c8dec 100644
--- a/.npmignore
+++ b/.npmignore
@@ -13,6 +13,7 @@ webpack.*.js
 .vscode
 example
 license.md
-dist/flatten.d.ts
+dist/*.d.ts
 dist/*.map
-.nyc_output
\ No newline at end of file
+.nyc_output
+!dist/react-anime.d.ts
\ No newline at end of file
diff --git a/src/types.ts b/src/types.ts
index 43c79bb..49fc668 100644
--- a/src/types.ts
+++ b/src/types.ts
@@ -44,7 +44,7 @@ export type AnimeValue =
     | ((el: Element, index?: number) => string | number);
 
 export type AnimeProps = {
-    children: React.ReactNode;
+    children?: React.ReactNode;
     delay?: ((el: Element, index?: number, len?: number) => number) | number;
     duration?: ((el: Element, index?: number, len?: number) => number) | number;
     autoplay?: boolean;
@@ -53,7 +53,7 @@ export type AnimeProps = {
     easing?: Easing;
     elasticity?: number;
     round?: number | boolean;
-    component: React.ComponentType;
+    component?: React.ElementType;
     begin?: Function;
     update?: Function;
     complete?: Function;
diff --git a/tests/__snapshots__/basic.tsx.snap b/tests/__snapshots__/basic.tsx.snap
index b8884b0..53bba4c 100644
--- a/tests/__snapshots__/basic.tsx.snap
+++ b/tests/__snapshots__/basic.tsx.snap
@@ -1,16 +1,11 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`2 children delayed fade in 1`] = `
+exports[`1 child delayed fade in 1`] = `
 <DocumentFragment>
   <div>
     <p>
       1
     </p>
   </div>
-  <div>
-    <p>
-      2
-    </p>
-  </div>
 </DocumentFragment>
 `;
diff --git a/tests/__snapshots__/custom-components.tsx.snap b/tests/__snapshots__/custom-components.tsx.snap
new file mode 100644
index 0000000..c4fa955
--- /dev/null
+++ b/tests/__snapshots__/custom-components.tsx.snap
@@ -0,0 +1,34 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`custom components 1`] = `
+<DocumentFragment>
+  <div>
+    <div>
+      <p>
+        1
+      </p>
+    </div>
+    <p />
+    <p>
+      2
+    </p>
+    <p />
+    <div>
+      <p>
+        3
+      </p>
+    </div>
+    <div>
+      <p>
+        4
+      </p>
+    </div>
+    <div>
+      <p>
+        5
+      </p>
+    </div>
+    <div />
+  </div>
+</DocumentFragment>
+`;
diff --git a/tests/custom-components.tsx b/tests/custom-components.tsx
new file mode 100644
index 0000000..e009f37
--- /dev/null
+++ b/tests/custom-components.tsx
@@ -0,0 +1,27 @@
+import '@testing-library/jest-dom';
+import React from 'react';
+import { render } from '@testing-library/react';
+import Anime from '../src/react-anime';
+
+const MyComponent = (props) => <div>{props.children}</div>;
+
+//snapshot test
+it('custom components', () => {
+    const tree = render(
+        <div>
+            <Anime component={null}>
+                <p>1</p>
+            </Anime>
+            <Anime component="p">
+                <p>2</p>
+            </Anime>
+            <Anime component={MyComponent}>
+                <p>3</p>
+                <p>4</p>
+                <p>5</p>
+            </Anime>
+            <Anime/>
+        </div>
+    );
+    expect(tree.asFragment()).toMatchSnapshot();
+});
diff --git a/tests/svg-paths.tsx b/tests/svg-paths.tsx
index 8c842c3..716ad19 100644
--- a/tests/svg-paths.tsx
+++ b/tests/svg-paths.tsx
@@ -1571,6 +1571,5 @@ class SvgPaths extends React.Component {
 //snapshot test
 it('svg paths', () => {
     const tree = render(<SvgPaths />);
-
     expect(tree.asFragment()).toMatchSnapshot();
 });