Call a method? about showroom

[eavichay]

Hey, sorry for late response...
you can define methods from the descriptor file (add "methods" section):

export default {
  component,
  methods: {
    someName: () => showroom.component.doSomething(arg1, arg2, ...),
    someOtherName: () => showroom.component.doSomethingElse(),
    ...
  }
}

If you want to trigger via puppeteer simply await showroom.trigger('someName')
Prepare your actions in the descriptor and they are also accessible via the UI.

Hope this helps.

Thank you for the reply. Unfortunately, it doesn't seem to be working.

export default {
	component: 'an-element',
	alias: '<an-element>',
	path: '/.build/an-element.mjs',
	autoAttributes: true,
	autoProperties: true,
	properties: {
		'clickCount': 0
	},
	events: ['clickcountchanged'],
	functions: {
		click: () => showroom.component.click()
	},
	methods: {
		isReady: () => showroom.component.isReady()
	},
	innerHTML: `
    Click Me
  `
};

	it('should be ready', async () => {
		const isReady = await showroom.trigger('isReady');
		const ready = await showroom.getProperty('ready');
		console.log('ready', isReady, ready);
		assert.equal(ready, true);
	});

The isReady method on the element returns a promise once first rendering is done. From manual testing it is working correctly. I need to be able to invoke it in my Mocha tests. This is the error I am getting.

Error: Evaluation failed: TypeError: this.customControlForm.triggers[fnName] is not a function
at HTMLElement.trigger (http://127.0.0.1:3001/component-dashboard.js:26:46)
at puppeteer_evaluation_script:3:17

Also, what do the autoProperties and autoAttributes keys do? I have been trying to figure out how to use this by just looking at the examples.

• Is it supposed to be methods and not functions?
• I think the problem may be with your trigger function? I don't see that it returns anything?

  async trigger (fnName) {
    await this.page.evaluate((fnName) => {
      // @ts-ignore
      dashboard.trigger(fnName);
    }, fnName);
  }

and then the trigger on your dashboard doesn't return the value either...

trigger (fnName) {
    if (fnName && this.customControlForm) {
      this.customControlForm.triggers[fnName]();
    }
  }

Sorry, I am new to using Puppeteer. After digging through your code more, studying the Puppeteer API, finding the page reference, and then experimenting directly with page.evaluate, it seems there are some issues with Puppeteer with regard to invoking methods on elements. Despite being able to manually invoke a method that returns a promise through the browser, I was unable to invoke it correctly in Puppeteer.

[eavichay]

This is correct, it is not meant for calculations. You can, however run the function and get the results using puppeteer.

it('should do something', async () => {
  const result = await page.evaluate((param) => {
    return showroom.component.computeSomething(param);
  }, someValueForParameter);
  console.log(result);
}

The enclosed function will be executed in the browser, and the result is serialised by puppeteer.

I think that adding returned value using showroom's wrapper is worth a feature.