Я пытаюсь протестировать очень простой веб-компонент.Я не знаю, что будет одним из рекомендуемых инструментов для этого.В данный момент я пытаюсь использовать wct и столкнулся с проблемой, которую я не нашел ни у кого, столкнувшейся с такой же проблемой.Тем не менее, я не уверен, что я выбрал соответствующий инструмент для своего теста или использую его неправильно.
Итак, мой прямой вопрос: почему я получаю «хром не удалось максимизировать» во время такого простого теста,Дополнительным и высоко ценимым комментарием будет то, что другие используют для своего собственного теста веб-компонентов.
Консоль:
# wct --npm test -l chrome
Installing and starting Selenium server for local browsers
Selenium server running on port 52093
[BABEL] Note: The code generator has deoptimised the styling of undefined as it exceeds the max of 500KB.
chrome 75 Beginning tests via http://localhost:8081/components/simplest-webcomponent/generated-index.html?cli_browser_id=0
Error { SyntaxError: Unexpected token (1:0)
at Parser.raise (C:\_d\WSs\simplest-webcomponent\node_modules\babylon\lib\index.js:776:15)
at Parser.unexpected (C:\_d\WSs\simplest-webcomponent\node_modules\babylon\lib\index.js:2079:16)
at Parser.parseExprAtom (C:\_d\WSs\simplest-webcomponent\node_modules\babylon\lib\index.js:3157:20)
at Parser.parseExprSubscripts (C:\_d\WSs\simplest-webcomponent\node_modules\babylon\lib\index.js:2757:21)
at Parser.parseMaybeUnary (C:\_d\WSs\simplest-webcomponent\node_modules\babylon\lib\index.js:2736:21)
at Parser.parseExprOps (C:\_d\WSs\simplest-webcomponent\node_modules\babylon\lib\index.js:2643:21)
at Parser.parseMaybeConditional (C:\_d\WSs\simplest-webcomponent\node_modules\babylon\lib\index.js:2615:21)
at Parser.parseMaybeAssign (C:\_d\WSs\simplest-webcomponent\node_modules\babylon\lib\index.js:2562:21)
at Parser.parseExpression (C:\_d\WSs\simplest-webcomponent\node_modules\babylon\lib\index.js:2515:21)
at Parser.parseStatementContent (C:\_d\WSs\simplest-webcomponent\node_modules\babylon\lib\index.js:4076:21) pos: 0, loc: Position { line: 1, column: 0 } }
chrome failed to maximize
chrome 75 ✖ Test Suite Initialization
Unexpected token <
chrome 75 Tests failed: 1 failed tests
Test run ended in failure: 1 failed tests
chrome 75 (0/0/1)
Error: 1 failed tests
веб-компонент:
const template = document.createElement('template');
template.innerHTML = `<input id="inputSimpleRequest"/>`;
class SimpleCall extends HTMLElement {
constructor() {
super();
}
connectedCallback() {
this.attachShadow({mode: 'open'})
this.shadowRoot.appendChild(template.content.cloneNode(true))
const inputSimpleRequest = this.shadowRoot.getElementById('inputSimpleRequest');
const url = 'http://localhost:8081/';
fetch(url)
.then(response => response.json())
.then(data => {
inputSimpleRequest.value = data.somephrase;
})
.catch(error => console.error(error));
}
}
window.customElements.define("simple-call", SimpleCall);
тест:
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<script src="../../webcomponentsjs/webcomponents-lite.js"></script>
<script src="../../web-component-tester/browser.js"></script>
<link rel="import" href="../public/simple-call.js">
</head>
<body>
<simple-call id="fixture"></simple-call>
<script>
suite('<simple-call>', function() {
test('is simple-call', function() {
assert.isTrue(document.getElementById('fixture'));
});
});
</script>
</body>
</html>
package.json
{
"name": "simplest-webcomponent",
"version": "0.1.0",
"private": true,
"proxy": "http://localhost:5000",
"dependencies": {
"express": "^4.17.1",
"mocha": "^6.1.4",
"wct-browser-legacy": "^1.0.2",
"web-component-tester": "^6.9.2"
}
}