TestCafe chrome:headless intermittently fails with Vue event emit

Question

• Chrome: Version 91.0.4472.114 (Official Build) (x86_64)
• TestCafe: 1.14.2

Vue codes

Template

<input
  id="amount"
  v-model="amount"
  min="0"
  name="amount"
  class="input-field"
  :placeholder="labelPlaceholder"
  @input="validateAmount"
>

Event emitter

validateAmount() {
  ...
  this.$root.$emit('new-amount', this.id, this.valid, this.amount);
},

Event receiver

this.$root.$on('new-amount', (id, valid, amount) => {
  if (this.id === id) {
    this.amount = amount;
    this.validAmount = valid; // In the screenshot below
  }
});

Test codes

TestCafe with chrome:headless (browser mode works) intermittently fails for tests with Vue event emit. No matter test waits for 2 seconds or not, the result is same but when it enables Quarantine mode it passes (I don't want to use this though)

test('Should be enabled when a valid value is entered', async (t) => {
  await t
    .typeText(amount, '1')
    .expect(amount.value)
    .eql('1');
  await t.wait(2000);
  const after = button.withAttribute('disabled', 'disabled').exists;
  await t.expect(after).notOk();
});

Result TestCafe test (screenshot on error)

1) AssertionError: expected true to be falsy

Result by user (MUST BE)

Answer 1

Since enabling the quarantine mode fixes the problem, I assume that the issue occurs because sometimes the event is not fired within 2 seconds. Try to rewrite your code in the following way:

test('Should be enabled when a valid value is entered', async (t) => {
    await t
        .typeText(amount, '1')
        .expect(amount.value).eql('1');
        .expect(button.hasAttribute('disabled')).notOk();
});