react -> react-native: Zdog and Tests step4 Tests works well

app/components/ZdogAndTests.js

@@ -2,6 +2,180 @@ import React, {Component} from 'react';
 import {Platform, StyleSheet, Text, TouchableOpacity, View} from 'react-native';
 import {GCanvasView} from '@flyskywhy/react-native-gcanvas';
 import Zdog from 'zdog';
+import {Asset} from 'expo-asset';
+import * as FileSystem from 'expo-file-system';
+
+const tests = {
+  timer: () => {
+    const tag = 'test-timer';
+    console.time(tag);
+    console.timeEnd(tag);
+    console.count(tag);
+  },
+  userAgent: () => {
+    console.log('userAgent: ', global.userAgent);
+  },
+  process: () => {
+    console.log('process: ', global.process);
+  },
+  navigator: () => {
+    console.log('navigator: ', global.navigator);
+  },
+  performance: () => {
+    console.log('performance: ', Object.keys(global.performance));
+  },
+  window: () => {
+    console.log('location: ', window.location);
+  },
+  base64: async () => {
+    const asset = Asset.fromModule(require('@flyskywhy/react-native-browser-polyfill/demo/image.png'));
+    await asset.downloadAsync();
+    if (Platform.OS === 'web') {
+      const {localUri, width, height} = asset;
+      console.log('B64: Loaded Image', {localUri, width, height});
+      return;
+    } else {
+      console.log('B64: ASSET:', asset.localUri);
+    }
+    const data = (
+      await FileSystem.readAsStringAsync(asset.localUri, {
+        encoding: FileSystem.EncodingType.Base64,
+      })
+    ).trim();
+
+    const pngPrefix = 'data:image/png;base64,';
+    // console.log('B64: DATA: ', pngPrefix + data);
+    const image = new global.HTMLImageElement();
+    image.addEventListener('error', () => {
+      console.log('B64: Error Loading Image');
+    });
+    image.onload = () => {
+      const {src, width, height} = image;
+      console.log('B64: Loaded Image', {src, width, height});
+    };
+    image.src = pngPrefix + data;
+  },
+  correctElementsCreated: () => {
+    const {
+      HTMLImageElement,
+      ImageBitmap,
+      HTMLVideoElement,
+      HTMLCanvasElement,
+    } = global;
+    const types = [
+      {type: 'img', inst: HTMLImageElement},
+      {type: 'video', inst: HTMLVideoElement},
+      {type: 'canvas', inst: HTMLCanvasElement},
+      {type: 'img', inst: ImageBitmap},
+    ];
+    types.forEach((item) => {
+      const element = document.createElement(item.type);
+      console.log(
+        'type',
+        item.type,
+        element instanceof item.inst,
+        element instanceof Number,
+      );
+    });
+  },
+  elements: () => {
+    const {
+      HTMLImageElement,
+      Image,
+      ImageBitmap,
+      HTMLVideoElement,
+      Video,
+      HTMLCanvasElement,
+      Canvas,
+    } = global;
+    const elements = {
+      HTMLImageElement,
+      Image,
+      ImageBitmap,
+      HTMLVideoElement,
+      Video,
+      HTMLCanvasElement,
+      Canvas,
+    };
+    console.warn(
+      'Elements: ',
+      Object.keys(elements).map((key) => ({[key]: !!elements[key]})),
+    );
+  },
+  loadImage: () => {
+    const image = document.createElement('img');
+    image.addEventListener('error', () => {
+      console.log('Error Loading Image');
+    });
+    image.onload = () => {
+      const {src, width, height} = image;
+      console.log('Loaded Image', {src, width, height});
+    };
+    image.src = 'https://avatars0.githubusercontent.com/u/9664363?s=40&v=4';
+  },
+  textDecoder: () => {
+    console.log('TextDecoder: ', !!global.TextDecoder);
+    const utfLabel = 'utf-8';
+    const options = {fatal: true};
+    const decoder = new TextDecoder(utfLabel, options);
+
+    let data = Buffer.from('Hello');
+    let buffer = '';
+    buffer += decoder.decode(data, {stream: true});
+    console.log('TextDecoder buffer', buffer, ' from: ', data);
+  },
+  context2d: () => {
+    const canvas = document.createElement('canvas');
+    const context = canvas.getContext('2d');
+    console.log(context);
+  },
+  contextwebgl: () => {
+    const canvas = document.createElement('canvas');
+    const webgl = canvas.getContext('webgl');
+    console.log(webgl);
+  },
+  domParser: () => {
+    console.log('window.DOMParser: ', !!window.DOMParser);
+    const parser = new window.DOMParser();
+
+    const html = `
+    <!DOCTYPE html>
+    <html>
+      <body>
+        <div class="container" id="container-id" name="container-name">
+          some text content
+          <h1 class="header">Charlie Cheever</h1>
+          <p id="subtitle">is my dad.</p>
+          <input name="named-input" type="text" value="Ben Affleck" />
+        </div>
+      </body>
+    </html>
+    `;
+    const dom = parser.parseFromString(html, 'text/html');
+    const container = dom.getElementById('container-id');
+
+    console.log('_nsMap', typeof container._nsMap);
+    console.log('attributes', typeof container.attributes);
+    console.log('childNodes', typeof container.childNodes);
+    console.log('ownerDocument', typeof container.ownerDocument);
+    console.log('nodeName', container.nodeName); // div on native; DIV on Web
+    console.log('tagName', container.tagName); // div on native; DIV on Web
+    console.log('namespaceURI', container.namespaceURI);
+    console.log('localName', container.localName); // div on native; div on Web
+    console.log('parentNode', typeof container.parentNode);
+    console.log('previousSibling', typeof container.previousSibling);
+    console.log('lineNumber', container.lineNumber); // 5 on native; undefined on Web
+    console.log('nextSibling', typeof container.nextSibling);
+    console.log('columnNumber', container.columnNumber); // 9 on native; undefined on Web
+    console.log('firstChild', typeof container.firstChild);
+    console.log('lastChild', typeof container.lastChild);
+    // Object.keys(container) on Web is [] , so use above instead
+    // Object.keys(container).forEach((key) => {
+    //   const obj = container[key];
+    //   console.log(`DOMParser: container.${key}: ${obj}`);
+    // });
+  },
+};
 
 var isLooping = false;
 
