@cainiaofe/cn-ui-m
Version:
37 lines (36 loc) • 2.04 kB
JavaScript
import React from 'react';
import { render } from '@testing-library/react';
import { CnProgress } from '../index';
describe('CnProgress Component', function () {
test('renders linear progress correctly', function () {
var getByText = render(React.createElement(CnProgress, { shape: "line", percent: 50 })).getByText;
expect(getByText('50%')).toBeInTheDocument();
});
test('renders circle progress correctly', function () {
var getByText = render(React.createElement(CnProgress, { shape: "circle", percent: 50 })).getByText;
expect(getByText('50%')).toBeInTheDocument();
});
test('renders with custom text renderer', function () {
var customTextRender = function (percent) { return "Progress: ".concat(percent, "%"); };
var getByText = render(React.createElement(CnProgress, { percent: 50, textRender: customTextRender })).getByText;
var textElement = getByText('Progress: 50%');
expect(textElement).toBeInTheDocument();
});
});
describe('CnProgress line percent', function () {
test('renders correctly when percent is less than 0', function () {
var container = render(React.createElement(CnProgress, { shape: "line", percent: -5 })).container;
var barElement = container.querySelector('.cn-ui-m-progress-line-bar');
expect(barElement).toHaveStyle('width: 0%');
});
test('renders correctly when percent is more than 100', function () {
var container = render(React.createElement(CnProgress, { shape: "line", percent: 105 })).container;
var barElement = container.querySelector('.cn-ui-m-progress-line-bar');
expect(barElement).toHaveStyle('width: 100%');
});
test('renders correctly when percent is between 0 and 100', function () {
var container = render(React.createElement(CnProgress, { shape: "line", percent: 50 })).container;
var barElement = container.querySelector('.cn-ui-m-progress-line-bar');
expect(barElement).toHaveStyle('width: 50%');
});
});