import { render } from '@react-email/render';
import { Body } from './index.js';
import { marginProperties, paddingProperties } from './margin-properties.js';
describe(' component', () => {
it('renders children correctly', async () => {
const testMessage = 'Test message';
const html = await render({testMessage});
expect(html).toContain(testMessage);
});
it('passes style and other props correctly', async () => {
const style = { backgroundColor: 'red' };
const html = await render(
Test
,
);
expect(html).toContain('style="background-color:red"');
expect(html).toContain('data-testid="body-test"');
});
it('renders correctly', async () => {
const actualOutput = await render(Lorem ipsum);
expect(actualOutput).toMatchInlineSnapshot(
`""`,
);
});
describe('margin resetting behavior', () => {
for (const property of marginProperties) {
it(`should reset the ${property} property when it comes from props`, async () => {
const actualOutput = await render(
Random text,
);
expect(actualOutput).toMatchSnapshot();
});
}
});
it('resets body padding to override client default', async () => {
const actualOutput = await render(
Random text
,
);
const bodyStyle =
actualOutput.match(/]*style="([^"]*)"/)?.[1] ?? '';
const tdStyle = actualOutput.match(/]*style="([^"]*)"/)?.[1] ?? '';
expect(bodyStyle).toContain('padding:0');
expect(bodyStyle).toContain('background-color:pink');
expect(bodyStyle).not.toContain('padding:20px');
expect(tdStyle).toContain('padding:20px');
});
describe('padding resetting behavior', () => {
for (const property of paddingProperties) {
it(`resets the ${property} property on body when it comes from props`, async () => {
const actualOutput = await render(
Random text,
);
const kebabProperty = property.replace(
/[A-Z]/g,
(match) => `-${match.toLowerCase()}`,
);
const bodyStyle =
actualOutput.match(/]*style="([^"]*)"/)?.[1] ?? '';
const tdStyle =
actualOutput.match(/]*style="([^"]*)"/)?.[1] ?? '';
expect(bodyStyle).toContain(`${kebabProperty}:0`);
expect(tdStyle).toContain(`${kebabProperty}:10px`);
});
}
});
});