feat: createCanvasContextAsync 测试支持安卓、web

pages/API/create-canvas-context-async/child-canvas.uvue

 <template>
   <view>
-    <canvas class="child-canvas" id="canvas" style="height: 100px;border: 1px solid red;"></canvas>
+    <canvas class="child-canvas" id="canvas" style="height: 100px;border: 1px solid red;"></canvas>
    <view>isCanvasContextNull: {{isCanvasContextNull}}</view>
   </view>
 </template>
 
 <script>
+  type getContext = {
+    ctx : boolean,
+    hasFillRect : boolean
+  }
+
   export default {
     data() {
-      return {
-        context: null as CanvasRenderingContext2D | null
-      }
-    },
-    getContext() {
-      return {
-        ctx: typeof this.context,
-        hasFillRect: typeof this.context?.fillRect === 'function',
+      return {
        isCanvasContextNull : false
       }
     },
+  
     mounted() {
       this.$nextTick(() => {
         uni.createCanvasContextAsync({
           id: 'canvas',
           component: this,
           success: (res : CanvasContext) => {
-            console.log('child component', res);
-            this.context = res.getContext('2d');
+            const context = res.getContext('2d')!;
            this.isCanvasContextNull = true
             // 若干绘制调用
             // 绘制红色正方形
-            this.context.fillStyle = "rgb(200, 0, 0)";
-            this.context.fillRect(10, 10, 50, 50);
+            context.fillStyle = "rgb(200, 0, 0)";
+            context.fillRect(10, 10, 50, 50);
 
             // 绘制蓝色半透明正方形
-            this.context.fillStyle = "rgba(0, 0, 200, 0.5)";
-            this.context.fillRect(30, 30, 50, 50);
-            this.context.draw();
-          },
-          fail: (err : UniError) => {
+            context.fillStyle = "rgba(0, 0, 200, 0.5)";
+            context.fillRect(30, 30, 50, 50);
+            context.draw();
           }
+
         })
       })
     }
   }
-</script>
+</script>
\ No newline at end of file

pages/API/create-canvas-context-async/create-canvas-context-async.test.js

 const PAGE_PATH = '/pages/API/create-canvas-context-async/create-canvas-context-async'
 
 describe('create-canvas-context-async', () => {
-	if (!process.env.uniTestPlatformInfo.toLowerCase().startsWith('ios')) {
-		it('ios only', () => {
-			expect(1).toBe(1)
-		})
-		return
-	}
-	let page
-	beforeAll(async () => {
-		page = await program.reLaunch(PAGE_PATH)
-		await page.waitFor('view')
-	})
+  let page
+  beforeAll(async () => {
+    page = await program.reLaunch(PAGE_PATH)
+    await page.waitFor('view')
+  })
 
-	it('page canvas', async () => {
-		await page.waitFor(100)
-		const data = await page.callMethod('getContext')
-		expect(data.ctx).toBe('object')
-		expect(data.hasFillRect).toBe(true)
-	})
+  it('page canvas', async () => {
+    await page.waitFor(100)
+    const data = await page.data()
+    expect(data.isCanvasContextNull).toBe(true)
+  })
 
-	it('component canvas', async () => {
-		// child-canvas
-		await page.waitFor(100)
-		// const element = await page.$('.node-child-component')
-		const element = await page.$('child-canvas')
-		const data = await page.callMethod('getContext')
-		expect(data.ctx).toBe('object')
-		expect(data.hasFillRect).toBe(true)
-	})
-})
+  it('component canvas', async () => {
+    // child-canvas
+    await page.waitFor(100)
+    // const element = await page.$('.node-child-component')
+    const element = await page.$('child-canvas')
+    const data = await page.data()
+    expect(data.isCanvasContextNull).toBe(true)
+
+  })
+})
\ No newline at end of file

pages/API/create-canvas-context-async/create-canvas-context-async.uvue

@@ -2,48 +2,45 @@
   <view>
     <view>create canvas context async</view>
     <canvas id="canvas" class="canvas-home" style="height: 100px;border: 1px solid blue;"></canvas>
-    <view style="margin-top: 30px;"></view>
+    <view style="margin-top: 30px;"></view>
    <view>isCanvasContextNull: {{isCanvasContextNull}}</view>
     <child-canvas class="node-child-component" />
   </view>
 </template>
 
 <script>
   import childCanvas from './child-canvas.uvue';
+
+  type getContext = {
+    ctx : boolean,
+    hasFillRect : boolean
+  }
   export default {
     components: {
       childCanvas
     },
     data() {
       return {
-        context: null as CanvasRenderingContext2D | null
+        isCanvasContextNull: false
       }
     },
     methods: {
-      // 自动化测试
-      getContext() {
-        return {
-          ctx: typeof this.context,
-          hasFillRect: typeof this.context?.fillRect === 'function',
-        }
-      },
+
       drawImage() {
-        console.log(876);
         uni.createCanvasContextAsync({
           id: 'canvas',
           component: null,
           success: (res : CanvasContext) => {
-            this.context = res.getContext('2d');
+            const context = res.getContext('2d')!;
+            this.isCanvasContextNull = true
             // 若干绘制调用
             // 绘制红色正方形
-            this.context.fillStyle = "rgb(200, 0, 0)";
-            this.context.fillRect(10, 10, 50, 50);
+            context.fillStyle = "rgb(200, 0, 0)";
+            context.fillRect(10, 10, 50, 50);
 
             // 绘制蓝色半透明正方形
-            this.context.fillStyle = "rgba(0, 0, 200, 0.5)";
-            this.context.fillRect(30, 30, 50, 50);
-            this.context.draw();
-          },
-          fail: (err : UniError) => {
+            context.fillStyle = "rgba(0, 0, 200, 0.5)";
+            context.fillRect(30, 30, 50, 50);
+            context.draw();
           }
         })
       }
@@ -52,4 +49,4 @@
       this.drawImage()
     }
   }
-</script>
+</script>
\ No newline at end of file