@douyinfe/semi-ui 2.19.1-alpha.2 → 2.19.2-alpha.0

package/card/cardGroup.tsx

@@ -1,64 +0,0 @@
-import React, { PureComponent } from 'react';
-import PropTypes from 'prop-types';
-import { cssClasses, strings } from '@douyinfe/semi-foundation/card/constants';
-import cls from 'classnames';
-import Space from '../space';
-
-const prefixcls = cssClasses.PREFIX;
-
-export type CardGroupType = 'grid';
-
-export interface CardGroupProps {
-    /** Card group style class name */
-    className?: string;
-    children?: React.ReactNode;
-    /** Card Spacing */
-    spacing?: number | number[];
-    /** Card group inline style */
-    style?: React.CSSProperties;
-    /** Card set type */
-    type?: CardGroupType;
-}
-
-class CardGroup extends PureComponent<CardGroupProps> {
-    static propTypes = {
-        children: PropTypes.node,
-        className: PropTypes.string,
-        spacing: PropTypes.oneOfType([PropTypes.number, PropTypes.array]),
-        style: PropTypes.object,
-        type: PropTypes.oneOf(strings.TYPE)
-    };
-
-    static defaultProps = {
-        spacing: 16
-    };
-
-    render() {
-        const {
-            children,
-            className,
-            spacing,
-            style,
-            type,
-            ...others
-        } = this.props;
-        const isGrid = type === 'grid';
-        const cardGroupCls = cls(`${prefixcls}-group`, className, {
-            [`${prefixcls}-group-grid`]: isGrid
-        });
-
-        return (
-            <Space
-                spacing={isGrid ? 0 : spacing}
-                wrap={true}
-                className={cardGroupCls}
-                style={style}
-                {...others}
-            >
-                {children}
-            </Space>
-        );
-    }
-}
-
-export default CardGroup;

package/card/index.tsx

