vcgit-forge/angular-challenges
1
0
Fork 0
mirror of https://github.com/Raghu-Ch/angular-challenges.git synced 2026-02-10 12:53:03 -05:00
Code Issues Packages Projects Releases Wiki Activity

refactor: move libs

Browse Source
This commit is contained in:
thomas
2024-05-11 21:27:33 +02:00
parent 4a3c7f23e0
commit 001d35731a
659 changed files with 775 additions and 1573 deletions
Download Patch File Download Diff File Expand all files Collapse all files

36
apps/testing/17-router/.eslintrc.json Normal file
View File

@@ -0,0 +1,36 @@
{
"extends": ["../../../.eslintrc.json"],
"ignorePatterns": ["!**/*"],
"overrides": [
{
"files": ["*.ts"],
"rules": {
"@angular-eslint/directive-selector": [
"error",
{
"type": "attribute",
"prefix": "app",
"style": "camelCase"
}
],
"@angular-eslint/component-selector": [
"error",
{
"type": "element",
"prefix": "app",
"style": "kebab-case"
}
]
},
"extends": [
"plugin:@nx/angular",
"plugin:@angular-eslint/template/process-inline-templates"
]
},
{
"files": ["*.html"],
"extends": ["plugin:@nx/angular-template"],
"rules": {}
}
]
}

13
apps/testing/17-router/README.md Normal file
View File

