I have a typescript function:
renderDOM.ts
export function renderShadowDOMButton(
containerElement: HTMLElement,
buttonId: string,
): void {
let shadow = containerElement.attachShadow({mode: 'open'});
let wrapper = document.createElement('div');
shadow.appendChild(wrapper);
const microtextContent =
wrapper.clientWidth < 150
? doSomethingForLessWidth()
: doSomethingForMoreWidth();
let container = document.createElement('div');
container.appendChild(microtextContent);
}
renderDOM.test.ts
it('should call function for more width', () => {
let renderEl = document.createElement('div');
webComponentHelper.renderShadowDOMButton(renderEl, 'someButtonId');
expect(doSomethingForMoreWidth).toHaveBeenCalled();
});
The above test always fails since wrapper.clientWidth is 0. I wanted to understand if I can mock out the clientWidth of wrapper. I tried the solutions mentioned here but I can set the clientWidth for containerElement and not for wrapper.