@@ -1,249 +0,0 @@
-import React, { PureComponent, ReactNode, CSSProperties } from 'react';
-import { omit, isString } from 'lodash';
-import PropTypes from 'prop-types';
-import { cssClasses, strings } from '@douyinfe/semi-foundation/card/constants';
-import '@douyinfe/semi-foundation/card/card.scss';
-import Meta from './meta';
-import cls from 'classnames';
-import Skeleton from '../skeleton';
-import Typography from '../typography';
-import Space from '../space';
-
-const prefixcls = cssClasses.PREFIX;
-
-export type Shadows = 'hover' | 'always';
-
-export { MetaProps } from './meta';
-
-export { CardGroupProps } from './cardGroup';
-
-export interface CardProps {
-    /** Operation group at the bottom of the card content area */
-    actions?: ReactNode[];
-    /** Card content area inline style */
-    bodyStyle?: CSSProperties;
-    /** Whether there is an outer border */
-    bordered?: boolean;
-    /** Style class name */
-    className?: string;
-    children?: React.ReactNode;
-    /** Cover */
-    cover?: ReactNode;
-    /** Additional additions to the right of the title */
-    headerExtraContent?: ReactNode;
-    /** Custom end of page */
-    footer?: ReactNode;
-    /** Whether there is an edge between the bottom of the page and the content area */
-    footerLine?: boolean;
-    /** Inline style at the end of the page */
-    footerStyle?: CSSProperties;
-    /** Custom head */
-    header?: ReactNode;
-    /** Whether there is an edge line between the head and the content area */
-    headerLine?: boolean;
-    /** Head inline style */
-    headerStyle?: CSSProperties;
-    /** Whether to preload */
-    loading?: boolean;
-    /** Set shadow */
-    shadows?: Shadows;
-    /** Card inline style */
-    style?: CSSProperties;
-    /** Title */
-    title?: ReactNode;
-    /** aria label */
-    'aria-label'?: string;
-}
-
-class Card extends PureComponent<CardProps> {
-    static Meta = Meta;
-
-    static propTypes = {
-        actions: PropTypes.array,
-        bodyStyle: PropTypes.object,
-        bordered: PropTypes.bool,
-        children: PropTypes.node,
-        className: PropTypes.string,
-        cover: PropTypes.node,
-        footer: PropTypes.node,
-        footerLine: PropTypes.bool,
-        footerStyle: PropTypes.object,
-        header: PropTypes.node,
-        headerExtraContent: PropTypes.node,
-        headerLine: PropTypes.bool,
-        headerStyle: PropTypes.object,
-        loading: PropTypes.bool,
-        shadows: PropTypes.oneOf(strings.SHADOWS),
-        style: PropTypes.object,
-        title: PropTypes.node,
-        'aria-label': PropTypes.string,
-    };
-
-    static defaultProps = {
-        bordered: true,
-        footerLine: false,
-        headerLine: true,
-        loading: false
-    };
-
-    renderHeader = (): ReactNode => {
-        const {
-            title,
-            headerExtraContent,
-            header,
-            headerLine,
-            headerStyle
-        } = this.props;
-        const headerCls = cls(`${prefixcls}-header`, {
-            [`${prefixcls}-header-bordered`]: Boolean(headerLine)
-        });
-        const headerWrapperCls = cls(`${prefixcls}-header-wrapper`);
-        const titleCls = cls(`${prefixcls}-header-wrapper-title`, {
-            [`${prefixcls}-header-wrapper-spacing`]: Boolean(headerExtraContent)
-        });
-
-        if (header || headerExtraContent || title) {
-            return (
-                <div style={headerStyle} className={headerCls}>
-                    {header || ( // Priority of header over title and headerExtraContent
-                        <div className={headerWrapperCls}>
-                            {headerExtraContent && (
-                                <div
-                                    className={`${prefixcls}-header-wrapper-extra`}
-                                    x-semi-prop="headerExtraContent"
-                                >
-                                    {headerExtraContent}
-                                </div>
-                            )}
-                            {title && (
-                                <div className={titleCls}>
-                                    {isString(title) ? (
-                                        <Typography.Title
-                                            heading={6}
-                                            ellipsis={{ showTooltip: true, rows: 1 }}
-                                            x-semi-prop="title"
-                                        >
-                                            {title}
-                                        </Typography.Title>
-                                    ) : (
-                                        title
-                                    )}
-                                </div>
-                            )}
-                        </div>
-                    )}
-                </div>
-            );
-        }
-        return null;
-    };
-
-    renderCover = (): ReactNode => {
-        const {
-            cover
-        } = this.props;
-        const coverCls = cls(`${prefixcls}-cover`);
-
-        return (
-            cover && (
-                <div className={coverCls} x-semi-prop="cover">
-                    {cover}
-                </div>
-            )
-        );
-    };
-
-    renderBody = (): ReactNode => {
-        const { bodyStyle, children, actions, loading } = this.props;
-        const bodyCls = cls(`${prefixcls}-body`);
-        const actionsCls = cls(`${prefixcls}-body-actions`);
-        const actionsItemCls = cls(`${prefixcls}-body-actions-item`);
-        const placeholder = (
-            <div>
-                <Skeleton.Title />
-                <br />
-                <Skeleton.Paragraph rows={3} />
-            </div>
-        );
-        return (
-            <div style={bodyStyle} className={bodyCls}>
-                {children && (
-                    <Skeleton placeholder={placeholder} loading={loading} active>
-                        {children}
-                    </Skeleton>
-                )}
-                {
-                    Array.isArray(actions) &&
-                    (
-                        <div className={actionsCls}>
-                            <Space spacing={12}>
-                                {actions.map((item, idx) => (
-                                    <div key={idx} className={actionsItemCls} x-semi-prop={`actions.${idx}`}>{item}</div>
-                                ))}
-                            </Space>
-                        </div>
-                    )
-                }
-            </div>
-        );
-    };
-
-    renderFooter = (): ReactNode => {
-        const {
-            footer,
-            footerLine,
-            footerStyle
-        } = this.props;
-        const footerCls = cls(`${prefixcls}-footer`, {
-            [`${prefixcls}-footer-bordered`]: footerLine
-        });
-
-        return (
-            footer && (
-                <div style={footerStyle} className={footerCls} x-semi-prop="footer">
-                    {footer}
-                </div>
-            )
-        );
-    };
-
-    render(): ReactNode {
-        const {
-            bordered,
-            shadows,
-            style,
-            className,
-            ...otherProps
-        } = this.props;
-        const others = omit(otherProps, [ // Remove APIs in otherProps that do not need to be hung on the outer node
-            'actions',
-            'bodyStyle',
-            'cover',
-            'headerExtraContent',
-            'footer',
-            'footerLine',
-            'footerStyle',
-            'header',
-            'headerLine',
-            'headerStyle',
-            'loading',
-            'title'
-        ]);
-        const cardCls = cls(prefixcls, className, {
-            [`${prefixcls}-bordered`]: bordered,
-            [`${prefixcls}-shadows`]: shadows,
-            [`${prefixcls}-shadows-${shadows}`]: shadows
-        });
-
-        return (
-            <div {...others} aria-busy={this.props.loading} className={cardCls} style={style}>
-                {this.renderHeader()}
-                {this.renderCover()}
-                {this.renderBody()}
-                {this.renderFooter()}
-            </div>
-        );
-    }
-}
-
-export default Card;

