mobile-product-touch.test.ts 3.9 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106
  1. import assert from 'node:assert/strict'
  2. import { readFileSync } from 'node:fs'
  3. import test from 'node:test'
  4. import { parse, compileScript, compileTemplate } from '@vue/compiler-sfc'
  5. import ts from 'typescript'
  6. const filename = 'src/components/business/product-form-dialog/index.vue'
  7. const source = readFileSync(new URL('../' + filename, import.meta.url), 'utf8')
  8. const descriptor = parse(source).descriptor
  9. function nodes(node: any): any[] {
  10. return [node, ...(node.children || []).flatMap(nodes)]
  11. }
  12. const elements = nodes(descriptor.template!.ast)
  13. function prop(node: any, name: string, context: Record<string, any>) {
  14. const attr = node.props.find(
  15. (p: any) => p.name === name || (p.name === 'bind' && p.arg?.content === name)
  16. )
  17. if (!attr) return undefined
  18. return attr.type === 6
  19. ? attr.value?.content
  20. : new Function(...Object.keys(context), `return (${attr.exp.content})`)(
  21. ...Object.values(context)
  22. )
  23. }
  24. test('mobile numeric controls use left/right buttons while desktop keeps right controls', () => {
  25. const fields = elements.filter((n) => n.tag === 'el-input-number')
  26. assert.equal(fields.length, 3)
  27. for (const field of fields) {
  28. assert.equal(prop(field, 'controls-position', { isPageVariant: true }), '')
  29. assert.equal(prop(field, 'controls-position', { isPageVariant: false }), 'right')
  30. assert.equal(prop(field, 'min', {}), 0)
  31. }
  32. assert.equal(prop(fields[0], 'max', {}), 100)
  33. assert.equal(prop(fields[0], 'precision', {}), 0)
  34. assert.equal(prop(fields[1], 'precision', {}), undefined)
  35. assert.equal(prop(fields[2], 'precision', {}), undefined)
  36. })
  37. test('mobile brand and alias deletion has a useful accessible name without changing desktop', () => {
  38. const buttons = elements.filter(
  39. (n) => n.tag === 'el-button' && prop(n, 'class', {}) === 'sub-card-remove'
  40. )
  41. assert.equal(buttons.length, 2)
  42. for (const [i, button] of buttons.entries()) {
  43. const row = { brandName: '测试品牌', aliasName: '测试别名' }
  44. assert.equal(
  45. prop(button, 'aria-label', { isPageVariant: true, row, index: 0 }),
  46. i === 0 ? '删除品牌:测试品牌' : '删除别名:测试别名'
  47. )
  48. assert.equal(prop(button, 'aria-label', { isPageVariant: false, row, index: 0 }), undefined)
  49. }
  50. })
  51. test('production add/remove and cancel handlers retain original local state behavior', () => {
  52. const ast = ts.createSourceFile(
  53. 'form.ts',
  54. descriptor.scriptSetup!.content,
  55. ts.ScriptTarget.Latest,
  56. true
  57. )
  58. const names = [
  59. 'handleAddBrand',
  60. 'handleRemoveBrand',
  61. 'handleAddAlias',
  62. 'handleRemoveAlias',
  63. 'handleCancel'
  64. ]
  65. const code = ast.statements
  66. .filter((n) => ts.isFunctionDeclaration(n) && names.includes(n.name!.text))
  67. .map((n) => n.getText(ast))
  68. .join('\n')
  69. const formData = { brands: [] as any[], aliases: [] as any[] }
  70. const events: string[] = []
  71. const visible = { value: true }
  72. const isPageVariant = { value: true }
  73. const handlers = new Function(
  74. 'formData',
  75. 'isPageVariant',
  76. 'emit',
  77. 'visible',
  78. ts.transpile(code) + `;return {${names.join(',')}}`
  79. )(formData, isPageVariant, (event: string) => events.push(event), visible)
  80. handlers.handleAddBrand()
  81. handlers.handleAddAlias()
  82. assert.deepEqual(formData, {
  83. brands: [{ brandName: '', status: 'on' }],
  84. aliases: [{ aliasName: '' }]
  85. })
  86. handlers.handleRemoveBrand(0)
  87. handlers.handleRemoveAlias(0)
  88. assert.deepEqual(formData, { brands: [], aliases: [] })
  89. handlers.handleCancel()
  90. assert.deepEqual(events, ['close'])
  91. assert.equal(visible.value, true)
  92. isPageVariant.value = false
  93. handlers.handleCancel()
  94. assert.equal(visible.value, false)
  95. })
  96. test('product form SFC compiles', () => {
  97. const script = compileScript(descriptor, { id: 'u02' })
  98. const result = compileTemplate({
  99. source: descriptor.template!.content,
  100. filename,
  101. id: 'u02',
  102. compilerOptions: { bindingMetadata: script.bindings }
  103. })
  104. assert.deepEqual(result.errors, [])
  105. })