Alan Dragicevich
📖
- 
-
Collection of Angular TESTING challenges
- -
-> 
-> 
-
-
-
-
-
Testing a small application with a router
-
Testing a parent component with Child components
-
Testing a presentational component by setting Inputs and listening to the Outputs
-
Testing a modal
-
Testing using Component Harnesses
-
Creating a custom Component Harness and Testing your application by using this harness
-
Testing a very simple checkbox
-
Testing a real-life application by creating test double on Http request and handling all asynchronous part
diff --git a/apps/performance/memoized/README.md b/apps/performance/memoized/README.md
index c3ae1bc..4e250b9 100644
--- a/apps/performance/memoized/README.md
+++ b/apps/performance/memoized/README.md
@@ -1,32 +1,13 @@
-
-
-
-
-
-_You can ask any question on_ 
+Challenge documentation is [here](https://angular-challenges.vercel.app/challenges/angular-performance/35-memoize/).
diff --git a/apps/performance/ngfor-optimize/.eslintrc.json b/apps/performance/ngfor-optimize/.eslintrc.json
new file mode 100644
index 0000000..bf8df14
--- /dev/null
+++ b/apps/performance/ngfor-optimize/.eslintrc.json
@@ -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": {}
+ }
+ ]
+}
diff --git a/apps/performance/ngfor-optimize/README.md b/apps/performance/ngfor-optimize/README.md
new file mode 100644
index 0000000..6571704
--- /dev/null
+++ b/apps/performance/ngfor-optimize/README.md
@@ -0,0 +1,13 @@
+# NgFor Optimization
+
+> Author: Thomas Laforge
+
+### Run Application
+
+```bash
+npx nx serve performance-ngfor-optimize
+```
+
+### Documentation and Instruction
+
+Challenge documentation is [here](https://angular-challenges.vercel.app/challenges/angular-performance/36-ngfor-optimize/).
diff --git a/apps/performance/ngfor-optimize/jest.config.ts b/apps/performance/ngfor-optimize/jest.config.ts
new file mode 100644
index 0000000..5b2ccae
--- /dev/null
+++ b/apps/performance/ngfor-optimize/jest.config.ts
@@ -0,0 +1,22 @@
+/* eslint-disable */
+export default {
+ displayName: 'performance-ngfor-optimize',
+ preset: '../../../jest.preset.js',
+ setupFilesAfterEnv: ['
-
-
-
-
-
-
diff --git a/libs/cli/src/generators/challenge/files/app/src/app/app.component.ts__tmpl__ b/libs/cli/src/generators/challenge/files/app/src/app/app.component.ts__tmpl__
index 937cefb..d977f09 100644
--- a/libs/cli/src/generators/challenge/files/app/src/app/app.component.ts__tmpl__
+++ b/libs/cli/src/generators/challenge/files/app/src/app/app.component.ts__tmpl__
@@ -3,7 +3,7 @@ import { Component } from '@angular/core';
@Component({
standalone: true,
imports: [],
- selector: 'lib-root',
+ selector: 'app-root',
template: ``,
styles: [''],
})
diff --git a/libs/cli/src/generators/challenge/files/docs/__challengeNumber__-__projectName__.md__tmpl__ b/libs/cli/src/generators/challenge/files/docs/__challengeNumber__-__projectName__.md__tmpl__
index 1bd1882..561ed05 100644
--- a/libs/cli/src/generators/challenge/files/docs/__challengeNumber__-__projectName__.md__tmpl__
+++ b/libs/cli/src/generators/challenge/files/docs/__challengeNumber__-__projectName__.md__tmpl__
@@ -2,7 +2,8 @@
title: <%= difficulty %> <%= title %>
description: Challenge <%= challengeNumber %> is about ...
sidebar:
- order: <%= challengeNumber %>
+ order: <%= order %>
+ badge: New
---
:::note
diff --git a/libs/cli/src/generators/challenge/generator.ts b/libs/cli/src/generators/challenge/generator.ts
index f5c939f..f829662 100644
--- a/libs/cli/src/generators/challenge/generator.ts
+++ b/libs/cli/src/generators/challenge/generator.ts
@@ -12,16 +12,44 @@ import {
updateJson,
} from '@nx/devkit';
import { Linter } from '@nx/linter';
-import { readFile, writeFile } from 'fs/promises';
import { join } from 'path';
import { getProjectDir } from '../../utils/normalize';
import { Schema } from './schema';
+function findPreviousChallengeFilePath(tree, path, number) {
+ if (tree.isFile(path) && path.startsWith(`${number}-`)) {
+ return path;
+ }
+
+ const matchingChild = tree
+ .children(path)
+ .find((child) => child.startsWith(`${number}-`));
+
+ if (matchingChild) {
+ const fullPath = path + '/' + matchingChild;
+ return fullPath;
+ }
+
+ for (const child of tree.children(path)) {
+ const childPath = path + '/' + child;
+ const result = findPreviousChallengeFilePath(tree, childPath, number);
+ if (result) {
+ return result;
+ }
+ }
+ return null;
+}
+
export async function challengeGenerator(tree: Tree, options: Schema) {
const { appDirectory } = getProjectDir(options.name, options.directory);
+ const difficulty = options.challengeDifficulty;
+
+ // read json file with the total challanges and display order
const challengeNumberPath = 'challenge-number.json';
- const challengeNumber = readJsonFile(challengeNumberPath).total;
+ const challangeNumberJson = readJsonFile(challengeNumberPath);
+ const challengeNumber = challangeNumberJson.total + 1;
+ const order = challangeNumberJson[difficulty] + 1;
await applicationGenerator(tree, {
...options,
@@ -60,7 +88,8 @@ export async function challengeGenerator(tree: Tree, options: Schema) {
projectName: names(options.name).name,
title: options.title,
challengeNumber,
- difficulty: options.challengeDifficulty,
+ difficulty,
+ order,
}
);
@@ -70,27 +99,40 @@ export async function challengeGenerator(tree: Tree, options: Schema) {
});
}
- const readme = await readFile('./README.md', { encoding: 'utf-8' });
+ const readme = tree.read('./README.md').toString();
- const readmeRegex = new RegExp(`all ${challengeNumber} challenges`);
+ const readmeRegex = new RegExp(`all ${challengeNumber - 1} challenges`);
const readmeReplace = readme.replace(
readmeRegex,
- `all ${challengeNumber + 1} challenges`
+ `all ${challengeNumber} challenges`
);
- await writeFile('./README.md', readmeReplace, 'utf-8');
+ tree.write('./README.md', readmeReplace);
- const docs = await readFile('./docs/src/content/docs/index.mdx', {
- encoding: 'utf-8',
- });
+ const docs = tree.read('./docs/src/content/docs/index.mdx').toString();
- const regex = new RegExp(`${challengeNumber} Challenges`, 'gi');
- const replaced = docs.replace(regex, `${challengeNumber + 1} Challenges`);
+ const regex = new RegExp(`${challengeNumber - 1} Challenges`, 'gi');
+ const replaced = docs.replace(regex, `${challengeNumber} Challenges`);
- await writeFile('./docs/src/content/docs/index.mdx', replaced, 'utf-8');
+ tree.write('./docs/src/content/docs/index.mdx', replaced);
+
+ const previousChallengeFilePath = findPreviousChallengeFilePath(
+ tree,
+ `./docs/src/content/docs/challenges`,
+ String(challengeNumber - 1)
+ );
+ console.log(`restul`, previousChallengeFilePath);
+
+ const previousChallenge = tree.read(previousChallengeFilePath).toString();
+
+ tree.write(
+ previousChallengeFilePath,
+ previousChallenge.replace(`badge: New`, ``)
+ );
updateJson(tree, challengeNumberPath, (json) => {
- json.total = json.total + 1;
+ json.total += 1;
+ json[difficulty] += 1;
return json;
});
diff --git a/libs/cli/src/generators/readme/generator.ts b/libs/cli/src/generators/readme/generator.ts
index db2ddc6..15797bb 100644
--- a/libs/cli/src/generators/readme/generator.ts
+++ b/libs/cli/src/generators/readme/generator.ts
@@ -1,5 +1,4 @@
import { Tree, formatFiles } from '@nx/devkit';
-import { readFile, writeFile } from 'fs/promises';
const README_FILENAME = 'README.md';
const OMIT = ['memoized', 'projection', 'testing-table', 'testing-forms'];
@@ -46,10 +45,10 @@ function findHref(href) {
async function rewriteFile(tree: Tree, file: string) {
console.log('Current file', file);
- const buffer = await readFile(file, { encoding: 'utf-8' });
+ const buffer = tree.read(file);
const regex = new RegExp(/Answer:(\d+)/);
- const match = buffer.match(regex);
+ const match = buffer.toString().match(regex);
if (!match) throw new Error('NO MATCH');
@@ -69,19 +68,19 @@ async function rewriteFile(tree: Tree, file: string) {
-2
)}/${pathElts.at(-1)}/`;
- const doc = await readFile(docFile, { encoding: 'utf-8' });
+ const doc = tree.read(docFile);
const regexTitle = new RegExp(/title:\s(🟢|🟠|🔴)\s(.+?)\n/);
- const matchTitle = doc.match(regexTitle);
+ const matchTitle = doc.toString().match(regexTitle);
const title = matchTitle[2];
const regexCommand = new RegExp(/npx nx serve\s(.+?)`\s/);
- const matchCommand = buffer.match(regexCommand);
+ const matchCommand = buffer.toString().match(regexCommand);
let command = '';
if (!matchCommand) {
const regexOldCommand = new RegExp(/nx serve\s(.+?)\*/);
- command = buffer.match(regexOldCommand)[1];
+ command = buffer.toString().match(regexOldCommand)[1];
} else {
command = matchCommand[1];
}
@@ -103,12 +102,12 @@ npx nx serve ${command}
Challenge documentation is [here](${link}).
`;
- await writeFile(file, finalText, { encoding: 'utf-8' });
+ tree.write(file, finalText);
///**** */
const regexHref = new RegExp(/Answer:${number}.
target="_blank"
rel="noopener noreferrer"
alt="${title} blog article">
-
+
Blog Post
@@ -150,21 +149,21 @@ Your PR title must start with Answer:${number}.
}
const regexHeader = new RegExp(/([\s\S]*?)\s:::note/);
- const header = doc.match(regexHeader)[1];
+ const header = doc.toString().match(regexHeader)[1];
console.log('header', header);
const regexContent = new RegExp(
/Author: Thomas Laforge([\s\S]*?)### Submitting your work/
);
- const matchContent = buffer.match(regexContent);
+ const matchContent = buffer.toString().match(regexContent);
let content = '';
if (!matchContent) {
const regexOldContent = new RegExp(
/Author: Thomas Laforge([\s\S]*?)## Submitting your work/
);
- content = buffer.match(regexOldContent)[1];
+ content = buffer.toString().match(regexOldContent)[1];
} else {
content = matchContent[1];
}
@@ -184,7 +183,7 @@ ${content}
${footerText}
`;
- await writeFile(docFile, fullDocText, { encoding: 'utf-8' });
+ tree.write(docFile, fullDocText);
}
export async function readmeGenerator(tree: Tree) {
diff --git a/libs/shared/directives/src/index.ts b/libs/shared/directives/src/index.ts
index be3fd1e..fd1b226 100644
--- a/libs/shared/directives/src/index.ts
+++ b/libs/shared/directives/src/index.ts
@@ -1 +1,2 @@
export * from './lib/cd-flashing.directive';
+export { NgForTrackByModule } from './lib/track-by.directive';
diff --git a/libs/shared/directives/src/lib/track-by.directive.ts b/libs/shared/directives/src/lib/track-by.directive.ts
new file mode 100644
index 0000000..47ba73a
--- /dev/null
+++ b/libs/shared/directives/src/lib/track-by.directive.ts
@@ -0,0 +1,51 @@
+/* eslint-disable @angular-eslint/directive-selector */
+import { NgFor, NgForOf } from '@angular/common';
+import {
+ Directive,
+ Input,
+ NgIterable,
+ NgModule,
+ Provider,
+ inject,
+} from '@angular/core';
+
+@Directive({
+ selector: '[ngForTrackByProp]',
+ standalone: true,
+})
+export class NgForTrackByPropDirective