@@ -0,0 +1,13 @@
# Router
> author: thomas-laforge
### Run Application
```bash
npx nx serve testing-router
```
### Documentation and Instruction
Challenge documentation is [here](https://angular-challenges.vercel.app/challenges/testing/17-router/).

6
apps/testing/17-router/cypress.config.ts Normal file
View File

@@ -0,0 +1,6 @@
import { nxComponentTestingPreset } from '@nx/angular/plugins/component-testing';
import { defineConfig } from 'cypress';
export default defineConfig({
component: nxComponentTestingPreset(__filename),
});

5
apps/testing/17-router/cypress/fixtures/example.json Normal file
View File

@@ -0,0 +1,5 @@
{
"name": "Using fixtures to represent data",
"email": "hello@cypress.io",
"body": "Fixtures are a great way to mock data for responses to routes"
}

42
apps/testing/17-router/cypress/support/commands.ts Normal file
View File

@@ -0,0 +1,42 @@
/// <reference types="cypress" />
import { mount } from 'cypress/angular';
// ***********************************************
// This example commands.ts shows you how to
// create various custom commands and overwrite
// existing commands.
//
// For more comprehensive examples of custom
// commands please read more here:
// https://on.cypress.io/custom-commands
// ***********************************************
declare global {
// eslint-disable-next-line @typescript-eslint/no-namespace
namespace Cypress {
// eslint-disable-next-line @typescript-eslint/no-unused-vars
interface Chainable<Subject> {
login(email: string, password: string): void;
mount: typeof mount;
}
}
}
Cypress.Commands.add('mount', mount);
//
// -- This is a parent command --
Cypress.Commands.add('login', (email, password) => {
console.log('Custom command example: Login', email, password);
});
//
// -- This is a child command --
// Cypress.Commands.add("drag", { prevSubject: 'element'}, (subject, options) => { ... })
//
//
// -- This is a dual command --
// Cypress.Commands.add("dismiss", { prevSubject: 'optional'}, (subject, options) => { ... })
//
//
// -- This will overwrite an existing command --
// Cypress.Commands.overwrite("visit", (originalFn, url, options) => { ... })

12
apps/testing/17-router/cypress/support/component-index.html Normal file
View File

@@ -0,0 +1,12 @@
<!doctype html>
<html>
<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width,initial-scale=1.0" />
<title>router-testing Components App</title>
</head>
<body>
<div data-cy-root></div>
</body>
</html>

17
apps/testing/17-router/cypress/support/component.ts Normal file
View File

@@ -0,0 +1,17 @@
// ***********************************************************
// This example support/component.ts is processed and
// loaded automatically before your subscription files.
//
// This is a great place to put global configuration and
// behavior that modifies Cypress.
//
// You can change the location of this file or turn off
// automatically serving support files with the
// 'supportFile' configuration option.
//
// You can read more here:
// https://on.cypress.io/configuration
// ***********************************************************
// Import commands.ts using ES2015 syntax:
import './commands';

18
apps/testing/17-router/cypress/tsconfig.json Normal file
View File

@@ -0,0 +1,18 @@
{
"extends": "../tsconfig.json",
"compilerOptions": {
"outDir": "../../../dist/out-tsc",
"module": "commonjs",
"types": ["cypress", "node"],
"sourceMap": false
},
"include": [
"support/**/*.ts",
"../cypress.config.ts",
"../**/*.cy.ts",
"../**/*.cy.tsx",
"../**/*.cy.js",
"../**/*.cy.jsx",
"../**/*.d.ts"
]
}

22
apps/testing/17-router/jest.config.ts Normal file
View File

@@ -0,0 +1,22 @@
/* eslint-disable */
export default {
displayName: 'testing-router',
preset: '../../../jest.preset.js',
setupFilesAfterEnv: ['<rootDir>/src/test-setup.ts'],
globals: {},
transform: {
'^.+\\.(ts|mjs|js|html)$': [
'jest-preset-angular',
{
tsconfig: '<rootDir>/tsconfig.spec.json',
stringifyContentPathRegex: '\\.(html|svg)$',
},
],
},
transformIgnorePatterns: ['node_modules/(?!.*\\.mjs$)'],
snapshotSerializers: [
'jest-preset-angular/build/serializers/no-ng-attributes',
'jest-preset-angular/build/serializers/ng-snapshot',
'jest-preset-angular/build/serializers/html-comment',
],
};

91
apps/testing/17-router/project.json Normal file
View File

@@ -0,0 +1,91 @@
{
"name": "testing-router",
"$schema": "../../../node_modules/nx/schemas/project-schema.json",
"projectType": "application",
"sourceRoot": "apps/testing/17-router/src",
"prefix": "app",
"targets": {
"build": {
"executor": "@angular-devkit/build-angular:browser",
"outputs": ["{options.outputPath}"],
"options": {
"outputPath": "dist/apps/testing/17-router",
"index": "apps/testing/17-router/src/index.html",
"main": "apps/testing/17-router/src/main.ts",
"polyfills": ["zone.js"],
"tsConfig": "apps/testing/17-router/tsconfig.app.json",
"inlineStyleLanguage": "scss",
"assets": [
"apps/testing/17-router/src/favicon.ico",
"apps/testing/17-router/src/assets"
],
"styles": ["apps/testing/17-router/src/styles.scss"],
"scripts": []
},
"configurations": {
"production": {
"budgets": [
{
"type": "initial",
"maximumWarning": "500kb",
"maximumError": "1mb"
},
{
"type": "anyComponentStyle",
"maximumWarning": "2kb",
"maximumError": "4kb"
}
],
"outputHashing": "all"
},
"development": {
"buildOptimizer": false,
"optimization": false,
"vendorChunk": true,
"extractLicenses": false,
"sourceMap": true,
"namedChunks": true
}
},
"defaultConfiguration": "production"
},
"serve": {
"executor": "@angular-devkit/build-angular:dev-server",
"configurations": {
"production": {
"buildTarget": "testing-router:build:production"
},
"development": {
"buildTarget": "testing-router:build:development"
}
},
"defaultConfiguration": "development"
},
"extract-i18n": {
"executor": "@angular-devkit/build-angular:extract-i18n",
"options": {
"buildTarget": "testing-router:build"
}
},
"lint": {
"executor": "@nx/eslint:lint"
},
"test": {
"executor": "@nx/jest:jest",
"outputs": ["{workspaceRoot}/coverage/{projectRoot}"],
"options": {
"jestConfig": "apps/testing/17-router/jest.config.ts"
}
},
"component-test": {
"executor": "@nx/cypress:cypress",
"options": {
"cypressConfig": "apps/testing/17-router/cypress.config.ts",
"testingType": "component",
"skipServe": true,
"devServerTarget": "testing-router:build"
}
}
},
"tags": []
}

33
apps/testing/17-router/src/app/app.component.cy.ts Normal file
View File

@@ -0,0 +1,33 @@
import { AppComponent } from './app.component';
describe(AppComponent.name, () => {
describe('Given no search criteria', () => {
it('Then shows error message and disabled button', () => {
//todo
});
});
describe('Given a search criteria with no book match', () => {
it('Then shows No book found', () => {
//todo
});
});
describe('Given a search criteria with one book match', () => {
it('Then shows One book and no error', () => {
//todo
});
});
describe('Given a search criteria in Uppercase with one book match', () => {
it('Then shows One book and no error', () => {
//todo
});
});
describe('Given a search criteria with multple books matches', () => {
it('Then shows a list of books', () => {
//todo
});
});
});

31
apps/testing/17-router/src/app/app.component.spec.ts Normal file
View File

@@ -0,0 +1,31 @@
describe('AppComponent', () => {
describe('Given no search criteria', () => {
it('Then shows error message and disabled button', async () => {
//todo
});
});
describe('Given a search criteria with no book match', () => {
it('Then shows No book found', async () => {
//todo
});
});
describe('Given a search criteria with one book match', () => {
it('Then shows One book and no error', async () => {
//todo
});
});
describe('Given a search criteria in Uppercase with one book match', () => {
it('Then shows One book and no error', async () => {
//todo
});
});
describe('Given a search criteria with multple books matches', () => {
it('Then shows a list of books', async () => {
//todo
});
});
});

42
apps/testing/17-router/src/app/app.component.ts Normal file
View File

@@ -0,0 +1,42 @@
import { Component } from '@angular/core';
import { RouterLink, RouterOutlet } from '@angular/router';
@Component({
standalone: true,
imports: [RouterOutlet, RouterLink],
selector: 'app-root',
styles: [
`
h1 {
margin-bottom: 0;
}
nav a {
padding: 1rem;
text-decoration: none;
margin-top: 10px;
display: inline-block;
background-color: #e8e8e8;
color: #3d3d3d;
border-radius: 4px;
margin-bottom: 10px;
}
nav a:hover {
color: white;
background-color: #42545c;
}
nav a.active {
background-color: black;
}
`,
],
template: `
<h1>Library</h1>
<nav>
<a routerLink="/search" routerLinkActive="active">Borrow a Book</a>
</nav>
<router-outlet />
`,
})
export class AppComponent {}

6
apps/testing/17-router/src/app/app.config.ts Normal file
View File

@@ -0,0 +1,6 @@
import { ApplicationConfig } from '@angular/core';
import { provideRouter } from '@angular/router';
import { appRoutes } from './app.routes';
export const appConfig: ApplicationConfig = {
providers: [provideRouter(appRoutes)],
};

28
apps/testing/17-router/src/app/app.routes.ts Normal file
View File

@@ -0,0 +1,28 @@
import { ActivatedRouteSnapshot, Route } from '@angular/router';
import { bookGuard } from './book.guard';
export const appRoutes: Route[] = [
{
path: '',
pathMatch: 'full',
redirectTo: 'search',
},
{
path: 'search',
loadComponent: () => import('./search.component'),
},
{
path: 'shelf',
canActivate: [(route: ActivatedRouteSnapshot) => bookGuard(route)],
loadComponent: () => import('./shelf.component'),
},
{
path: 'no-result',
loadComponent: () => import('./no-book-search.component'),
},
{
path: '**',
pathMatch: 'full',
redirectTo: 'search',
},
];

20
apps/testing/17-router/src/app/book.guard.ts Normal file
View File

@@ -0,0 +1,20 @@
import { inject } from '@angular/core';
import { ActivatedRouteSnapshot, Router } from '@angular/router';
import { availableBooks } from './book.model';
export const bookGuard = (
route: ActivatedRouteSnapshot,
router = inject(Router),
) => {
const searchParam = route.queryParams?.['book'].toLowerCase();
const isBookAvailable =
!!searchParam &&
availableBooks.some(
(b) =>
b.author.toLowerCase().includes(searchParam) ||
b.name.toLowerCase().includes(searchParam),
);
return isBookAvailable || router.parseUrl('no-result');
};

17
apps/testing/17-router/src/app/book.model.ts Normal file
View File

@@ -0,0 +1,17 @@
export interface Book {
name: string;
author: string;
}
export const availableBooks = [
{ name: 'To Kill a Mockingbird', author: 'Harper Lee' },
{ name: '1984', author: 'George Orwell' },
{ name: 'The Catcher in the Rye', author: 'J.D. Salinger' },
{ name: 'The Great Gats', author: 'F. Scott Fitzgerald' },
{ name: 'Pride and Prejudice', author: 'Jane Austen' },
{ name: 'The Hobbit', author: 'J.R.R. Tolkien' },
{ name: 'The Lord of the Rings', author: 'J.R.R. Tolkien' },
{ name: "Harry Potter and the Philosopher's Stone", author: 'J.K. Rowling' },
{ name: 'The Hunger Games', author: 'Suzanne Collins' },
{ name: 'Animal Farm', author: 'George Orwell' },
];

10
apps/testing/17-router/src/app/no-book-search.component.ts Normal file
View File

@@ -0,0 +1,10 @@
import { ChangeDetectionStrategy, Component } from '@angular/core';
@Component({
standalone: true,
template: `
<div>No book found for this search</div>
`,
changeDetection: ChangeDetectionStrategy.OnPush,
})
export default class ShelfComponent {}

66
apps/testing/17-router/src/app/search.component.ts Normal file
View File

@@ -0,0 +1,66 @@
import { NgFor, NgIf } from '@angular/common';
import { ChangeDetectionStrategy, Component } from '@angular/core';
import { FormControl, ReactiveFormsModule, Validators } from '@angular/forms';
import { RouterLink } from '@angular/router';
import { availableBooks } from './book.model';
@Component({
standalone: true,
imports: [ReactiveFormsModule, RouterLink, NgFor, NgIf],
styles: [
`
:host {
display: flex;
flex-direction: column;
gap: 10px;
}
.error {
color: red;
}
button {
width: 300px;
padding: 5px;
border-radius: 5px;
}
.search label {
margin-right: 15px;
}
`,
],
template: `
<div class="search">
<label for="bookName">Search Book by author or title</label>
<input
type="text"
id="bookName"
name="bookName"
[formControl]="searchBook"
required />
<div class="error" *ngIf="searchBook.errors">
Search criteria is required!
</div>
</div>
<button
data-cy="borrow-btn"
routerLink="/shelf"
[queryParams]="{ book: searchBook.value }"
[disabled]="searchBook.errors"
routerLinkActive="router-link-active">
Borrow
</button>
<div>
<h3>List of books available:</h3>
<ul>
<li *ngFor="let book of books">{{ book.name }} by {{ book.author }}</li>
</ul>
</div>
`,
changeDetection: ChangeDetectionStrategy.OnPush,
})
export default class SearchComponent {
searchBook = new FormControl('', Validators.required);
books = availableBooks;
}

32
apps/testing/17-router/src/app/shelf.component.ts Normal file
View File

@@ -0,0 +1,32 @@
import { AsyncPipe, JsonPipe, NgFor } from '@angular/common';
import { ChangeDetectionStrategy, Component, inject } from '@angular/core';
import { ActivatedRoute } from '@angular/router';
import { map } from 'rxjs';
import { availableBooks } from './book.model';
@Component({
selector: 'app-shelf',
standalone: true,
imports: [AsyncPipe, JsonPipe, NgFor],
template: `
<ul>
<li *ngFor="let book of books | async">
Borrowed Book: {{ book.name }} by {{ book.author }}
</li>
</ul>
`,
styles: [],
changeDetection: ChangeDetectionStrategy.OnPush,
})
export default class ShelfComponent {
readonly books = inject(ActivatedRoute).queryParams.pipe(
map((params) => params?.['book'].toLowerCase()),
map((param) =>
availableBooks.filter(
(b) =>
b.name.toLowerCase().includes(param) ||
b.author.toLowerCase().includes(param),
),
),
);
}

0
apps/testing/17-router/src/assets/.gitkeep Normal file
View File

BIN
apps/testing/17-router/src/favicon.ico Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 15 KiB

13
apps/testing/17-router/src/index.html Normal file
View File

@@ -0,0 +1,13 @@
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>RouterTesting</title>
<base href="/" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<link rel="icon" type="image/x-icon" href="favicon.ico" />
</head>
<body>
<app-root></app-root>
</body>
</html>

8
apps/testing/17-router/src/main.ts Normal file
View File

@@ -0,0 +1,8 @@
import { bootstrapApplication } from '@angular/platform-browser';
import { appConfig } from './app/app.config';
import { AppComponent } from './app/app.component';
bootstrapApplication(AppComponent, appConfig).catch((err) =>
console.error(err),
);

1
apps/testing/17-router/src/styles.scss Normal file
View File

@@ -0,0 +1 @@
/* You can add global styles to this file, and also import other style files */

2
apps/testing/17-router/src/test-setup.ts Normal file
View File

@@ -0,0 +1,2 @@
import '@testing-library/jest-dom';
import 'jest-preset-angular/setup-jest';

20
apps/testing/17-router/tsconfig.app.json Normal file
View File

@@ -0,0 +1,20 @@
{
"extends": "./tsconfig.json",
"compilerOptions": {
"outDir": "../../../dist/out-tsc",
"types": []
},
"files": ["src/main.ts"],
"include": ["src/**/*.d.ts"],
"exclude": [
"jest.config.ts",
"src/**/*.test.ts",
"src/**/*.spec.ts",
"cypress/**/*",
"cypress.config.ts",
"**/*.cy.ts",
"**/*.cy.js",
"**/*.cy.tsx",
"**/*.cy.jsx"
]
}

7
apps/testing/17-router/tsconfig.editor.json Normal file
View File

@@ -0,0 +1,7 @@
{
"extends": "./tsconfig.json",
"include": ["src/**/*.ts"],
"compilerOptions": {
"types": ["jest", "node"]
}
}

35
apps/testing/17-router/tsconfig.json Normal file
View File

@@ -0,0 +1,35 @@
{
"compilerOptions": {
"target": "es2022",
"useDefineForClassFields": false,
"forceConsistentCasingInFileNames": true,
"strict": true,
"noImplicitOverride": true,
"noPropertyAccessFromIndexSignature": true,
"noImplicitReturns": true,
"noFallthroughCasesInSwitch": true
},
"files": [],
"include": [],
"references": [
{
"path": "./tsconfig.app.json"
},
{
"path": "./tsconfig.spec.json"
},
{
"path": "./tsconfig.editor.json"
},
{
"path": "./cypress/tsconfig.base.json"
}
],
"extends": "../../../tsconfig.base.json",
"angularCompilerOptions": {
"enableI18nLegacyMessageIdFormat": false,
"strictInjectionParameters": true,
"strictInputAccessModifiers": true,
"strictTemplates": true
}
}

15
apps/testing/17-router/tsconfig.spec.json Normal file
View File

@@ -0,0 +1,15 @@
{
"extends": "./tsconfig.json",
"compilerOptions": {
"outDir": "../../../dist/out-tsc",
"module": "commonjs",
"types": ["jest", "node", "@testing-library/jest-dom"]
},
"files": ["src/test-setup.ts"],
"include": [
"jest.config.ts",
"src/**/*.test.ts",
"src/**/*.spec.ts",
"src/**/*.d.ts"
]
}