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 | 1x 2x 2x 1x 1x 1x 1x 1x 1x 1x 1x | // noinspection DuplicatedCode
import type {StoryObj} from '@storybook/web-components';
import {expect, getByTestId, userEvent, within} from '@storybook/test';
import '../custom-element/custom-element.js';
import '../custom-element/location-element.js';
type TProps = { title: string; slice: string; href: string; live: string; body: string };
const defs: TProps =
{
title: ''
, slice: 'url-slice'
, href: ''
, live: ''
, body: ``
};
type Story = StoryObj<TProps>;
function sleep(ms: number) {
return new Promise((resolve) => setTimeout(resolve, ms));
}
function render(args: TProps) {
const {title, body} = {...defs, ...args};
return `
<fieldset>
<legend>${title}</legend>
<custom-element>
<template><!-- wrapping into template to prevent images loading within DCE declaration -->
${body}
</template>
</custom-element>
</fieldset>
`;
}
const meta =
{
title: 'location-element set URL'
, render
};
export default meta;
export const DynamicSrc: Story =
{
args: {
title: '1. Set the page URL by location.hash', body: `
<button value="#dce1" slice="set-button" slice-event="click">#dce1</button>
<button value="#dce2" slice="set-button" slice-event="click">#dce2</button>
<location-element method="location.href" src="{//set-button/@value}"></location-element>`
}
, play: async ({canvasElement}) => {
const canvas = within(canvasElement);
await canvas.findByText(DynamicSrc.args!.title as string);
await userEvent.click(canvas.getByText('#dce1'));
await sleep(1);
await expect(window.location.hash).toEqual('#dce1')
await userEvent.click(canvas.getByText('#dce2'));
await sleep(1);
await expect(window.location.hash).toEqual('#dce2')
},
};
export const DynamicMethod: Story =
{
args: {
title: '2. Set the page URL by method', body: `
<style>
button{ display: block; width: 100%; }
</style>
<button value="location.href" slice="set-button" slice-event="click"> location.href </button>
<button value="location.hash" slice="set-button" slice-event="click"> location.hash </button>
<button value="location.assign" slice="set-button" slice-event="click"> location.assign </button>
<button value="location.replace" slice="set-button" slice-event="click"> location.replace </button>
<button value="history.pushState" slice="set-button" slice-event="click"> history.pushState </button>
<button value="history.replaceState" slice="set-button" slice-event="click"> history.replaceState </button>
<location-element method="{//set-button/@value}" ></location-element>`
}
, play: async ({canvasElement}) => {
const canvas = within(canvasElement);
const le = canvasElement.querySelector('location-element');
await canvas.findByText(DynamicMethod.args!.title as string);
async function testHash(hash, text) {
le.setAttribute('method', ''); // to prevent immediate URL change
le.setAttribute('src', hash);
await userEvent.click(canvas.getByText(text));
await sleep(1);
await expect(window.location.hash).toEqual(hash)
}
await testHash('#byHash', 'location.hash');
await testHash('#byhref', 'location.href');
await testHash('#byassign', 'location.assign');
await testHash('#byreplace', 'location.replace');
await testHash('#by.history.pushState', 'history.pushState');
await testHash('#by.history.replaceState', 'history.replaceState');
},
};
//#region unit tests
/* istanbul ignore else -- @preserve */
if ('test' === import.meta.env.MODE &&
!import.meta.url.includes('skiptest')) {
const mod = await import('./set-url.test.stories.ts?skiptest');
const {testStoryBook} = await import('./testStoryBook')
const {describe} = await import('vitest')
describe(meta.title, () => testStoryBook(mod, meta));
}
//#endregion
|