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 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 | 1x 2x 2x 1x 1x 1x 1x 1x 1x 1x 1x | // noinspection DuplicatedCode
import type { StoryObj } from '@storybook/web-components';
import {expect, 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, slice, href, live, body} = {...defs, ...args};
return `
<fieldset>
<legend>${ title }</legend>
<custom-element>
<template><!-- wrapping into template to prevent images loading within DCE declaration -->
<location-element
slice="${ slice }"
${ href ? `href="${ href }"`:''}
live="${ live }"
></location-element>
${ body }
<xhtml:table>
<xhtml:tbody>
<xhtml:tr>
<xhtml:th><h3> URL properties </h3></xhtml:th>
<xhtml:td>{count(//value/@*)}</xhtml:td>
</xhtml:tr>
<apply-templates mode="attrs" select="//${ slice }/value/@*"></apply-templates>
</xhtml:tbody>
</xhtml:table>
<xhtml:table>
<h3> URL parameters </h3>
<apply-templates mode="attrs" select="//${ slice }/value/params/*/*"></apply-templates>
</xhtml:table>
<xsl:template mode="attrs" match="*|@*">
<xhtml:tr>
<xhtml:th>{name()}</xhtml:th>
<xhtml:td data-testid="param-{name()}">{.}</xhtml:td>
</xhtml:tr>
</xsl:template>
</template>
</custom-element>
</fieldset>
`;
}
const meta =
{ title: 'location-element'
, render
};
export default meta;
export const Demo:Story =
{ args : {title: 'live value', live:'live', body:`
<button onclick="history.pushState( {'{}'},'', '/location.html?pushstate=p1&p2=P2#h1')">history.pushState</button>
<button onclick="history.replaceState( {'{}'},'', '/vacation.html?replaceState=r1&r2=R2#h2')">history.replaceState</button>
`}
, play: async ({canvasElement}) =>
{
const canvas = within(canvasElement);
await canvas.findByText(Demo.args!.title as string);
const val = (prop)=> canvas.getByTestId('param-'+prop).textContent.trim()
, byText = txt =>canvas.getByText(txt)
, expectMatch = (l,prop) => expect( val(prop)).toEqual(l[prop],prop)
, locationProps = 'href,origin,protocol,host,hostname,port,pathname,search,hash'.split(',');
locationProps.forEach( prop=>expectMatch(window.location,prop) )
byText('history.pushState').click();
await sleep(100);
expect(val('pathname')).toEqual('/location.html');
expect(val('search')).toEqual('?pushstate=p1&p2=P2');
locationProps.forEach( prop=>expectMatch(window.location,prop) )
byText('history.replaceState').click();
await sleep(100);
expect(val('pathname')).toEqual('/vacation.html');
expect(val('search')).toEqual('?replaceState=r1&r2=R2');
locationProps.forEach( prop=>expectMatch(window.location,prop) )
},
};
export const SrcAttribute:Story =
{ args : {title: 'scr attribute as URL', live:'live'
, href:'/some/path?param1=/story/location-element--href-attribute?p1=P1&p2=P2#h1'
, body:`
<button onclick="document.querySelector('location-element').setAttribute('href','/location.html?a1=A1&b2=B2#h2')">/location.html?a1=A1&b2=B2#h2</button>
<button onclick="document.querySelector('location-element').setAttribute('href','/vacation.html?c1=C1&d2=D2#h3')">/vacation.html?c1=C1&d2=D2#h3</button>
`}
, play: async ({canvasElement}) =>
{
const canvas = within(canvasElement);
await canvas.findByText(SrcAttribute.args!.title as string);
const val = (prop)=> canvas.getByTestId('param-'+prop).textContent.trim()
, byText = txt =>canvas.getByText(txt)
, expectMatch = (l,prop) => expect( val(prop)).toEqual(l[prop],prop)
, locationProps = 'origin,protocol,host,hostname,port'.split(',');
locationProps.forEach( prop=>expectMatch(window.location,prop) )
byText('/location.html?a1=A1&b2=B2#h2').click();
await sleep(10);
expect(val('pathname')).toEqual('/location.html', 'pathname #2');
expect(val('search')).toEqual('?a1=A1&b2=B2');
expect(val('hash')).toEqual('#h2');
expect(val('a1')).toEqual('A1');
expect(val('b2')).toEqual('B2');
byText('/vacation.html?c1=C1&d2=D2#h3').click();
await sleep(10);
expect(val('pathname')).toEqual('/vacation.html', 'pathname #3');
expect(val('search')).toEqual('?c1=C1&d2=D2');
expect(val('hash')).toEqual('#h3');
expect(val('c1')).toEqual('C1');
expect(val('d2')).toEqual('D2');
},
};
//#region unit tests
/* istanbul ignore else -- @preserve */
if( 'test' === import.meta.env.MODE &&
!import.meta.url.includes('skiptest') )
{
const mod = await import('./location-element.test.stories.ts?skiptest');
const { testStoryBook } = await import('./testStoryBook')
const { describe } = await import('vitest')
describe(meta.title, () => testStoryBook( mod, meta ) );
}
//#endregion
|