diff --git a/packages/amis/__tests__/renderers/PopOver.test.tsx b/packages/amis/__tests__/renderers/PopOver.test.tsx index beee74a37..dc5313be0 100644 --- a/packages/amis/__tests__/renderers/PopOver.test.tsx +++ b/packages/amis/__tests__/renderers/PopOver.test.tsx @@ -1,5 +1,20 @@ +/** + * 组件名称：PopOver 弹出提示 + * 单测内容： + * 1. 在 table 中使用 + * 2. 触发方式 & 是否显示icon & 标题 & 位置 & 触发条件 + * 3. offset 偏移量 + * 4. 展示模式和尺寸 + */ + import React from 'react'; -import {render, fireEvent, cleanup, waitFor} from '@testing-library/react'; +import { + render, + fireEvent, + cleanup, + waitFor, + getByText +} from '@testing-library/react'; import '../../src'; import {render as amisRender} from '../../src'; import {wait, makeEnv} from '../helper'; @@ -33,6 +48,136 @@ function formatStyleObject(style: string | null, px2number = true) { return res; } +test('Renderer:PopOver in table', async () => { + const {container, rerender, getByText} = render( + amisRender({ + type: 'page', + data: { + rows: [ + { + engine: '内容一', + hidden: '隐藏内容一' + }, + { + engine: '内容二', + hidden: '隐藏内容二' + } + ] + }, + body: { + type: 'table', + title: '表格1', + source: '$rows', + columns: [ + { + name: 'engine', + label: 'Engine', + popOver: '弹出内容：${hidden}' + } + ] + } + }) + ); + + const popOverBtn = container.querySelector( + '.cxd-Field--popOverAble .cxd-Field-popOverBtn' + )!; + expect(popOverBtn).toBeInTheDocument(); + + fireEvent.click(popOverBtn); + await wait(200); + expect(getByText('弹出内容：隐藏内容一')).toBeInTheDocument(); + // expect(container).toMatchSnapshot(); +}); + +test('Renderer:PopOver with trigger & showIcon & title & position & popOverEnableOn', async () => { + const {container, rerender, getByText} = render( + amisRender({ + type: 'page', + data: { + rows: [ + { + engine: '内容一', + version: '1.1', + hidden: '隐藏内容一' + }, + { + engine: '内容二', + version: '2.1', + hidden: '隐藏内容二' + } + ] + }, + body: { + type: 'table', + title: '表格2', + source: '$rows', + columns: [ + { + name: 'engine', + label: 'Engine', + width: 100, + popOver: { + position: 'left-top', + body: { + type: 'tpl', + tpl: '弹出内容：${hidden}' + } + }, + popOverEnableOn: "this.version == '1.1'" + }, + { + name: 'version', + label: 'Version', + width: 100, + popOver: { + trigger: 'hover', + position: 'right-top', + showIcon: false, + title: '标题', + body: { + type: 'tpl', + tpl: '${version}' + } + } + } + ] + } + }) + ); + + const btns = container.querySelectorAll( + '.cxd-Field--popOverAble .cxd-Field-popOverBtn' + )!; + + expect(btns.length).toBe(1); + fireEvent.click(btns[0]!); + + const popOverNode = container.querySelector( + '.cxd-PopOver.cxd-PopOverAble-popover.cxd-PopOver--leftTop' + )!; + + expect(popOverNode).toBeInTheDocument(); + expect(formatStyleObject(popOverNode!.getAttribute('style'))!.left).toEqual( + 0 + ); + + fireEvent.mouseEnter(getByText('1.1')); + + await wait(200); + + const popOverNode2 = container.querySelector( + '.cxd-PopOver.cxd-PopOverAble-popover.cxd-PopOver--rightTop' + )!; + expect(popOverNode2).toBeInTheDocument(); + + // expect( + // formatStyleObject(popOverNode2!.getAttribute('style'))!.left + // ).not.toEqual(0); + expect(getByText('标题')).toBeInTheDocument(); + // expect(container).toMatchSnapshot(); +}); + test('Renderer:PopOver with offset', async () => { const schema = { name: 'static', @@ -79,3 +224,54 @@ test('Renderer:PopOver with offset', async () => { expect(offsetStyle.left - noOffsetStyle.left).toEqual(101); expect(offsetStyle.top - noOffsetStyle.top).toEqual(102); }); + +test('Renderer:PopOver with mode & size', async () => { + const {container, rerender, baseElement} = render( + amisRender({ + name: 'static', + type: 'static', + label: '静态展示', + value: 'static', + popOver: { + mode: 'dialog', + size: 'xl', + body: { + type: 'tpl', + tpl: '弹框内容' + } + } + }) + ); + + fireEvent.click(container.querySelector('.cxd-Field-popOverBtn')!); + await wait(200); + expect( + baseElement.querySelector('.cxd-Modal.cxd-Modal--xl') + ).toBeInTheDocument(); + + fireEvent.click(baseElement.querySelector('.cxd-Modal-close')!); + await wait(300); + + rerender( + amisRender({ + name: 'static', + type: 'static', + label: '静态展示', + value: 'static', + popOver: { + mode: 'drawer', + size: 'sm', + body: { + type: 'tpl', + tpl: '弹框内容' + } + } + }) + ); + + fireEvent.click(container.querySelector('.cxd-Field-popOverBtn')!); + await wait(200); + expect( + baseElement.querySelector('.cxd-Drawer.cxd-Drawer--sm') + ).toBeInTheDocument(); +}); diff --git a/packages/amis/__tests__/renderers/__snapshots__/PopOver.test.tsx.snap b/packages/amis/__tests__/renderers/__snapshots__/PopOver.test.tsx.snap index 6d07bf44b..32a271721 100644 --- a/packages/amis/__tests__/renderers/__snapshots__/PopOver.test.tsx.snap +++ b/packages/amis/__tests__/renderers/__snapshots__/PopOver.test.tsx.snap @@ -1,5 +1,366 @@ // Jest Snapshot v1, https://goo.gl/fbAQLP +exports[`Renderer:PopOver in table 1`] = ` +
+
+
+
+
+
+
+ 表格1 +
+
+
+
+
+ + + + + + + + + + + + + + +
+
+ + + Engine + + +
+
+
+ + 内容一 + + + + +
+ + 内容二 + + + + +
+