diff --git a/tests/fixtures/typescript/my-addon/src/components/co-located-ts.hbs b/tests/fixtures/typescript/my-addon/src/components/co-located-ts.hbs new file mode 100644 index 00000000..af543d66 --- /dev/null +++ b/tests/fixtures/typescript/my-addon/src/components/co-located-ts.hbs @@ -0,0 +1,3 @@ +Hello, +{{this.whereAmI}} +(in TypeScript) diff --git a/tests/fixtures/typescript/my-addon/src/components/co-located-ts.ts b/tests/fixtures/typescript/my-addon/src/components/co-located-ts.ts new file mode 100644 index 00000000..02d0989f --- /dev/null +++ b/tests/fixtures/typescript/my-addon/src/components/co-located-ts.ts @@ -0,0 +1,5 @@ +import Component from '@glimmer/component'; + +export default class CoLocatedTs extends Component { + whereAmI = 'from a co-located TS component'; +} diff --git a/tests/fixtures/typescript/my-addon/src/components/co-located.hbs b/tests/fixtures/typescript/my-addon/src/components/co-located.hbs new file mode 100644 index 00000000..22fe19ce --- /dev/null +++ b/tests/fixtures/typescript/my-addon/src/components/co-located.hbs @@ -0,0 +1 @@ +Hello, {{this.whereAmI}} diff --git a/tests/fixtures/typescript/my-addon/src/components/co-located.js b/tests/fixtures/typescript/my-addon/src/components/co-located.js new file mode 100644 index 00000000..77f13910 --- /dev/null +++ b/tests/fixtures/typescript/my-addon/src/components/co-located.js @@ -0,0 +1,5 @@ +import Component from '@glimmer/component'; + +export default class CoLocated extends Component { + whereAmI = 'from a co-located component'; +} diff --git a/tests/fixtures/typescript/my-addon/src/components/template-only.hbs b/tests/fixtures/typescript/my-addon/src/components/template-only.hbs new file mode 100644 index 00000000..fc5daef0 --- /dev/null +++ b/tests/fixtures/typescript/my-addon/src/components/template-only.hbs @@ -0,0 +1 @@ +Hello from a template-only component diff --git a/tests/fixtures/typescript/test-app/tests/rendering/co-located-test.ts b/tests/fixtures/typescript/test-app/tests/rendering/co-located-test.ts new file mode 100644 index 00000000..cbb16819 --- /dev/null +++ b/tests/fixtures/typescript/test-app/tests/rendering/co-located-test.ts @@ -0,0 +1,20 @@ +import { module, test } from 'qunit'; +import { setupRenderingTest } from 'ember-qunit'; +import { render } from '@ember/test-helpers'; +import { hbs } from 'ember-cli-htmlbars'; + +module('Rendering | co-located', function (hooks) { + setupRenderingTest(hooks); + + test('it renders a JS component', async function (assert) { + await render(hbs``); + + assert.dom().hasText('Hello, from a co-located component'); + }); + + test('it renders a TS component', async function (assert) { + await render(hbs``); + + assert.dom().containsText('Hello, from a co-located TS component (in TypeScript)'); + }); +}); diff --git a/tests/fixtures/typescript/test-app/tests/rendering/template-only-test.ts b/tests/fixtures/typescript/test-app/tests/rendering/template-only-test.ts new file mode 100644 index 00000000..ab20ed32 --- /dev/null +++ b/tests/fixtures/typescript/test-app/tests/rendering/template-only-test.ts @@ -0,0 +1,14 @@ +import { module, test } from 'qunit'; +import { setupRenderingTest } from 'ember-qunit'; +import { render } from '@ember/test-helpers'; +import { hbs } from 'ember-cli-htmlbars'; + +module('Rendering | template-only', function(hooks) { + setupRenderingTest(hooks); + + test('it renders', async function(assert) { + await render(hbs``); + + assert.dom().hasText('Hello from a template-only component'); + }) +}); diff --git a/tests/smoke-tests/--typescript.test.ts b/tests/smoke-tests/--typescript.test.ts index a9cb843e..592c0141 100644 --- a/tests/smoke-tests/--typescript.test.ts +++ b/tests/smoke-tests/--typescript.test.ts @@ -1,58 +1,79 @@ -import fs from 'node:fs/promises'; +import { execa } from 'execa'; import path from 'node:path'; import { afterAll, beforeAll, describe, expect, it } from 'vitest'; import { + AddonHelper, assertGeneratedCorrectly, - createAddon, - createTmp, dirContents, - install, - runScript, SUPPORTED_PACKAGE_MANAGERS, } from '../helpers.js'; for (let packageManager of SUPPORTED_PACKAGE_MANAGERS) { describe(`--typescript with ${packageManager}`, () => { - let cwd = ''; - let tmpDir = ''; let distDir = ''; let declarationsDir = ''; + let helper = new AddonHelper({ + packageManager, + args: ['--typescript'], + scenario: 'typescript', + }); beforeAll(async () => { - tmpDir = await createTmp(); - - let { name } = await createAddon({ - args: ['--typescript', `--${packageManager}=true`, '--skip-npm'], - options: { cwd: tmpDir }, - }); + await helper.setup(); + await helper.installDeps(); - cwd = path.join(tmpDir, name); - distDir = path.join(cwd, name, 'dist'); - declarationsDir = path.join(cwd, name, 'declarations'); - - await install({ cwd, packageManager, skipPrepare: true }); + distDir = path.join(helper.addonFolder, 'dist'); + declarationsDir = path.join(helper.addonFolder, 'declarations'); }); afterAll(async () => { - await fs.rm(tmpDir, { recursive: true, force: true }); + await helper.clean(); }); it('was generated correctly', async () => { - await runScript({ cwd, script: 'build', packageManager: 'pnpm' }); + await helper.build(); - assertGeneratedCorrectly({ projectRoot: cwd }); + assertGeneratedCorrectly({ projectRoot: helper.projectRoot }); }); - it('builds the addon', async () => { - let { exitCode } = await runScript({ cwd, script: 'build', packageManager: 'pnpm' }); + // Tests are additive, so when running them in order, we want to check linting + // before we add files from fixtures + it('lints all pass', async () => { + let { exitCode } = await helper.run('lint'); expect(exitCode).toEqual(0); + }); + + it('build and test', async () => { + // Copy over fixtures + await helper.fixtures.use('./my-addon/src/components'); + await helper.fixtures.use('./test-app/tests'); + // Sync fixture with project's lint / formatting configuration + // (controlled by ember-cli) + await helper.run('lint:fix'); + + /** + * In order to use build with components, we need to add more dependencies + * We may want to consider making these default + */ + await execa('pnpm', ['add', '--save-peer', '@glimmer/component'], { + cwd: helper.addonFolder, + }); + + let buildResult = await helper.build(); - let distContents = await dirContents(distDir); + expect(buildResult.exitCode).toEqual(0); + + let distContents = (await dirContents(distDir)).filter( + // these files have a hash that changes based on file contents + (distFile) => !distFile.startsWith('_rollupPluginBabelHelpers') + ); let declarationsContents = await dirContents(declarationsDir); expect(distContents).to.deep.equal([ + '_app_', + 'components', 'index.js', 'index.js.map', 'template-registry.js', @@ -65,18 +86,13 @@ for (let packageManager of SUPPORTED_PACKAGE_MANAGERS) { 'template-registry.d.ts', 'template-registry.d.ts.map', ]); - }); - - it('runs tests', async () => { - let { exitCode } = await runScript({ cwd, script: 'test', packageManager: 'pnpm' }); - - expect(exitCode).toEqual(0); - }); - it('lints all pass', async () => { - let { exitCode } = await runScript({ cwd, script: 'lint', packageManager: 'pnpm' }); + let testResult = await helper.run('test'); - expect(exitCode).toEqual(0); + expect(testResult.exitCode).toEqual(0); + expect(testResult.stdout).to.include('# tests 4'); + expect(testResult.stdout).to.include('# pass 4'); + expect(testResult.stdout).to.include('# fail 0'); }); }); }