Skip to content

Commit

Permalink
fix(runtime-core): ensure prop type validation warning shows custom c…
Browse files Browse the repository at this point in the history
…lass names (#7198)

* fix(runtime-core): 

* fix(runtime-core): update

* fix(runtime-core): update reg

* test(runtime-core): add test case for warnings about prop type mismatches

Co-authored-by: Thorsten Luenborg <t.luenborg@googlemail.com>
  • Loading branch information
baiwusanyu-c and LinusBorg authored Nov 25, 2022
1 parent f3e4f03 commit 620327d
Show file tree
Hide file tree
Showing 2 changed files with 38 additions and 2 deletions.
36 changes: 36 additions & 0 deletions packages/runtime-core/__tests__/componentProps.spec.ts
Original file line number Diff line number Diff line change
Expand Up @@ -321,6 +321,42 @@ describe('component props', () => {
expect(`Missing required prop: "num"`).toHaveBeenWarned()
})

test('warn on type mismatch', () => {
class MyClass {

}
const Comp = {
props: {
bool: { type: Boolean },
str: { type: String },
num: { type: Number },
arr: { type: Array },
obj: { type: Object },
cls: { type: MyClass },
fn: { type: Function },
},
setup() {
return () => null
}
}
render(h(Comp, {
bool: 'true',
str: 100,
num: '100',
arr: {},
obj: 'false',
cls: {},
fn: true,
}), nodeOps.createElement('div'))
expect(`Invalid prop: type check failed for prop "bool". Expected Boolean, got String`).toHaveBeenWarned()
expect(`Invalid prop: type check failed for prop "str". Expected String with value "100", got Number with value 100.`).toHaveBeenWarned()
expect(`Invalid prop: type check failed for prop "num". Expected Number with value 100, got String with value "100".`).toHaveBeenWarned()
expect(`Invalid prop: type check failed for prop "arr". Expected Array, got Object`).toHaveBeenWarned()
expect(`Invalid prop: type check failed for prop "obj". Expected Object, got String with value "false"`).toHaveBeenWarned()
expect(`Invalid prop: type check failed for prop "fn". Expected Function, got Boolean with value true.`).toHaveBeenWarned()
expect(`Invalid prop: type check failed for prop "cls". Expected MyClass, got Object`).toHaveBeenWarned()
})

// #3495
test('should not warn required props using kebab-case', async () => {
const Comp = {
Expand Down
4 changes: 2 additions & 2 deletions packages/runtime-core/src/componentProps.ts
Original file line number Diff line number Diff line change
Expand Up @@ -557,8 +557,8 @@ function validatePropName(key: string) {
// use function string name to check type constructors
// so that it works across vms / iframes.
function getType(ctor: Prop<any>): string {
const match = ctor && ctor.toString().match(/^\s*function (\w+)/)
return match ? match[1] : ctor === null ? 'null' : ''
const match = ctor && ctor.toString().match(/^\s*(function|class) (\w+)/)
return match ? match[2] : ctor === null ? 'null' : ''
}

function isSameType(a: Prop<any>, b: Prop<any>): boolean {
Expand Down

0 comments on commit 620327d

Please sign in to comment.