Skip to content
Merged
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
Original file line number Diff line number Diff line change
@@ -1,7 +1,15 @@
import type { LightningElement, Plugin } from '@plextv/react-lightning';
import { afterAll, beforeAll, describe, expect, it, vi } from 'vitest';

import { cssClassNameTransformPlugin } from './cssClassNameTransformPlugin';

type TestProps = { className?: string; style: Record<string, string> };

// transformProps is typed against the element prop union; the plugin only
// reads className/style, so the test payloads cast through.
const transform = (plugin: Plugin<LightningElement>, instance: object, props: TestProps) =>
plugin.transformProps?.(instance as never, props as never) as TestProps | null | undefined;

const fakeDocument = {
styleSheets: [
{
Expand Down Expand Up @@ -31,9 +39,9 @@ afterAll(() => {
describe('cssClassNameTransformPlugin', () => {
it('resolves className rules into the style object', () => {
const plugin = cssClassNameTransformPlugin();
const instance = {} as never;
const instance = {};

const out = plugin.transformProps?.(instance, {
const out = transform(plugin, instance, {
className: 'r-col',
style: { display: 'flex' },
});
Expand All @@ -47,16 +55,16 @@ describe('cssClassNameTransformPlugin', () => {

it('keeps class-derived styles on updates that omit className', () => {
const plugin = cssClassNameTransformPlugin();
const instance = {} as never;
const instance = {};

plugin.transformProps?.(instance, {
transform(plugin, instance, {
className: 'r-col',
style: { display: 'flex' },
});

// className is unchanged so the update payload omits it; the resolved class
// styles must still ride along or downstream consumers see them as removed.
const out = plugin.transformProps?.(instance, {
const out = transform(plugin, instance, {
style: { display: 'none' },
});

Expand All @@ -69,20 +77,20 @@ describe('cssClassNameTransformPlugin', () => {

it('re-resolves when className changes', () => {
const plugin = cssClassNameTransformPlugin();
const instance = {} as never;
const instance = {};

plugin.transformProps?.(instance, { className: 'r-col', style: {} });
const out = plugin.transformProps?.(instance, { className: 'r-row', style: {} });
transform(plugin, instance, { className: 'r-col', style: {} });
const out = transform(plugin, instance, { className: 'r-row', style: {} });

expect(out?.style).toMatchObject({ flexDirection: 'row' });
});

it('passes through instances that never had a className', () => {
const plugin = cssClassNameTransformPlugin();
const instance = {} as never;
const instance = {};

const props = { style: { display: 'none' } };
const out = plugin.transformProps?.(instance, props);
const props: TestProps = { style: { display: 'none' } };
const out = transform(plugin, instance, props);

expect(out).toBe(props);
});
Expand Down
Loading