mirror of
https://gitee.com/baidu/amis.git
synced 2024-12-14 17:01:14 +08:00
chore: 轮播图单测布补充 (#5972)
This commit is contained in:
sansiro
GitHub
parent
8d0947bf98
commit
8c7e3cbc74
@ -1,10 +1,20 @@
|
||||
import React = require('react');
|
||||
/**
|
||||
* 组件名称：Carousel 轮播图
|
||||
* 单测内容：
|
||||
* 1. 基础使用
|
||||
* 2. auto & interval & duration
|
||||
* 3. name & option config
|
||||
* 4. controls & controlsTheme & thumbMode
|
||||
* 5. itemSchema & width & height
|
||||
*/
|
||||
|
||||
import React from 'react';
|
||||
import {render, fireEvent, waitFor} from '@testing-library/react';
|
||||
import '../../src';
|
||||
import {render as amisRender} from '../../src';
|
||||
import {makeEnv, wait} from '../helper';
|
||||
|
||||
test('Renderer:carousel', async () => {
|
||||
test('Renderer:Carousel', async () => {
|
||||
const {container} = render(
|
||||
amisRender(
|
||||
{
|
||||
@ -52,3 +62,209 @@ test('Renderer:carousel', async () => {
|
||||
|
||||
expect(container).toMatchSnapshot();
|
||||
});
|
||||
|
||||
test('Renderer:Carousel with auto & interval & duration', async () => {
|
||||
const {container} = render(
|
||||
amisRender(
|
||||
{
|
||||
type: 'carousel',
|
||||
controlsTheme: 'light',
|
||||
width: '500',
|
||||
height: '300',
|
||||
auto: true,
|
||||
interval: 2000,
|
||||
duration: 500,
|
||||
options: [
|
||||
{
|
||||
image:
|
||||
'https://internal-amis-res.cdn.bcebos.com/images/2019-12/1577157239810/da6376bf988c.png',
|
||||
title: '标题',
|
||||
titleClassName: 'block',
|
||||
description: '描述',
|
||||
descriptionClassName: 'block'
|
||||
},
|
||||
{
|
||||
html: '<div style="width: 100%; height: 300px; background: #e3e3e3; text-align: center; line-height: 300px;">carousel data</div>'
|
||||
},
|
||||
{
|
||||
image:
|
||||
'https://ss0.bdstatic.com/70cFvHSh_Q1YnxGkpoWK1HF6hhy/it/u=3893101144,2877209892&fm=23&gp=0.jpg'
|
||||
}
|
||||
],
|
||||
className: 'show'
|
||||
},
|
||||
{},
|
||||
makeEnv({})
|
||||
)
|
||||
);
|
||||
|
||||
await wait(2500);
|
||||
|
||||
expect(container.querySelector('.cxd-Carousel-dot:nth-child(2)')).toHaveClass(
|
||||
'is-active'
|
||||
);
|
||||
});
|
||||
|
||||
test('Renderer:Carousel with name & option config', async () => {
|
||||
const {container} = render(
|
||||
amisRender(
|
||||
{
|
||||
type: 'page',
|
||||
data: {
|
||||
imageList: [
|
||||
{
|
||||
image:
|
||||
'https://internal-amis-res.cdn.bcebos.com/images/2019-12/1577157239810/da6376bf988c.png',
|
||||
imageClassName: 'thisisimageClassName',
|
||||
title: '这是标题',
|
||||
titleClassName: 'thiisistitleClassName',
|
||||
description: '描述', // description 属性没用
|
||||
href: 'https://www.baidu.com'
|
||||
},
|
||||
{
|
||||
html: '<div style="width: 100%; height: 300px; background: #e3e3e3; text-align: center; line-height: 300px;">carousel data</div>'
|
||||
}
|
||||
]
|
||||
},
|
||||
body: [
|
||||
{
|
||||
type: 'carousel',
|
||||
auto: false,
|
||||
name: 'imageList'
|
||||
}
|
||||
]
|
||||
},
|
||||
{},
|
||||
makeEnv({})
|
||||
)
|
||||
);
|
||||
|
||||
const item = container.querySelector('.cxd-Carousel-item')!;
|
||||
|
||||
expect(item.firstElementChild).toHaveAttribute(
|
||||
'href',
|
||||
'https://www.baidu.com'
|
||||
);
|
||||
expect(item).toHaveTextContent('这是标题');
|
||||
|
||||
fireEvent.click(container.querySelector('.cxd-Carousel-dot:nth-child(2')!);
|
||||
|
||||
await wait(600);
|
||||
|
||||
expect(container.querySelector('.cxd-Carousel-item')!).toHaveTextContent(
|
||||
'carousel data'
|
||||
);
|
||||
});
|
||||
|
||||
test('Renderer:Carousel with controls & controlsTheme & thumbMode', async () => {
|
||||
const {container, rerender} = render(
|
||||
amisRender(
|
||||
{
|
||||
type: 'carousel',
|
||||
controlsTheme: 'light',
|
||||
thumbMode: 'contain',
|
||||
controls: ['dots', 'arrows'],
|
||||
options: [
|
||||
{
|
||||
image:
|
||||
'https://internal-amis-res.cdn.bcebos.com/images/2019-12/1577157239810/da6376bf988c.png'
|
||||
},
|
||||
{
|
||||
html: '<div style="width: 100%; height: 300px; background: #e3e3e3; text-align: center; line-height: 300px;">carousel data</div>'
|
||||
},
|
||||
{
|
||||
image:
|
||||
'https://ss0.bdstatic.com/70cFvHSh_Q1YnxGkpoWK1HF6hhy/it/u=3893101144,2877209892&fm=23&gp=0.jpg'
|
||||
}
|
||||
]
|
||||
},
|
||||
{},
|
||||
makeEnv({})
|
||||
)
|
||||
);
|
||||
|
||||
expect(container.querySelector('.cxd-Carousel')).toHaveClass(
|
||||
'cxd-Carousel--light'
|
||||
);
|
||||
expect(
|
||||
container.querySelector('.cxd-Image-origin.cxd-Image-origin--contain')
|
||||
).toBeInTheDocument();
|
||||
expect(
|
||||
container.querySelector('.cxd-Carousel-dotsControl')
|
||||
).toBeInTheDocument();
|
||||
expect(
|
||||
container.querySelector('.cxd-Carousel-leftArrow')
|
||||
).toBeInTheDocument();
|
||||
|
||||
rerender(
|
||||
amisRender(
|
||||
{
|
||||
type: 'carousel',
|
||||
controlsTheme: 'dark',
|
||||
thumbMode: 'cover',
|
||||
controls: [],
|
||||
options: [
|
||||
{
|
||||
image:
|
||||
'https://internal-amis-res.cdn.bcebos.com/images/2019-12/1577157239810/da6376bf988c.png'
|
||||
},
|
||||
{
|
||||
html: '<div style="width: 100%; height: 300px; background: #e3e3e3; text-align: center; line-height: 300px;">carousel data</div>'
|
||||
},
|
||||
{
|
||||
image:
|
||||
'https://ss0.bdstatic.com/70cFvHSh_Q1YnxGkpoWK1HF6hhy/it/u=3893101144,2877209892&fm=23&gp=0.jpg'
|
||||
}
|
||||
]
|
||||
},
|
||||
{},
|
||||
makeEnv({})
|
||||
)
|
||||
);
|
||||
|
||||
expect(container).toMatchSnapshot();
|
||||
|
||||
expect(container.querySelector('.cxd-Carousel')).toHaveClass(
|
||||
'cxd-Carousel--dark'
|
||||
);
|
||||
expect(
|
||||
container.querySelector('.cxd-Image-origin.cxd-Image-origin--cover')
|
||||
).toBeInTheDocument();
|
||||
expect(
|
||||
container.querySelector('.cxd-Carousel-dotsControl')
|
||||
).not.toBeInTheDocument();
|
||||
expect(
|
||||
container.querySelector('.cxd-Carousel-leftArrow')
|
||||
).not.toBeInTheDocument();
|
||||
});
|
||||
|
||||
test('Renderer:Carousel with itemSchema & width & height', async () => {
|
||||
const {container, rerender} = render(
|
||||
amisRender(
|
||||
{
|
||||
type: 'carousel',
|
||||
options: [
|
||||
{
|
||||
image:
|
||||
'https://internal-amis-res.cdn.bcebos.com/images/2019-12/1577157239810/da6376bf988c.png'
|
||||
}
|
||||
],
|
||||
itemSchema: {
|
||||
type: 'tpl',
|
||||
tpl: '<div class="itemSchemaClassName" style="background-image: url(\'<%= data.image %>\');"></div>'
|
||||
},
|
||||
width: 101,
|
||||
height: 99
|
||||
},
|
||||
{},
|
||||
makeEnv({})
|
||||
)
|
||||
);
|
||||
|
||||
expect(container).toMatchSnapshot();
|
||||
expect(container.querySelector('.cxd-Carousel')).toHaveStyle({
|
||||
width: '101px',
|
||||
height: '99px'
|
||||
});
|
||||
expect(container.querySelector('.itemSchemaClassName')).toBeInTheDocument();
|
||||
});
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
// Jest Snapshot v1, https://goo.gl/fbAQLP
|
||||
|
||||
exports[`Renderer:carousel 1`] = `
|
||||
exports[`Renderer:Carousel 1`] = `
|
||||
<div>
|
||||
<div
|
||||
class="cxd-Carousel cxd-Carousel--light show"
|
||||
@ -81,3 +81,83 @@ exports[`Renderer:carousel 1`] = `
|
||||
</div>
|
||||
</div>
|
||||
`;
|
||||
|
||||
exports[`Renderer:Carousel with controls & controlsTheme & thumbMode 1`] = `
|
||||
<div>
|
||||
<div
|
||||
class="cxd-Carousel cxd-Carousel--dark"
|
||||
>
|
||||
<div
|
||||
class="cxd-Carousel-container"
|
||||
>
|
||||
<div
|
||||
class="cxd-Carousel-item fade in"
|
||||
>
|
||||
<div
|
||||
class="cxd-Image cxd-Image--original cxd-Carousel-image"
|
||||
>
|
||||
<div
|
||||
class="cxd-Image-origin cxd-Image-origin--cover"
|
||||
>
|
||||
<img
|
||||
class="cxd-Image-image"
|
||||
src="https://internal-amis-res.cdn.bcebos.com/images/2019-12/1577157239810/da6376bf988c.png"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
`;
|
||||
|
||||
exports[`Renderer:Carousel with itemSchema & width & height 1`] = `
|
||||
<div>
|
||||
<div
|
||||
class="cxd-Carousel cxd-Carousel--light"
|
||||
style="width: 101px; height: 99px;"
|
||||
>
|
||||
<div
|
||||
class="cxd-Carousel-container"
|
||||
>
|
||||
<div
|
||||
class="cxd-Carousel-item fade in"
|
||||
>
|
||||
<span
|
||||
class="cxd-TplField"
|
||||
>
|
||||
<span>
|
||||
<div
|
||||
class="itemSchemaClassName"
|
||||
style="background-image: url('https://internal-amis-res.cdn.bcebos.com/images/2019-12/1577157239810/da6376bf988c.png');"
|
||||
/>
|
||||
</span>
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
class="cxd-Carousel-dotsControl"
|
||||
>
|
||||
<span
|
||||
class="cxd-Carousel-dot is-active"
|
||||
/>
|
||||
</div>
|
||||
<div
|
||||
class="cxd-Carousel-leftArrow"
|
||||
>
|
||||
<icon-mock
|
||||
classname="icon icon-left-arrow"
|
||||
icon="left-arrow"
|
||||
/>
|
||||
</div>
|
||||
<div
|
||||
class="cxd-Carousel-rightArrow"
|
||||
>
|
||||
<icon-mock
|
||||
classname="icon icon-right-arrow"
|
||||
icon="right-arrow"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
`;
|
||||
|
||||
Loading…
Reference in New Issue
Block a user