Skip to content

Commit c70ad83

Browse files
NullVoxPopuliNullVoxPopuli
committed
wip
1 parent 4e202f5 commit c70ad83

File tree

1 file changed

+59
-58
lines changed

1 file changed

+59
-58
lines changed

‎test-app/tests/polyfill/anchor-hash-targets-test.gts‎

Lines changed: 59 additions & 58 deletions
Original file line numberDiff line numberDiff line change
@@ -1,13 +1,16 @@
1+
import Component from '@glimmer/component';
12
import Controller from '@ember/controller';
23
import { assert as debugAssert } from '@ember/debug';
4+
import { hash } from '@ember/helper';
5+
import { on } from '@ember/modifier';
6+
import { LinkTo } from '@ember/routing';
37
import Route from '@ember/routing/route';
48
import { inject as service } from '@ember/service';
59
import { click, find, settled, visit, waitUntil } from '@ember/test-helpers';
6-
import { hbs } from 'ember-cli-htmlbars';
710
import { module, test } from 'qunit';
811
import { setupApplicationTest } from 'ember-qunit';
912

10-
import { scrollToHash, uiSettled } from 'ember-url-hash-polyfill';
13+
import { scrollToHash, uiSettled } from 'ember-primitives/polyfill/anchor-hash-targets';
1114

1215
import { setupRouter } from './-helpers';
1316

