Skip to content

Commit

Permalink
add sx-jsx test case
Browse files Browse the repository at this point in the history
  • Loading branch information
siriwatknp committed Apr 26, 2024
1 parent 6e11cd3 commit 6c09a12
Show file tree
Hide file tree
Showing 4 changed files with 127 additions and 0 deletions.
55 changes: 55 additions & 0 deletions packages/pigment-css-react/tests/sx/fixtures/sx-jsx.input.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,55 @@
function App() {
return /*#__PURE__*/ _jsx(
'div',
{
sx: {
display: 'flex',
flexDirection: 'column',
},
children: 'Test',
},
void 0,
false,
{
fileName: '',
lineNumber: 11,
columnNumber: 11,
},
this,
);
}

function App2() {
return /*#__PURE__*/ _jsx('div', {
sx: {
display: 'flex',
flexDirection: 'column',
},
children: /*#__PURE__*/ _jsx('p', {
sx: {
color: 'red',
},
children: 'Test',
}),
});
}

function App3(props) {
return /*#__PURE__*/ _jsx('div', {
sx: props.disabled
? {
opacity: 0.4,
}
: {
color: 'red',
},
children: 'test',
});
}

function App4(props) {
return /*#__PURE__*/ _jsx('div', {
sx: props.variant === 'secondary' && { color: props.isRed ? 'red' : 'blue' },
children: 'test',
});
}
11 changes: 11 additions & 0 deletions packages/pigment-css-react/tests/sx/fixtures/sx-jsx.output.css
Original file line number Diff line number Diff line change
@@ -0,0 +1,11 @@
.s5molx8 {
display: flex;
flex-direction: column;
}
.s7fszdm {
display: flex;
flex-direction: column;
}
.s2bbd3t {
color: red;
}
47 changes: 47 additions & 0 deletions packages/pigment-css-react/tests/sx/fixtures/sx-jsx.output.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,47 @@
import { sx as _sx, sx as _sx2, sx as _sx3 } from '@pigment-css/react';
function App() {
return /*#__PURE__*/ _jsx(
'div',
{
children: 'Test',
..._sx('s5molx8', {}),
},
void 0,
false,
{
fileName: '',
lineNumber: 11,
columnNumber: 11,
},
this,
);
}
function App2() {
return /*#__PURE__*/ _jsx('div', {
children: /*#__PURE__*/ _jsx('p', {
children: 'Test',
..._sx3('s2bbd3t', {}),
}),
..._sx2('s7fszdm', {}),
});
}
function App3(props) {
return /*#__PURE__*/ _jsx('div', {
sx: props.disabled
? {
opacity: 0.4,
}
: {
color: 'red',
},
children: 'test',
});
}
function App4(props) {
return /*#__PURE__*/ _jsx('div', {
sx: props.variant === 'secondary' && {
color: props.isRed ? 'red' : 'blue',
},
children: 'test',
});
}
14 changes: 14 additions & 0 deletions packages/pigment-css-react/tests/sx/sx.test.ts
Original file line number Diff line number Diff line change
Expand Up @@ -46,6 +46,20 @@ describe('Pigment CSS - sx prop', () => {
expect(output.css).to.equal(fixture.css);
});

it('jsx sx-prop with logical and conditional expressions', async () => {
const { output, fixture } = await runTransformation(
path.join(__dirname, 'fixtures/sx-jsx.input.js'),
{
themeArgs: {
theme,
},
},
);

expect(output.js).to.equal(fixture.js);
expect(output.css).to.equal(fixture.css);
});

it('sx prop with theme spread', async () => {
const { output, fixture } = await runTransformation(
path.join(__dirname, 'fixtures/sxProps2.input.js'),
Expand Down

0 comments on commit 6c09a12

Please sign in to comment.