package/card/meta.tsx

@@ -1,73 +0,0 @@
-import React, { PureComponent } from 'react';
-import PropTypes from 'prop-types';
-import { cssClasses } from '@douyinfe/semi-foundation/card/constants';
-import cls from 'classnames';
-
-const prefixcls = cssClasses.PREFIX;
-
-export type Shadows = 'hover' | 'show';
-
-export interface MetaProps {
-    /** Avatar */
-    avatar?: React.ReactNode;
-    /** Style class name */
-    className?: string;
-    /** Description */
-    description?: React.ReactNode;
-    /** Inline style */
-    style?: React.CSSProperties;
-    /** Title */
-    title?: React.ReactNode;
-}
-
-class Meta extends PureComponent<MetaProps> {
-    static propTypes = {
-        avatar: PropTypes.node,
-        className: PropTypes.string,
-        description: PropTypes.node,
-        style: PropTypes.object,
-        title: PropTypes.node
-    };
-
-    render() {
-        const {
-            avatar,
-            className,
-            description,
-            style,
-            title,
-            ...others
-        } = this.props;
-        const metaCls = cls(`${prefixcls}-meta`, className);
-        const avatarNode = avatar && (
-            <div className={`${prefixcls}-meta-avatar`}>
-                {avatar}
-            </div>
-        );
-        const titleNode = title && (
-            <div className={`${prefixcls}-meta-wrapper-title`}>
-                {title}
-            </div>
-        );
-        const descriptionNode = description && (
-            <div className={`${prefixcls}-meta-wrapper-description`}>
-                {description}
-            </div>
-        );
-        const wrapper = title || description ? (
-            <div className={`${prefixcls}-meta-wrapper`}>
-                {titleNode}
-                {descriptionNode}
-            </div>
-        ) : null;
-
-        return (
-            <div {...others} className={metaCls} style={style}>
-                {avatarNode}
-                {wrapper}
-            </div>
-        );
-    }
-}
-
-export default Meta;

package/carousel/CarouselArrow.tsx

@@ -1,64 +0,0 @@
-/* eslint-disable jsx-a11y/click-events-have-key-events */
-/* eslint-disable jsx-a11y/no-static-element-interactions */
-import React, { ReactNode } from "react";
-import cls from 'classnames';
-import { cssClasses } from '@douyinfe/semi-foundation/carousel/constants';
-import { CarouselArrowProps } from "./interface";
-import { IconChevronLeft, IconChevronRight } from "@douyinfe/semi-icons";
-import { get } from 'lodash';
-
-class CarouselArrow extends React.PureComponent<CarouselArrowProps> {
-    renderLeftIcon = () => {
-        return get(this.props, 'arrowProps.leftArrow.children', <IconChevronLeft aria-label="Previous index" size="inherit"/>);
-    }
-
-    renderRightIcon = () => {
-        return get(this.props, 'arrowProps.rightArrow.children', <IconChevronRight aria-label="Next index" size="inherit"/>);
-    }
-
-    render(): ReactNode {
-        const { type, theme, prev, next } = this.props;
-        const classNames = cls( {
-            [cssClasses.CAROUSEL_ARROW]: true,
-            [`${cssClasses.CAROUSEL_ARROW}-${theme}`]: theme,
-            [`${cssClasses.CAROUSEL_ARROW}-hover`]: type === 'hover',
-        });
-
-        const leftClassNames = cls( {
-            [`${cssClasses.CAROUSEL_ARROW}-prev`]: true,
-            [`${cssClasses.CAROUSEL_ARROW}-${theme}`]: theme,
-        });
-
-        const rightClassNames = cls( {
-            [`${cssClasses.CAROUSEL_ARROW}-next`]: true,
-            [`${cssClasses.CAROUSEL_ARROW}-${theme}`]: theme,
-        });
-
-        return (
-            <div className={classNames}>
-                <div 
-                    // role='button'
-                    className={leftClassNames} 
-                    onClick={prev}
-                    {...get(this.props, 'arrowProps.leftArrow.props')}
-                    x-semi-prop="arrowProps.leftArrow.children"
-                >
-                    {this.renderLeftIcon()}
-                </div>
-                <div 
-                    // role='button'
-                    // tabIndex={0} 
-                    className={rightClassNames} 
-                    onClick={next}
-                    {...get(this.props, 'arrowProps.rightArrow.props')}
-                    x-semi-prop="arrowProps.rightArrow.children"
-                >
-                    {this.renderRightIcon()}
-                </div>
-            </div>
-        );
-    }
-
-}
-
-export default CarouselArrow;

