GitHub/storybook
1
0
Fork 0
mirror of https://github.com/storybookjs/storybook.git synced 2025-04-06 15:31:16 +08:00
Code Issues Packages Projects Releases Wiki Activity

vue3: fix sourceDecoder tests

Browse Source
This commit is contained in:
chakir qatab 2023-01-06 15:17:08 +04:00
parent b59ecc7ce2
commit 22199529ef
2 changed files with 16 additions and 20 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

22
code/renderers/vue3/src/docs/sourceDecorator.test.ts
View File

@ -17,40 +17,40 @@ function generateMultiComponentForArgs(args: Args, slotProps: string[] | null =
describe('generateSource Vue3', () => {
test('boolean true', () => {
expect(generateForArgs({ booleanProp: true })).toMatchInlineSnapshot(
`<Component :booleanProp="booleanProp"/>`
`<Component :booleanProp='booleanProp'/>`
);
});
test('boolean false', () => {
expect(generateForArgs({ booleanProp: false })).toMatchInlineSnapshot(
`<Component :booleanProp="booleanProp"/>`
`<Component :booleanProp='booleanProp'/>`
);
});
test('null property', () => {
expect(generateForArgs({ nullProp: null })).toMatchInlineSnapshot(
`<Component :nullProp="nullProp"/>`
`<Component :nullProp='nullProp'/>`
);
});
test('string property', () => {
expect(generateForArgs({ stringProp: 'mystr' })).toMatchInlineSnapshot(
`<Component :stringProp="stringProp"/>`
`<Component :stringProp='stringProp'/>`
);
});
test('number property', () => {
expect(generateForArgs({ numberProp: 42 })).toMatchInlineSnapshot(
`<Component :numberProp="numberProp"/>`
`<Component :numberProp='numberProp'/>`
);
});
test('object property', () => {
expect(generateForArgs({ objProp: { x: true } })).toMatchInlineSnapshot(
`<Component :objProp="objProp"/>`
`<Component :objProp='objProp'/>`
);
});
test('multiple properties', () => {
expect(generateForArgs({ a: 1, b: 2 })).toMatchInlineSnapshot(`<Component :a="a" :b="b"/>`);
expect(generateForArgs({ a: 1, b: 2 })).toMatchInlineSnapshot(`<Component :a='a' :b='b'/>`);
});
test('1 slot property', () => {
expect(generateForArgs({ content: 'xyz', myProp: 'abc' }, ['content'])).toMatchInlineSnapshot(`
<Component :myProp="myProp">
<Component :myProp='myProp'>
{{ content }}
</Component>
`);
@ -58,7 +58,7 @@ describe('generateSource Vue3', () => {
test('multiple slot property with second slot value not set', () => {
expect(generateForArgs({ content: 'xyz', myProp: 'abc' }, ['content', 'footer']))
.toMatchInlineSnapshot(`
<Component :myProp="myProp">
<Component :myProp='myProp'>
<template #content> {{ content }} </template>
</Component>
`);
@ -66,7 +66,7 @@ describe('generateSource Vue3', () => {
test('multiple slot property with second slot value is set', () => {
expect(generateForArgs({ content: 'xyz', footer: 'foo', myProp: 'abc' }, ['content', 'footer']))
.toMatchInlineSnapshot(`
<Component :myProp="myProp">
<Component :myProp='myProp'>
<template #content> {{ content }} </template>
<template #footer> {{ footer }} </template>
</Component>
@ -75,7 +75,7 @@ describe('generateSource Vue3', () => {
// test mutil components
test('mutil component with boolean true', () => {
expect(generateMultiComponentForArgs({ booleanProp: true })).toMatchInlineSnapshot(
`<Component :booleanProp="booleanProp"/><Component :booleanProp="booleanProp"/>`
`<Component :booleanProp='booleanProp'/><Component :booleanProp='booleanProp'/>`
);
});
test('component is not set', () => {

14
code/renderers/vue3/src/docs/sourceDecorator.ts
View File

@ -9,6 +9,7 @@ import parserTypescript from 'prettier/parser-typescript.js';
import parserHTML from 'prettier/parser-html.js';
// eslint-disable-next-line import/no-extraneous-dependencies
import { isArray } from '@vue/shared';
import { Utils } from 'handlebars';
/**
* Check if the sourcecode should be generated.
*
@ -89,10 +90,6 @@ function propToDynamicSource(
return `:${key}='()=>{}'`;
}
if (typeof value === 'object') {
return `:${key}='${JSON.stringify(value)}'`;
}
return `:${key}='${JSON.stringify(value)}'`;
}
@ -119,7 +116,7 @@ function propValueToSource(val: string | boolean | object | undefined) {
case 'undefined':
return `${val}`;
default:
return `"${val}"`;
return `'${val}'`;
}
}
@ -234,10 +231,9 @@ function createNamedSlots(
.filter((slotProp) => slotValues[slotProps.indexOf(slotProp)])
.map(
(slotProp) =>
` <template #${slotProp}> ${
!byReference
? JSON.stringify(slotValues[slotProps.indexOf(slotProp)])
: `{{ ${slotProp} }}`
` <template #${slotProp}> ${!byReference
? JSON.stringify(slotValues[slotProps.indexOf(slotProp)])
: `{{ ${slotProp} }}`
} </template>`
)
.join('\n');