Jasmine，单击具有“按钮”角色的 div

Question

我在角度组件中有一个

mat-table

，它在标题中使用

matSort

，我想测试单击排序选项后我的表是否已更改。

 it('Should properly sort table', () => {
        const compiled = fixture.debugElement.nativeElement;
        const table = compiled.querySelector('table'); 
        const buttons = compiled.querySelectorAll('div.mat-sort-header-container');
        buttons[0].click();
        fixture.detectChanges();
        const reCompiled = fixture.debugElement.nativeElement;
        const sortedTable = reCompiled.querySelector('table');
        console.log(table === sortedTable); //Returns true
    });

不像其他类似我的问题，我发现我的按钮不是真正的 html 按钮，而是一个角色为“按钮”的 div：
我怀疑是按钮没有被点击，因为点击后表格没有改变。
欢迎任何提示

Answer 1

一种可能的解决方案是使用querySelector方法选择具有role属性的元素，然后使用dispatchEvent方法在其上触发点击事件。这是一个例子：

const divElement = document.querySelector('div[role="button"]');
divElement.dispatchEvent(new Event('click'));

此代码选择第一个角色属性设置为“button”的元素，并在其上触发点击事件。

或者，如果元素具有 id 或 class 属性，您可以分别使用 getElementById 或 getElementsByClassName 方法选择它。

const divElement = document.getElementById('myDiv');
// or
const divElement = document.getElementsByClassName('myDiv')[0];
divElement.dispatchEvent(new Event('click'));

注意 dispatchEvent 方法触发事件，但它不模拟实际的用户交互。如果附加到元素的事件侦听器依赖于用户交互事件，例如 mousedown 或 mouseup，您可能还需要触发这些事件。

const divElement = document.querySelector('div[role="button"]');
divElement.dispatchEvent(new Event('mousedown'));
divElement.dispatchEvent(new Event('mouseup'));
divElement.dispatchEvent(new Event('click'));

总的来说，解决方案可能会根据具体场景和被测试的代码而有所不同。确保为测试正确设置代码并导入必要的依赖项也很重要。