如何为期望某些全局变量存在的 javascript 'plugin' (iframe) 编写单元测试
How to write unit tests for for javascript 'plugin' (iframe) that expects certain global variables to be present
我正在研究 Trello Power Up. The way they work is they load an iFrame you provide with some script
tags that contain your custom code. You can see a working example here。结果是,当您的代码 运行 时,会出现您与之交互的某些 "global"(甚至不确定这是不是正确的词)对象。例如:
const Promise = TrelloPowerUp.Promise;
TrelloPowerUp.initialize({
'card-buttons': (t, options) => {
return [{
text: 'Awesome Button',
}];
}, 'show-settings': (t, options) =>{
return t.popup({
title: 'Settings',
url: './settings.html',
height: 184 // we can always resize later, but if we know the size in advance, its good to tell Trello
});
}
});
我开始给这个项目增加一点复杂性,我的习惯是使用 tdd/ 编写单元测试。我不知道如何测试这段代码。
在我 运行 摩卡测试之前,有什么方法可以提供模拟 'TrelloPowerUp' 全局对象吗?我试过了:
TrelloPowerUp = {}
require('./client.js');
(client.js 脚本一导入就 运行s...)不出所料,这没有用。
我想我可以从另一个有单元测试的文件导入,以尽量减少不可测试的代码,比如:
从“./TrelloInitActions”导入 TrelloInitActions
const Promise = TrelloPowerUp.Promise;
TrelloPowerUp.initialize({
'card-buttons': TrelloInitActions.initButtons
}, 'show-settings': TrelloInitActions.showSettings
});
在此先感谢您的帮助!
为了解决这个问题,我正在使用 React,如果你发现自己处于这种情况,请查看 https://www.npmjs.com/package/trello-react-scripts
我正在研究 Trello Power Up. The way they work is they load an iFrame you provide with some script
tags that contain your custom code. You can see a working example here。结果是,当您的代码 运行 时,会出现您与之交互的某些 "global"(甚至不确定这是不是正确的词)对象。例如:
const Promise = TrelloPowerUp.Promise;
TrelloPowerUp.initialize({
'card-buttons': (t, options) => {
return [{
text: 'Awesome Button',
}];
}, 'show-settings': (t, options) =>{
return t.popup({
title: 'Settings',
url: './settings.html',
height: 184 // we can always resize later, but if we know the size in advance, its good to tell Trello
});
}
});
我开始给这个项目增加一点复杂性,我的习惯是使用 tdd/ 编写单元测试。我不知道如何测试这段代码。
在我 运行 摩卡测试之前,有什么方法可以提供模拟 'TrelloPowerUp' 全局对象吗?我试过了:
TrelloPowerUp = {}
require('./client.js');
(client.js 脚本一导入就 运行s...)不出所料,这没有用。
我想我可以从另一个有单元测试的文件导入,以尽量减少不可测试的代码,比如:
从“./TrelloInitActions”导入 TrelloInitActions
const Promise = TrelloPowerUp.Promise;
TrelloPowerUp.initialize({
'card-buttons': TrelloInitActions.initButtons
}, 'show-settings': TrelloInitActions.showSettings
});
在此先感谢您的帮助!
为了解决这个问题,我正在使用 React,如果你发现自己处于这种情况,请查看 https://www.npmjs.com/package/trello-react-scripts