From 8c8e59eb0e08d43b1d843d6e77b1a499c88606d0 Mon Sep 17 00:00:00 2001
From: siriwatknp <siriwatkunaporn@gmail.com>
Date: Mon, 6 May 2024 15:30:52 +0700
Subject: [PATCH] add sx-runtime test

---
 packages/pigment-css-react/src/sx.js          |  6 +--
 .../tests/sx/sx-runtime.test.js               | 49 +++++++++++++++++++
 2 files changed, 52 insertions(+), 3 deletions(-)
 create mode 100644 packages/pigment-css-react/tests/sx/sx-runtime.test.js

diff --git a/packages/pigment-css-react/src/sx.js b/packages/pigment-css-react/src/sx.js
index e1f54506..94b625d4 100644
--- a/packages/pigment-css-react/src/sx.js
+++ b/packages/pigment-css-react/src/sx.js
@@ -4,10 +4,10 @@ export default function sx(transformedSx, { className, style }) {
 
   function iterateSx(element) {
     if (element) {
-      sxClass += ` ${typeof element === 'string' ? element : element.className}`;
+      sxClass += `${typeof element === 'string' ? element : element.className} `;
       sxVars = {
         ...sxVars,
-        ...(transformedSx && typeof transformedSx !== 'string' ? transformedSx.vars : undefined),
+        ...(element && typeof element !== 'string' ? element.vars : undefined),
       };
     }
   }
@@ -33,7 +33,7 @@ export default function sx(transformedSx, { className, style }) {
   }
 
   return {
-    className: `${sxClass}${className ? ` ${className}` : ''}`,
+    className: `${sxClass}${className ? `${className}` : ''}`,
     style: {
       ...varStyles,
       ...style,
diff --git a/packages/pigment-css-react/tests/sx/sx-runtime.test.js b/packages/pigment-css-react/tests/sx/sx-runtime.test.js
new file mode 100644
index 00000000..12af3871
--- /dev/null
+++ b/packages/pigment-css-react/tests/sx/sx-runtime.test.js
@@ -0,0 +1,49 @@
+import { expect } from 'chai';
+import sx from '../../src/sx';
+
+describe('Pigment CSS - sx runtime', () => {
+  it('merge className and style', () => {
+    expect(sx('foo', { className: 'bar', style: { color: 'red' } })).to.deep.equal({
+      className: 'foo bar',
+      style: { color: 'red' },
+    });
+  });
+
+  it('merge vars', () => {
+    expect(
+      sx(
+        { className: 'foo', vars: { foo: ['foo'] } },
+        { className: 'bar', style: { color: 'red' } },
+      ),
+    ).to.deep.equal({
+      className: 'foo bar',
+      style: { '--foo': 'foo', color: 'red' },
+    });
+  });
+
+  it('support array', () => {
+    const disabled = false;
+    const color = 'secondary';
+    expect(
+      sx(
+        [
+          'foo',
+          disabled
+            ? { className: 'bar', vars: { bar: ['bar', false] } }
+            : { className: 'baz', vars: { baz: ['baz', false] } },
+          color === 'primary' && 'red',
+        ],
+        {
+          className: 'root',
+          style: { color: 'blue' },
+        },
+      ),
+    ).to.deep.equal({
+      className: 'foo baz root',
+      style: {
+        color: 'blue',
+        '--baz': 'baz',
+      },
+    });
+  });
+});