package/carousel/CarouselIndicator.tsx

@@ -1,83 +0,0 @@
-/* eslint-disable jsx-a11y/no-static-element-interactions */
-/* eslint-disable jsx-a11y/click-events-have-key-events */
-import React, { ReactNode } from "react";
-import cls from 'classnames';
-import PropTypes from 'prop-types';
-import { cssClasses, strings } from '@douyinfe/semi-foundation/carousel/constants';
-import { CarouselIndicatorProps } from "./interface";
-import getDataAttr from "@douyinfe/semi-foundation/utils/getDataAttr";
-
-class CarouselIndicator extends React.PureComponent<CarouselIndicatorProps> {
-    static propTypes = {
-        activeKey: PropTypes.number,
-        className: PropTypes.string,
-        position: PropTypes.oneOf(strings.POSITION_MAP),
-        size: PropTypes.oneOf(strings.SIZE),
-        style: PropTypes.object,
-        theme: PropTypes.oneOf(strings.THEME_MAP),
-        total: PropTypes.number,
-        onIndicatorChange: PropTypes.func,
-        type: PropTypes.oneOf(strings.TYPE_MAP),
-        trigger: PropTypes.oneOf(strings.TRIGGER)
-    };
-
-    onIndicatorChange = (activeIndex: number): void => {
-        this.props.onIndicatorChange(activeIndex);
-    };
-
-    handleIndicatorClick = (activeIndex: number): void => {
-        const { trigger } = this.props;
-        if (trigger === 'click'){
-            this.onIndicatorChange(activeIndex);
-        }
-    }
-
-    handleIndicatorHover = (activeIndex: number): void => {
-        const { trigger } = this.props;
-        if (trigger === 'hover'){
-            this.onIndicatorChange(activeIndex);
-        }
-    }
-
-    renderIndicatorContent(): ReactNode {
-        const { total, theme, size, activeIndex } = this.props;
-        const indicatorContent: ReactNode[] = [];
-        for (let i = 0; i < total; i++) {
-            indicatorContent.push(
-                <span
-                    // role='none' 
-                    key={i}
-                    data-index={i}
-                    className={cls([`${cssClasses.CAROUSEL_INDICATOR}-item`], {
-                        [`${cssClasses.CAROUSEL_INDICATOR}-item-active`]: i === activeIndex,
-                        [`${cssClasses.CAROUSEL_INDICATOR}-item-${theme}`]: theme,
-                        [`${cssClasses.CAROUSEL_INDICATOR}-item-${size}`]: size,
-                    })}
-                    onClick={()=>this.handleIndicatorClick(i)}
-                    onMouseEnter={()=>this.handleIndicatorHover(i)}
-                ></span>
-            );
-        }
-        return indicatorContent;
-    }
-
-    render(): ReactNode {
-        const { type, size, theme, style, className, position, ...restProps } = this.props;
-        const classNames = cls(className, {
-            [cssClasses.CAROUSEL_INDICATOR]: true,
-            [`${cssClasses.CAROUSEL_INDICATOR}-${type}`]: type,
-            [`${cssClasses.CAROUSEL_INDICATOR}-${position}`]: position,
-        });
-
-        const indicatorContent = this.renderIndicatorContent();
-
-        return (
-            <div className={classNames} style={style} {...getDataAttr(restProps)}>
-                {indicatorContent}
-            </div>
-        );
-    }
-
-}
-
-export default CarouselIndicator;

package/carousel/__test__/carousel.test.js