@@ -240,13 +414,37 @@ export default class ZdogAndTests extends Component {
       });
       resizeObserver.observe(document.getElementById('canvasExample'));
     }
+
+    window.addEventListener('resize', this.onLayout);
   }
 
   componentWillUnmount() {
     isLooping = false;
     isSpinning = null;
+
+    window.removeEventListener('resize', this.onLayout);
   }
 
+  onLayout = () => {
+    console.log(
+      'Update Layout:',
+      window.innerWidth,
+      window.innerHeight,
+      window.screen.orientation,
+    );
+  };
+
+  runTests = () => {
+    Object.keys(tests).forEach((key) => {
+      try {
+        console.log('Run Test: ', key);
+        tests[key]();
+      } catch (error) {
+        console.error(`Error running ${key} test: `, error);
+      }
+    });
+  };
+
   initCanvas = (canvas) => {
     if (this.canvas) {
       return;
@@ -329,8 +527,10 @@ export default class ZdogAndTests extends Component {
             style={styles.gcanvas}
           />
         )}
-        <TouchableOpacity onPress={this.takePicture}>
-          <Text style={styles.welcome}>Click me toDataURL()</Text>
+        <TouchableOpacity onPress={this.runTests}>
+          <Text style={styles.welcome}>
+            Click me runTests react-native-browser-polyfill
+          </Text>
         </TouchableOpacity>
       </View>
     );