From 617449ddd29af3ca2374bb9333e5f6e96f6ee183 Mon Sep 17 00:00:00 2001 From: MadCcc <1075746765@qq.com> Date: Tue, 19 Apr 2022 11:27:09 +0800 Subject: [PATCH] test: add cssinjs test (#35077) * test: add cssinjs test * test: demoTest test cssinjs * test: update snapshot * test: adjust text --- components/_util/theme/util/roundedArrow.tsx | 2 +- components/badge/style/index.tsx | 4 ++-- components/card/style/index.tsx | 8 +++---- components/carousel/style/index.tsx | 4 ++-- components/descriptions/style/index.tsx | 2 +- components/divider/style/index.tsx | 5 ++++- components/drawer/style/index.tsx | 2 +- .../__tests__/__snapshots__/demo.test.js.snap | 2 +- components/grid/style/index.tsx | 16 +++++++------- components/popover/style/index.tsx | 4 ++-- components/tag/style/index.tsx | 2 +- components/timeline/style/index.tsx | 5 ++++- package.json | 4 ++-- tests/shared/demoTest.tsx | 21 +++++++++++++++++++ 14 files changed, 54 insertions(+), 27 deletions(-) diff --git a/components/_util/theme/util/roundedArrow.tsx b/components/_util/theme/util/roundedArrow.tsx index 4777876665..07cce5df9c 100644 --- a/components/_util/theme/util/roundedArrow.tsx +++ b/components/_util/theme/util/roundedArrow.tsx @@ -20,7 +20,7 @@ export const roundedArrow = (width: number, outerRadius: number, bgColor: string const ey = fy + outerRadius * (1 / Math.sqrt(2)); return { - borderRadius: `0 0 ${radiusBase}px 0`, + borderRadius: { _skip_check_: true, value: `0 0 2px` }, pointerEvents: 'none', '&::before': { diff --git a/components/badge/style/index.tsx b/components/badge/style/index.tsx index 72914e62e0..6a62c59770 100644 --- a/components/badge/style/index.tsx +++ b/components/badge/style/index.tsx @@ -296,7 +296,7 @@ const genSharedBadgeStyle: GenerateStyle = ( ...statusRibbonPreset, [`&${ribbonPrefixCls}-placement-end`]: { insetInlineEnd: -1 * token.marginXS, - borderBottomRightRadius: 0, + borderEndEndRadius: 0, [`${ribbonPrefixCls}-corner`]: { insetInlineEnd: 0, borderColor: 'currentcolor transparent transparent currentcolor', @@ -304,7 +304,7 @@ const genSharedBadgeStyle: GenerateStyle = ( }, [`&${ribbonPrefixCls}-placement-start`]: { insetInlineStart: -1 * token.marginXS, - borderBottomLeftRadius: 0, + borderEndStartRadius: 0, [`${ribbonPrefixCls}-corner`]: { insetInlineStart: 0, borderColor: 'currentcolor currentcolor transparent transparent', diff --git a/components/card/style/index.tsx b/components/card/style/index.tsx index b8ecf5e4c5..3f88aa1ea5 100644 --- a/components/card/style/index.tsx +++ b/components/card/style/index.tsx @@ -90,11 +90,11 @@ const genCardHeadStyle: GenerateStyle = (token): CSSObject => { whiteSpace: 'nowrap', textOverflow: 'ellipsis', - [` + [` > ${componentCls}-typography, > ${componentCls}-typography-edit-content `]: { - left: 0, + insetInlineStart: 0, marginTop: 0, marginBottom: 0, }, @@ -127,9 +127,9 @@ const genCardGridStyle: GenerateStyle = (token): CSSObject => { border: 0, borderRadius: 0, boxShadow: ` - 1px 0 0 0 ${borderColorSplit}, + 1px 0 0 0 ${borderColorSplit}, 0 1px 0 0 ${borderColorSplit}, - 1px 1px 0 0 ${borderColorSplit}, + 1px 1px 0 0 ${borderColorSplit}, 1px 0 0 0 ${borderColorSplit} inset, 0 1px 0 0 ${borderColorSplit} inset; transition: all ${token.motionDurationSlow}s diff --git a/components/carousel/style/index.tsx b/components/carousel/style/index.tsx index 8264b9e167..e660c4b9cc 100644 --- a/components/carousel/style/index.tsx +++ b/components/carousel/style/index.tsx @@ -157,7 +157,7 @@ const genCarouselStyle: GenerateStyle = token => { insetInlineStart: -25, '&::before': { - content: '←', + content: '"←"', }, }, @@ -166,7 +166,7 @@ const genCarouselStyle: GenerateStyle = token => { insetInlineEnd: -25, '&::before': { - content: '→', + content: '"→"', }, }, diff --git a/components/descriptions/style/index.tsx b/components/descriptions/style/index.tsx index 431562f061..1b7e278d57 100644 --- a/components/descriptions/style/index.tsx +++ b/components/descriptions/style/index.tsx @@ -106,7 +106,7 @@ const genDescriptionStyles: GenerateStyle = (token: Descripti textOverflow: 'ellipsis', }, [`${componentCls}-extra`]: { - marginLeft: 'auto', + marginInlineStart: 'auto', color: descriptionsExtraColor, // FIXME: hardcode in v4 fontSize: token.fontSize, diff --git a/components/divider/style/index.tsx b/components/divider/style/index.tsx index f8fbedf64f..c07399538e 100644 --- a/components/divider/style/index.tsx +++ b/components/divider/style/index.tsx @@ -115,7 +115,10 @@ const genSharedDividerStyle: GenerateStyle = (token): CSSObject => }, '&-vertical&-dashed': { - borderWidth: `0 0 0 ${controlLineWidth}px`, + borderInlineStart: controlLineWidth, + borderInlineEnd: 0, + borderBlockStart: 0, + borderBlockEnd: 0, }, '&-plain&-with-text': { diff --git a/components/drawer/style/index.tsx b/components/drawer/style/index.tsx index 4cb28c323a..2a44d0ea14 100644 --- a/components/drawer/style/index.tsx +++ b/components/drawer/style/index.tsx @@ -112,7 +112,7 @@ const genBaseStyle: GenerateStyle = ( }, [`${componentCls}-close`]: { display: 'inline-block', - marginRight: closeRight, + marginInlineEnd: closeRight, color: textColorSecondary, fontWeight: 700, fontSize: fontSizeLG, diff --git a/components/form/__tests__/__snapshots__/demo.test.js.snap b/components/form/__tests__/__snapshots__/demo.test.js.snap index 529fc898d0..a3dd8ebfdb 100644 --- a/components/form/__tests__/__snapshots__/demo.test.js.snap +++ b/components/form/__tests__/__snapshots__/demo.test.js.snap @@ -1304,7 +1304,7 @@ exports[`renders ./components/form/demo/dep-debug.md correctly 1`] = ` class="ant-form ant-form-horizontal" id="debug" > - 0 + 1
diff --git a/components/grid/style/index.tsx b/components/grid/style/index.tsx index 88c586e8ee..f350d95bed 100644 --- a/components/grid/style/index.tsx +++ b/components/grid/style/index.tsx @@ -94,19 +94,19 @@ const genLoopGridColumnsStyle = (token: GridColToken, sizeCls: string): CSSObjec display: 'none', }; gridColumnsStyle[`${componentCls}-push-${i}`] = { - left: 'auto', + insetInlineStart: 'auto', }; gridColumnsStyle[`${componentCls}-pull-${i}`] = { - right: 'auto', + insetInlineEnd: 'auto', }; gridColumnsStyle[`${componentCls}${sizeCls}-push-${i}`] = { - left: 'auto', + insetInlineStart: 'auto', }; gridColumnsStyle[`${componentCls}${sizeCls}-pull-${i}`] = { - right: 'auto', + insetInlineEnd: 'auto', }; gridColumnsStyle[`${componentCls}${sizeCls}-offset-${i}`] = { - marginRight: 0, + marginInlineEnd: 0, }; gridColumnsStyle[`${componentCls}${sizeCls}-order-${i}`] = { order: 0, @@ -118,13 +118,13 @@ const genLoopGridColumnsStyle = (token: GridColToken, sizeCls: string): CSSObjec maxWidth: `${(i / gridColumns) * 100}%`, }; gridColumnsStyle[`${componentCls}${sizeCls}-push-${i}`] = { - left: `${(i / gridColumns) * 100}%`, + insetInlineStart: `${(i / gridColumns) * 100}%`, }; gridColumnsStyle[`${componentCls}${sizeCls}-pull-${i}`] = { - right: `${(i / gridColumns) * 100}%`, + insetInlineEnd: `${(i / gridColumns) * 100}%`, }; gridColumnsStyle[`${componentCls}${sizeCls}-offset-${i}`] = { - marginLeft: `${(i / gridColumns) * 100}%`, + marginInlineStart: `${(i / gridColumns) * 100}%`, }; gridColumnsStyle[`${componentCls}${sizeCls}-order-${i}`] = { order: i, diff --git a/components/popover/style/index.tsx b/components/popover/style/index.tsx index 0c5c058e3a..991dd787d6 100644 --- a/components/popover/style/index.tsx +++ b/components/popover/style/index.tsx @@ -196,7 +196,7 @@ const genPlacementStyle: GenerateStyle = token => { &-placement-rightTop, &-placement-rightBottom `]: { - paddingLeft: popoverDistance, + paddingInlineStart: popoverDistance, }, [` @@ -212,7 +212,7 @@ const genPlacementStyle: GenerateStyle = token => { &-placement-leftTop, &-placement-leftBottom `]: { - paddingRight: popoverDistance, + paddingInlineEnd: popoverDistance, }, [` diff --git a/components/tag/style/index.tsx b/components/tag/style/index.tsx index 92c6767e2d..0d82d00f14 100644 --- a/components/tag/style/index.tsx +++ b/components/tag/style/index.tsx @@ -76,11 +76,11 @@ const genBaseStyle = (token: TagToken): CSSInterpolation => ({ // FIXME: hard code opacity: 1, transition: `all ${token.motionDurationSlow}`, + textAlign: 'start', // RTL '&&-rtl': { direction: 'rtl', - textAlign: 'right', }, '&, a, a:hover': { diff --git a/components/timeline/style/index.tsx b/components/timeline/style/index.tsx index 00c8f22cd3..8a67f0ff68 100644 --- a/components/timeline/style/index.tsx +++ b/components/timeline/style/index.tsx @@ -91,7 +91,10 @@ const genTimelineStyle: GenerateStyle = token => { insetBlockStart: `${ -(token.fontSizeBase * token.lineHeight - token.fontSizeBase) + token.radiusSM }px`, - margin: `0 0 0 ${token.marginLG + token.radiusBase}px`, + marginInlineStart: token.marginLG + token.radiusBase, + marginInlineEnd: 0, + marginBlockStart: 0, + marginBlockEnd: 0, wordBreak: 'break-word', }, diff --git a/package.json b/package.json index 9874913f26..c21d0c5d5c 100644 --- a/package.json +++ b/package.json @@ -115,7 +115,7 @@ ], "dependencies": { "@ant-design/colors": "^6.0.0", - "@ant-design/cssinjs": "~0.0.0-alpha.22", + "@ant-design/cssinjs": "^0.0.0-alpha.26", "@ant-design/icons": "^4.7.0", "@ant-design/react-slick": "~0.28.1", "@babel/runtime": "^7.12.5", @@ -166,7 +166,6 @@ "@ant-design/hitu": "^0.0.0-alpha.13", "@ant-design/tools": "^14.1.0", "@docsearch/css": "^3.0.0", - "docsearch-react-fork": "^0.0.0-alpha.0", "@qixian.cs/github-contributors-list": "^1.0.3", "@stackblitz/sdk": "^1.3.0", "@testing-library/jest-dom": "^5.16.3", @@ -204,6 +203,7 @@ "cross-env": "^7.0.0", "css-minimizer-webpack-plugin": "^3.2.0", "dekko": "^0.2.1", + "docsearch-react-fork": "^0.0.0-alpha.0", "docsearch.js": "^2.6.3", "duplicate-package-checker-webpack-plugin": "^3.0.0", "enquire-js": "^0.2.1", diff --git a/tests/shared/demoTest.tsx b/tests/shared/demoTest.tsx index 8e2a7d143a..4b7a4a3ec3 100644 --- a/tests/shared/demoTest.tsx +++ b/tests/shared/demoTest.tsx @@ -64,6 +64,27 @@ function baseText(doInject: boolean, component: string, options: Options = {}) { testMethod = test.skip; } + if (!doInject) { + testMethod(`cssinjs should not warn in ${file}`, () => { + const errSpy = jest.spyOn(console, 'error'); + + MockDate.set(moment('2016-11-22').valueOf()); + let Demo = require(`../.${file}`).default; // eslint-disable-line global-require, import/no-dynamic-require + // Inject Trigger status unless skipped + Demo = typeof Demo === 'function' ? : Demo; + + // Inject cssinjs cache to avoid create