timered-counter/dist/stories/story-parts/slots.js

Make the value change more vivid and natural

import { html } from 'lit';
import { classMap } from 'lit/directives/class-map.js';
import { expect } from '@storybook/test';
export const render = (args) => html `<timered-counter
    value=${args.value}
    class=${classMap({ [args.className]: true })}
  >
    <span slot="prefix">prefix</span>
    <span slot="suffix">suffix</span>
    <span slot="part-suffix-0">suffix</span>
  </timered-counter>`;
export async function slots(context, { counter, }) {
    const { step } = context;
    await step('Check slots are rendered', async () => {
        const prefix = counter.shadowRoot
            ?.querySelector('timered-counter-roller')
            ?.shadowRoot?.querySelector('.roller__prefix slot');
        const suffix = counter.shadowRoot
            ?.querySelector('timered-counter-roller')
            ?.shadowRoot?.querySelector('.roller__suffix slot');
        await expect((prefix?.assignedElements()[0])
            .assignedElements()[0]
            .textContent?.trim()).toBe('prefix');
        await expect((suffix?.assignedElements()[0])
            .assignedElements()[0]
            .textContent?.trim()).toBe('suffix');
    });
}
//# sourceMappingURL=slots.js.map