45 lines
1.8 KiB
TypeScript
Raw Normal View History

import { module, test } from 'qunit';
import { setupRenderingTest } from 'ember-qunit';
import hbs from 'htmlbars-inline-precompile';
import { getRenderedComponent } from '@datahub/utils/test-helpers/register-component';
import FormsActionDrawer from '@datahub/shared/components/forms/action-drawer';
import { click } from '@ember/test-helpers';
module('Integration | Component | forms/action-drawer', function(hooks): void {
setupRenderingTest(hooks);
test('rendering and behavior', async function(assert): Promise<void> {
const component = await getRenderedComponent({
ComponentToRender: FormsActionDrawer,
testContext: this,
componentName: 'forms/action-drawer',
template: hbs`
<Forms::ActionDrawer as |drawer|>
<button {{on "click" (fn drawer.onDrawerToggle)}} style="height: 18px" type="button">Click Me!</button>
<div style="height: 200px;"></div>
</Forms::ActionDrawer>
`
});
const componentBaseClassSelector = `.${component.baseClass}`;
assert.notOk(component.isExpanded, 'Expected component to be collapsed on first render');
assert
.dom(componentBaseClassSelector)
.hasStyle({ height: '64px', position: 'fixed', right: '0px', bottom: '0px', left: '0px' });
assert.dom(componentBaseClassSelector).hasClass(`${component.baseClass}--close`);
assert.dom().hasText('Click Me!');
await click('button');
assert.ok(component.isExpanded, 'Expected component to be expanded');
assert.dom(componentBaseClassSelector).hasClass(`${component.baseClass}--open`);
const el = document.querySelector(componentBaseClassSelector);
// button 18px + border 1px + inserted div 200px
assert.ok(
el && parseInt(window.getComputedStyle(el).height || '0', 10) > 200,
'Expected element height to be greater than nested div height'
);
});
});