@@ -1,159 +0,0 @@
-import { Carousel } from '../../index';
-import { BASE_CLASS_PREFIX } from '../../../semi-foundation/base/constants';
-
-
-function getCarousel(carouselProps) {
-    const contentStyle = {
-        display:'flex',
-        justifyContent: 'center',
-        alignItems: 'center',
-        color: '#fff',
-        background: 'lightBlue',
-    };
-
-    return <Carousel style={{ width: '600px', height: '240px'}} {...carouselProps}>
-      <div style={contentStyle}>
-        <h3>index0</h3>
-      </div>
-      <div style={contentStyle}>
-        <h3>index1</h3>
-      </div>
-      <div style={contentStyle}>
-        <h3>index2</h3>
-      </div>
-    </Carousel>
-}
-
-function getSingleCarousel(carouselProps) {
-    const contentStyle = {
-        display:'flex',
-        justifyContent: 'center',
-        alignItems: 'center',
-        color: '#fff',
-        background: 'lightBlue',
-    };
-
-    return <Carousel style={{ width: '600px', height: '240px'}} {...carouselProps}>
-      <div style={contentStyle}>
-        <h3>index0</h3>
-      </div>
-    </Carousel>
-}
-
-describe('Carousel', () => {
-
-    it('Carousel render basicly', () => {
-        let props = {};
-        const carousel = mount(getCarousel(props))
-        expect(carousel.find(`.${BASE_CLASS_PREFIX}-carousel-content`).children().length).toEqual(3);
-        expect(carousel.find(`.${BASE_CLASS_PREFIX}-carousel-content-item-active`).text()).toEqual('index0');
-        carousel.unmount();
-    });
-
-    it('Carousel with custom className & style', () => {
-        let props = {
-            className: 'test',
-            style: {
-                color: 'red'
-            }
-        };
-        const carousel = shallow(getCarousel(props));
-        expect(carousel.exists('.test')).toEqual(true);
-        expect(carousel.find('div.test')).toHaveStyle('color', 'red');
-    });
-
-    it('Carousel with defaultActiveIndex', () => {
-        let props = {
-            defaultActiveIndex: 2
-        };
-        const carousel = mount(getCarousel(props));
-        const carouselContent = carousel.find(`.${BASE_CLASS_PREFIX}-carousel-content-item-active`).text();
-        expect(carouselContent).toEqual('index2');
-    });
-
-    it('different theme', () => {
-        let primary = mount(getCarousel({ theme: 'primary' }));
-        let light = mount(getCarousel({ theme: 'light' }));
-        let dark = mount(getCarousel({ theme: 'dark' }));
-        expect(primary.exists(`.${BASE_CLASS_PREFIX}-carousel-arrow-primary`)).toEqual(true);
-        expect(primary.exists(`.${BASE_CLASS_PREFIX}-carousel-indicator-item-primary`)).toEqual(true);
-        expect(light.exists(`.${BASE_CLASS_PREFIX}-carousel-arrow-light`)).toEqual(true);
-        expect(light.exists(`.${BASE_CLASS_PREFIX}-carousel-indicator-item-light`)).toEqual(true);
-        expect(dark.exists(`.${BASE_CLASS_PREFIX}-carousel-arrow-dark`)).toEqual(true);
-        expect(dark.exists(`.${BASE_CLASS_PREFIX}-carousel-indicator-item-dark`)).toEqual(true);
-    });
-
-    it('different indicator type', () => {
-        let dot = mount(getCarousel({ indicatorType: 'dot' }));
-        let line = mount(getCarousel({ indicatorType: 'line' }));
-        let columnar = mount(getCarousel({ indicatorType: 'columnar' }));
-        expect(dot.exists(`.${BASE_CLASS_PREFIX}-carousel-indicator-dot`)).toEqual(true);
-        expect(dot.exists(`.${BASE_CLASS_PREFIX}-carousel-indicator-line`)).toEqual(false);
-        expect(line.exists(`.${BASE_CLASS_PREFIX}-carousel-indicator-line`)).toEqual(true);
-        expect(line.exists(`.${BASE_CLASS_PREFIX}-carousel-indicator-columnar`)).toEqual(false);
-        expect(columnar.exists(`.${BASE_CLASS_PREFIX}-carousel-indicator-columnar`)).toEqual(true);
-        expect(columnar.exists(`.${BASE_CLASS_PREFIX}-carousel-indicator-dot`)).toEqual(false);
-    });
-
-    it('different indicator position', () => {
-        let left = mount(getCarousel({ indicatorPosition: 'left' }));
-        let center = mount(getCarousel({ indicatorPosition: 'center' }));
-        let right = mount(getCarousel({ indicatorPosition: 'right' }));
-        expect(left.exists(`.${BASE_CLASS_PREFIX}-carousel-indicator-left`)).toEqual(true);
-        expect(left.exists(`.${BASE_CLASS_PREFIX}-carousel-indicator-center`)).toEqual(false);
-        expect(center.exists(`.${BASE_CLASS_PREFIX}-carousel-indicator-center`)).toEqual(true);
-        expect(center.exists(`.${BASE_CLASS_PREFIX}-carousel-indicator-right`)).toEqual(false);
-        expect(right.exists(`.${BASE_CLASS_PREFIX}-carousel-indicator-right`)).toEqual(true);
-        expect(right.exists(`.${BASE_CLASS_PREFIX}-carousel-indicator-left`)).toEqual(false);
-    });
-
-    it('different indicator size', () => {
-        let small = mount(getCarousel({ indicatorSize: 'small' }));
-        let medium = mount(getCarousel({ indicatorSize: 'medium' }));
-        expect(small.exists(`.${BASE_CLASS_PREFIX}-carousel-indicator-item-small`)).toEqual(true);
-        expect(small.exists(`.${BASE_CLASS_PREFIX}-carousel-indicator-item-medium`)).toEqual(false);
-        expect(medium.exists(`.${BASE_CLASS_PREFIX}-carousel-indicator-item-medium`)).toEqual(true);
-        expect(medium.exists(`.${BASE_CLASS_PREFIX}-carousel-indicator-item-small`)).toEqual(false);
-    });
-
-    it('show arrow and arrow change', () => {
-        let spyOnChange = sinon.spy(() => {})
-        let show = mount(getCarousel({ onChange: spyOnChange }));
-        let hide = mount(getCarousel({ showArrow: false }));
-        let hover = mount(getCarousel({ arrowType: 'hover' }));
-
-        expect(show.exists(`.${BASE_CLASS_PREFIX}-carousel-arrow`)).toEqual(true);
-        expect(hide.exists(`.${BASE_CLASS_PREFIX}-carousel-arrow`)).toEqual(false);
-        expect(hover.exists(`.${BASE_CLASS_PREFIX}-carousel-arrow-hover`)).toEqual(true);
-
-        show.find(`.${BASE_CLASS_PREFIX}-carousel-arrow-prev`).simulate('click');
-        expect(spyOnChange.calledOnce).toBe(true);
-        expect(show.find(`.${BASE_CLASS_PREFIX}-carousel-content-item-active`).text()).toEqual('index2');
-
-        show.find(`.${BASE_CLASS_PREFIX}-carousel-arrow-next`).simulate('click');
-        expect(show.find(`.${BASE_CLASS_PREFIX}-carousel-content-item-active`).text()).toEqual('index0');
-        
-    });
-
-    it('indicator change with click or trigger', () => {
-        let spyOnChange = sinon.spy(() => {})
-        let carousel = mount(getCarousel({ onChange: spyOnChange }));
-        carousel.find(`.${BASE_CLASS_PREFIX}-carousel-indicator-item`).at(2).simulate('click');
-        expect(spyOnChange.calledOnce).toBe(true);
-        expect(carousel.find(`.${BASE_CLASS_PREFIX}-carousel-content-item-active`).text()).toEqual('index2');
-
-        let spyOnChangeHover = sinon.spy(() => {})
-        let carouselHover = mount(getCarousel({ onChange: spyOnChangeHover, trigger: 'hover' }));
-        carouselHover.find(`.${BASE_CLASS_PREFIX}-carousel-indicator-item`).at(2).simulate('mouseEnter', {});
-        expect(spyOnChangeHover.calledOnce).toBe(true);
-        expect(carouselHover.find(`.${BASE_CLASS_PREFIX}-carousel-content-item-active`).text()).toEqual('index2');
-    });
-
-    it('single index', () => {
-        let carousel = mount(getSingleCarousel({}));
-        expect(carousel.exists(`.${BASE_CLASS_PREFIX}-carousel-indicator`)).toEqual(false);
-        expect(carousel.exists(`.${BASE_CLASS_PREFIX}-carousel-arrow`)).toEqual(false);
-        carousel.unmount();
-    });
-
-})