Need help with understanding Showroom

[prateekjadhwani]

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:

1. altText is getting set in the beginning
2. src is getting set in the beginning
3. 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:

1. 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>
  `

}

2. 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

[guygolanIL]

I wonder if you solved your issue.

[prateekjadhwani]

Nope, sorry. If you have any suggestions, i would love to hear them.

[guygolanIL]

Sorry no. Im desperately searching for a webComponent testing lib to integrate with our mocha setup with no avail

[prateekjadhwani]

Lol... same I totally understand your pain. I have been searching for months.

[eavichay]

@prateekjadhwani your component does not have static get observedAttributes and therefore does not reacts to changes in the attribute.

Could you try again?

also, anything related to DOM should not be reached from the constructor (unless there is a shadow root).

You can try reproducing this without the test runner, just start showroom and browse to localhost:3000

[eavichay]

@prateekjadhwani Did that work for you?

[prateekjadhwani]

Sorry @eavichay I havent tried it. I will give it a try this weekend. Are there more examples in the documentation that I can reference? As in for complex and nested components?

[eavichay]

@prateekjadhwani

in your showroom file /.showroom/my-component.showroom.js add to the default export outerHTML property with anything you want.

for example:

<div>
<my-component>
<my-nested-component></my-nested-component>
</my-component>
</div>```

Showroom will identify your component within the markup and attach listeners/commands to it. The nested component, however will not be part of the scenario. You can add custom methods to interact with it if required.