@@ -28,8 +31,8 @@ module('Hash', function (hooks) {
2831
function isVisible(element: null | Element, parent: Element) {
2932
if (!element) return false;
3033

31-
let bounds = element.getBoundingClientRect();
32-
let parentBounds = parent.getBoundingClientRect();
34+
const bounds = element.getBoundingClientRect();
35+
const parentBounds = parent.getBoundingClientRect();
3336

3437
return (
3538
bounds.top >= parentBounds.top &&
@@ -43,23 +46,23 @@ module('Hash', function (hooks) {
4346
test('in-page-links can be scrolled to with native anchors', async function (assert) {
4447
this.owner.register(
4548
'template:application',
46-
hbs`
47-
<a id='first-link' href="#first">first</a>
48-
<a id='second-link' href="#second">first</a>
49+
<template>
50+
<a id="first-link" href="#first">first</a>
51+
<a id="second-link" href="#second">first</a>
4952

5053
<h1 id="first">first!</h1>
5154
<div style="height: 100vh;"></div>
5255

5356
<h1 id="second">second!</h1>
5457
<div style="height: 100vh;"></div>
55-
`
58+
</template>
5659
);
5760

5861
await visit('/');
5962

60-
let container = document.querySelector('#ember-testing-container');
61-
let first = find('#first');
62-
let second = find('#second');
63+
const container = document.querySelector('#ember-testing-container');
64+
const first = find('#first');
65+
const second = find('#second');
6366

6467
debugAssert(`Expected all test elements to exist`, container && first && second);
6568

@@ -81,7 +84,7 @@ module('Hash', function (hooks) {
8184
});
8285

8386
test('in-page-links can be scrolled to with custom links', async function (assert) {
84-
class TestApplication extends Controller {
87+
class TestApplication extends Component {
8588
handleClick = (event: MouseEvent) => {
8689
event.preventDefault();
8790

@@ -90,32 +93,30 @@ module('Hash', function (hooks) {
9093
event.target instanceof HTMLAnchorElement
9194
);
9295

93-
let [, hash] = event.target.href.split('#');
96+
const [, hash] = event.target.href.split('#');
9497

9598
scrollToHash(hash);
9699
};
97-
}
98-
this.owner.register('controller:application', TestApplication);
99100

100-
this.owner.register(
101-
'template:application',
102-
hbs`
103-
<a id='first-link' href="#first" {{on 'click' this.handleClick}}>first</a>
104-
<a id='second-link' href="#second" {{on 'click' this.handleClick}}>first</a>
101+
<template>
102+
<a id="first-link" href="#first" {{on "click" this.handleClick}}>first</a>
103+
<a id="second-link" href="#second" {{on "click" this.handleClick}}>first</a>
105104

106105
<h1 id="first">first!</h1>
107106
<div style="height: 100vh;"></div>
108107

109108
<h1 id="second">second!</h1>
110109
<div style="height: 100vh;"></div>
111-
`
112-
);
110+
</template>
111+
}
112+
113+
this.owner.register('template:application', TestApplication);
113114

114115
await visit('/');
115116

116-
let container = document.querySelector('#ember-testing-container');
117-
let first = find('#first');
118-
let second = find('#second');
117+
const container = document.querySelector('#ember-testing-container');
118+
const first = find('#first');
119+
const second = find('#second');
119120

120121
debugAssert(`Expected all test elements to exist`, container && first && second);
121122

@@ -152,30 +153,30 @@ module('Hash', function (hooks) {
152153
queryParams = ['test'];
153154
test = false;
154155
}
155-
class Index extends Controller {
156+
class Index extends Component {
156157
@service declare router: RouterService;
158+
159+
<template>
160+
<out>
161+
qp:
162+
{{! @glint-expect-error }}
163+
{{this.router.currentRoute.queryParams.test}}
164+
</out>
165+
</template>
157166
}
158167

159168
this.owner.register('controller:application', TestApplication);
160-
this.owner.register('controller:index', Index);
161169
this.owner.register(
162170
'template:application',
163-
hbs`
164-
<LinkTo id='foo' @query={{hash test='foo'}}>foo</LinkTo>
165-
<LinkTo id='default' @query={{hash test=false}}>default</LinkTo>
171+
<template>
172+
<LinkTo id="foo" @query={{hash test="foo"}}>foo</LinkTo>
173+
<LinkTo id="default" @query={{hash test=false}}>default</LinkTo>
166174
{{outlet}}
167-
`
168-
);
169-
this.owner.register(
170-
'template:index',
171-
hbs`
172-
<out>
173-
qp: {{this.router.currentRoute.queryParams.test}}
174-
</out>
175-
`
175+
</template>
176176
);
177+
this.owner.register('template:index', Index);
177178

178-
let router = this.owner.lookup('service:router');
179+
const router = this.owner.lookup('service:router');
179180

180181
await visit('/');
181182
assert.dom('out').hasText('qp:');
@@ -198,28 +199,28 @@ module('Hash', function (hooks) {
198199
test('cross-page-Llinks are properly scrolled to', async function (assert) {
199200
this.owner.register(
200201
'template:foo',
201-
hbs`
202+
<template>
202203
<h1 id="foo-first">first!</h1>
203204
<div style="height: 100vh;"></div>
204205

205206
<h1 id="foo-second">second!</h1>
206207
<div style="height: 100vh;"></div>
207-
`
208+
</template>
208209
);
209210

210211
this.owner.register(
211212
'template:bar',
212-
hbs`
213+
<template>
213214
<h1 id="bar-first">first!</h1>
214215
<div style="height: 100vh;"></div>
215216

216217
<h1 id="bar-second">second!</h1>
217218
<div style="height: 100vh;"></div>
218-
`
219+
</template>
219220
);
220221

221-
let router = this.owner.lookup('service:router');
222-
let container = document.querySelector('#ember-testing-container');
222+
const router = this.owner.lookup('service:router');
223+
const container = document.querySelector('#ember-testing-container');
223224

224225
debugAssert(`Expected all test elements to exist`, container);
225226

@@ -252,16 +253,16 @@ module('Hash', function (hooks) {
252253
test('transition to route with loading sub state is properly handled', async function (assert) {
253254
this.owner.register(
254255
'template:application',
255-
hbs`
256+
<template>
256257
<h1 id="first">first!</h1>
257258
<div style="height: 100vh;"></div>
258259

259260
<h1 id="second">second!</h1>
260261
<div style="height: 100vh;"></div>
261-
`
262+
</template>
262263
);
263264

264-
this.owner.register('template:application-loading', hbs`Loading...`);
265+
this.owner.register('template:application-loading', <template>Loading...</template>);
265266

266267
class ApplicationRoute extends Route {
267268
model() {
@@ -277,33 +278,33 @@ module('Hash', function (hooks) {
277278
await visit('/#second');
278279
await scrollSettled();
279280

280-
let container = document.querySelector('#ember-testing-container');
281-
let first = find('#first');
282-
let second = find('#second');
281+
const container = document.querySelector('#ember-testing-container');
282+
const first = find('#first');
283+
const second = find('#second');
283284

284285
debugAssert(`Expected all test elements to exist`, container && first && second);
285286

286-
await waitUntil(() => isVisible(second, container as Element), {
287+
await waitUntil(() => isVisible(second, container), {
287288
timeoutMessage: 'second header is visible',
288289
});
289290

290291
assert.equal(location.hash, '#second', 'hash appears in URL');
291292
});
292293
});
293294

294-
export async function scrollSettled() {
295+
async function scrollSettled() {
295296
// wait for previous stuff to finish
296297
await settled();
297298

298-
let timeout = 200; // ms;
299-
let start = new Date().getTime();
299+
const timeout = 200; // ms;
300+
const start = new Date().getTime();
300301

301302
await Promise.race([
302303
new Promise((resolve) => setTimeout(resolve, 1000)),
303304
// scrollIntoView does not trigger scroll events
304305
new Promise((resolve) => {
305-
let interval = setInterval(() => {
306-
let now = new Date().getTime();
306+
const interval = setInterval(() => {
307+
const now = new Date().getTime();
307308

308309
if (now - start >= timeout) {
309310
clearInterval(interval);

0 commit comments

Comments
 (0)