I have a abstract class.
class Component extends HTMLElement {
connectedCallback() {
this.render();
}
render() {
this.innerHTML = this.template();
}
template() {
return '';
}
...
}
And I have a Class which extends the Component class.
class StatisticsModal extends Component {
render() {
const winningCounts = this.getWinningCounts(winningNumbers, lottoList);
const earningsRate = this.getEarningsRate(winningCounts);
this.innerHTML = this.template(winningCounts, earningsRate);
document.querySelector('body').classList.add('modal-open');
}
getEarningsRate(winningCounts) {
const total = [5, 4, 3, 2, 1].reduce((money, rank) => {
return money + winningCounts[rank] * LOTTO.PRIZE_MONEY[rank];
}, 0);
return Math.floor((total / 1000) * 100);
}
getWinningCounts(winningNumbers, lottoList) {
return lottoList.reduce((winningCounts, lottoNums) => {
const count = intersect(lottoNums, winningNumbers.normal).length;
if (count === 6) winningCounts[1] += 1;
else if (count === 5 && lottoNums.includes(winningNumbers.bonus)) winningCounts[2] += 1;
else if (count === 5) winningCounts[3] += 1;
else if (count === 4) winningCounts[4] += 1;
else if (count === 3) winningCounts[5] += 1;
return winningCounts;
}, Array(6).fill(0));
}
...
...
}
Now, I want to test the getWinningCounts of StatisticsModal component with Jest.
So, I write the test code like below.
describe('This is test description', () => {
const winningNumbers = {
normal: [1, 2, 3, 4, 5, 6],
bonus: 7,
};
test('Let's do test!', () => {
const lottoList = [
[1, 22, 33, 44, 55, 66],
[1, 2, 33, 44, 55, 66],
[1, 2, 3, 44, 55, 66],
[1, 2, 3, 4, 55, 66],
[1, 2, 3, 4, 5, 66],
[1, 2, 3, 4, 5, 6],
[1, 2, 3, 7, 11, 22],
];
const statisticsModal = new StatisticsModal(); // ReferenceError: HTMLElement is not defined
const winningCounts = statisticsModal.getWinningCounts(winningNumbers, lottoList);
expect(winningCounts[5]).toBe(2);
});
});
But I got error.
"ReferenceError: HTMLElement is not defined"
So, I want to know how to test that method in class.
Check please :D