From 2f0ecb1bcdb24b6e3dc640695bd530720a09a4dc Mon Sep 17 00:00:00 2001 From: RUNZE LU <36724300+lurunze1226@users.noreply.github.com> Date: Tue, 28 Jun 2022 18:29:52 +0800 Subject: [PATCH] =?UTF-8?q?test:=20=E6=9B=B4=E6=96=B0QRCode=E5=8D=95?= =?UTF-8?q?=E5=85=83=E6=B5=8B=E8=AF=95=20(#4713)?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../amis/__tests__/renderers/QRCode.test.tsx | 66 +++++++++++-- .../__snapshots__/QRCode.test.tsx.snap | 92 ++++++++++++++++++- 2 files changed, 151 insertions(+), 7 deletions(-) diff --git a/packages/amis/__tests__/renderers/QRCode.test.tsx b/packages/amis/__tests__/renderers/QRCode.test.tsx index a23948be7..4353006f5 100644 --- a/packages/amis/__tests__/renderers/QRCode.test.tsx +++ b/packages/amis/__tests__/renderers/QRCode.test.tsx @@ -1,18 +1,23 @@ -import React = require('react'); -import {render, fireEvent} from '@testing-library/react'; +import {render, waitFor, cleanup} from '@testing-library/react'; import '../../src'; import {render as amisRender} from '../../src'; import {makeEnv} from '../helper'; import 'jest-canvas-mock'; -test('Renderer:qr-code', () => { - const {container} = render( +afterEach(() => { + cleanup(); +}); + +const setupQRCode = async (qrcodeProps: any = {}) => { + const result = render( amisRender( { type: 'page', body: { type: 'qr-code', - value: 'amis' + value: 'amis', + codeSize: 128, + ...qrcodeProps } }, {}, @@ -20,5 +25,54 @@ test('Renderer:qr-code', () => { ) ); - expect(container).toMatchSnapshot(); + await waitFor(() => { + expect(result.container.querySelector('.cxd-QrCode')).toBeInTheDocument(); + }); + + return { + ...result, + qrcode: result.container.querySelector('.cxd-QrCode'), + svgEl: result.container.querySelector('.cxd-QrCode')?.firstElementChild + }; +}; + +describe('Renderer:qr-code', () => { + test('QRCode render with svg', async () => { + const {container, svgEl} = await setupQRCode(); + + expect(svgEl).not.toBeNull(); + expect(container).toMatchSnapshot(); + }); + + test('QRCode with background/foreground color', async () => { + const {container, svgEl} = await setupQRCode({ + backgroundColor: '#108cee', + foregroundColor: 'yellow' + }); + + expect(svgEl?.firstElementChild?.getAttribute('fill')).toBe('#108cee'); + expect(svgEl?.lastElementChild?.getAttribute('fill')).toBe('yellow'); + expect(container).toMatchSnapshot(); + }); + + test('QRCode with image', async () => { + const {container, svgEl} = await setupQRCode({ + imageSettings: { + src: 'https://internal-amis-res.cdn.bcebos.com/images/2020-1/1578395692722/4f3cb4202335.jpeg@s_0,w_216,l_1,f_jpg', + width: 50, + height: 30, + x: 20, + y: 30 + } + }); + const imageEl = svgEl?.lastElementChild; + + expect(imageEl).not.toBeNull(); + expect(imageEl?.getAttribute('xlink:href')).not.toBeUndefined(); + expect(Number(imageEl?.getAttribute('x'))).toBeGreaterThan(0); + expect(Number(imageEl?.getAttribute('y'))).toBeGreaterThan(0); + expect(Number(imageEl?.getAttribute('width'))).toBeGreaterThan(0); + expect(Number(imageEl?.getAttribute('height'))).toBeGreaterThan(0); + expect(container).toMatchSnapshot(); + }); }); diff --git a/packages/amis/__tests__/renderers/__snapshots__/QRCode.test.tsx.snap b/packages/amis/__tests__/renderers/__snapshots__/QRCode.test.tsx.snap index d1cfc1d4d..b62cf1b97 100644 --- a/packages/amis/__tests__/renderers/__snapshots__/QRCode.test.tsx.snap +++ b/packages/amis/__tests__/renderers/__snapshots__/QRCode.test.tsx.snap @@ -1,6 +1,6 @@ // Jest Snapshot v1, https://goo.gl/fbAQLP -exports[`Renderer:qr-code 1`] = ` +exports[`Renderer:qr-code QRCode render with svg 1`] = `
`; + +exports[`Renderer:qr-code QRCode with background/foreground color 1`] = ` +
+
+
+
+
+
+ + + + +
+
+
+
+
+
+`; + +exports[`Renderer:qr-code QRCode with image 1`] = ` +
+
+
+
+
+
+ + + + + +
+
+
+
+
+
+`;