Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Use Glint types in test-app #969

Merged
merged 4 commits into from
Aug 8, 2023
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension


Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
310 changes: 203 additions & 107 deletions pnpm-lock.yaml

Large diffs are not rendered by default.

4 changes: 2 additions & 2 deletions test-app/app/components/demo-upload.hbs
Original file line number Diff line number Diff line change
Expand Up @@ -43,9 +43,9 @@
<div class="card text-center">
{{#if file.file}}
<div class="mb-4">{{file.file.progress}}%</div>
{{else if (equals file.type "image")}}
{{else if file.isImage}}
<img src={{file.preview}} alt={{file.filename}}>
{{else if (equals file.type "video")}}
{{else if file.isVideo}}
<video src={{file.preview}} alt={{file.filename}} muted loop autoplay>
</video>
{{/if}}
Expand Down
43 changes: 0 additions & 43 deletions test-app/app/components/demo-upload.js

This file was deleted.

61 changes: 61 additions & 0 deletions test-app/app/components/demo-upload.ts
Original file line number Diff line number Diff line change
@@ -0,0 +1,61 @@
import Component from '@glimmer/component';
import { tracked } from '@glimmer/tracking';
import { action } from '@ember/object';
import { UploadFile } from 'ember-file-upload';
import { type TrackedArray } from 'tracked-built-ins';

export interface DemoUploadSignature {
Element: HTMLDivElement;
Args: {
files: TrackedArray<Asset>;
};
Blocks: Record<string, never>;
}

export class Asset {
@tracked filename;
@tracked file;
@tracked preview?: string;
@tracked type?: string;

constructor({ filename, file }: { filename: string, file: UploadFile }) {
this.filename = filename;
this.file = file;
}

get isImage() {
return this.type === 'image';
}

get isVideo() {
return this.type === 'video';
}
}

export default class DemoUpload extends Component<DemoUploadSignature> {
@action
async uploadProof(file: UploadFile) {
const asset = new Asset({
filename: file.name,
file,
});

this.args.files.push(asset);

let response;
try {
response = await file.upload('/photos/new');
} catch (e) {
return;
}

const json = await response.json();
const { filename, url, type } = json.data.attributes;
Object.assign(asset, {
filename,
preview: url,
type,
file: null,
});
}
}
6 changes: 0 additions & 6 deletions test-app/app/templates/application.hbs
Original file line number Diff line number Diff line change
@@ -1,7 +1 @@
{{page-title "TestApp"}}

{{!-- The following component displays Ember's default welcome message. --}}
<WelcomePage />
{{!-- Feel free to remove this! --}}

{{outlet}}
7 changes: 5 additions & 2 deletions test-app/package.json
Original file line number Diff line number Diff line change
Expand Up @@ -20,7 +20,7 @@
"lint:hbs:fix": "ember-template-lint . --fix",
"lint:js": "eslint . --cache",
"lint:js:fix": "eslint . --fix",
"lint:types": "tsc --noEmit",
"lint:types": "glint",
"start": "ember serve",
"test": "concurrently \"npm:lint\" \"npm:test:*\" --names \"lint,test:\"",
"test:ember": "ember test",
Expand All @@ -33,10 +33,13 @@
"@embroider/test-setup": "^2.0.0",
"@glimmer/component": "^1.1.2",
"@glimmer/tracking": "^1.1.2",
"@glint/core": "^1.0.2",
"@glint/environment-ember-loose": "^1.0.2",
"@glint/template": "^1.0.2",
"@tsconfig/ember": "^2.0.0",
"@types/qunit": "^2.19.5",
"@typescript-eslint/eslint-plugin": "^5.59.7",
"@typescript-eslint/parser": "^5.59.7",
"@types/qunit": "^2.19.5",
"babel-plugin-dynamic-import-node": "^2.3.3",
"broccoli-asset-rev": "^3.0.0",
"concurrently": "^8.0.1",
Expand Down
27 changes: 16 additions & 11 deletions test-app/tests/helpers/file-queue-helper-test.ts
Original file line number Diff line number Diff line change
Expand Up @@ -12,7 +12,7 @@ import { later } from '@ember/runloop';
import { MirageTestContext, setupMirage } from 'ember-cli-mirage/test-support';

interface LocalContext extends MirageTestContext {
filter: (file: UploadFile) => void;
filter: (file: File, files: File[], index: number) => boolean;
filesSelected: (files: UploadFile[]) => void;
fileAdded: (file: UploadFile) => void;
fileRemoved: (file: UploadFile) => void;
Expand All @@ -27,9 +27,12 @@ module('Integration | Helper | file-queue', function (hooks) {
setupMirage(hooks);

test('filter is triggered when selecting files', async function (this: LocalContext, assert) {
this.filter = (file) => assert.step(`filter: ${file.name}`);
this.filter = (file) => {
assert.step(`filter: ${file.name}`);
return true;
}

await render(hbs`
await render<LocalContext>(hbs`
{{#let (file-queue) as |queue|}}
<label>
<input type="file" {{queue.selectFile filter=this.filter}} hidden>
Expand All @@ -49,7 +52,7 @@ module('Integration | Helper | file-queue', function (hooks) {
`files selected: ${files.map((file) => file.name).join(', ')}`
);

await render(hbs`
await render<LocalContext>(hbs`
{{#let (file-queue) as |queue|}}
<label>
<input type="file" {{queue.selectFile onFilesSelected=this.filesSelected}} hidden>
Expand All @@ -70,8 +73,9 @@ module('Integration | Helper | file-queue', function (hooks) {
});

test('falls back to default name', async function (this: LocalContext, assert) {
await render(hbs`
await render<LocalContext>(hbs`
{{#let (file-queue) as |queue|}}
{{! @glint-ignore: https://github.com/typed-ember/glint/discussions/611 }}
<output>{{queue.name}}</output>
Comment on lines +78 to 79
Copy link
Collaborator Author

@gilest gilest Aug 8, 2023

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

These are the only checks I'm ignoring.

The story is that QueueName has a type of string | symbol but a symbol is not a variant of Glint's ContentValue type which represents values expected to be rendered directly by Glimmer.

Discussion reference: typed-ember/glint/discussions/611

{{/let}}
`);
Expand All @@ -80,8 +84,9 @@ module('Integration | Helper | file-queue', function (hooks) {
});

test('can be parametrized by name', async function (this: LocalContext, assert) {
await render(hbs`
await render<LocalContext>(hbs`
{{#let (file-queue name="line-up") as |queue|}}
{{! @glint-ignore: https://github.com/typed-ember/glint/discussions/611 }}
<output>{{queue.name}}</output>
{{/let}}
`);
Expand All @@ -93,7 +98,7 @@ module('Integration | Helper | file-queue', function (hooks) {
this.fileAdded = (file) => assert.step(`file added: ${file.name}`);
this.fileRemoved = (file) => assert.step(`file removed: ${file.name}`);

await render(hbs`
await render<LocalContext>(hbs`
{{#let (file-queue onFileAdded=this.fileAdded onFileRemoved=this.fileRemoved) as |queue|}}
{{#each queue.files as |file|}}
<span data-test-file>
Expand Down Expand Up @@ -147,7 +152,7 @@ module('Integration | Helper | file-queue', function (hooks) {
);
};

await render(hbs`
await render<LocalContext>(hbs`
{{#let (file-queue onFileAdded=this.upload onUploadStarted=this.uploadStarted) as |queue|}}
<label>
<input type="file" {{queue.selectFile}}>
Expand Down Expand Up @@ -183,7 +188,7 @@ module('Integration | Helper | file-queue', function (hooks) {
assert.strictEqual(response.status, 201, 'response status present');
};

await render(hbs`
await render<LocalContext>(hbs`
{{#let (file-queue onFileAdded=this.upload onUploadSucceeded=this.uploadSucceeded) as |queue|}}
<label>
<input type="file" {{queue.selectFile}}>
Expand Down Expand Up @@ -224,7 +229,7 @@ module('Integration | Helper | file-queue', function (hooks) {
assert.strictEqual(response.status, 500, 'response status present');
};

await render(hbs`
await render<LocalContext>(hbs`
{{#let (file-queue onFileAdded=this.upload onUploadFailed=this.uploadFailed) as |queue|}}
<label>
<input type="file" {{queue.selectFile}}>
Expand All @@ -247,7 +252,7 @@ module('Integration | Helper | file-queue', function (hooks) {
}, 100);
};

await render(hbs`
await render<LocalContext>(hbs`
{{#let (file-queue onFileAdded=this.fileAdded) as |queue|}}
{{#each queue.files as |file|}}
<span data-test-file>{{file.name}}</span>
Expand Down
21 changes: 11 additions & 10 deletions test-app/tests/integration/components/file-dropzone-test.ts
Original file line number Diff line number Diff line change
Expand Up @@ -12,7 +12,7 @@ import type { FileQueueService, UploadFile } from 'ember-file-upload';

interface LocalTestContext extends TestContext {
queue: Queue;
filter: (file: UploadFile) => void;
filter: (file: File, files: File[], index: number) => boolean;
onDragEnter: (files: File[]) => void;
onDragLeave: (files: File[]) => void;
onDrop: (files: UploadFile[]) => void;
Expand All @@ -31,7 +31,7 @@ module('Integration | Component | FileDropzone', function (hooks) {
test('onDragEnter is called when a file is dragged over', async function (this: LocalTestContext, assert) {
this.onDragEnter = () => assert.step('onDragEnter');

await render(hbs`
await render<LocalTestContext>(hbs`
<FileDropzone
class="test-dropzone"
@queue={{this.queue}}
Expand All @@ -46,7 +46,7 @@ module('Integration | Component | FileDropzone', function (hooks) {
test('filter and onDrop', async function (this: LocalTestContext, assert) {
this.filter = (file) => file.name.includes('.txt');
this.onDrop = (files) => files.forEach((file) => assert.step(file.name));
await render(hbs`
await render<LocalTestContext>(hbs`
<FileDropzone
class="test-dropzone"
@queue={{this.queue}}
Expand All @@ -68,7 +68,7 @@ module('Integration | Component | FileDropzone', function (hooks) {
test('dropping a file calls onDrop', async function (this: LocalTestContext, assert) {
this.onDrop = (files) => files.forEach((file) => assert.step(file.name));

await render(hbs`
await render<LocalTestContext>(hbs`
<FileDropzone
class="test-dropzone"
@queue={{this.queue}}
Expand All @@ -83,7 +83,7 @@ module('Integration | Component | FileDropzone', function (hooks) {
test('onDragLeave is called when a file is dragged out', async function (this: LocalTestContext, assert) {
this.onDragLeave = () => assert.step('onDragLeave');

await render(hbs`
await render<LocalTestContext>(hbs`
<FileDropzone
class="test-dropzone"
@queue={{this.queue}}
Expand All @@ -97,11 +97,12 @@ module('Integration | Component | FileDropzone', function (hooks) {
});

test('yielded properties', async function (this: LocalTestContext, assert) {
await render(hbs`
await render<LocalTestContext>(hbs`
{{#let (file-queue name='test') as |helperQueue|}}
<FileDropzone @queue={{helperQueue}} as |dropzone queue|>
<div class="supported">{{dropzone.supported}}</div>
<div class="active">{{dropzone.active}}</div>
{{! @glint-ignore: https://github.com/typed-ember/glint/discussions/611 }}
<div class="queue-name">{{queue.name}}</div>
</FileDropzone>
{{/let}}
Expand All @@ -115,7 +116,7 @@ module('Integration | Component | FileDropzone', function (hooks) {
test('dropping multiple files calls onDrop with both files', async function (this: LocalTestContext, assert) {
this.onDrop = (files) => files.forEach((file) => assert.step(file.name));

await render(hbs`
await render<LocalTestContext>(hbs`
<FileDropzone
class="test-dropzone"
@queue={{this.queue}}
Expand All @@ -134,7 +135,7 @@ module('Integration | Component | FileDropzone', function (hooks) {
test('multiple=true dropping multiple files calls onDrop with both files', async function (this: LocalTestContext, assert) {
this.onDrop = (files) => files.forEach((file) => assert.step(file.name));

await render(hbs`
await render<LocalTestContext>(hbs`
<FileDropzone
class="test-dropzone"
@queue={{this.queue}}
Expand All @@ -154,7 +155,7 @@ module('Integration | Component | FileDropzone', function (hooks) {
test('multiple=false dropping multiple files calls onDrop with one file', async function (this: LocalTestContext, assert) {
this.onDrop = (files) => files.forEach((file) => assert.step(file.name));

await render(hbs`
await render<LocalTestContext>(hbs`
<FileDropzone
class="test-dropzone"
@queue={{this.queue}}
Expand All @@ -175,7 +176,7 @@ module('Integration | Component | FileDropzone', function (hooks) {
test('regression: drop events from other DOM nodes are not prevented', async function (this: LocalTestContext, assert) {
const documentDragListener = () =>
assert.step('documentDragListener called');
await render(hbs`
await render<LocalTestContext>(hbs`
<FileDropzone @queue={{this.queue}} />

<div class="independent-drag-target"></div>
Expand Down
6 changes: 3 additions & 3 deletions test-app/tests/integration/mirage-handler-test.ts
Original file line number Diff line number Diff line change
Expand Up @@ -59,7 +59,7 @@ module('Integration | Component | mirage-handler', function (hooks) {
);

this.fileAdded = (file) => file.upload('/folder/1/file');
await render(hbs`
await render<LocalTestContext>(hbs`
{{#let (file-queue name="test" onFileAdded=this.fileAdded) as |queue|}}
<label>
<input type="file" {{queue.selectFile}} />
Expand Down Expand Up @@ -153,7 +153,7 @@ module('Integration | Component | mirage-handler', function (hooks) {
this.fileAdded = (file) => {
return file.upload('/upload-file');
};
await render(hbs`
await render<LocalTestContext>(hbs`
{{#let (file-queue name="test" onFileAdded=this.fileAdded) as |queue|}}
<label>
<input type="file" {{queue.selectFile}} />
Expand Down Expand Up @@ -195,7 +195,7 @@ module('Integration | Component | mirage-handler', function (hooks) {
this.fileAdded = (file) => {
return file.upload('/upload-file');
};
await render(hbs`
await render<LocalTestContext>(hbs`
{{#let (file-queue name="test" onFileAdded=this.fileAdded) as |queue|}}
<label>
<input type="file" {{queue.selectFile}} />
Expand Down
4 changes: 2 additions & 2 deletions test-app/tests/integration/queue-listeners-test.ts
Original file line number Diff line number Diff line change
Expand Up @@ -57,7 +57,7 @@ module('Integration | queue listeners', function (hooks) {
assert.step(`second component: ${file?.name}`);
};

await render(hbs`
await render<LocalTestContext>(hbs`
{{#if this.state.firstComponent}}
<label>
<input type="file" {{this.queue.selectFile onFilesSelected=this.firstOnFilesSelected}} />
Expand All @@ -83,7 +83,7 @@ module('Integration | queue listeners', function (hooks) {
assert.step(`second component: ${file?.name}`);
};

await render(hbs`
await render<LocalTestContext>(hbs`
{{#if this.state.firstComponent}}
{{#let (file-queue onFileAdded=this.firstOnFileAdd) as |queue|}}
<label>
Expand Down
2 changes: 1 addition & 1 deletion test-app/tests/integration/services/file-queue-test.ts
Original file line number Diff line number Diff line change
Expand Up @@ -21,7 +21,7 @@ module('Integration | Service | file queue', function (hooks) {
);
existingQueue.add(existingQueueFile);

await render(hbs`
await render<LocalTestContext>(hbs`
<div id="files">
{{#each this.subject.files as |file|}}
{{file.name}}
Expand Down
Loading