中文界面里冒出来的英文
投记的一张卡片突然显示 "Current Period Net"。原因是一个 JavaScript 对象里的重复键,没有任何工具会为它报错。
投记的「周期对比」卡片上,有一行写着 Current Period Net。界面其余部分都是中文,语言切换按钮也早就去掉了,按理说不该出现英文。
原因
投记的界面文字放在一个词典对象里,中文和英文各一份。翻中文那份时,我发现中间夹着一整段英文——大概是某次复制粘贴时带进来的。
这段英文里有 4 个键和前面的中文同名。JavaScript 的对象字面量允许重复键,后写的值会覆盖先写的,不报错,也不警告。于是「当前周期净盈亏」被悄悄换成了 "Current Period Net"。另外还有 3 个键只有英文、没有中文,同样直接显示了出来。
修起来很简单:把这 7 处都改回中文。
它是怎么被发现的
不是测试发现的。这段代码语法完全正确,类型上也没有问题,现有的检查都抓不到。
发现它的办法很朴素:用一份虚构的账本数据,把六个工作台一个个渲染出来,逐屏读,找看着不对的地方。那一轮一共找到七个问题,这是其中最隐蔽的一个——其他几个是配色、对齐、间距,一眼就能看出来;这个必须真的去读那行字。
记下来的
- 重复键是一类「写对了,但不是你想的那样」的错误。词典、配置、映射表,凡是手写的大对象都可能有。
- 自动化测试回答的是「代码有没有按我写的运行」,回答不了「用户看到的东西对不对」。后者最便宜的办法,仍然是像用户一样看一遍。
- 下一步值得做的:给词典加一个检查,出现重复键就直接让测试失败。