fix: add tests for snackbar visibility on mount

callstack · Nov 5, 2018 · 8764f60 · 8764f60
1 parent e4a48ba
commit 8764f60
Show file tree

Hide file tree

Showing 3 changed files with 23 additions and 8 deletions.
diff --git a/src/components/Snackbar.js b/src/components/Snackbar.js
@@ -129,7 +129,9 @@ class Snackbar extends React.Component<Props, State> {
   };
 
   componentDidMount() {
-    this._toggle();
+    if (this.props.visible) {
+      this._show();
+    }
   }
 
   componentDidUpdate(prevProps) {

diff --git a/src/components/__tests__/Snackbar.test.js b/src/components/__tests__/Snackbar.test.js
@@ -5,7 +5,20 @@ import renderer from 'react-test-renderer';
 import { Text } from 'react-native';
 import Snackbar from '../Snackbar';
 
-jest.useFakeTimers();
+// Make sure any animation finishes before checking the snapshot results
+jest.mock('Animated', () => {
+  const ActualAnimated = jest.requireActual('Animated');
+
+  return {
+    ...ActualAnimated,
+    timing: (value, config) => ({
+      start: callback => {
+        value.setValue(config.toValue);
+        callback && callback({ finished: true });
+      },
+    }),
+  };
+});
 
 it('renders snackbar with content', () => {
   const tree = renderer

diff --git a/src/components/__tests__/__snapshots__/Snackbar.test.js.snap b/src/components/__tests__/__snapshots__/Snackbar.test.js.snap
@@ -44,10 +44,10 @@ exports[`renders snackbar with Text as a child 1`] = `
     pointerEvents="box-none"
     style={
       Object {
-        "opacity": 0,
+        "opacity": 1,
         "transform": Array [
           Object {
-            "scale": 0.9,
+            "scale": 1,
           },
         ],
       }
@@ -145,10 +145,10 @@ exports[`renders snackbar with action button 1`] = `
     pointerEvents="box-none"
     style={
       Object {
-        "opacity": 0,
+        "opacity": 1,
         "transform": Array [
           Object {
-            "scale": 0.9,
+            "scale": 1,
           },
         ],
       }
@@ -350,10 +350,10 @@ exports[`renders snackbar with content 1`] = `
     pointerEvents="box-none"
     style={
       Object {
-        "opacity": 0,
+        "opacity": 1,
         "transform": Array [
           Object {
-            "scale": 0.9,
+            "scale": 1,
           },
         ],
       }