amis2/packages/amis/__tests__/renderers/Breadcrumb.test.tsx
2022-06-01 15:06:00 +08:00

218 lines
4.9 KiB
TypeScript

import React = require('react');
import {fireEvent, render, screen} from '@testing-library/react';
import '../../src/themes/default';
import {render as amisRender} from '../../src/index';
import {makeEnv} from '../helper';
import * as renderer from 'react-test-renderer';
test('Renderer:breadcrumb', () => {
const {container} = render(
amisRender(
{
type: 'breadcrumb',
items: [
{
label: '首页',
href: 'https://baidu.gitee.com/',
icon: 'fa fa-home'
},
{
label: '上级页面'
},
{
label: '<b>当前页面</b>'
}
]
},
{},
makeEnv({})
)
);
expect(container).toMatchSnapshot();
});
test('Renderer:breadcrumb var', () => {
const {container} = render(
amisRender(
{
type: 'page',
data: {
breadcrumb: [
{
label: '首页',
href: 'https://baidu.gitee.com/'
},
{
label: '上级页面'
},
{
label: '<b>当前页面</b>'
}
]
},
body: {
type: 'breadcrumb',
source: '${breadcrumb}'
}
},
{},
makeEnv({})
)
);
expect(container).toMatchSnapshot();
});
test('Renderer:breadcrumb separator', () => {
const {container} = render(
amisRender(
{
type: 'page',
body: {
type: 'breadcrumb',
separator: '>',
separatorClassName: 'text-black',
items: [
{
label: '首页',
href: 'https://baidu.gitee.com/',
icon: 'fa fa-home'
},
{
label: '上级页面'
},
{
label: '<b>当前页面</b>'
}
]
}
},
{},
makeEnv({})
)
);
expect(container).toMatchSnapshot();
});
test('Renderer:breadcrumb dropdown', () => {
const {container} = render(
amisRender(
{
type: 'page',
body: {
type: 'breadcrumb',
items: [
{
label: '首页',
href: 'https://baidu.gitee.com/',
icon: 'fa fa-home'
},
{
label: '上级页面',
dropdown: [
{
label: '选项一',
href: 'https://baidu.gitee.com/'
},
{
label: '选项二'
}
]
},
{
label: '<b>当前页面</b>'
}
]
}
},
{},
makeEnv({})
)
);
expect(container).toMatchSnapshot();
});
test('Renderer:breadcrumb tooltip labelMaxLength', () => {
const schema = {
type: 'page',
body: {
type: 'breadcrumb',
separator: '>',
separatorClassName: 'text-black',
labelMaxLength: 16,
tooltipPosition: 'bottom',
items: [
{
href: 'https://baidu.gitee.com/',
icon: 'fa fa-home'
},
{
label: '上级页面上级页面上级页面上级页面上级页面'
},
{
label: '当前页面'
}
]
}
};
const component = renderer.create(amisRender(schema, {}, makeEnv({})));
expect(component.toJSON()).toMatchSnapshot();
schema.body.tooltipPosition = 'top';
component.update(amisRender(schema, {}, makeEnv({})));
expect(component.toJSON()).toMatchSnapshot();
schema.body.tooltipPosition = 'left';
component.update(amisRender(schema, {}, makeEnv({})));
expect(component.toJSON()).toMatchSnapshot();
schema.body.tooltipPosition = 'right';
component.update(amisRender(schema, {}, makeEnv({})));
expect(component.toJSON()).toMatchSnapshot();
});
test('Renderer:breadcrumb className', () => {
const {container} = render(
amisRender(
{
type: 'breadcrumb',
dropdownClassName: 'dropdownClassName',
dropdownItemClassName: 'dropdownItemClassName',
itemClassName: 'itemClassName',
className: 'className',
items: [
{
label: '首页',
href: 'https://baidu.gitee.com/',
icon: 'fa fa-home'
},
{
label: '上级页面',
dropdown: [
{
label: '选项一',
href: 'https://baidu.gitee.com/'
},
{
label: '选项二'
}
]
},
{
label: '<b>当前页面</b>'
}
]
},
{},
makeEnv({})
)
);
fireEvent.click(container.querySelector('.cxd-Breadcrumb-item-caret')!);
expect(!container.querySelector('.dropdownClassName')).toBeFalsy();
expect(!container.querySelector('.dropdownItemClassName')).toBeFalsy();
expect(container).toMatchSnapshot();
});