Skip to content

Commit

Permalink
refactor(wizard): [wizard] refactor the Wizard Theme (#2279)
Browse files Browse the repository at this point in the history 
* refactor(wizard): [wizard] 重构wizard主题

* refactor(wizard): [wizard] 修复测试用例报错
  • Loading branch information
@chenxi-20
chenxi-20 authored Oct 16, 2024
1 parent 390563d commit ade7165
Show file tree
Hide file tree
Showing 10 changed files with 347 additions and 365 deletions.
18 changes: 10 additions & 8 deletions examples/sites/demos/pc/app/wizard/base-usage.spec.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -10,7 +10,6 @@ test('基本用法', async ({ page }) => {
const chartCount = 5
const itemStatus = [/is-ready/, /is-doing/]
const descs = ['出差信息填写', '项目信息填写', '主管审批', '权签人审批', '完成申请']
const readyColor = 'rgb(94, 124, 224)'

await expect(charts).toHaveCount(chartCount)
for (let i = 0; i < chartCount; i++) {
Expand All @@ -20,21 +19,24 @@ test('基本用法', async ({ page }) => {
const middle = itemList.nth(1)
const last = itemList.nth(2)

await expect(items).toHaveCSS('width', '120px')
await expect(items).toHaveCSS('height', '20px')
await expect(items).toHaveCSS('width', '100px')
await expect(items).toHaveCSS('height', '32px')
await expect(first).toHaveClass('tiny-wizard__chart-line')
await expect(middle).toHaveClass(/tiny-wizard__chart-icon/)
await expect(middle).toHaveText(String(i + 1))
await expect(last).toHaveClass('tiny-wizard__chart-line')
await expect(names.nth(i)).toHaveText(descs[i])

if (i < 2) {
if (i < 1) {
await expect(stepItems.nth(i)).toHaveClass(itemStatus[i])
await expect(first).toHaveCSS('background-color', readyColor)
await expect(middle).toHaveCSS('background-color', readyColor)
await expect(first).toHaveCSS('background-color', 'rgba(0, 0, 0, 0)')
await expect(middle).toHaveCSS('background-color', 'rgb(255, 255, 255)')
} else if (i === 1) {
await expect(first).toHaveCSS('background-color', 'rgb(25, 25, 25)')
await expect(middle).toHaveCSS('background-color', 'rgb(255, 255, 255)')
} else {
await expect(first).toHaveCSS('background-color', 'rgb(194, 196, 199)')
await expect(middle).toHaveCSS('background-color', 'rgb(223, 225, 230)')
await expect(first).toHaveCSS('background-color', 'rgb(219, 219, 219)')
await expect(middle).toHaveCSS('background-color', 'rgb(240, 240, 240)')
}
}
})
10 changes: 5 additions & 5 deletions examples/sites/demos/pc/app/wizard/time-line-flow.spec.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -33,18 +33,18 @@ test('时间线流程图', async ({ page }) => {
await expect(details).toHaveCount(3)
await expect(userNames).toHaveCount(3)
for (let i = 0; i < 3; i++) {
await expect(childNodeLines.nth(i)).toHaveCSS('width', '4px')
await expect(childNodeLines.nth(i)).toHaveCSS('width', '1px')
await expect(childNodeLines.nth(i)).toHaveCSS('height', '88px')
await expect(details.nth(i)).toHaveText(texts[i])
await expect(childNodeDates.nth(i)).toHaveText(/20*1*:50/)

if (i === 2) {
await expect(childNodeLines.nth(i)).toHaveCSS('background-color', 'rgba(0, 0, 0, 0)')
await expect(childNodeLines.nth(i)).toHaveCSS('background-color', 'rgb(25, 25, 25)')
}
if (i < 2) {
await expect(nodeIcons.nth(i)).toHaveCSS('width', '16px')
await expect(nodeIcons.nth(i)).toHaveCSS('height', '20px')
await expect(nodeLines.nth(i)).toHaveCSS('width', '4px')
await expect(nodeIcons.nth(i)).toHaveCSS('width', '32px')
await expect(nodeIcons.nth(i)).toHaveCSS('height', '32px')
await expect(nodeLines.nth(i)).toHaveCSS('width', '1px')
await expect(nodeLines.nth(i)).toHaveCSS('height', '88px')
}
}
Expand Down
18 changes: 10 additions & 8 deletions examples/sites/demos/pc/app/wizard/vertical.spec.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -16,17 +16,19 @@ test('垂直流程图', async ({ page }) => {
await expect(nodeNames).toHaveCount(nodeCount)
for (let i = 0; i < nodeCount; i++) {
await expect(nodeNames.nth(i)).toHaveText(names[i])
await expect(nodeLines.nth(i)).toHaveCSS('width', '4px')
await expect(nodeLines.nth(i)).toHaveCSS('height', '88px')
await expect(nodeIcons.nth(i)).toHaveCSS('height', '20px')
await expect(nodeIcons.nth(i)).toHaveCSS('height', '20px')
await expect(nodeLines.nth(i)).toHaveCSS('width', '1px')
await expect(nodeLines.nth(i)).toHaveCSS('height', '60px')
await expect(nodeIcons.nth(i)).toHaveCSS('height', '32px')

if (i === 4) {
await expect(nodeLines.nth(i)).toHaveCSS('background-color', 'rgb(194, 196, 199)')
await expect(nodeIcons.nth(i)).toHaveCSS('background-color', 'rgb(223, 225, 230)')
await expect(nodeLines.nth(i)).toHaveCSS('background-color', 'rgba(0, 0, 0, 0)')
await expect(nodeIcons.nth(i)).toHaveCSS('background-color', 'rgb(240, 240, 240)')
} else if (i === 3) {
await expect(nodeLines.nth(i)).toHaveCSS('background-color', 'rgb(219, 219, 219)')
await expect(nodeIcons.nth(i)).toHaveCSS('background-color', 'rgb(255, 255, 255)')
} else {
await expect(nodeLines.nth(i)).toHaveCSS('background-color', 'rgb(94, 124, 224)')
await expect(nodeIcons.nth(i)).toHaveCSS('background-color', 'rgb(94, 124, 224)')
await expect(nodeLines.nth(i)).toHaveCSS('background-color', 'rgb(25, 25, 25)')
await expect(nodeIcons.nth(i)).toHaveCSS('background-color', 'rgb(255, 255, 255)')
}
}
})
6 changes: 3 additions & 3 deletions packages/theme-saas/src/wizard/index.less
View file
Original file line number Diff line number Diff line change
Expand Up @@ -8,7 +8,7 @@
@svg-wrapper-prefix-cls: ~'@{css-prefix}wizard__chart-svg';

.@{wizard-prefix-cls} {
& &__nomarl {
& &__normal {
.@{wizard-prefix-cls}__steps {
@apply flex;
}
Expand Down Expand Up @@ -142,7 +142,7 @@
& &__steps-item {
&.is-ready {
.name {
@apply text-color-brand;
@apply text-color-brand;
}

.@{wizard-prefix-cls}__chart-icon {
Expand Down Expand Up @@ -284,7 +284,7 @@
}

.@{wizard-prefix-cls} {
.@{wizard-prefix-cls}__nomarl {
.@{wizard-prefix-cls}__normal {
.@{wizard-prefix-cls}__steps-item {
.@{wizard-prefix-cls}__chart-icon {
@apply w-6;
Expand Down
22 changes: 0 additions & 22 deletions packages/theme/src/mixins/wizard.less
View file

This file was deleted.

Loading

0 comments on commit ade7165

Please sign in to comment.