Skip to content

Commit 32ad0e0

Browse files
tomalaforgetomalaforge
committed
feat(): add new challenge
1 parent 418a2fd commit 32ad0e0

28 files changed

Lines changed: 877 additions & 58 deletions

‎README.md‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -29,7 +29,7 @@ If you would like to propose a challenge, this project is open source, so feel f
2929
3030
## Challenges
3131

32-
Check [all 62 challenges](https://angular-challenges.vercel.app/)
32+
Check [all 63 challenges](https://angular-challenges.vercel.app/)
3333

3434
## Contributors ✨
3535

‎apps/forms/63-custom-foms/.eslintrc.json‎

Lines changed: 36 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,36 @@
1+
{
2+
"extends": ["../../../.eslintrc.json"],
3+
"ignorePatterns": ["!**/*"],
4+
"overrides": [
5+
{
6+
"files": ["*.ts"],
7+
"extends": [
8+
"plugin:@nx/angular",
9+
"plugin:@angular-eslint/template/process-inline-templates"
10+
],
11+
"rules": {
12+
"@angular-eslint/directive-selector": [
13+
"error",
14+
{
15+
"type": "attribute",
16+
"prefix": "app",
17+
"style": "camelCase"
18+
}
19+
],
20+
"@angular-eslint/component-selector": [
21+
"error",
22+
{
23+
"type": "element",
24+
"prefix": "app",
25+
"style": "kebab-case"
26+
}
27+
]
28+
}
29+
},
30+
{
31+
"files": ["*.html"],
32+
"extends": ["plugin:@nx/angular-template"],
33+
"rules": {}
34+
}
35+
]
36+
}

‎apps/forms/63-custom-foms/README.md‎

Lines changed: 13 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,13 @@
1+
# custom-foms
2+
3+
> author: thomas-laforge
4+
5+
### Run Application
6+
7+
```bash
8+
npx nx serve forms-custom-foms
9+
```
10+
11+
### Documentation and Instruction
12+
13+
Challenge documentation is [here](https://angular-challenges.vercel.app/challenges/forms/63-custom-foms/).

‎apps/forms/63-custom-foms/project.json‎

Lines changed: 81 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,81 @@
1+
{
2+
"name": "forms-custom-foms",
3+
"$schema": "../../../node_modules/nx/schemas/project-schema.json",
4+
"projectType": "application",
5+
"prefix": "app",
6+
"sourceRoot": "apps/forms/63-custom-foms/src",
7+
"tags": [],
8+
"targets": {
9+
"build": {
10+
"executor": "@angular/build:application",
11+
"outputs": ["{options.outputPath}"],
12+
"options": {
13+
"outputPath": "dist/apps/forms/63-custom-foms",
14+
"browser": "apps/forms/63-custom-foms/src/main.ts",
15+
"tsConfig": "apps/forms/63-custom-foms/tsconfig.app.json",
16+
"inlineStyleLanguage": "scss",
17+
"assets": [
18+
{
19+
"glob": "**/*",
20+
"input": "apps/forms/63-custom-foms/public"
21+
}
22+
],
23+
"styles": ["apps/forms/63-custom-foms/src/styles.scss"]
24+
},
25+
"configurations": {
26+
"production": {
27+
"budgets": [
28+
{
29+
"type": "initial",
30+
"maximumWarning": "500kb",
31+
"maximumError": "1mb"
32+
},
33+
{
34+
"type": "anyComponentStyle",
35+
"maximumWarning": "4kb",
36+
"maximumError": "8kb"
37+
}
38+
],
39+
"outputHashing": "all"
40+
},
41+
"development": {
42+
"optimization": false,
43+
"extractLicenses": false,
44+
"sourceMap": true
45+
}
46+
},
47+
"defaultConfiguration": "production"
48+
},
49+
"serve": {
50+
"continuous": true,
51+
"executor": "@angular/build:dev-server",
52+
"configurations": {
53+
"production": {
54+
"buildTarget": "forms-custom-foms:build:production"
55+
},
56+
"development": {
57+
"buildTarget": "forms-custom-foms:build:development"
58+
}
59+
},
60+
"defaultConfiguration": "development"
61+
},
62+
"lint": {
63+
"executor": "@nx/eslint:lint"
64+
},
65+
"test": {
66+
"executor": "@angular/build:unit-test",
67+
"options": {
68+
"runnerConfig": "apps/forms/63-custom-form/vitest-base.config.ts"
69+
}
70+
},
71+
"serve-static": {
72+
"continuous": true,
73+
"executor": "@nx/web:file-server",
74+
"options": {
75+
"buildTarget": "forms-custom-foms:build",
76+
"staticFilePath": "dist/apps/forms/63-custom-foms/browser",
77+
"spa": true
78+
}
79+
}
80+
}
81+
}

‎apps/forms/63-custom-foms/public/favicon.ico‎

14.7 KB
Binary file not shown.

‎apps/forms/63-custom-foms/src/app/app.component.spec.ts‎

Lines changed: 124 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,124 @@
1+
import { TestBed } from '@angular/core/testing';
2+
import { page, userEvent } from 'vitest/browser';
3+
import { AppComponent } from './app.component';
4+
5+
describe('AppComponent', () => {
6+
let fixture: ReturnType<typeof TestBed.createComponent<AppComponent>>;
7+
8+
beforeEach(async () => {
9+
fixture = TestBed.createComponent(AppComponent);
10+
fixture.detectChanges();
11+
});
12+
13+
describe('When component is rendered', () => {
14+
it('Then should display headings and all form fields', async () => {
15+
await expect
16+
.element(page.getByRole('heading', { name: /order/i }))
17+
.toBeInTheDocument();
18+
await expect
19+
.element(page.getByRole('heading', { name: /information/i }))
20+
.toBeInTheDocument();
21+
await expect
22+
.element(page.getByRole('heading', { name: /shipping address/i }))
23+
.toBeInTheDocument();
24+
await expect
25+
.element(page.getByRole('heading', { name: /billing address/i }))
26+
.toBeInTheDocument();
27+
28+
await expect
29+
.element(page.getByLabelText('Last name'))
30+
.toBeInTheDocument();
31+
await expect
32+
.element(page.getByLabelText('First name'))
33+
.toBeInTheDocument();
34+
await expect.element(page.getByLabelText('Street')).toBeInTheDocument();
35+
await expect.element(page.getByLabelText('ZIP code')).toBeInTheDocument();
36+
await expect.element(page.getByLabelText('City')).toBeInTheDocument();
37+
await expect
38+
.element(page.getByLabelText(/Billing address same as shipping/i))
39+
.toBeInTheDocument();
40+
await expect
41+
.element(page.getByTestId('billing-fields'))
42+
.toBeInTheDocument();
43+
});
44+
});
45+
46+
describe('Given billing toggle', () => {
47+
it('Then billing fields hide when same-as-shipping is checked', async () => {
48+
await expect
49+
.element(page.getByTestId('billing-fields'))
50+
.toBeInTheDocument();
51+
52+
await userEvent.click(
53+
page.getByLabelText(/Billing address same as shipping/i),
54+
);
55+
fixture.detectChanges();
56+
57+
expect(
58+
fixture.nativeElement.querySelector('[data-testid="billing-fields"]'),
59+
).toBeNull();
60+
expect(fixture.componentInstance.billing.disabled).toBe(true);
61+
});
62+
63+
it('Then shipping values are copied into billing when locked', async () => {
64+
await userEvent.type(page.getByLabelText('Street'), '12 Flower Street');
65+
await userEvent.type(page.getByLabelText('ZIP code'), '75001');
66+
await userEvent.type(page.getByLabelText('City'), 'Paris');
67+
68+
await userEvent.click(
69+
page.getByLabelText(/Billing address same as shipping/i),
70+
);
71+
fixture.detectChanges();
72+
73+
expect(fixture.componentInstance.billing.getRawValue()).toEqual(
74+
fixture.componentInstance.shipping.getRawValue(),
75+
);
76+
});
77+
78+
it('Then billing fields become editable again when unchecked', async () => {
79+
const checkbox = page.getByLabelText(/Billing address same as shipping/i);
80+
await userEvent.click(checkbox);
81+
await userEvent.click(checkbox);
82+
fixture.detectChanges();
83+
84+
await expect
85+
.element(page.getByTestId('billing-fields'))
86+
.toBeInTheDocument();
87+
expect(fixture.componentInstance.billing.enabled).toBe(true);
88+
});
89+
});
90+
91+
describe('Given validation', () => {
92+
it('Then marks all fields as required after submitting an empty form', async () => {
93+
await userEvent.click(page.getByRole('button', { name: /submit/i }));
94+
fixture.detectChanges();
95+
96+
const requiredErrors = Array.from<HTMLElement>(
97+
fixture.nativeElement.querySelectorAll(
98+
'.hint',
99+
) as NodeListOf<HTMLElement>,
100+
).filter((el) => el.textContent?.includes('This field is required'));
101+
expect(requiredErrors.length).toBe(8);
102+
});
103+
});
104+
105+
describe('Given a valid form with billing locked to shipping', () => {
106+
it('Then form is valid and status displays ready', async () => {
107+
await userEvent.type(page.getByLabelText('Last name'), 'Doe');
108+
await userEvent.type(page.getByLabelText('First name'), 'John');
109+
await userEvent.type(page.getByLabelText('Street'), '12 Flower Street');
110+
await userEvent.type(page.getByLabelText('ZIP code'), '75001');
111+
await userEvent.type(page.getByLabelText('City'), 'Paris');
112+
113+
await userEvent.click(
114+
page.getByLabelText(/Billing address same as shipping/i),
115+
);
116+
fixture.detectChanges();
117+
118+
expect(fixture.componentInstance.form.valid).toBe(true);
119+
await expect
120+
.element(page.getByText(/Ready to submit/i))
121+
.toBeInTheDocument();
122+
});
123+
});
124+
});

0 commit comments

Comments
 (0)