我可以在测试中等待 connectedCallback finsh 工作吗？
Can I wait on connectedCallback finsh work in tests?
我正在尝试测试一些代码，我知道它会按预期工作，但我不知道在那种情况下我该如何编写测试，因为我的属性总是在测试完成后设置？
一般来说，我创建了一个抽象 WebComponent class 需要由我的自定义 Web 组件继承而不是 HTMLElement。整个抽象 class 对我所有的网络组件都有一些共同的逻辑，例如，如果用户通过构造函数传递任何道具，则设置道具。
我创建了一个简单的示例来展示我想要实现的目标。在下面的示例中，我正在创建一个 HelloWorld 组件，该组件有一个 observedAttributes 即 heading-content（将在 <h1></h1>[=63 中显示的值=] HelloWorld 组件模板）。如果用户通过构造函数设置 heading-content，那么我将把这个值保存在 this.propsContent 中。然后在 connectedCallback 被触发后我设置这个道具 setContentFromProps 触发 attributeChangedCallback 剩下的由这个回调完成。
是否可以以某种方式等到这些操作结束？
例子
HelloWorld分量：
const template = `<h1 id="hello-world-content"></h1>`;
export class HelloWorld extends HTMLElement {
static TAG = 'hello-world';
static observedAttributes = ['heading-content'];
constructor(props) {
super();
this.attachShadow({ mode: 'open' });
this.shadowRoot.innerHTML = template;
this.headingContent = null;
this.propsContent = props;
this.helloHeading = this.shadowRoot.querySelector('#hello-world-content');
}
connectedCallback() {
this.setContentFromProps();
}
attributeChangedCallback(name, oldValue, newValue) {
if (name === 'heading-content') {
this.helloHeading.textContent = newValue;
this.headingContent = newValue;
}
}
setContentFromProps() {
this.setAttribute('heading-content', this.propsContent);
}
}
customElements.define(HelloWorld.TAG, HelloWorld);
HelloWorld 单元测试：
import 'jest';
import { HelloWorld } from './HelloWorld';
describe(HelloWorld.name, () => {
test('should set heading content to given value', () => {
const helloWorld = new HelloWorld('dupa');
expect(helloWorld.headingContent).toBe('dupa');
});
});
测试结果：
expect(received).toBe(expected) // Object.is equality
Expected: "dupa"
Received: null
不是没有添加代码；没有 allAttributesChangesDone 回调。除非您事先知道需要更改什么，否则无法编写。
I see, so it is impossible. Anyway thank you for your answer
如果你等到事件循环完成；您可以相当确定所有更新都已完成...除非有异步代码进行更新...
“事件循环到底是什么：”https://youtube.com/watch?v=8aGhZQkoFbQ&vl=en
That's true but If I wait when EventLoop will become free than my tests can take much more time. Actually, now after I thought more about that my test is 'not working' (in my opinion a few hours ago) I can say I was mistaken and the test works correctly, and I should take care of the case when someone is trying to access the attribute before it is initialized.
我正在尝试测试一些代码，我知道它会按预期工作，但我不知道在那种情况下我该如何编写测试，因为我的属性总是在测试完成后设置？
一般来说，我创建了一个抽象 WebComponent class 需要由我的自定义 Web 组件继承而不是 HTMLElement。整个抽象 class 对我所有的网络组件都有一些共同的逻辑，例如，如果用户通过构造函数传递任何道具，则设置道具。
我创建了一个简单的示例来展示我想要实现的目标。在下面的示例中，我正在创建一个 HelloWorld 组件，该组件有一个 observedAttributes 即 heading-content（将在 <h1></h1>[=63 中显示的值=] HelloWorld 组件模板）。如果用户通过构造函数设置 heading-content，那么我将把这个值保存在 this.propsContent 中。然后在 connectedCallback 被触发后我设置这个道具 setContentFromProps 触发 attributeChangedCallback 剩下的由这个回调完成。
是否可以以某种方式等到这些操作结束？
例子
HelloWorld分量：
const template = `<h1 id="hello-world-content"></h1>`;
export class HelloWorld extends HTMLElement {
static TAG = 'hello-world';
static observedAttributes = ['heading-content'];
constructor(props) {
super();
this.attachShadow({ mode: 'open' });
this.shadowRoot.innerHTML = template;
this.headingContent = null;
this.propsContent = props;
this.helloHeading = this.shadowRoot.querySelector('#hello-world-content');
}
connectedCallback() {
this.setContentFromProps();
}
attributeChangedCallback(name, oldValue, newValue) {
if (name === 'heading-content') {
this.helloHeading.textContent = newValue;
this.headingContent = newValue;
}
}
setContentFromProps() {
this.setAttribute('heading-content', this.propsContent);
}
}
customElements.define(HelloWorld.TAG, HelloWorld);
HelloWorld 单元测试：
import 'jest';
import { HelloWorld } from './HelloWorld';
describe(HelloWorld.name, () => {
test('should set heading content to given value', () => {
const helloWorld = new HelloWorld('dupa');
expect(helloWorld.headingContent).toBe('dupa');
});
});
测试结果：
expect(received).toBe(expected) // Object.is equality
Expected: "dupa"
Received: null
不是没有添加代码；没有 allAttributesChangesDone 回调。除非您事先知道需要更改什么，否则无法编写。
I see, so it is impossible. Anyway thank you for your answer
如果你等到事件循环完成；您可以相当确定所有更新都已完成...除非有异步代码进行更新...
“事件循环到底是什么：”https://youtube.com/watch?v=8aGhZQkoFbQ&vl=en
That's true but If I wait when EventLoop will become free than my tests can take much more time. Actually, now after I thought more about that my test is 'not working' (in my opinion a few hours ago) I can say I was mistaken and the test works correctly, and I should take care of the case when someone is trying to access the attribute before it is initialized.