use gts for component test

.eslintrc.js

@@ -48,6 +48,10 @@ module.exports = {
       parser: 'ember-eslint-parser',
       plugins: ['ember'],
       extends: ['eslint:recommended', 'plugin:ember/recommended', 'plugin:ember/recommended-gts'],
+      rules: {
+        'no-unused-vars': 'off',
+        'no-undef': 'off',
+      }
     },
     // node files
     {

README.md

@@ -21,7 +21,7 @@
 - Flash messages (ember-cli-flash)
 - Tests (ember-test-selectors, ember-cli-page-object, playwright)
 - Sessions,Login,Logout,... (ember-simple-auth,ember-simple-auth-token)
-- Base ember adapter, serializer and controller
+- Ember data next gen (RequestManager based)
 - Ember concurrency
 - Test seeding & parallelization (ember-exam)
 - dev & test mocking (msw)

app/components/forms/register.gts

@@ -21,7 +21,7 @@ export interface FormsRegisterSignature {
   Element: HTMLFormElement;
 }
 
-export default class FormsRegister extends Component<FormsRegisterSignature> {
+export default class RegisterForm extends Component<FormsRegisterSignature> {
   maskForEuro = {
     mask: 'num €',
     lazy: false,

app/templates/register.gts

@@ -4,7 +4,7 @@ import { action } from '@ember/object';
 import { service } from '@ember/service';
 
 import { RegisterChangeset } from 'ember-boilerplate/changesets/register';
-import FormsRegister from 'ember-boilerplate/components/forms/register';
+import RegisterForm from 'ember-boilerplate/components/forms/register';
 import LoginLayout from 'ember-boilerplate/components/login-layout';
 import formsRegisterSchema from 'ember-boilerplate/validations/register';
 import t from 'ember-intl/helpers/t';
@@ -54,7 +54,7 @@ class RegisterRouteComponent extends Component<RegisterRouteComponentSignature>
 
   <template>
     <LoginLayout @title={{t "components.pages.register.title"}}>
-      <FormsRegister
+      <RegisterForm
         @changeset={{this.changeset}}
         @validationSchema={{this.validationSchema}}
         @saveFunction={{this.saveRegister}}

lefthook.yml

@@ -7,7 +7,7 @@ pre-push:
   commands:
     test:
       tags: frontend
-      run: pnpm test
+      run: pnpm ember test --filter "!Acceptance"
 # pre-commit:
 #   parallel: true
 #   commands:

tests/integration/components/forms/register/component-test.ts → tests/integration/components/forms/register/component-test.gts

@@ -1,30 +1,19 @@
 import { render } from '@ember/test-helpers';
-import { hbs } from 'ember-cli-htmlbars';
 import { module, test } from 'qunit';
-
 import { RegisterChangeset } from 'ember-boilerplate/changesets/register';
 import { setupRenderingTest } from 'ember-boilerplate/tests/helpers';
 import { pagesFormsRegister } from 'ember-boilerplate/tests/pages/forms/register';
 import validationsRegister from 'ember-boilerplate/validations/register';
-
 import { setupIntl } from 'ember-intl/test-support';
-
-import type { TestContext } from '@ember/test-helpers';
-
-interface RegisterTestContext extends TestContext {
-  changeset: RegisterChangeset;
-  saveFunction: (changeset: RegisterChangeset) => void;
-  validationSchema: typeof validationsRegister;
-}
+import RegisterForm from 'ember-boilerplate/components/forms/register';
+import type { Schema } from 'yup';
 
 module('Integration | Component | forms/register', function (hooks) {
   setupRenderingTest(hooks);
   setupIntl(hooks, ['fr-fr']);
 
-  let changeset: RegisterChangeset;
-
-  hooks.beforeEach<RegisterTestContext>(function () {
-    changeset = new RegisterChangeset({
+  function createChangeset(): RegisterChangeset {
+    return new RegisterChangeset({
       email: '[email protected]',
       lastName: 'triptyk',
       firstName: 'papa',
@@ -33,34 +22,33 @@ module('Integration | Component | forms/register', function (hooks) {
       password: '',
       confirmPassword: '',
     });
+  }
 
-    this.set('changeset', changeset);
-  });
-
-  function renderForm() {
-    return render<RegisterTestContext>(
-      hbs`
-        <Forms::Register
-            @changeset={{this.changeset}}
-            @saveFunction={{this.saveFunction}}
-            @validationSchema={{this.validationSchema}}
+  function renderForm(
+    changeset: RegisterChangeset,
+    saveFunction: (changeset: RegisterChangeset) => void,
+    validationSchema: Schema
+  ) {
+    return render(
+      <template>
+        <RegisterForm
+          @changeset={{changeset}}
+          @saveFunction={{saveFunction}}
+          @validationSchema={{validationSchema}}
         />
-      `,
+      </template>
     );
   }
 
   test('Submit with missing field returns errors', async function (assert) {
-    // Testing makes Amaury happy so do your tests
-    this.set('saveFunction', () => {});
-    this.set('validationSchema', validationsRegister);
-    await renderForm();
+    await renderForm(createChangeset(), () => {}, validationsRegister);
     await pagesFormsRegister.submit();
     assert.true(pagesFormsRegister.errors.length > 0);
   });
 
   // note : saveFunction when form is valid is already tested by the component YupForm. No need to test this behavior in the future.
   test('Edit form and trigger saveFunction', async function (assert) {
-    this.set('saveFunction', (changeset: RegisterChangeset) => {
+    let saveFunction = (changeset: RegisterChangeset) => {
       assert.strictEqual(changeset.get('lastName'), 'triptyk');
       assert.strictEqual(changeset.get('firstName'), 'papa');
       assert.strictEqual(changeset.get('email'), '[email protected]');
@@ -69,32 +57,24 @@ module('Integration | Component | forms/register', function (hooks) {
       assert.strictEqual(changeset.get('password'), 'hello');
       assert.strictEqual(changeset.get('confirmPassword'), 'hello');
       assert.step('saveFunction');
-    });
-    this.set('validationSchema', validationsRegister);
-    await renderForm();
+    };
+    await renderForm(createChangeset(), saveFunction, validationsRegister);
 
-    await pagesFormsRegister
-      .gift('234,23 €')
-      .password('hello')
-      .confirmPassword('hello');
+    await pagesFormsRegister.gift('234,23 €').password('hello').confirmPassword('hello');
 
     await pagesFormsRegister.submit();
     assert.verifySteps(['saveFunction']);
   });
 
   test('confirmPassword which does not match password returns an error', async function (assert) {
-    this.set('saveFunction', () => {});
-    this.set('validationSchema', validationsRegister);
-    await renderForm();
+    await renderForm(createChangeset(), () => {}, validationsRegister);
 
     await pagesFormsRegister.password('hello').confirmPassword('hellos');
 
     await pagesFormsRegister.submit();
 
     assert.true(
-      pagesFormsRegister.errors[0]?.text?.includes(
-        'validations.confirm_password.not_matching',
-      ),
+      pagesFormsRegister.errors[0]?.text?.includes('validations.confirm_password.not_matching')
     );
   });
 });

tests/integration/components/login/forms/login-test.ts → tests/integration/components/login/forms/login-test.gts

@@ -1,19 +1,19 @@
 /* eslint-disable qunit/require-expect */
-import { render, type TestContext } from '@ember/test-helpers';
+import { render } from '@ember/test-helpers';
 import click from '@ember/test-helpers/dom/click';
-import { hbs } from 'ember-cli-htmlbars';
 import { module, test } from 'qunit';
 import { setupRenderingTest } from 'ember-qunit';
 
 import { loginPage } from 'ember-boilerplate/tests/pages/login';
 import loginSchema from 'ember-boilerplate/validations/login';
-import { type Changeset,ImmerChangeset } from 'ember-immer-changeset';
+import { type Changeset, ImmerChangeset } from 'ember-immer-changeset';
 
 import { setupIntl } from 'ember-intl/test-support';
 
-import type { LoginChangeset } from 'ember-boilerplate/changesets/login';
+import { LoginChangeset } from 'ember-boilerplate/changesets/login';
+import LoginForm from 'ember-boilerplate/components/forms/login';
 
-interface LoginTestContext extends TestContext {
+interface LoginTestContext {
   changeset: LoginChangeset;
   saveFunction: (changeset: Changeset) => void;
   validationSchema: typeof loginSchema;
@@ -23,18 +23,31 @@ module('Integration | Component | FormsLogin', function (hooks) {
   setupRenderingTest(hooks);
   setupIntl(hooks, ['fr-fr']);
 
+  function renderForm(context: LoginTestContext) {
+    return render<LoginTestContext>(
+      <template>
+        <LoginForm
+          @validationSchema={{context.validationSchema}}
+          @changeset={{context.changeset}}
+          @saveFunction={{context.saveFunction}}
+        />
+      </template>
+    );
+  }
+
   test('Create (empty changeset)', async function (assert) {
-    this.set('changeset', new ImmerChangeset({}));
-    this.set('validationSchema', loginSchema);
-    this.set('saveFunction', (changeset: Changeset) => {
+    let validationSchema = loginSchema;
+    let saveFunction = (changeset: Changeset) => {
       assert.step('saveFunction');
       assert.strictEqual(changeset.get('email'), '[email protected]');
       assert.strictEqual(changeset.get('password'), 'edited');
-    });
+    };
 
-    await render<LoginTestContext>(
-      hbs`<Forms::Login @validationSchema={{this.validationSchema}} @changeset={{this.changeset}} @saveFunction={{this.saveFunction}} />`,
-    );
+    await renderForm({
+      changeset: new LoginChangeset({} as never),
+      validationSchema,
+      saveFunction,
+    });
 
     assert.dom('[data-test-input="email"] input').hasValue('');
     assert.dom('[data-test-input="password"] input').hasValue('');
@@ -46,24 +59,23 @@ module('Integration | Component | FormsLogin', function (hooks) {
   });
 
   test('Edit (populated changeset)', async function (assert) {
-    this.set(
-      'changeset',
-      new ImmerChangeset({
-        email: 'hello',
-        password: 'hello',
-      }),
-    );
-    this.set('validationSchema', loginSchema);
+    let changeset = new ImmerChangeset({
+      email: 'hello',
+      password: 'hello',
+    });
+    let validationSchema = loginSchema;
 
-    this.set('saveFunction', (changeset: Changeset) => {
+    let saveFunction = (changeset: Changeset) => {
       assert.strictEqual(changeset.get('email'), '[email protected]');
       assert.strictEqual(changeset.get('password'), 'helloEdited');
       assert.step('saveFunction');
-    });
+    };
 
-    await render<LoginTestContext>(
-      hbs`<Forms::Login  @validationSchema={{this.validationSchema}} @saveFunction={{this.saveFunction}} @changeset={{this.changeset}}/>`,
-    );
+    await renderForm({
+      changeset,
+      validationSchema,
+      saveFunction,
+    });
 
     assert.dom('[data-test-input="email"] input').hasValue('hello');
     assert.dom('[data-test-input="password"] input').hasValue('hello');