From dc5d84da37f8938521a2a5fa097631b31a49791b Mon Sep 17 00:00:00 2001 From: Sergey Astapov Date: Thu, 10 Aug 2023 14:24:15 -0400 Subject: [PATCH] chore: convert integration tests to gjs format --- ember-css-transitions/package.json | 5 +- ember-css-transitions/types/index.d.ts | 1 + pnpm-lock.yaml | 69 +++- test-app/.prettierrc.js | 3 +- test-app/package.json | 3 + ...sition-test.js => css-transition-test.gjs} | 314 ++++++++++-------- test-app/tsconfig.json | 2 +- test-app/types/global.d.ts | 1 + 8 files changed, 259 insertions(+), 139 deletions(-) create mode 100644 ember-css-transitions/types/index.d.ts rename test-app/tests/integration/components/{css-transition-test.js => css-transition-test.gjs} (63%) diff --git a/ember-css-transitions/package.json b/ember-css-transitions/package.json index 1914488..dcb5a3e 100644 --- a/ember-css-transitions/package.json +++ b/ember-css-transitions/package.json @@ -76,7 +76,10 @@ } }, "exports": { - ".": "./dist/addon-main.cjs", + ".": { + "types": "./types/index.d.ts", + "default": "./dist/index.js" + }, "./*": { "types": "./types/*.d.ts", "default": "./dist/*.js" diff --git a/ember-css-transitions/types/index.d.ts b/ember-css-transitions/types/index.d.ts new file mode 100644 index 0000000..7cfdfd9 --- /dev/null +++ b/ember-css-transitions/types/index.d.ts @@ -0,0 +1 @@ +export { default as cssTransition } from './modifiers/css-transition'; diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index 6934705..aeaf1e6 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -285,6 +285,9 @@ importers: '@glint/environment-ember-loose': specifier: ^1.0.2 version: 1.0.2(@glimmer/component@1.1.2)(@glint/template@1.0.2)(@types/ember__array@4.0.4)(@types/ember__component@4.0.14)(@types/ember__controller@4.0.5)(@types/ember__object@4.0.6)(@types/ember__routing@4.0.13)(ember-cli-htmlbars@6.2.0)(ember-modifier@4.1.0) + '@glint/environment-ember-template-imports': + specifier: ^1.0.2 + version: 1.0.2(@glint/environment-ember-loose@1.0.2)(@glint/template@1.0.2)(@types/ember__component@4.0.14)(@types/ember__helper@4.0.2)(@types/ember__modifier@4.0.5)(@types/ember__routing@4.0.13)(ember-template-imports@3.4.2) '@glint/template': specifier: ^1.0.2 version: 1.0.2 @@ -450,6 +453,9 @@ importers: ember-source-channel-url: specifier: ^3.0.0 version: 3.0.0 + ember-template-imports: + specifier: ^3.4.2 + version: 3.4.2 ember-template-lint: specifier: ^5.11.0 version: 5.11.1 @@ -480,6 +486,9 @@ importers: prettier: specifier: ^2.8.8 version: 2.8.8 + prettier-plugin-ember-template-tag: + specifier: ^0.3.2 + version: 0.3.2 qunit: specifier: ^2.19.4 version: 2.19.4 @@ -3200,6 +3209,35 @@ packages: ember-modifier: 4.1.0(ember-source@5.2.0-beta.3) dev: true + /@glint/environment-ember-template-imports@1.0.2(@glint/environment-ember-loose@1.0.2)(@glint/template@1.0.2)(@types/ember__component@4.0.14)(@types/ember__helper@4.0.2)(@types/ember__modifier@4.0.5)(@types/ember__routing@4.0.13)(ember-template-imports@3.4.2): + resolution: {integrity: sha512-PAH7obVGXPFU7gLb04JVlqiNtz/j7Q29BBTAyhS7EVy99Hc6CPe+nV6+xhUPKu/S5GOVn3MWehVt/6gXPJ+cnA==} + peerDependencies: + '@glint/environment-ember-loose': ^1.0.2 + '@glint/template': ^1.0.2 + '@types/ember__component': ^4.0.10 + '@types/ember__helper': ^4.0.1 + '@types/ember__modifier': ^4.0.3 + '@types/ember__routing': ^4.0.12 + ember-template-imports: ^3.0.0 + peerDependenciesMeta: + '@types/ember__component': + optional: true + '@types/ember__helper': + optional: true + '@types/ember__modifier': + optional: true + '@types/ember__routing': + optional: true + dependencies: + '@glint/environment-ember-loose': 1.0.2(@glimmer/component@1.1.2)(@glint/template@1.0.2)(@types/ember__array@4.0.4)(@types/ember__component@4.0.14)(@types/ember__controller@4.0.5)(@types/ember__object@4.0.6)(@types/ember__routing@4.0.13)(ember-cli-htmlbars@6.2.0)(ember-modifier@4.1.0) + '@glint/template': 1.0.2 + '@types/ember__component': 4.0.14(@babel/core@7.22.9) + '@types/ember__helper': 4.0.2(@babel/core@7.22.9) + '@types/ember__modifier': 4.0.5(@babel/core@7.22.9) + '@types/ember__routing': 4.0.13(@babel/core@7.22.9) + ember-template-imports: 3.4.2 + dev: true + /@glint/template@1.0.2: resolution: {integrity: sha512-kFWfJrS7XM0NjC5YSN0CWA9FiN0mhUvWVlQ2O7YRz/uhrO8+TVYNLst0WKELRbfCXbdI7wyYQkazNgz6FoL9CA==} dev: true @@ -8020,6 +8058,11 @@ packages: deprecated: core-js@<3.23.3 is no longer maintained and not recommended for usage due to the number of issues. Because of the V8 engine whims, feature detection in old core-js versions could cause a slowdown up to 100x even if nothing is polyfilled. Some versions have web compatibility issues. Please, upgrade your dependencies to the actual version of core-js. requiresBuild: true + /core-js@3.32.0: + resolution: {integrity: sha512-rd4rYZNlF3WuoYuRIDEmbR/ga9CeuWX9U05umAvgrrZoHY4Z++cp/xwPQMvUpBB4Ag6J8KfD80G0zwCyaSxDww==} + requiresBuild: true + dev: true + /core-object@2.0.6: resolution: {integrity: sha512-gS1NpJFBKh/r+cYdNeaQ+ab/+2rRBq5B7nUgdXVZ9brCgpWnhYXY//tyBooYXxyuQZC9zE5yUAeCdokcwUajlQ==} dependencies: @@ -9116,7 +9159,7 @@ packages: ember-source: ^3.28.0 || >= 4.0.0 dependencies: ember-cli-babel: 7.26.11 - ember-source: 5.2.0-beta.3(@babel/core@7.22.9)(@glimmer/component@1.1.2)(@glint/template@1.0.2)(rsvp@4.8.5)(webpack@5.88.1) + ember-source: 5.2.0-beta.3(@babel/core@7.22.10)(@glimmer/component@1.1.2)(rsvp@4.8.5)(webpack@5.88.1) git-repo-info: 2.1.1 transitivePeerDependencies: - supports-color @@ -10109,7 +10152,7 @@ packages: '@embroider/addon-shim': 1.8.6 ember-cli-normalize-entity-name: 1.0.0 ember-cli-string-utils: 1.1.0 - ember-source: 5.2.0-beta.3(@babel/core@7.22.9)(@glimmer/component@1.1.2)(@glint/template@1.0.2)(rsvp@4.8.5)(webpack@5.88.1) + ember-source: 5.2.0-beta.3(@babel/core@7.22.10)(@glimmer/component@1.1.2)(rsvp@4.8.5)(webpack@5.88.1) transitivePeerDependencies: - supports-color dev: true @@ -10187,7 +10230,7 @@ packages: dependencies: '@ember/string': 3.1.1 ember-cli-babel: 7.26.11 - ember-source: 5.2.0-beta.3(@babel/core@7.22.9)(@glimmer/component@1.1.2)(@glint/template@1.0.2)(rsvp@4.8.5)(webpack@5.88.1) + ember-source: 5.2.0-beta.3(@babel/core@7.22.10)(@glimmer/component@1.1.2)(rsvp@4.8.5)(webpack@5.88.1) transitivePeerDependencies: - supports-color dev: true @@ -16055,6 +16098,20 @@ packages: fast-diff: 1.3.0 dev: true + /prettier-plugin-ember-template-tag@0.3.2: + resolution: {integrity: sha512-L/15ujsvuOpuIB9y9XJJs/QOPgdot76T0U1Q34C19igS1lsaL/cdRw8rXIVC5Z2x362yZI33Qodo//7kK7ItkA==} + engines: {node: 14.* || 16.* || >= 18} + dependencies: + '@babel/core': 7.22.10 + '@glimmer/syntax': 0.84.3 + ember-cli-htmlbars: 6.2.0 + ember-template-imports: 3.4.2 + prettier: 2.8.8 + ts-replace-all: 1.0.0 + transitivePeerDependencies: + - supports-color + dev: true + /prettier@2.8.8: resolution: {integrity: sha512-tdN8qQGvNjw4CHbY+XXk0JgCXn9QiF21a55rBe5LJAU+kDyC4WQn4+awm2Xfk2lQMk5fKup9XgzTZtGkjBdP9Q==} engines: {node: '>=10.13.0'} @@ -18641,6 +18698,12 @@ packages: engines: {node: '>=0.10.0'} dev: true + /ts-replace-all@1.0.0: + resolution: {integrity: sha512-6uBtdkw3jHXkPtx/e9xB/5vcngMm17CyJYsS2YZeQ+9FdRnt6Ev5g931Sg2p+dxbtMGoCm13m3ax/obicTZIkQ==} + dependencies: + core-js: 3.32.0 + dev: true + /tslib@1.14.1: resolution: {integrity: sha512-Xni35NKzjgMrwevysHTCArtLDpPvye8zV/0E4EyYn43P7/7qvQwPh9BGkHewbMulVntbigmcT7rdX3BNo9wRJg==} dev: true diff --git a/test-app/.prettierrc.js b/test-app/.prettierrc.js index e5f7b6d..c7dd12b 100644 --- a/test-app/.prettierrc.js +++ b/test-app/.prettierrc.js @@ -1,9 +1,10 @@ 'use strict'; module.exports = { + plugins: ['prettier-plugin-ember-template-tag'], overrides: [ { - files: '*.{js,ts}', + files: '*.{js,ts,gjs,gts}', options: { singleQuote: true, }, diff --git a/test-app/package.json b/test-app/package.json index 44e5dc9..3f63bcc 100644 --- a/test-app/package.json +++ b/test-app/package.json @@ -38,6 +38,7 @@ "@glimmer/tracking": "^1.1.2", "@glint/core": "^1.0.2", "@glint/environment-ember-loose": "^1.0.2", + "@glint/environment-ember-template-imports": "^1.0.2", "@glint/template": "^1.0.2", "@tsconfig/ember": "^3.0.0", "@types/ember": "^4.0.4", @@ -93,6 +94,7 @@ "ember-resolver": "^10.1.1", "ember-source": "~5.2.0-beta.3", "ember-source-channel-url": "^3.0.0", + "ember-template-imports": "^3.4.2", "ember-template-lint": "^5.11.0", "ember-try": "^2.0.0", "eslint": "^8.44.0", @@ -103,6 +105,7 @@ "eslint-plugin-qunit": "^8.0.0", "loader.js": "^4.7.0", "prettier": "^2.8.8", + "prettier-plugin-ember-template-tag": "^0.3.2", "qunit": "^2.19.4", "qunit-dom": "^2.0.0", "rsvp": "^4.8.5", diff --git a/test-app/tests/integration/components/css-transition-test.js b/test-app/tests/integration/components/css-transition-test.gjs similarity index 63% rename from test-app/tests/integration/components/css-transition-test.js rename to test-app/tests/integration/components/css-transition-test.gjs index e1362d2..590f61b 100644 --- a/test-app/tests/integration/components/css-transition-test.js +++ b/test-app/tests/integration/components/css-transition-test.gjs @@ -1,66 +1,85 @@ import { module, test } from 'qunit'; import { setupRenderingTest } from 'ember-qunit'; -import { render, find, waitFor, waitUntil } from '@ember/test-helpers'; +import { render, rerender, find, waitFor, waitUntil } from '@ember/test-helpers'; import { hbs } from 'ember-cli-htmlbars'; +import { tracked } from '@glimmer/tracking'; import { spy } from 'sinon'; +import MyComponent from 'test-app/components/my-component'; +import GlimmerComponent from 'test-app/components/glimmer-component'; +import { cssTransition } from 'ember-css-transitions'; module('Integration | Component | transition group', function (hooks) { setupRenderingTest(hooks); + class State { + @tracked show = false; + @tracked showSibling = false; + didTransitionIn; + didTransitionOut + } + + /** @type {State} */ + let state; + + hooks.beforeEach(function () { + state = new State; + }); + module('Enter and leave via name', function () { let testCases = [ { name: 'element', - template: hbs` - {{#if this.show}} -
-

Çup?

-
- {{/if}} - `, + template: , }, { name: 'classic component', - template: hbs` - {{#if this.show}} - -

Çup?

- - {{/if}} - `, + template: , }, { name: 'glimmer component', - template: hbs` - {{#if this.show}} - -

Çup?

- - {{/if}} - `, + template: , }, ]; testCases.forEach((i) => { test(`enter and leave transitions work (${i.name})`, async function (assert) { - this.didTransitionIn = spy(); - this.didTransitionOut = spy(); + state.didTransitionIn = spy(); + state.didTransitionOut = spy(); - this.set('show', false); + state.show = false; await render(i.template); assert.dom('#my-element').doesNotExist('no element at first'); assert.ok( - this.didTransitionIn.notCalled, + state.didTransitionIn.notCalled, 'didTransitionIn was not called' ); assert.ok( - this.didTransitionOut.notCalled, + state.didTransitionOut.notCalled, 'didTransitionOut was not called' ); - this.set('show', true); + state.show = true; + await rerender(); assert.dom('#my-element').exists({ count: 1 }, 'element is rendered'); assert.dom('.content').exists({ count: 1 }, 'its contents as well'); @@ -96,15 +115,15 @@ module('Integration | Component | transition group', function (hooks) { await waitFor('#my-element:not(.example-enter-active)'); assert.ok( - this.didTransitionIn.calledOnce, + state.didTransitionIn.calledOnce, 'didTransitionIn was called once' ); assert.ok( - this.didTransitionOut.notCalled, + state.didTransitionOut.notCalled, 'didTransitionOut was not called' ); - this.set('show', false); + state.show = false; // waitFor may run too late and cause false-negative test failure. await new Promise((resolve) => @@ -162,24 +181,25 @@ module('Integration | Component | transition group', function (hooks) { assert.dom('#my-element_clone').doesNotExist('clone was removed'); assert.ok( - this.didTransitionIn.calledOnce, + state.didTransitionIn.calledOnce, 'didTransitionIn was called once total' ); assert.ok( - this.didTransitionOut.calledOnce, + state.didTransitionOut.calledOnce, 'didTransitionOut was called once total' ); }); test(`teardown after -enter-active is applied does not throw errors (${i.name})`, async function (assert) { - this.didTransitionIn = spy(); - this.didTransitionOut = spy(); + state.didTransitionIn = spy(); + state.didTransitionOut = spy(); - this.set('show', false); + state.show = false; await render(i.template); - this.set('show', true); + state.show = true; + await rerender(); assert.dom('#my-element').exists({ count: 1 }, 'element is rendered'); assert @@ -188,44 +208,47 @@ module('Integration | Component | transition group', function (hooks) { await waitFor('#my-element.example-enter-active'); - this.set('show', false); + state.show = false; + await rerender(); assert.dom('#my-element').doesNotExist('element is removed'); assert.ok( - this.didTransitionIn.notCalled, + state.didTransitionIn.notCalled, 'didTransitionIn was not called' ); assert.ok( - this.didTransitionOut.notCalled, + state.didTransitionOut.notCalled, 'didTransitionOut was not called' ); assert.dom('#my-element_clone').doesNotExist('clone was not created'); }); test(`teardown after -enter is applied does not throw errors (${i.name})`, async function (assert) { - this.didTransitionIn = spy(); - this.didTransitionOut = spy(); + state.didTransitionIn = spy(); + state.didTransitionOut = spy(); - this.set('show', false); + state.show = false; await render(i.template); - this.set('show', true); + state.show = true; + await rerender(); assert.dom('#my-element').exists({ count: 1 }, 'element is rendered'); assert .dom('#my-element') .hasClass('example-enter', '-enter is immediately applied'); - this.set('show', false); + state.show = false; + await rerender(); assert.dom('#my-element').doesNotExist('element is removed'); assert.ok( - this.didTransitionIn.notCalled, + state.didTransitionIn.notCalled, 'didTransitionIn was not called' ); assert.ok( - this.didTransitionOut.notCalled, + state.didTransitionOut.notCalled, 'didTransitionOut was not called' ); assert.dom('#my-element_clone').doesNotExist('clone was not created'); @@ -237,56 +260,57 @@ module('Integration | Component | transition group', function (hooks) { let testCases = [ { name: 'element', - template: hbs` - {{#if this.show}} -
-

Çup?

-
- {{/if}} - `, + template: , }, { name: 'classic component', - template: hbs` - {{#if this.show}} - -

Çup?

- - {{/if}} - `, + template: , }, { name: 'glimmer component', - template: hbs` - {{#if this.show}} - -

Çup?

- - {{/if}} - `, + template: , }, ]; testCases.forEach((i) => { test(`enter and leave transitions work (${i.name})`, async function (assert) { - this.didTransitionIn = spy(); - this.didTransitionOut = spy(); + state.didTransitionIn = spy(); + state.didTransitionOut = spy(); - this.set('show', false); + state.show = false; await render(i.template); assert.dom('#my-element').doesNotExist('no element at first'); assert.ok( - this.didTransitionIn.notCalled, + state.didTransitionIn.notCalled, 'didTransitionIn was not called' ); assert.ok( - this.didTransitionOut.notCalled, + state.didTransitionOut.notCalled, 'didTransitionOut was not called' ); - this.set('show', true); + state.show = true; + await rerender(); assert.dom('#my-element').exists({ count: 1 }, 'element is rendered'); assert.dom('.content').exists({ count: 1 }, 'its contents as well'); @@ -319,15 +343,15 @@ module('Integration | Component | transition group', function (hooks) { await waitFor('#my-element:not(.opacity-100)'); assert.ok( - this.didTransitionIn.calledOnce, + state.didTransitionIn.calledOnce, 'didTransitionIn was called once' ); assert.ok( - this.didTransitionOut.notCalled, + state.didTransitionOut.notCalled, 'didTransitionOut was not called' ); - this.set('show', false); + state.show = false; // waitFor may run too late and cause false-negative test failure. await new Promise((resolve) => @@ -379,11 +403,11 @@ module('Integration | Component | transition group', function (hooks) { assert.dom('#my-element_clone').doesNotExist('clone was removed'); assert.ok( - this.didTransitionIn.calledOnce, + state.didTransitionIn.calledOnce, 'didTransitionIn was called once total' ); assert.ok( - this.didTransitionOut.calledOnce, + state.didTransitionOut.calledOnce, 'didTransitionOut was called once total' ); }); @@ -391,19 +415,22 @@ module('Integration | Component | transition group', function (hooks) { }); test('can disable the modifier by using isEnabled=false', async function (assert) { - this.set('show', false); + state.show = false; - await render(hbs` - {{#if this.show}} -
-

Çup?

-
- {{/if}} - `); + await render( + + ); assert.dom('#my-element').doesNotExist('no element at first'); - this.set('show', true); + state.show = true; + await rerender(); assert.dom('#my-element').exists({ count: 1 }, 'element is rendered'); assert.dom('.content').exists({ count: 1 }, 'its contents as well'); @@ -418,75 +445,96 @@ module('Integration | Component | transition group', function (hooks) { .dom('#my-element') .doesNotHaveClass('example-enter-to', '-enter-to is not applied'); - this.set('show', false); + state.show = false; + await rerender(); assert.dom('#my-element').doesNotExist('original element is not present'); assert.dom('#my-element_clone').doesNotExist('clone was not added'); }); test('teardown by removal of the parent element', async function (assert) { - this.set('show', true); - render(hbs` - {{#if this.show}} -
-
-

Çup?

+ state.show = true; + + render( + + ); + await waitFor('#my-element.example-enter-active'); await waitFor('#my-element:not(.example-enter)'); - this.set('show', false); + + state.show = false; + await rerender(); + assert.dom('#my-element').doesNotExist(); }); test('teardown after removal of sibling element', async function (assert) { - this.set('show', true); - this.set('showSibling', true); - render(hbs` - {{#if this.show}} -
-
-

Çup?

+ state.show = true; + state.showSibling = true; + + render( + + ); + await waitFor('#my-element.example-enter-active'); await waitFor('#my-element:not(.example-enter)'); - this.set('showSibling', false); + + state.showSibling = false; + await rerender(); + assert.dom('[data-test-sibling]').doesNotExist(); - this.set('show', false); + + state.show = false; + await rerender(); + assert.dom('#my-element').doesNotExist(); }); test('leave transitions via classes', async function (assert) { - this.set('show', true); - - await render(hbs` - {{#if this.show}} -
-
-

Çup?

-
-
- {{/if}}`); + state.show = true; + + await render( + + ); assert.dom('#my-element').exists({ count: 1 }, 'element is rendered'); - this.set('show', false); + state.show = false; await waitFor('#real-parent_clone'); diff --git a/test-app/tsconfig.json b/test-app/tsconfig.json index 833cd62..67e497c 100644 --- a/test-app/tsconfig.json +++ b/test-app/tsconfig.json @@ -12,6 +12,6 @@ } }, "glint": { - "environment": "ember-loose" + "environment": ["ember-loose", "ember-template-imports"] } } diff --git a/test-app/types/global.d.ts b/test-app/types/global.d.ts index fad703c..26ba2a4 100644 --- a/test-app/types/global.d.ts +++ b/test-app/types/global.d.ts @@ -1,4 +1,5 @@ import '@glint/environment-ember-loose'; +import '@glint/environment-ember-template-imports'; import type CssTransitionsRegistry from 'ember-css-transitions/template-registry';