emberjs / emberjs/ember-mocha

Setting same properties name causing tests fail

Open
#430 6 comments 5 reactions 0 assignees View on GitHub
Dominant language
JavaScript
Stars
130
Forks
62
PR merge metrics
No merged PRs in 30d

Description

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:

```js
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:
```js
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

```js
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:
![image](https://user-images.githubusercontent.com/4116980/64370476-e86df180-cff4-11e9-89ae-47f8626338da.png)

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

Contributor guide

No contributing guide indexed for this repository

Assessment

This issue has not been assessed yet.

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.