Setting same properties name causing tests fail

[brunoocasali]

Hello everyone!

After digging into an annoying problem I discovered what is causing the bugs in valid tests...
I think after we use a property name this name is invalid to be used again...

This is the helper code:

import { helper } from '@ember/component/helper';

export default helper(function truncateText([ value ], { limit }) {
  let text = '';

  if (value != null && value.length > 0) {
    text = value.substr(0, limit);

    if (value.length > limit) {
      text += '...';
    }
  }

  return text;
});

This is my helper test:

import { expect } from 'chai';
import { describe, it, beforeEach } from 'mocha';
import { setupRenderingTest } from 'ember-mocha';
import { render } from '@ember/test-helpers';

import hbs from 'htmlbars-inline-precompile';

describe('TruncateTextHelper', async function() {
  setupRenderingTest();

  beforeEach(function() {
    this.set('text', 'my awesome but very large text!!');
  });

  it('does truncate text when is greater than limit', async function() {
    await render(hbs`{{truncate-text this.text limit=10}}`);

    expect(this.element.textContent).to.be.include('my awesome...');
  });

  it('does not truncate text when lower than limit', async function() {
    await render(hbs`{{truncate-text this.text limit=100}}`);

    expect(this.element.textContent).to.be.include('my awesome but very large text!!');
  });
});

If I remove the beforeEach, and pass the same property directly the problem still happens

describe('TruncateTextHelper', async function() {
  setupRenderingTest();

  it('does truncate text when is greater than limit', async function() {
    this.set('text', 'my awesome but very large text!!');

    await render(hbs`{{truncate-text this.text limit=10}}`);

    expect(this.element.textContent).to.be.include('my awesome...');
  });

  it('does not truncate text when lower than limit', async function() {
    this.set('text', 'my awesome but very large text!!');

    await render(hbs`{{truncate-text this.text limit=100}}`);

    expect(this.element.textContent).to.be.include('my awesome but very large text!!');
  });
});

This is the error:

Logging the properties, we got the "my awesome but very large text!!" for the first occurrence and undefined for the second.

If I change the name of the last property from text to something it works!

I've provided a little package with the failing specs: https://github.com/brunoocasali/bookish-octo-garbanzo/blob/master/tests/integration/helpers/truncate-text-test.js

@brunoocasali what version of ember-source do you see this on?

[brunoocasali]

@efx I'm using the latest canary :)

Exactly the same version that breaks in the CI

[simonihmig]

I can confirm this, seeing it with Ember 3.13!

[HenryVonfire]

I've found out that setting the property without set works, like this:

  beforeEach(function() {
    this.text = 'my awesome but very large text!!';
  });

  it('does truncate text when is greater than limit', async function() {
    await render(hbs`{{truncate-text this.text limit=10}}`);

    expect(this.element.textContent).to.be.include('my awesome...');
  });

  it('does not truncate text when lower than limit', async function() {
    await render(hbs`{{truncate-text this.text limit=100}}`);

    expect(this.element.textContent).to.be.include('my awesome but very large text!!');
  });

FWIW, I have verified this doesn't happen in ember-qunit's setupRenderingTest: https://github.com/emberjs/ember-qunit/compare/master...efx:bump-ember-and-test?expand=1

[lolmaus]

Should be fixed now thanks to @kobsy?