chore(native): add test coverage for polyfills (#3053)

packages/fiber/__mocks__/expo-asset.ts

@@ -2,13 +2,22 @@ class Asset {
   name = 'test asset'
   type = 'glb'
   hash = null
+  localUri: string | null = null
   uri = 'test://null'
-  localUri = 'test://null'
+
   width = 800
   height = 400
-  static fromURI = () => new Asset()
-  static fromModule = () => new Asset()
-  downloadAsync = async () => new Promise((res) => res(this))
+  static fromURI = (uri: any) => Object.assign(new Asset(), { uri })
+  static fromModule = (uri: any) => this.fromURI(uri)
+  async downloadAsync() {
+    if (typeof this.uri === 'string' && !this.uri.includes(':')) {
+      this.localUri = 'drawable.png'
+    } else {
+      this.localUri = 'test://null'
+    }
+
+    return this
+  }
 }
 
 export { Asset }

packages/fiber/__mocks__/expo-file-system.ts

@@ -1 +1,5 @@
-export const readAsStringAsync = async () => new Promise((res) => res(''))
+export const EncodingType = { UTF8: 'utf8', Base64: 'base64' }
+export const cacheDirectory = 'file:///test/'
+export const readAsStringAsync = async () => ''
+export const writeAsStringAsync = async () => {}
+export const copyAsync = async () => {}

packages/fiber/src/native/polyfills.ts

@@ -6,6 +6,7 @@ import { fromByteArray } from 'base64-js'
 import { Buffer } from 'buffer'
 
 export function polyfills() {
+  // http://stackoverflow.com/questions/105034
   function uuidv4() {
     return 'xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx'.replace(/[xy]/g, (c) => {
       const r = (Math.random() * 16) | 0,
@@ -15,6 +16,7 @@ export function polyfills() {
   }
 
   // Patch Blob for ArrayBuffer if unsupported
+  // https://github.com/facebook/react-native/pull/39276
   try {
     new Blob([new ArrayBuffer(4) as any])
   } catch (_) {
@@ -90,7 +92,7 @@ export function polyfills() {
 
       // Create safe URI for JSI
       if (input.startsWith('data:')) {
-        const [header, data] = input.split(',')
+        const [header, data] = input.split(';base64,')
         const [, type] = header.split('/')
 
         const uri = fs.cacheDirectory + uuidv4() + `.${type}`
@@ -119,7 +121,7 @@ export function polyfills() {
   THREE.LoaderUtils.extractUrlBase = (url: string) => (typeof url === 'string' ? extractUrlBase(url) : './')
 
   // There's no Image in native, so create a data texture instead
-  THREE.TextureLoader.prototype.load = function load(url, onLoad, onProgress, onError) {
+  THREE.TextureLoader.prototype.load = function load(this: THREE.TextureLoader, url, onLoad, onProgress, onError) {
     if (this.path && typeof url === 'string') url = this.path + url
 
     this.manager.itemStart(url)
@@ -128,20 +130,21 @@ export function polyfills() {
 
     getAsset(url)
       .then(async (uri) => {
+        // https://github.com/expo/expo-three/pull/266
         const { width, height } = await new Promise<{ width: number; height: number }>((res, rej) =>
           Image.getSize(uri, (width, height) => res({ width, height }), rej),
         )
 
         texture.image = {
+          // Special case for EXGLImageUtils::loadImage
           data: { localUri: uri },
           width,
           height,
         }
-        texture.flipY = true
-        texture.unpackAlignment = 1
+        texture.flipY = true // Since [email protected]
         texture.needsUpdate = true
 
-        // Force non-DOM upload for EXGL fast paths
+        // Force non-DOM upload for EXGL texImage2D
         // @ts-ignore
         texture.isDataTexture = true
 
@@ -158,8 +161,8 @@ export function polyfills() {
     return texture
   }
 
-  // Fetches assets via XMLHttpRequest
-  THREE.FileLoader.prototype.load = function load(url, onLoad, onProgress, onError) {
+  // Fetches assets via FS
+  THREE.FileLoader.prototype.load = function load(this: THREE.FileLoader, url, onLoad, onProgress, onError) {
     if (this.path && typeof url === 'string') url = this.path + url
 
     this.manager.itemStart(url)

packages/fiber/tests/native/polyfills.test.ts

@@ -0,0 +1,37 @@
+import * as THREE from 'three'
+import { polyfills } from '../../src/native/polyfills'
+
+polyfills()
+
+const pixel =
+  'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAQAAAC1HAwCAAAAC0lEQVR42mNkYAAAAAYAAjCB0C8AAAAASUVORK5CYII='
+
+describe('polyfills', () => {
+  it('loads images via data textures', async () => {
+    const texture = await new THREE.TextureLoader().loadAsync(pixel)
+    expect((texture as any).isDataTexture).toBe(true)
+    expect(texture.image.width).toBe(1)
+    expect(texture.image.height).toBe(1)
+  })
+
+  it('creates a safe image URI for JSI', async () => {
+    const texture = await new THREE.TextureLoader().loadAsync(pixel)
+    expect(texture.image.data.localUri.startsWith('file:///')).toBe(true)
+  })
+
+  it('unpacks drawables in Android APK', async () => {
+    const texture = await new THREE.TextureLoader().loadAsync('drawable.png')
+    expect(texture.image.data.localUri.includes(':')).toBe(true)
+  })
+
+  it('loads files via the file system', async () => {
+    const asset = 1
+    const file = await new THREE.FileLoader().loadAsync(asset as any)
+    expect(typeof (file as ArrayBuffer).byteLength).toBe('number') // TODO: ArrayBuffer instanceof
+  })
+
+  it('loads files via http', async () => {
+    const file = await new THREE.FileLoader().loadAsync('https://example.com/test.png')
+    expect(typeof (file as ArrayBuffer).byteLength).toBe('number') // TODO: ArrayBuffer instanceof
+  })
+})