51 lines
2 KiB
JavaScript
51 lines
2 KiB
JavaScript
import { module, test } from 'qunit';
|
|
import { setupRenderingTest } from 'ember-qunit';
|
|
import { render, click } from '@ember/test-helpers';
|
|
import { hbs } from 'ember-cli-htmlbars';
|
|
|
|
module('Integration | Component | read-more', function(hooks) {
|
|
setupRenderingTest(hooks);
|
|
|
|
test('it renders', async function(assert) {
|
|
await render(hbs`<ReadMore />`);
|
|
assert.equal(this.element.textContent.trim(), '');
|
|
});
|
|
test('it can toggle open and closed when text is longer than parent', async function(assert) {
|
|
this.set(
|
|
'description',
|
|
'My super long template block text dignissim dictum sem, ut varius ligula lacinia quis.'
|
|
);
|
|
await render(hbs`
|
|
<div style="width: 150px">
|
|
<ReadMore>
|
|
{{this.description}}
|
|
</ReadMore>
|
|
</div>
|
|
`);
|
|
assert.dom('[data-test-readmore-content]').includesText(this.description);
|
|
assert.dom('[data-test-readmore-toggle]').exists('toggle exists');
|
|
assert.dom('[data-test-readmore-toggle]').hasText('See More', 'Toggle should have text to see more');
|
|
assert
|
|
.dom('.overflow-ellipsis.is-closed')
|
|
.exists('Overflow div has is-closed class when more text to show');
|
|
await click('[data-test-readmore-toggle] button');
|
|
assert.dom('.overflow-ellipsis').exists('Div with overflow class still exists');
|
|
assert.dom('.overflow-ellipsis.is-closed').doesNotExist('Div with overflow class no longer is-closed');
|
|
assert.dom('[data-test-readmore-toggle]').hasText('See Less', 'Toggle should have text to see less');
|
|
});
|
|
|
|
test('it does not show show more button if parent is wider than content', async function(assert) {
|
|
this.set('description', 'Hello');
|
|
await render(hbs`
|
|
<div style="width: 150px">
|
|
<ReadMore>
|
|
{{this.description}}
|
|
</ReadMore>
|
|
</div>
|
|
`);
|
|
assert.dom('[data-test-readmore-content]').includesText(this.description);
|
|
assert.dom('[data-test-readmore-toggle]').doesNotExist('toggle exists');
|
|
assert.dom('.overflow-ellipsis').exists('Overflow div exists');
|
|
});
|
|
});
|