Hi there,
I have a web component HeaderImage.js which looks something like this
export default class HeaderImage extends HTMLElement {
constructor() {
// We are not even going to touch this.
super();
// lets create our shadow root
this.shadowObj = this.attachShadow({mode: 'open'});
this.altText = this.getAttribute('alt');
this.src = this.getAttribute('src');
// Then lets render the template
this.render();
}
render() {
this.shadowObj.innerHTML = this.getTemplate();
}
getTemplate() {
return `
<img src="${this.src}"
alt="${this.altText}"/>
${this.handleErrors()}
<style>
img {
width: 400px;;
}
</style>
`;
}
handleErrors() {
if(!this.getAttribute('alt')) {
return `
<div class="error">Missing Alt Text</div>
<style>
.error {
color: red;
}
</style>
`;
}
return ``;
}
}And I would like to write a unit test to check the following:
altText is getting set in the beginningsrc is getting set in the beginning- if
altText is empty string or null, the function handleErrors() is getting called.
I have been trying for the past few days now, and I havent been able to understand how I can check these. I was wondering if someone would be able to help me out.
I really dont know what I am doing here, but here is the code:
HeaderImage.showroom.js file inside .showroom folder
export default {
component: 'header-image',
alias: 'Extending Native Elements',
section: 'Vanilla',
path: '../HeaderImage.js',
attributes: {
alt: 'Sky and Clouds',
src: '../sky.jpg'
},
innerHTML: `
<img src="../sky.jpg"
alt="Sky and Clouds"/>
<style>
img {
width: 400px;;
}
</style>
`,
outerHTML: `
<div>
<header-image alt="Sky and Clouds"
src="../sky.jpg"></header-image>
</div>
`
}
HeaderImage.spec.js in test folder
const showroom = require('showroom/puppeteer')();
const assert = require('assert');
describe('header-image', () => {
before( async () => {
await showroom.start();
})
after( async () => {
await showroom.stop();
})
beforeEach( async () => {
await showroom.setTestSubject('header-image');
})
it('Should update alt text', async () => {
await showroom.setAttribute('alt', 'Hello Sky');
const alt = await showroom.getAttribute('alt');
assert.equal(alt, 'Hello Sky');
})
it('Should update altText property', async () => {
await showroom.setAttribute('alt', 'Hello Sky');
const imgAlt = await showroom.getProperty('altText');
// FAILS
assert.equal(imgAlt, 'test alt text');
})
it('should show error class when alt text is not present', async () => {
await showroom.setAttribute('alt', '');
await showroom.setAttribute('src', '../sky.jpg');
const src = await showroom.getAttribute('src');
assert.equal(src, '../sky.jpg');
})
it('Should update src property', async () => {
await showroom.setAttribute('src', '../sky.jpg');
const src = await showroom.getProperty('src');
// FAILS
assert.equal(src, 'test alt text');
})
});The error that I see in Mocha is
1) header-image
Should update altText property:
AssertionError [ERR_ASSERTION]: undefined == 'test alt text'
at Context.it (test/HeaderImage.spec.js:28:12)
at process._tickCallback (internal/process/next_tick.js:68:7)
2) header-image
Should update src property:
AssertionError [ERR_ASSERTION]: undefined == 'test alt text'
at Context.it (test/HeaderImage.spec.js:43:12)
at process._tickCallback (internal/process/next_tick.js:68:7)
I really have no clue what is going on here. And I dont know what I am missing here. Sorry :(
Any help is appreciated.
Thanks
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent