Skip to content

Commit

Permalink
use gts for component test
Browse files Browse the repository at this point in the history
  • Loading branch information
AmauryD committed May 28, 2024
1 parent 0e355b5 commit f4538fb
Show file tree
Hide file tree
Showing 11 changed files with 73 additions and 212 deletions.
4 changes: 4 additions & 0 deletions .eslintrc.js
Original file line number Diff line number Diff line change
Expand Up @@ -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
{
Expand Down
2 changes: 1 addition & 1 deletion README.md
Original file line number Diff line number Diff line change
Expand Up @@ -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)
Expand Down
2 changes: 1 addition & 1 deletion app/components/forms/register.gts
Original file line number Diff line number Diff line change
Expand Up @@ -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,
Expand Down
4 changes: 2 additions & 2 deletions app/templates/register.gts
Original file line number Diff line number Diff line change
Expand Up @@ -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';
Expand Down Expand Up @@ -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}}
Expand Down
2 changes: 1 addition & 1 deletion lefthook.yml
Original file line number Diff line number Diff line change
Expand Up @@ -7,7 +7,7 @@ pre-push:
commands:
test:
tags: frontend
run: pnpm test
run: pnpm ember test --filter "!Acceptance"
# pre-commit:
# parallel: true
# commands:
Expand Down
Original file line number Diff line number Diff line change
@@ -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',
Expand All @@ -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]');
Expand All @@ -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')
);
});
});
Original file line number Diff line number Diff line change
@@ -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;
Expand All @@ -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('');
Expand All @@ -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');
Expand Down
10 changes: 0 additions & 10 deletions tests/integration/components/pages/404/component-test.ts

This file was deleted.

67 changes: 0 additions & 67 deletions tests/integration/components/yeti-table/pagination/component.ts

This file was deleted.

Loading

0 comments on commit f4538fb

Please sign in to comment.