element3
Version:
A Component Library for Vue3
260 lines (231 loc) • 8.62 kB
text/typescript
import { isRef, toRefs, reactive, unref } from 'vue'
import {
props,
getColorsIndex,
sortByPercentage,
toPercentageColors,
autoFixPercentage,
DEFAULT_SVG_PX,
SVG_MAX_SIZE,
SVG_VIEW_BOX,
DEFAULT_STROKE_PX,
genFnToRelativeSvgSize,
calcRelativeSvgSize,
calcSvgRadius,
generateSvgPathD,
calcPerimeter,
genTrailPathStyle,
genArcPathStyle,
TRANSITION,
DEFAULT_COLOR,
getSvgStrokeColor,
STATUS_SETTING,
STATUSES,
getColorBy,
getRate,
getOffset
} from '../src/props'
const colorPercents = [
{ color: '#1989fa', percentage: 80 },
{ color: '#f56c6c', percentage: 20 },
{ color: '#6f7ad3', percentage: 100 },
{ color: '#5cb87a', percentage: 60 },
{ color: '#e6a23c', percentage: 40 }
]
colorPercents.sort(sortByPercentage)
describe('Progress.props', () => {
it('percentage', () => {
const { percentage } = props
expect(percentage.validator(39)).toBe(true)
expect(percentage.validator(23.9)).toBe(true)
expect(percentage.validator(0)).toBe(true)
expect(percentage.validator(100)).toBe(true)
expect(percentage.validator(-32)).toBe(false)
expect(percentage.validator(132)).toBe(false)
// expect(percentage.validator('')).toBe(false)
})
it('status', () => {
expect(STATUSES.length).toBe(3)
expect(STATUSES[0]).toBe('success')
expect(STATUSES[1]).toBe('warning')
expect(STATUSES[2]).toBe('exception')
const { status } = props
expect(status.validator('success')).toBe(true)
expect(status.validator('exception')).toBe(true)
expect(status.validator('warning')).toBe(true)
expect(status.validator('info')).toBe(false)
expect(status.validator('')).toBe(true)
expect(status.validator(undefined)).toBe(true)
})
it('show-text', () => {
const { showText } = props
expect(showText.default).toBe(true)
})
it('color', () => {
const { color } = props
expect(color.default).toBe('')
})
it('stroke-width', () => {
const { strokeWidth } = props
expect(strokeWidth.default).toBe(6)
})
it('text-inside', () => {
const { textInside } = props
expect(textInside.default).toBe(false)
})
it('type validator', () => {
const { type } = props
expect(type.default).toBe('line')
expect(type.validator('circle')).toBeTruthy()
expect(type.validator('dashboard')).toBeTruthy()
})
it('type width', () => {
const { width } = props
expect(width.default).toBe(DEFAULT_SVG_PX)
})
it('svg relative max size', () => {
expect(SVG_MAX_SIZE).toBe(100)
expect(SVG_VIEW_BOX).toBe('0 0 100 100')
})
it('calculate relative stroke width', () => {
const strokeWidth = DEFAULT_STROKE_PX
const width = DEFAULT_SVG_PX
const toRelativeSvgSize = genFnToRelativeSvgSize(width)
expect(toRelativeSvgSize(width)).toBe(SVG_MAX_SIZE)
expect(calcRelativeSvgSize(strokeWidth, width)).toBe(4.8)
})
it('getRate, getOffset, getPermi', () => {
expect(getRate('circle')).toBe(1)
expect(getRate('dashboard')).toBe(0.75)
expect(getOffset(DEFAULT_SVG_PX, 0.75)).toBe(-15.75)
expect(getOffset(DEFAULT_SVG_PX, 1)).toBe(-0)
})
it('calculate radius, path.d and styles', () => {
const svgStrokeWidth = 4.8
const radius = calcSvgRadius(svgStrokeWidth)
expect(radius).toBe(47.6)
const svgPathDCircle = generateSvgPathD(svgStrokeWidth)
expect(svgPathDCircle).toBe(
`M 50 50 m 0 -47.6 a 47.6 47.6 0 1 1 0 95.2 a 47.6 47.6 0 1 1 0 -95.2`
)
const svgPathDDashboard = generateSvgPathD(svgStrokeWidth, 'dashboard')
expect(svgPathDDashboard).toBe(
`M 50 50 m 0 47.6 a 47.6 47.6 0 1 1 0 -95.2 a 47.6 47.6 0 1 1 0 95.2`
)
const perimeter = calcPerimeter(radius)
expect(perimeter).toBe(299.0796206217483)
const strokeStyle = genTrailPathStyle(perimeter)
expect(strokeStyle.strokeDasharray).toBe('299.1px, 299.1px')
expect(strokeStyle.strokeDashoffset).toBe('0.0px')
const percentage = 25
const circleStyle = genArcPathStyle(perimeter, percentage)
expect(circleStyle.strokeDasharray).toBe('74.8px, 299.1px')
expect(circleStyle.strokeDashoffset).toBe('0.0px')
expect(circleStyle.transition).toBe(TRANSITION)
})
it('dashboard type: calculate radius, path.d and styles', () => {
const svgStrokeWidth = 4.8
const radius = calcSvgRadius(svgStrokeWidth)
const perimeter = calcPerimeter(radius)
const strokeStyle = genTrailPathStyle(perimeter, 'dashboard')
expect(strokeStyle.strokeDasharray).toBe('224.3px, 299.1px')
expect(strokeStyle.strokeDashoffset).toBe('-37.4px')
const percentage = 25
const dashboardStyle = genArcPathStyle(perimeter, percentage, 'dashboard')
expect(dashboardStyle.strokeDasharray).toBe('56.1px, 299.1px')
expect(dashboardStyle.strokeDashoffset).toBe('-37.4px')
expect(dashboardStyle.transition).toBe(TRANSITION)
})
it(':stroke-linecap', () => {
const { strokeLinecap } = props
expect(strokeLinecap.default).toBe('round')
expect(strokeLinecap.validator('round')).toBe(true)
expect(strokeLinecap.validator('butt')).toBe(true)
expect(strokeLinecap.validator('square')).toBe(true)
})
it('color and status', () => {
const color = getSvgStrokeColor()
expect(color).toBe(DEFAULT_COLOR)
expect(getSvgStrokeColor('success')).toBe(STATUS_SETTING['success'].color)
expect(getSvgStrokeColor('warning')).toBe(STATUS_SETTING['warning'].color)
expect(getSvgStrokeColor('exception')).toBe(
STATUS_SETTING['exception'].color
)
expect(getSvgStrokeColor(null, '#996600')).toBe('#996600')
expect(getSvgStrokeColor(null, '#996600', 30)).toBe('#996600')
expect(getSvgStrokeColor(null, '#996600', 30)).toBe('#996600')
expect(getSvgStrokeColor('', colorPercents, 30)).toBe(
colorPercents[1].color
)
})
it('learn isRef and unref', () => {
expect(isRef(undefined)).toBeFalsy()
expect(isRef(null)).toBeFalsy()
expect(isRef(0)).toBeFalsy()
expect(isRef('')).toBeFalsy()
expect(isRef(false)).toBeFalsy()
expect(isRef(true)).toBeFalsy()
expect(unref(undefined)).toBeUndefined()
expect(unref(null)).toBe(null)
expect(unref(0)).toBe(0)
expect(unref('')).toBe('')
expect(unref(false)).toBeFalsy()
expect(unref(true)).toBeTruthy()
})
it('should get ref value correct', () => {
const props = reactive({
percentage: 0,
color: ['#336699', '#339966', '#996633']
})
const { percentage, color } = toRefs(props)
const pv = unref(percentage)
expect(pv).toBe(props.percentage)
const cv = color.value
expect(cv).toEqual(props.color)
})
it('get index of percentage in array', () => {
expect(getColorsIndex(colorPercents, 0)).toBe(0)
expect(getColorsIndex(colorPercents, 12)).toBe(0)
expect(getColorsIndex(colorPercents, 20)).toBe(1)
expect(getColorsIndex(colorPercents, 32)).toBe(1)
expect(getColorsIndex(colorPercents, 42)).toBe(2)
expect(getColorsIndex(colorPercents, 62)).toBe(3)
expect(getColorsIndex(colorPercents, 82)).toBe(4)
expect(getColorsIndex(colorPercents, 100)).toBe(4)
expect(getColorBy(colorPercents, 15)).toBe(colorPercents[0].color)
expect(getColorBy(colorPercents, 35)).toBe(colorPercents[1].color)
expect(getColorBy(colorPercents, 55)).toBe(colorPercents[2].color)
expect(getColorBy(colorPercents, 75)).toBe(colorPercents[3].color)
expect(getColorBy(colorPercents, 85)).toBe(colorPercents[4].color)
})
it('should map to percentage colors correct', () => {
const colors = ['#336699', '#339966', '#996633', '#663399']
const rs = toPercentageColors(colors)
expect(rs.length).toBe(4)
expect(rs[0].color).toBe(colors[0])
expect(rs[0].percentage).toBe(25)
expect(rs[1].percentage).toBe(50)
expect(rs[2].percentage).toBe(75)
expect(rs[3].percentage).toBe(100)
const colorObjs = [
{ color: '#1989fa', percentage: 80 },
{ color: '#6f7ad3', percentage: 100 },
{ color: '#5cb87a', percentage: 60 },
{ color: '#f56c6c', percentage: 20 },
{ color: '#e6a23c', percentage: 40 }
]
const objs = toPercentageColors(colorObjs)
expect(objs.length).toBe(5)
expect(objs[0].color).toBe(colorObjs[0].color)
expect(objs[0].percentage).toBe(80)
expect(objs[1].percentage).toBe(100)
expect(objs[2].percentage).toBe(60)
expect(objs[3].percentage).toBe(20)
expect(objs[4].percentage).toBe(40)
})
it('fix percentage value', () => {
expect(autoFixPercentage(-2)).toBe(0)
expect(autoFixPercentage(129)).toBe(100)
expect(autoFixPercentage(29)).toBe(29)
})
})