feat: e2e tests

Author: kirillzyusko

e2e/kit/015-keyboard-extender.e2e.ts

@@ -1,8 +1,10 @@
 import { expectBitmapsToBeEqual } from "./asserts";
 import {
   scrollDownUntilElementIsVisible,
+  tapItemAtIndex,
   waitAndTap,
   waitForElementById,
+  waitForElementByText,
   waitForExpect,
 } from "./helpers";
 
@@ -22,4 +24,27 @@ describe("`KeyboardExtender` specification", () => {
       await expectBitmapsToBeEqual("KeyboardExtenderIsAttached");
     });
   });
+
+  it("should have working `Touchable`s inside", async () => {
+    await waitAndTap("donation_20");
+    await waitForElementByText("20 dollars");
+    await tapItemAtIndex("OK");
+    await waitForExpect(async () => {
+      await expectBitmapsToBeEqual("KeyboardExtenderIsAttached");
+    });
+  });
+
+  it("should disappear when disabled", async () => {
+    await waitAndTap("postal_code");
+    await waitForExpect(async () => {
+      await expectBitmapsToBeEqual("KeyboardExtenderIsDetached");
+    });
+  });
+
+  it("should appear again when enabled", async () => {
+    await waitAndTap("donation_amount");
+    await waitForExpect(async () => {
+      await expectBitmapsToBeEqual("KeyboardExtenderIsAttached");
+    });
+  });
 });

e2e/kit/assets/android/e2e_emulator_28/KeyboardExtenderIsAttached.png

@@ -1,21 +1,15 @@
-import React, { useState } from "react";
+import React, { useEffect, useState } from "react";
 import {
   Alert,
-  Button,
   Image,
   Keyboard,
   StyleSheet,
   Text,
   TextInput,
   TouchableOpacity,
   TouchableWithoutFeedback,
-  View,
 } from "react-native";
-import {
-  KeyboardExtender,
-  OverKeyboardView,
-  useKeyboardState,
-} from "react-native-keyboard-controller";
+import { KeyboardExtender } from "react-native-keyboard-controller";
 import Reanimated, {
   useAnimatedStyle,
   useSharedValue,
@@ -26,14 +20,14 @@ import { SafeAreaView } from "react-native-safe-area-context";
 // TODO: remove _touchHandler when view gets detached from keyboard?
 // TODO: test how GestureHandler works there
 // TODO: don't overwrite existing inputAccessoryView?
-// TODO: Android implementation
 
 export default function KeyboardExtendExample() {
   const [showExtend, setShowExtend] = useState(true);
-  const [isOKVMode, setOKVMode] = useState(false);
   const opacity = useSharedValue(1);
-  // TODO: replace with animated value
-  const { height } = useKeyboardState();
+
+  useEffect(() => {
+    opacity.set(withTiming(showExtend ? 1 : 0));
+  }, [showExtend]);
 
   const animatedStyle = useAnimatedStyle(
     () => ({
@@ -44,10 +38,7 @@ export default function KeyboardExtendExample() {
 
   return (
     <>
-      <Image
-        source={require("./background.jpg")}
-        style={{ ...StyleSheet.absoluteFillObject, flex: 1, width: "100%" }}
-      />
+      <Image source={require("./background.jpg")} style={styles.background} />
       <TouchableWithoutFeedback onPress={() => Keyboard.dismiss()}>
         <SafeAreaView edges={["top"]} style={styles.container}>
           <TextInput
@@ -56,28 +47,36 @@ export default function KeyboardExtendExample() {
             placeholderTextColor="#5c5c5c"
             style={styles.input}
             testID="donation_amount"
+            onFocus={() => setShowExtend(true)}
+          />
+          <TextInput
+            keyboardType="numeric"
+            placeholder="Postal code"
+            placeholderTextColor="#5c5c5c"
+            style={styles.input}
+            testID="postal_code"
+            onFocus={() => setShowExtend(false)}
           />
-
-          <OverKeyboardView visible={isOKVMode}>
-            <View style={{ flex: 1, justifyContent: "flex-end" }}>
-              {/* TODO replace hardcoded value */}
-              <TextInput
-                placeholder="Search..."
-                style={[styles.input, { marginBottom: height - 61.73 }]}
-              />
-            </View>
-          </OverKeyboardView>
         </SafeAreaView>
       </TouchableWithoutFeedback>
       <KeyboardExtender enabled={showExtend}>
         <Reanimated.View style={[styles.keyboardExtend, animatedStyle]}>
-          <TouchableOpacity onPress={() => Alert.alert("10$")}>
+          <TouchableOpacity
+            testID="donation_10"
+            onPress={() => Alert.alert("10 dollars")}
+          >
             <Text style={styles.priceText}>10$</Text>
           </TouchableOpacity>
-          <TouchableOpacity onPress={() => Alert.alert("20$")}>
+          <TouchableOpacity
+            testID="donation_20"
+            onPress={() => Alert.alert("20 dollars")}
+          >
             <Text style={styles.priceText}>20$</Text>
           </TouchableOpacity>
-          <TouchableOpacity onPress={() => Alert.alert("50$")}>
+          <TouchableOpacity
+            testID="donation_50"
+            onPress={() => Alert.alert("50 dollars")}
+          >
             <Text style={styles.priceText}>50$</Text>
           </TouchableOpacity>
         </Reanimated.View>
@@ -87,6 +86,11 @@ export default function KeyboardExtendExample() {
 }
 
 const styles = StyleSheet.create({
+  background: {
+    ...StyleSheet.absoluteFillObject,
+    flex: 1,
+    width: "100%",
+  },
   container: {
     flex: 1,
     paddingHorizontal: 20,
@@ -107,23 +111,9 @@ const styles = StyleSheet.create({
     alignItems: "center",
   },
   priceText: {
-    color: "white",
+    color: "black",
     fontSize: 18,
-    fontWeight: "bold",
+    fontWeight: "600",
     padding: 20,
   },
-  overKeyboardView: {
-    width: "100%",
-    padding: 10,
-    backgroundColor: "rgba(255, 255, 255, 0.9)",
-    alignItems: "center",
-  },
-  hiddenInput: {
-    height: 0,
-    width: 0,
-  },
-  helpText: {
-    fontSize: 14,
-    color: "#666",
-  },
 });

e2e/kit/assets/android/e2e_emulator_28/KeyboardExtenderIsDetached.png

@@ -7,6 +7,8 @@ import { useWindowDimensions } from "../../hooks";
 import type { KeyboardExtenderProps } from "../../types";
 import type { PropsWithChildren } from "react";
 
+// TODO: e2e tests with dark UI? force keyboardAppearance or change system UI?
+
 /**
  * A component that embeds its children into the keyboard thus enhancing keyboard functionality.
  *