Bug: showroom.utils.trigger is fluffy

[msteller-connyun]

Using showroom.utils.trigger('myFunction') is fluffy and leads sometimes (especially if I repeat the test in short intervals) to the 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
      at ExecutionContext.evaluateHandle (node_modules/puppeteer/lib/ExecutionContext.js:121:13)
        -- ASYNC --
      at ExecutionContext.<anonymous> (node_modules/puppeteer/lib/helper.js:108:27)
      at ExecutionContext.evaluate (node_modules/puppeteer/lib/ExecutionContext.js:48:31)
      at ExecutionContext.<anonymous> (node_modules/puppeteer/lib/helper.js:109:23)
      at DOMWorld.evaluate (node_modules/puppeteer/lib/DOMWorld.js:105:20)
        -- ASYNC --
      at Frame.<anonymous> (node_modules/puppeteer/lib/helper.js:108:27)
      at Page.evaluate (node_modules/puppeteer/lib/Page.js:815:43)
      at Page.<anonymous> (node_modules/puppeteer/lib/helper.js:109:23)
      at TestUtils.trigger (node_modules/showroom/test-utils.js:306:21)
      at Object.trigger (test/e2e/calendar-graph.test.js:33:26)
        -- ASYNC --
      at Page.<anonymous> (node_modules/puppeteer/lib/helper.js:108:27)
      at TestUtils.trigger (node_modules/showroom/test-utils.js:306:21)

This seems to be a timing issue. Workaround:

  beforeEach(async () => {
    await new Promise(resolve=>setTimeout(()=>resolve(), 10));
  });

[eavichay]

Can you share your code + the .showroom file?

[msteller-connyun]

Of course:

export default {
  component: 'calendar-graph',
  path: '/dist/cyChart.min.js',
  functions: {
    initStatusMapping: () => {
      dashboard.targetComponent.setStatusMapping([
        {
          condition: {
            is: 2
          },
          action: {
            bgColor: 'green'
          },
          legend: 'Good (>60%)'
        },
        {
          condition: {
            is: 1
          },
          action: {
            bgColor: 'yellow'
          },
          legend: 'Okay (30-60%)'
        },
        {
          condition: {
            is: 0
          },
          action: {
            bgColor: 'red'
          },
          legend: 'Bad (<30%)'
        },
        {
          condition: {
            is: null
          },
          action: {
            bgColor: 'grey'
          },
          legend: 'Nicht verwendet'
        }
      ]);
    },
    initData: () => {
      dashboard.targetComponent.setData([
        {date: '2016-02-15T00:00:00Z', devices: [{name: 'M1', value: null}, {name: 'M2', value: 1}]},
        {date: '2016-02-13T00:00:00Z', devices: [{name: 'M1', value: 2}, {name: 'M2', value: 2}]},
        {date: '2016-02-14T00:00:00Z', devices: [{name: 'Machine1', value: 0}, {name: 'M2', value: null}]},
      ]);
    }
  }
}

[msteller-connyun]

I can’t share the code of the component itself, it’s property of the company where I work :(

[eavichay]

Can you share the test part that is failing?

[msteller-connyun]

Hey,

I did an simplified example where this issue can be reproduced:

https://github.com/msteller-connyun/showroom-test

just execute:

yarn
yarn build
yarn test

After this issue is fluffy it my not fail the first time, try to run yarn test several times in a row, if the error does not occur the first time.

[eavichay]

Hey, your example is working correctly, if you run npm run build before tests.

try npx showroom, browser to http://localhost:3000 and see that without build the showroom client app cannot load the component.

[eavichay]

Perhaps adding in your package.json "pretest": "npm run build"?

[msteller-connyun]

Hey,

the tests are fluffy, that means that it sometimes works and sometimes not.

Mostly, the first time it works. If I execute the test immediately a second time it’s mostly broken. If it’s broken I have to wait some time, before it’s working again.

Yes, probably npm run build could fix the issue, because if there is a small break between the tests it works (mostly). This is similar to my setTimeout workaround.

Please execute npm run testtwo or three times directly in a row and check if it still working for you.

And yes, in the showroom GUI it’s working always. It’s a test-only issue.

[eavichay]

Will check further

[evtaylor]

I'm having the same issue. It is difficult to reproduce locally but happens more often than not in my CI builds.

Ex. https://circleci.com/gh/evtaylor/functional-lit-element/20