From 4f9f6e94f1376f961e1a9394fdbf680c215a4e20 Mon Sep 17 00:00:00 2001 From: Sasha Firsov Date: Sat, 20 Apr 2024 10:55:40 -0700 Subject: [PATCH] data-slices.test --- src/mocks/handlers.js | 9 +- stories/data-slices.stories.js | 129 +++++++++++++++ stories/dom-merge.stories.js | 2 +- stories/http-request.stories.js | 21 +-- stories/local-storage.stories.js | 4 +- stories/location-element.stories.js | 4 +- stories/parameters.stories.js | 2 +- test/data-slices-mouse.test.js | 50 ++++++ test/data-slices.test.js | 234 ++++++++++++++++++++++++++++ test/dom-merge.test.js | 4 +- test/http-request.test.js | 11 +- 11 files changed, 441 insertions(+), 29 deletions(-) create mode 100644 stories/data-slices.stories.js create mode 100644 test/data-slices-mouse.test.js create mode 100644 test/data-slices.test.js diff --git a/src/mocks/handlers.js b/src/mocks/handlers.js index bf1aeac..300486e 100644 --- a/src/mocks/handlers.js +++ b/src/mocks/handlers.js @@ -2,20 +2,21 @@ import { rest } from 'msw' import pokemonsMock from "../../stories/pokemons.mock"; +const resolveAsPokemons = (res,ctx) => res(ctx.json(pokemonsMock)); + export const handlers = [ rest.get("*/api/v2/pokemon", (req, res, ctx) => { return res(ctx.json(pokemonsMock)); }), rest.get("*/noreturn", (req, res, ctx) => - { return new Promise((resolve)=>{ setTimeout(()=> - { resolve(res(ctx.json(pokemonsMock))) - }, 10000)}); // 1 second to be able to catch the initial state before the full data returned; + { return new Promise((resolve)=>{ setTimeout(()=> resolve( resolveAsPokemons(res,ctx) ), 10000)}); + // 10 seconds to be able to catch the initial state before the full data returned; }), rest.get("*/reflect", (req, res, ctx) => { const headersMap = {}; [...req.headers.entries()].map( ([key,val]) => headersMap[key] = val ); ctx.set(headersMap); - return res(ctx.json(pokemonsMock)); + return resolveAsPokemons(res,ctx); }) ]; diff --git a/stories/data-slices.stories.js b/stories/data-slices.stories.js new file mode 100644 index 0000000..8aea5f7 --- /dev/null +++ b/stories/data-slices.stories.js @@ -0,0 +1,129 @@ +import '../src/custom-element.js'; + +export default +{ title: 'Events and data Slice', component: 'custom-element', argTypes: + { title: { control: 'text', defaultValue: 'simple aDceTemplate' } + , description: { control: 'text', defaultValue: '' } + , aDceTemplate: { control: 'text', defaultValue: `Hi` } + } +}; + +function Template( { title, description, aDceTemplate, tag, dce } ) +{ + return ` +
+ ${ title } + + + +

${description}

+
${dce} +
+ `; +} + +function demo( title, description, aDceTemplate, tag='', dce='' ) +{ const ret = Template.bind( {} ); + ret.args = { title, description, aDceTemplate,tag,dce} + return ret; +} +export const SliceInitializationChangeOnEvent = demo( `A. slice initialization, change on event`, +'initial value should be 0; + and - should change the number in input field', +` + + + {//clickcount} +`); + +export const EventWithinSlice = demo( `B. event within slice`, +'move the mouse over TEXTAREA and click to see slice and slice event changed', +` +
+//slice/s : {//slice/s}
+//slice/s/event/@offsetY: {//slice/s/event/@offsetY}
+event type: {//slice/s/event/@type} +`); + +export const SliceChangeOnEvent = demo( `1. slice change on event. 1:1 slice⮂value`, +'initial value blank; type and unfocus to see slice changed', +` + //slice/typed : {//slice/typed} +`); + +export const InitDefaultEvent = demo( `2. initial slice value, slice change on event. slice⮂value, w/ initial`, +'initial value from input; type and unfocus to see slice changed', +` + //slice/s : {//slice/s} +`); + +export const InitAndKeyUp = demo( `3. initial slice value, slice change on event. slice⮂value, w/ initial`, +'initial value from input; type to see slice changed', +` + //slice/s : {//slice/s} +`); + +export const InitByAttribute = demo( `4. initial slice value from attribute, slice change on event.`, +'initial value from input; type to see slice changed', +` +😁 + +attribute 'a' : {$a} +//slice/s : {//slice/s} +`,'dce-1',' '); + +export const InitByAttributeChangeByExpression = demo( `5. initial slice value from attribute, slice change on event.`, +'initial value from input as \'xB\'; type and unfocus to see slice changed', +` + +//slice/s : {//slice/s} +`); + +export const InitByInputValueByButton = demo( `6. initial slice value from input, button ignored till change on click.`, +'initial value from input as \'anonymous\'; on button click change to \'broccoli\'', +` + + +{//nickname} +`); + +export const InitBySliceElement = demo( `7. initial slice value from SLICE element, button ignored till change on click.`, +'synthetic SLICE element serves as initial value holder', +` + +//clickcount : {//clickcount} +`); + +export const InitByFewSliceElement = demo( `8. multiple slices by SLICE element, button ignored till change on click.`, +'few synthetic SLICE elements serve as initial value holder', +` +
+//clicked : {//clicked}
+//focused : {//focused} +`); + +export const SlicePointsAttribute = demo( `9. slice in attribute`, +'initial attribute value should be smile as emoji and :) on blur from input it should be updated from value', +` + + +Type and unfocus to update emotion attribute: {emotion} +`,'emotional-element', ` + + +`); diff --git a/stories/dom-merge.stories.js b/stories/dom-merge.stories.js index e0e583e..2a11974 100644 --- a/stories/dom-merge.stories.js +++ b/stories/dom-merge.stories.js @@ -41,7 +41,7 @@ TextareaOnBlur.args = export const InputOnChange = Template.bind( {} ); InputOnChange.args = { title: 'input value, type and observe char count update on keyup' -, slot: ` +, slot: ` Character count: {string-length(//slice/txt)} diff --git a/stories/http-request.stories.js b/stories/http-request.stories.js index 0fc1f06..b38d330 100644 --- a/stories/http-request.stories.js +++ b/stories/http-request.stories.js @@ -25,10 +25,11 @@ function Template( { title, tag , slice, url } ) url="${url}" slice="${slice}" > - +

Pokemon Count: {count(/datadom/slice/${slice}//results)}

+

loading...

 - + @@ -66,7 +67,7 @@ LifecycleInitialized = ()=>` type="text" > Content of //slice/request_slice before response available - +
    @@ -106,14 +107,14 @@ from ${url}

    Samples

    - - - - - - + + + + + +
    //slice/request_slice/request/headers/@mode
    //slice/request_slice/response/headers/@content-type
    //slice/request_slice/response/@status
    //slice/request_slice/value/request/headers/@mode
    //slice/request_slice/value/response/headers/@content-type
    //slice/request_slice/value/response/@status
    - +
      diff --git a/stories/local-storage.stories.js b/stories/local-storage.stories.js index 7a00de3..288a464 100644 --- a/stories/local-storage.stories.js +++ b/stories/local-storage.stories.js @@ -50,7 +50,7 @@ LocalStorageLive.args = value: '{"cherries": 12, "lemons":1 }', tag: 'ls-live-component', body: ` - + @@ -59,7 +59,7 @@ LocalStorageLive.args = 🤔 - + ` diff --git a/stories/location-element.stories.js b/stories/location-element.stories.js index 463a916..ed74a4d 100644 --- a/stories/location-element.stories.js +++ b/stories/location-element.stories.js @@ -36,7 +36,7 @@ function Template( { title, tag, src, slice, live } )