From fb0a18d61c43b17b0427eea5ca8fb94797798a6a Mon Sep 17 00:00:00 2001
From: peng-xiaohua <68681502+peng-xiaohua@users.noreply.github.com>
Date: Mon, 12 Aug 2024 14:02:11 +0800
Subject: [PATCH] =?UTF-8?q?test:=20=E6=96=B0=E5=A2=9Ern=5Fmlkit=5Focr?=
 =?UTF-8?q?=E6=B5=8B=E8=AF=95demo=EF=BC=8C=E6=96=B0=E5=A2=9Ern=5Fmlkit=5Fo?=
 =?UTF-8?q?cr=E6=B5=8B=E8=AF=95=E7=94=A8=E4=BE=8B(#801)=20(#802)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Co-authored-by: pWX1342412 <18292915636@163.com>
---
 react-native-mlkit-ocr/Test/OcrTest.tsx   | 160 ++++++++++++++++++++++
 react-native-mlkit-ocr/TestOcrExample.tsx |  95 +++++++++++++
 2 files changed, 255 insertions(+)
 create mode 100644 react-native-mlkit-ocr/Test/OcrTest.tsx
 create mode 100644 react-native-mlkit-ocr/TestOcrExample.tsx

diff --git a/react-native-mlkit-ocr/Test/OcrTest.tsx b/react-native-mlkit-ocr/Test/OcrTest.tsx
new file mode 100644
index 00000000..d376a180
--- /dev/null
+++ b/react-native-mlkit-ocr/Test/OcrTest.tsx
@@ -0,0 +1,160 @@
+import React from 'react';
+import { TestSuite, TestCase, Tester } from '@rnoh/testerino';
+import {
+    StyleSheet,
+    View,
+    TouchableHighlight,
+    SafeAreaView,
+    Text,
+    ActivityIndicator,
+} from 'react-native';
+import MlkitOcr, { MlkitOcrResult } from 'react-native-mlkit-ocr';
+
+const PALETTE = {
+    REACT_CYAN_LIGHT: 'hsl(193, 95%, 68%)',
+    REACT_CYAN_DARK: 'hsl(193, 95%, 30%)',
+}
+
+function Button({ label, onPress }: { onPress: () => void; label: string }) {
+    return (
+        <TouchableHighlight
+            underlayColor={PALETTE.REACT_CYAN_DARK}
+            style={{
+                paddingVertical: 6,
+                paddingHorizontal: 12,
+                backgroundColor: PALETTE.REACT_CYAN_LIGHT,
+                borderWidth: 2,
+                borderColor: PALETTE.REACT_CYAN_DARK,
+            }}
+            onPress={onPress}>
+            <Text style={{ color: 'black', fontWeight: 'bold', fontSize: 16 }}>
+                {label}
+            </Text>
+        </TouchableHighlight>
+    );
+}
+
+const styles = StyleSheet.create({
+    container: {
+        flex: 1,
+        justifyContent: 'center',
+    },
+    scroll: {
+        flex: 1,
+        width: '100%',
+        borderColor: '#ccc',
+        borderWidth: 2,
+        height: '70%',
+    },
+});
+
+export const OcrTest = () => {
+    const [loading, setLoading] = React.useState<boolean>(false);
+    const [result, setResult] = React.useState<MlkitOcrResult | undefined>();
+
+    if (loading) {
+        return (
+            <SafeAreaView style={styles.container}>
+                <ActivityIndicator />
+            </SafeAreaView>
+        );
+    }
+    return (
+        <SafeAreaView style={styles.container}>
+            <View style={{ flex: 1 }}>
+
+                {Array.isArray(result) && result?.length && (
+                    <View
+                        style={styles.scroll}
+                    >
+                        {result?.map((block) => {
+                            console.log("=================result>", JSON.stringify(result));
+                            console.log("=================block>", JSON.stringify(block));
+
+                            return block.lines.map((line) => {
+                                return (
+                                    <View
+                                        key={line.text}
+                                        style={{
+                                            backgroundColor: '#ccccccaf',
+                                        }}
+                                    >
+                                        <Text style={{ fontSize: 10 }}>{line.text}</Text>
+                                    </View>
+                                );
+                            });
+                        })}
+                    </View>
+                )}
+
+                <TestSuite name="@react-native-oh-tpl/react-native-mlkit-ocr">
+                    <TestCase
+                        key={1}
+                        itShould={'识别网络照片'}
+                        tags={['C_API']}
+                        initialState={false}
+                        arrange={({ setState }) => {
+                            return (
+                                <View style={{ flex: 1 }}>
+                                    <Button
+                                        label="识别网络照片"
+                                        onPress={() => {
+                                            MlkitOcr.detectFromUri('https://res.vmallres.com//uomcdn/CN/pms/202407/E3B48F7290631FAF341FDB09CF907F03.jpg').then(res => {
+                                                setTimeout(() => {
+                                                    setResult(res)
+                                                    setState(!!res)
+
+                                                    console.log("================uri=res", JSON.stringify(res))
+                                                }, 1000)
+                                            }).catch(err => {
+                                                console.log("=========", err);
+
+                                            })
+                                        }}
+                                    />
+                                </View>
+                            );
+                        }}
+                        assert={async ({ expect, state }) => {
+                            expect(state).to.be.true;
+                        }}
+                    />
+                    <TestCase
+                        key={2}
+                        itShould={'识别本地照片'}
+                        tags={['C_API']}
+                        initialState={false}
+                        arrange={({ setState }) => {
+                            return (
+                                <View style={{ flex: 1 }}>
+                                    <Button
+                                        label="识别本地照片"
+                                        onPress={() => {
+                                            MlkitOcr.detectFromFile('file://docs/storage/Users/currentUser/test/1.jpg').then(res => {
+                                                setTimeout(() => {
+                                                    setResult(res)
+                                                    setState(!!res)
+                                                    console.log("================file=res", JSON.stringify(res))
+                                                }, 1000)
+                                            }).catch(err => {
+                                                console.log("=========", err);
+
+                                            })
+                                        }}
+                                    />
+                                </View>
+                            );
+                        }}
+                        assert={async ({ expect, state }) => {
+                            expect(state).to.be.true;
+                        }}
+                    />
+
+                </TestSuite>
+
+            </View>
+        </SafeAreaView>
+    );
+
+};
+
diff --git a/react-native-mlkit-ocr/TestOcrExample.tsx b/react-native-mlkit-ocr/TestOcrExample.tsx
new file mode 100644
index 00000000..2fafac80
--- /dev/null
+++ b/react-native-mlkit-ocr/TestOcrExample.tsx
@@ -0,0 +1,95 @@
+/* eslint-disable react-native/no-inline-styles */
+import * as React from 'react';
+import {
+    StyleSheet,
+    View,
+    Button,
+    SafeAreaView,
+    ScrollView,
+    Text,
+    Dimensions,
+    ActivityIndicator,
+} from 'react-native';
+import MlkitOcr, { MlkitOcrResult } from 'react-native-mlkit-ocr';
+const styles = StyleSheet.create({
+    container: {
+        flex: 1,
+        justifyContent: 'center',
+    },
+    scroll: {
+        flex: 1,
+        width: '100%',
+        borderColor: '#ccc',
+        borderWidth: 2,
+    },
+});
+export const OcrTest = () => {
+    const [loading, setLoading] = React.useState<boolean>(false);
+    const [result, setResult] = React.useState<MlkitOcrResult | undefined>();
+
+    if (loading) {
+        return (
+            <SafeAreaView style={styles.container}>
+                <ActivityIndicator />
+            </SafeAreaView>
+        );
+    }
+    return (
+        <SafeAreaView style={styles.container}>
+            {Array.isArray(result) && result?.length && (
+                <ScrollView
+                    contentContainerStyle={{
+                        alignItems: 'stretch',
+                        padding: 20,
+                        height: Dimensions.get('window').height,
+                    }}
+                    showsVerticalScrollIndicator
+                    style={styles.scroll}
+                >
+                    {result?.map((block) => {
+                        return block.lines.map((line) => {
+                            return (
+                                <View
+                                    key={line.text}
+                                    style={{
+                                        backgroundColor: '#ccccccaf',
+                                    }}
+                                >
+                                    <Text style={{ fontSize: 10 }}>{line.text}</Text>
+                                </View>
+                            );
+                        });
+                    })}
+                </ScrollView>
+            )}
+
+            <Button
+                title="识别网络照片"
+                onPress={() => {
+                    MlkitOcr.detectFromUri('https://res.vmallres.com//uomcdn/CN/pms/202407/E3B48F7290631FAF341FDB09CF907F03.jpg').then(res => {
+                        setTimeout(() => {
+                            setResult(res)
+                            console.log("================uri=res", JSON.stringify(res))
+                        }, 1000)
+                    }).catch(err => {
+                        console.log("=========err", err);
+                    })
+                }}
+            />
+            <Button
+                title="识别本地照片"
+                onPress={() => {
+                    MlkitOcr.detectFromFile('file://docs/storage/Users/currentUser/test/1.jpg').then(res => {
+                        setTimeout(() => {
+                            setResult(res)
+                            console.log("================file=res", JSON.stringify(res))
+                        }, 1000)
+                    }).catch(err => {
+                        console.log("=========err", err);
+                    })
+                }}
+            />
+        </SafeAreaView>
+    );
+}
+