Skip to content

Commit

Permalink
test: 新增rn_mlkit_ocr测试demo，新增rn_mlkit_ocr测试用例(#801) (#802)
Browse files Browse the repository at this point in the history 
Co-authored-by: pWX1342412 <[email protected]>
  • Loading branch information
@peng-xiaohua
peng-xiaohua and pWX1342412 authored Aug 12, 2024
1 parent 4651346 commit fb0a18d
Show file tree
Hide file tree
Showing 2 changed files with 255 additions and 0 deletions.
160 changes: 160 additions & 0 deletions react-native-mlkit-ocr/Test/OcrTest.tsx
View file
Original file line number Diff line number Diff line change
@@ -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>
);

};

95 changes: 95 additions & 0 deletions react-native-mlkit-ocr/TestOcrExample.tsx
View file
Original file line number Diff line number Diff line change
@@ -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>
);
}

0 comments on commit fb0a18d

Please sign in to comment.