test: warning show component (#19)

* test: warning show component * test: more info * test: rename param
ant-design · Apr 19, 2022 · e41b0c1 · e41b0c1
1 parent 7d4af14
commit e41b0c1
Show file tree

Hide file tree

Showing 3 changed files with 38 additions and 5 deletions.
diff --git a/src/useStyleRegister.tsx b/src/useStyleRegister.tsx
@@ -68,6 +68,7 @@ function isCompoundCSSProperty(value: CSSObject[string]) {
 export const parseStyle = (
   interpolation: CSSInterpolation,
   hashId?: string,
+  path?: string,
   root = true,
   injectHash = false,
 ) => {
@@ -99,6 +100,7 @@ export const parseStyle = (
       styleStr += `@keyframes ${keyframe.getName(hashId)}${parseStyle(
         keyframe.style,
         hashId,
+        path,
         false,
       )}`;
     } else {
@@ -131,6 +133,7 @@ export const parseStyle = (
           styleStr += `${mergedKey}${parseStyle(
             value as any,
             hashId,
+            path,
             false,
             subInjectHash,
           )}`;
@@ -140,7 +143,7 @@ export const parseStyle = (
             process.env.NODE_ENV !== 'production' &&
             (typeof value !== 'object' || !(value as any)?.[SKIP_CHECK])
           ) {
-            styleValidate(key, actualValue);
+            styleValidate(key, actualValue, path);
           }
 
           // 如果是样式则直接插入
@@ -213,7 +216,9 @@ export default function useStyleRegister(
     // Create cache if needed
     () => {
       const styleObj = styleFn();
-      const styleStr = normalizeStyle(parseStyle(styleObj, hashId));
+      const styleStr = normalizeStyle(
+        parseStyle(styleObj, hashId, path.join('-')),
+      );
       const styleId = uniqueHash(fullPath, styleStr);
 
       if (isMergedClientSide) {

diff --git a/src/util.ts b/src/util.ts
@@ -22,13 +22,17 @@ export function token2key(token: any, slat: string): string {
   return hash(`${slat}_${flattenToken(token)}`);
 }
 
-export function warning(message: string) {
-  devWarning(false, `[Ant Design Css-in-js] ${message}`);
+export function warning(message: string, path?: string) {
+  devWarning(
+    false,
+    `[Ant Design CSS-in-JS] ${path ? `Error in ${path}: ` : ''}${message}`,
+  );
 }
 
 export const styleValidate = (
   key: string,
   value: string | number | boolean | null | undefined,
+  path?: string,
 ) => {
   switch (key) {
     case 'content':
@@ -45,6 +49,7 @@ export const styleValidate = (
       ) {
         warning(
           `You seem to be using a value for 'content' without quotes, try replacing it with \`content: '"${value}"'\``,
+          path,
         );
       }
       return;
@@ -68,6 +73,7 @@ export const styleValidate = (
     case 'borderBottomRightRadius':
       warning(
         `You seem to be using non-logical property '${key}' which is not compatible with RTL mode. Please use logical properties and values instead. For more information: https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Logical_Properties.`,
+        path,
       );
       return;
     case 'margin':
@@ -80,6 +86,7 @@ export const styleValidate = (
         if (valueArr.length === 4 && valueArr[1] !== valueArr[3]) {
           warning(
             `You seem to be using '${key}' property with different left ${key} and right ${key}, which is not compatible with RTL mode. Please use logical properties and values instead. For more information: https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Logical_Properties.`,
+            path,
           );
         }
       }
@@ -89,6 +96,7 @@ export const styleValidate = (
       if (value === 'left' || value === 'right') {
         warning(
           `You seem to be using non-logical value '${value}' of ${key}, which is not compatible with RTL mode. Please use logical properties and values instead. For more information: https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Logical_Properties.`,
+          path,
         );
       }
       return;
@@ -118,6 +126,7 @@ export const styleValidate = (
         if (invalid) {
           warning(
             `You seem to be using non-logical value '${value}' of ${key}, which is not compatible with RTL mode. Please use logical properties and values instead. For more information: https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Logical_Properties.`,
+            path,
           );
         }
       }

diff --git a/tests/style.spec.tsx b/tests/style.spec.tsx
@@ -160,10 +160,29 @@ describe('style warning', () => {
     });
     const Demo = () => {
       const [token] = useCacheToken<DerivativeToken>(theme, []);
-      useStyleRegister({ theme, token, path: ['content'] }, () => [genStyle()]);
+      useStyleRegister({ theme, token, path: ['content_skip'] }, () => [
+        genStyle(),
+      ]);
       return <div />;
     };
     render(<Demo />);
     expect(errorSpy).not.toHaveBeenCalled();
   });
+
+  it('should contain component', () => {
+    const genStyle = (): CSSObject => ({
+      content: '',
+    });
+    const Demo = () => {
+      const [token] = useCacheToken<DerivativeToken>(theme, []);
+      useStyleRegister({ theme, token, path: ['component-msg'] }, () => [
+        genStyle(),
+      ]);
+      return <div />;
+    };
+    render(<Demo />);
+    expect(errorSpy).toHaveBeenCalledWith(
+      expect.stringContaining('component-msg'),
+    );
+  });
 });