Press n or j to go to the next uncovered block, b, p or k for the previous block.
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 | 1x 3x 3x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x | import type {StoryObj} from "@storybook/web-components";
import {within, expect} from "@storybook/test";
import '../custom-element/custom-element.js';
import {CharsCountInTextarea, WordCountOnType} from './dom-merge.test.stories';
type CssProps = { title: string; tag: string; style: string; slot: string; payload: string };
const defs = {title: '', tag: '', style: '', slot: '', payload: ''};
type Story = StoryObj<CssProps>;
function render(args: CssProps) {
const {title, tag, style, slot, payload} = { ...defs, ...args };
return `
<fieldset>
<legend>${ title }</legend>
<custom-element ${ tag ? `tag="${tag}"` : ''} >
<template>
<style>
${ style }
</style>
<u><slot>${ slot }</slot></u>
</template>
</custom-element>
${ payload }
</fieldset>
`;
}
const meta = { title: 'Css', render };
export default meta;
const GREEN = `<b style="color:green">green</b>`
const RED = `<i style="color:red">red</i>`
export const StyleDoesNotLeak: Story =
{ args:
{ title: `The default color should stay on this label, the message inside should be ${GREEN}`
, style: `color:green`
, slot: 'text has to be green'
, payload: '<u>no tags</u>'
}
, play: async ({canvasElement}) =>
{ const canvas = within(canvasElement);
const el = await canvas.findByText('text has to be green');
const st = getComputedStyle(el);
const color = st.getPropertyValue('color');
// @ts-ignore
expect(color).to.equal('rgb(0, 128, 0)')
await expect( el.closest('custom-element')).toBeInTheDocument();
const dce = el.closest('custom-element');
await expect( dce.xsltString).toContain('<xsl:stylesheet');
await expect( dce.dce.localName).toEqual('custom-element');
await expect( dce.dce.xsltString).toEqual(dce.xsltString);
await expect( dce.dce.xslt.documentElement.tagName ).toEqual('xsl:stylesheet');
},
};
export const StyleIn2Instances: Story =
{ args:
{ title: `The default color should apply ${GREEN} in all instances`
, style: `color:green`
, slot: 'text has to be green'
, tag: 'dce-2'
, payload: `<u>2 instances:</u> <dce-2 id="dce21"></dce-2> * <dce-2 id="dce22"></dce-2>`
}
, play: async ({canvasElement}) =>
{
await within(canvasElement).findByText('2 instances:');
const color = ( css:string )=>
{ const el = canvasElement.querySelector(css);
const st = getComputedStyle( el! );
return st.getPropertyValue('color');
};
expect( color('legend' ) ).to.not.equal(color('b'));
expect( color('legend' ) ).to.not.equal(color('b'));
expect( color('#dce21 u') ).to .equal(color('b'));
expect( color('#dce22 u') ).to .equal(color('b'));
},
};
// noinspection CssInvalidPseudoSelector
export const OverrideInPayload: Story =
{ args:
{ title: `${GREEN} in instance style can be overridden in payload as ${RED} in 1st instance`
, style: `color:green`
, slot: 'is green'
, tag: 'dce-3'
, payload: `<u>should be</u> ${RED}:
<dce-3 id="dce32">
<template>
<style> color:red; </style>
<u>red</u>
</template>
</dce-3> <br/>
should be ${GREEN}:
<dce-3 id="dce31">green</dce-3> `
}
, play: async ({canvasElement}) =>
{
await within(canvasElement).findByText('should be');
const color = ( css:string )=>
{ const el = canvasElement.querySelector(css);
const st = getComputedStyle( el! );
return st.getPropertyValue('color');
};
expect( color('legend' ) ).to.not.equal(color('b'));
expect( color('#dce31 u') ).to .equal(color('b'));
expect( color('#dce32 u') ).to .equal(color('i'));
},
};
//#region unit tests
/* istanbul ignore else -- @preserve */
if( 'test' === import.meta.env.MODE &&
!import.meta.url.includes('skiptest') )
{
const mod = await import('./css.test.stories.ts?skiptest');
const { testStoryBook } = await import('./testStoryBook')
const { describe } = await import('vitest')
describe(meta.title, () => testStoryBook( mod, meta ) );
}
//#endregion
|