Skip to content

Commit

Permalink
chore: Convert tests to gts
Browse files Browse the repository at this point in the history
  • Loading branch information
@ynotdraw
ynotdraw committed May 22, 2023
1 parent 6ae7b64 commit f6d6c21
Show file tree
Hide file tree
Showing 2 changed files with 58 additions and 76 deletions.
59 changes: 31 additions & 28 deletions ...sts/integration/components/velcro-test.ts → ...ts/integration/components/velcro-test.gts
View file
Original file line number Diff line number Diff line change
@@ -1,10 +1,11 @@
import { render } from '@ember/test-helpers';
import { hbs } from 'ember-cli-htmlbars';
import { module, test } from 'qunit';
import { setupRenderingTest } from 'ember-qunit';

import { findElement, resetTestingContainerDimensions, styleFor } from '../velcro-test-helpers';

import { Velcro } from 'ember-velcro';

module('Integration | Component | velcro', function (hooks) {
setupRenderingTest(hooks);

Expand All @@ -13,7 +14,7 @@ module('Integration | Component | velcro', function (hooks) {
});

test('it renders', async function (assert) {
await render(hbs`
await render(<template>
<Velcro as |velcro|>
<div id="hook" {{velcro.hook}} style="width: 200px; height: 40px">
{{velcro.data.rects.reference.width}}
Expand All @@ -24,7 +25,7 @@ module('Integration | Component | velcro', function (hooks) {
{{velcro.data.rects.floating.height}}
</div>
</Velcro>
`);
</template>);

assert.dom('#hook').hasText('200 40', 'reference element has expected dimensions');
assert.dom('#loop').hasText('200 400', 'floating element has expected dimensions');
Expand All @@ -42,81 +43,85 @@ module('Integration | Component | velcro', function (hooks) {

module('@middleware', function () {
test('it yields the MiddlewareArguments', async function (assert) {
await render(hbs`
await render(<template>
<Velcro as |velcro|>
<div id="hook" {{velcro.hook}}>
{{object-keys velcro.data}}
{{#each-in velcro.data as |key|}}
{{key}}
{{/each-in}}
</div>
<div id="loop" {{velcro.loop}}>VelcroElement</div>
</Velcro>
`);
</template>);

assert
.dom('#hook')
.hasText(
'x,y,initialPlacement,placement,strategy,middlewareData,rects,platform,elements',
'x y initialPlacement placement strategy middlewareData rects platform elements',
'has expected metadata'
);
});

test('it has expected included middleware defined', async function (assert) {
await render(hbs`
await render(<template>
<Velcro as |velcro|>
<div id="hook" {{velcro.hook}}>
{{object-keys velcro.data.middlewareData}}
{{#each-in velcro.data.middlewareData as |key|}}
{{key}}
{{/each-in}}
</div>
<div id="loop" {{velcro.loop}}>VelcroElement</div>
</Velcro>
`);
</template>);

assert.dom('#hook').hasText('offset,flip,shift,hide', 'has expected middleware');
assert.dom('#hook').hasText('offset flip shift hide', 'has expected middleware');
});
});

module('@placement', function () {
test('has default value', async function (assert) {
await render(hbs`
await render(<template>
<Velcro as |velcro|>
<div {{velcro.hook}}>velcroReference</div>
<div id="loop" {{velcro.loop}}>{{velcro.data.placement}}</div>
</Velcro>
`);
</template>);

assert.dom('#loop').hasText('bottom');
});

test('has argument value', async function (assert) {
await render(hbs`
await render(<template>
<Velcro @placement="bottom-start" as |velcro|>
<div {{velcro.hook}}>velcroReference</div>
<div id="loop" {{velcro.loop}}>{{velcro.data.placement}}</div>
</Velcro>
`);
</template>);

assert.dom('#loop').hasText('bottom-start');
});
});

module('@strategy', function () {
test('has default value', async function (assert) {
await render(hbs`
await render(<template>
<Velcro as |velcro|>
<div {{velcro.hook}}>velcroReference</div>
<div id="loop" {{velcro.loop}}>{{velcro.data.strategy}}</div>
</Velcro>
`);
</template>);

assert.dom('#loop').hasText('fixed');
assert.dom('#loop').hasStyle({ position: 'fixed' });
});

test('has argument value', async function (assert) {
await render(hbs`
await render(<template>
<Velcro @strategy="absolute" as |velcro|>
<div {{velcro.hook}}>velcroReference</div>
<div id="loop" {{velcro.loop}}>{{velcro.data.strategy}}</div>
</Velcro>
`);
</template>);

assert.dom('#loop').hasText('absolute');
assert.dom('#loop').hasStyle({ position: 'absolute' });
Expand All @@ -127,9 +132,7 @@ module('Integration | Component | velcro', function (hooks) {
test('can pass in distance', async function (assert) {
let offsetDistance = 10;

this.set('offsetDistance', offsetDistance);

await render(hbs`
await render(<template>
{{!-- render 2 Velcro's side by side, pass one a distance offset and compare the top values --}}
{{!-- template-lint-disable no-inline-styles --}}
<div style="display: flex">
Expand All @@ -139,12 +142,12 @@ module('Integration | Component | velcro', function (hooks) {
</Velcro>
{{!-- Having an issue referencing a typed 'this' in the modifier --}}
{{! @glint-ignore }}
<Velcro @offsetOptions={{this.offsetDistance}} @placement="bottom-start" as |velcro|>
<Velcro @offsetOptions={{offsetDistance}} @placement="bottom-start" as |velcro|>
<div {{velcro.hook}}>velcroReference</div>
<div id="velcro2" {{velcro.loop}}>Velcro</div>
</Velcro>
</div>
`);
</template>);

let velcro1 = findElement('#velcro1');
let velcro2 = findElement('#velcro2');
Expand All @@ -158,21 +161,21 @@ module('Integration | Component | velcro', function (hooks) {
test('can pass in skidding', async function (assert) {
let offsetSkidding = 10;

this.set('offsetSkidding', { crossAxis: offsetSkidding });
let offsetOptions = { crossAxis: offsetSkidding };

await render(hbs`
await render(<template>
{{!-- render 2 Velcro's atop the other, pass one a skidding offset and compare the left values --}}
<Velcro as |velcro|>
<div {{velcro.hook}}>velcroReference</div>
<div id="velcro1" {{velcro.loop}}>Velcro</div>
</Velcro>
{{!-- Having an issue referencing a typed 'this' in the modifier --}}
{{! @glint-ignore }}
<Velcro @offsetOptions={{this.offsetSkidding}} as |velcro|>
<Velcro @offsetOptions={{offsetOptions}} as |velcro|>
<div {{velcro.hook}}>velcroReference</div>
<div id="velcro2" {{velcro.loop}}>Velcro</div>
</Velcro>
`);
</template>);

let velcro1 = findElement('#velcro1');
let velcro2 = findElement('#velcro2');
Expand Down
75 changes: 27 additions & 48 deletions ...ests/integration/modifiers/velcro-test.ts → ...sts/integration/modifiers/velcro-test.gts
View file
Original file line number Diff line number Diff line change
@@ -1,5 +1,4 @@
import { render } from '@ember/test-helpers';
import { hbs } from 'ember-cli-htmlbars';
import { module, test } from 'qunit';
import { setupRenderingTest } from 'ember-qunit';

Expand All @@ -9,6 +8,8 @@ import {
resetTestingContainerDimensions,
} from '../velcro-test-helpers';

import { velcro } from 'ember-velcro'

module('Integration | Modifier | velcro', function (hooks) {
setupRenderingTest(hooks);

Expand All @@ -17,69 +18,53 @@ module('Integration | Modifier | velcro', function (hooks) {
});

test('it renders', async function (assert) {
await render(hbs`
await render(<template>
<div id="reference">Reference</div>
<div {{velcro "#reference"}}></div>
`);
</template>);

assert.ok(true);
});

module('@placement', function (hooks) {
hooks.beforeEach(function () {
this.setProperties({
addDataAttributes: addDataAttributes(),
});
});
module('@placement', function () {
let middleware = [addDataAttributes()];

test('has default value', async function (assert) {
await render(hbs`
await render(<template>
<div id="velcro-reference">Velcro reference</div>
{{!-- Having an issue referencing a typed 'this' in the modifier --}}
{{! @glint-ignore }}
<div id="velcro" {{velcro "#velcro-reference" middleware=(array this.addDataAttributes)}}>Velcro</div>
`);
<div id="velcro" {{velcro "#velcro-reference" middleware=middleware}}>Velcro</div>
</template>);

assert.dom('#velcro ').hasAttribute('data-placement', 'bottom');
});

test('has named argument value', async function (assert) {
await render(hbs`
await render(<template>
<div id="velcro-reference">Velcro reference</div>
{{!-- Having an issue referencing a typed 'this' in the modifier --}}
{{! @glint-ignore }}
<div id="velcro" {{velcro "#velcro-reference" placement="bottom-start" middleware=(array this.addDataAttributes)}}>Velcro</div>
`);
<div id="velcro" {{velcro "#velcro-reference" placement="bottom-start" middleware=middleware}}>Velcro</div>
</template>);

assert.dom('#velcro ').hasAttribute('data-placement', 'bottom-start');
});
});

module('@strategy', function (hooks) {
hooks.beforeEach(function () {
this.setProperties({
addDataAttributes: addDataAttributes(),
});
});
module('@strategy', function () {
let middleware = [addDataAttributes()];

test('has default value', async function (assert) {
await render(hbs`
await render(<template>
<div id="velcro-reference">Velcro reference</div>
{{!-- Having an issue referencing a typed 'this' in the modifier --}}
{{! @glint-ignore }}
<div id="velcro" {{velcro "#velcro-reference" middleware=(array this.addDataAttributes)}}>Velcro</div>
`);
<div id="velcro" {{velcro "#velcro-reference" middleware=middleware}}>Velcro</div>
</template>);

assert.dom('#velcro ').hasAttribute('data-strategy', 'fixed');
});

test('has named argument value', async function (assert) {
await render(hbs`
await render(<template>
<div id="velcro-reference">Velcro reference</div>
{{!-- Having an issue referencing a typed 'this' in the modifier --}}
{{! @glint-ignore }}
<div id="velcro" {{velcro "#velcro-reference" strategy="absolute" middleware=(array this.addDataAttributes)}}>Velcro</div>
`);
<div id="velcro" {{velcro "#velcro-reference" strategy="absolute" middleware=middleware}}>Velcro</div>
</template>);

assert.dom('#velcro ').hasAttribute('data-strategy', 'absolute');
});
Expand All @@ -89,9 +74,7 @@ module('Integration | Modifier | velcro', function (hooks) {
test('can pass in distance', async function (assert) {
let offsetDistance = 10;

this.setProperties({ offsetDistance });

await render(hbs`
await render(<template>
{{!-- render 2 Velcro's side by side, pass one a distance offset and compare the top values --}}
{{!-- template-lint-disable no-inline-styles --}}
<div style="display: flex">
Expand All @@ -101,12 +84,10 @@ module('Integration | Modifier | velcro', function (hooks) {
</div>
<div>
<div>velcroReference</div>
{{!-- Having an issue referencing a typed 'this' in the modifier --}}
{{! @glint-ignore }}
<div id="velcro2" {{velcro "#velcro-reference" offsetOptions=this.offsetDistance placement="bottom-start"}}>Velcro</div>
<div id="velcro2" {{velcro "#velcro-reference" offsetOptions=offsetDistance placement="bottom-start"}}>Velcro</div>
</div>
</div>
`);
</template>);

let velcro1 = findElement('#velcro1');
let velcro2 = findElement('#velcro2');
Expand All @@ -120,21 +101,19 @@ module('Integration | Modifier | velcro', function (hooks) {
test('can pass in skidding', async function (assert) {
let offsetSkidding = 10;

this.setProperties({ offsetSkidding: { crossAxis: offsetSkidding } });
let offsetOptions = { crossAxis: offsetSkidding };

await render(hbs`
await render(<template>
{{!-- render 2 Velcro's atop the other, pass one a skidding offset and compare the left values --}}
<div>
<div id="velcro-reference">Velcro reference</div>
<div id="velcro1" {{velcro "#velcro-reference"}}>Velcro</div>
</div>
<div>
<div id="velcro-reference">velcroReference</div>
{{!-- Having an issue referencing a typed 'this' in the modifier --}}
{{! @glint-ignore }}
<div id="velcro2" {{velcro "#velcro-reference" offsetOptions=this.offsetSkidding}}>Velcro</div>
<div id="velcro2" {{velcro "#velcro-reference" offsetOptions=offsetOptions}}>Velcro</div>
</div>
`);
</template>);

let velcro1 = findElement('#velcro1');
let velcro2 = findElement('#velcro2');
Expand Down

0 comments on commit f6d6c21

Please sign in to comment.