[test] Prefer longhand properties (mui#23445)

dmtrKovalenko · Nov 9, 2020 · 93414bb · 93414bb
1 parent a2ab7fa
commit 93414bb
Show file tree

Hide file tree

Showing 2 changed files with 57 additions and 22 deletions.
diff --git a/packages/material-ui/src/Box/Box.test.js b/packages/material-ui/src/Box/Box.test.js
@@ -59,41 +59,51 @@ describe('<Box />', () => {
   });
 
   it('respect properties order when generating the CSS', function test() {
-    const isMozilla = window.navigator.userAgent.indexOf('Firefox') > -1;
     const isJSDOM = /jsdom/.test(window.navigator.userAgent);
 
-    if (isJSDOM || isMozilla) {
-      // Test fails on Mozilla with just:
-
-      // "border": "",
-      // "border-color": "",
-
+    if (isJSDOM) {
       this.skip();
     }
 
     const testCaseBorderColorWins = render(<Box border={1} borderColor="rgb(0, 0, 255)" />);
 
     expect(testCaseBorderColorWins.container.firstChild).toHaveComputedStyle({
-      border: '1px solid rgb(0, 0, 255)',
+      borderTopWidth: '1px',
+      borderRightWidth: '1px',
+      borderBottomWidth: '1px',
+      borderLeftWidth: '1px',
+      borderTopStyle: 'solid',
+      borderRightStyle: 'solid',
+      borderBottomStyle: 'solid',
+      borderLeftStyle: 'solid',
+      borderTopColor: 'rgb(0, 0, 255)',
+      borderRightColor: 'rgb(0, 0, 255)',
+      borderBottomColor: 'rgb(0, 0, 255)',
+      borderLeftColor: 'rgb(0, 0, 255)',
     });
 
     const testCaseBorderWins = render(<Box borderColor="rgb(0, 0, 255)" border={1} />);
 
     expect(testCaseBorderWins.container.firstChild).toHaveComputedStyle({
-      border: '1px solid rgb(0, 0, 0)',
+      borderTopWidth: '1px',
+      borderRightWidth: '1px',
+      borderBottomWidth: '1px',
+      borderLeftWidth: '1px',
+      borderTopStyle: 'solid',
+      borderRightStyle: 'solid',
+      borderBottomStyle: 'solid',
+      borderLeftStyle: 'solid',
+      borderTopColor: 'rgb(0, 0, 0)',
+      borderRightColor: 'rgb(0, 0, 0)',
+      borderBottomColor: 'rgb(0, 0, 0)',
+      borderLeftColor: 'rgb(0, 0, 0)',
     });
   });
 
   it('respect properties order when generating the CSS from the sx prop', function test() {
-    const isMozilla = window.navigator.userAgent.indexOf('Firefox') > -1;
     const isJSDOM = /jsdom/.test(window.navigator.userAgent);
 
-    if (isJSDOM || isMozilla) {
-      // Test fails on Mozilla with just:
-
-      // "border": "",
-      // "border-color": "",
-
+    if (isJSDOM) {
       this.skip();
     }
 
@@ -102,13 +112,35 @@ describe('<Box />', () => {
     );
 
     expect(testCaseBorderColorWins.container.firstChild).toHaveComputedStyle({
-      border: '1px solid rgb(0, 0, 255)',
+      borderTopWidth: '1px',
+      borderRightWidth: '1px',
+      borderBottomWidth: '1px',
+      borderLeftWidth: '1px',
+      borderTopStyle: 'solid',
+      borderRightStyle: 'solid',
+      borderBottomStyle: 'solid',
+      borderLeftStyle: 'solid',
+      borderTopColor: 'rgb(0, 0, 255)',
+      borderRightColor: 'rgb(0, 0, 255)',
+      borderBottomColor: 'rgb(0, 0, 255)',
+      borderLeftColor: 'rgb(0, 0, 255)',
     });
 
     const testCaseBorderWins = render(<Box sx={{ borderColor: 'rgb(0, 0, 255)', border: 1 }} />);
 
     expect(testCaseBorderWins.container.firstChild).toHaveComputedStyle({
-      border: '1px solid rgb(0, 0, 0)',
+      borderTopWidth: '1px',
+      borderRightWidth: '1px',
+      borderBottomWidth: '1px',
+      borderLeftWidth: '1px',
+      borderTopStyle: 'solid',
+      borderRightStyle: 'solid',
+      borderBottomStyle: 'solid',
+      borderLeftStyle: 'solid',
+      borderTopColor: 'rgb(0, 0, 0)',
+      borderRightColor: 'rgb(0, 0, 0)',
+      borderBottomColor: 'rgb(0, 0, 0)',
+      borderLeftColor: 'rgb(0, 0, 0)',
     });
   });
 });
diff --git a/test/utils/initMatchers.ts b/test/utils/initMatchers.ts
@@ -329,6 +329,9 @@ chai.use((chaiAPI, utils) => {
     const jsdomHint =
       'Styles in JSDOM e.g. from `test:unit` are often misleading since JSDOM does not implement the Cascade nor actual CSS property value computation. ' +
       'If results differ between real browsers and JSDOM, skip the test in JSDOM e.g. `if (/jsdom/.test(window.navigator.userAgent)) this.skip();`';
+    const shorthandHint =
+      'Browsers can compute shorthand properties differently. Prefer longhand properties e.g. `borderTopColor`, `borderRightColor` etc. instead of `border` or `border-color`.';
+    const messageHint = `${jsdomHint}\n${shorthandHint}`;
 
     if (isKarma) {
       // `#{exp}` and `#{act}` placeholders escape the newlines
@@ -338,17 +341,17 @@ chai.use((chaiAPI, utils) => {
       this.assert(
         // TODO Fix upstream docs/types
         (utils as any).eql(actualStyle, expectedStyle),
-        `expected ${styleTypeHint} style of #{this} did not match\nExpected:\n${expected}\nActual:\n${actual}\n\n\n${jsdomHint}`,
-        `expected #{this} to not have ${styleTypeHint} style\n${expected}\n\n\n${jsdomHint}`,
+        `expected ${styleTypeHint} style of #{this} did not match\nExpected:\n${expected}\nActual:\n${actual}\n\n\n${messageHint}`,
+        `expected #{this} to not have ${styleTypeHint} style\n${expected}\n\n\n${messageHint}`,
         expectedStyle,
         actualStyle,
       );
     } else {
       this.assert(
         // TODO Fix upstream docs/types
         (utils as any).eql(actualStyle, expectedStyle),
-        `expected #{this} to have ${styleTypeHint} style #{exp} \n\n${jsdomHint}`,
-        `expected #{this} not to have ${styleTypeHint} style #{exp}${jsdomHint}`,
+        `expected #{this} to have ${styleTypeHint} style #{exp} \n\n${messageHint}`,
+        `expected #{this} not to have ${styleTypeHint} style #{exp}${messageHint}`,
         expectedStyle,
         actualStyle,
         true,