test: add cssinjs test (#35077)

* test: add cssinjs test * test: demoTest test cssinjs * test: update snapshot * test: adjust text
2025-06-07 01:13:58 +08:00 · 2022-04-19 11:27:09 +08:00 · 2022-04-19 11:27:09 +08:00 · 617449ddd2
commit 617449ddd2
parent 16fb0e88a3
14 changed files with 54 additions and 27 deletions
--- 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': {
--- a/components/badge/style/index.tsx
+++ b/components/badge/style/index.tsx
@ -296,7 +296,7 @@ const genSharedBadgeStyle: GenerateStyle<BadgeToken> = (
      ...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<BadgeToken> = (
      },
      [`&${ribbonPrefixCls}-placement-start`]: {
        insetInlineStart: -1 * token.marginXS,
-        borderBottomLeftRadius: 0,
+        borderEndStartRadius: 0,
        [`${ribbonPrefixCls}-corner`]: {
          insetInlineStart: 0,
          borderColor: 'currentcolor currentcolor transparent transparent',
--- a/components/card/style/index.tsx
+++ b/components/card/style/index.tsx
@ -90,11 +90,11 @@ const genCardHeadStyle: GenerateStyle<CardToken> = (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<CardToken> = (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
--- a/components/carousel/style/index.tsx
+++ b/components/carousel/style/index.tsx
@ -157,7 +157,7 @@ const genCarouselStyle: GenerateStyle<CarouselToken, CSSObject> = token => {
        insetInlineStart: -25,

        '&::before': {
-          content: '←',
+          content: '"←"',
        },
      },

@ -166,7 +166,7 @@ const genCarouselStyle: GenerateStyle<CarouselToken, CSSObject> = token => {
        insetInlineEnd: -25,

        '&::before': {
-          content: '→',
+          content: '"→"',
        },
      },

--- a/components/descriptions/style/index.tsx
+++ b/components/descriptions/style/index.tsx
@ -106,7 +106,7 @@ const genDescriptionStyles: GenerateStyle<DescriptionsToken> = (token: Descripti
        textOverflow: 'ellipsis',
      },
      [`${componentCls}-extra`]: {
-        marginLeft: 'auto',
+        marginInlineStart: 'auto',
        color: descriptionsExtraColor,
        // FIXME: hardcode in v4
        fontSize: token.fontSize,
--- a/components/divider/style/index.tsx
+++ b/components/divider/style/index.tsx
@ -115,7 +115,10 @@ const genSharedDividerStyle: GenerateStyle<DividerToken> = (token): CSSObject =>
      },

      '&-vertical&-dashed': {
-        borderWidth: `0 0 0 ${controlLineWidth}px`,
+        borderInlineStart: controlLineWidth,
+        borderInlineEnd: 0,
+        borderBlockStart: 0,
+        borderBlockEnd: 0,
      },

      '&-plain&-with-text': {
--- a/components/drawer/style/index.tsx
+++ b/components/drawer/style/index.tsx
@ -112,7 +112,7 @@ const genBaseStyle: GenerateStyle<DrawerToken> = (
                },
                [`${componentCls}-close`]: {
                  display: 'inline-block',
-                  marginRight: closeRight,
+                  marginInlineEnd: closeRight,
                  color: textColorSecondary,
                  fontWeight: 700,
                  fontSize: fontSizeLG,
--- 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
  <div
    class="ant-row ant-form-item"
  >
--- 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,
--- a/components/popover/style/index.tsx
+++ b/components/popover/style/index.tsx
@ -196,7 +196,7 @@ const genPlacementStyle: GenerateStyle<PopoverToken> = token => {
        &-placement-rightTop,
        &-placement-rightBottom
      `]: {
-        paddingLeft: popoverDistance,
+        paddingInlineStart: popoverDistance,
      },

      [`
@ -212,7 +212,7 @@ const genPlacementStyle: GenerateStyle<PopoverToken> = token => {
        &-placement-leftTop,
        &-placement-leftBottom
      `]: {
-        paddingRight: popoverDistance,
+        paddingInlineEnd: popoverDistance,
      },

      [`
--- 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': {
--- a/components/timeline/style/index.tsx
+++ b/components/timeline/style/index.tsx
@ -91,7 +91,10 @@ const genTimelineStyle: GenerateStyle<TimelineToken, CSSObject> = 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',
        },

--- 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",
--- 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 /> : Demo;
+
+        // Inject cssinjs cache to avoid create <style /> element
+        Demo = <StyleProvider cache={createCache()}>{Demo}</StyleProvider>;
+
+        render(Demo);
+
+        expect(errSpy).not.toHaveBeenCalledWith(expect.stringContaining('[Ant Design CSS-in-JS]'));
+        MockDate.reset();
+
+        errSpy.mockRestore();
+      });
+    }
+
    // function doTest(name: string, openTrigger = false) {
    testMethod(
      doInject ? `renders ${file} extend context correctly` : `renders ${file} correctly`,