mirror of
https://github.com/Raghu-Ch/angular-challenges.git
synced 2026-02-12 13:53:03 -05:00
feat(doc): move modal
This commit is contained in:
@@ -1,5 +1,5 @@
|
|||||||
{
|
{
|
||||||
"extends": ["../../.eslintrc.json"],
|
"extends": ["../../../.eslintrc.json"],
|
||||||
"ignorePatterns": ["!**/*"],
|
"ignorePatterns": ["!**/*"],
|
||||||
"overrides": [
|
"overrides": [
|
||||||
{
|
{
|
||||||
@@ -5,7 +5,7 @@
|
|||||||
### Run Application
|
### Run Application
|
||||||
|
|
||||||
```bash
|
```bash
|
||||||
npx nx serve testing-modal
|
npx nx serve test-modal
|
||||||
```
|
```
|
||||||
|
|
||||||
### Documentation and Instruction
|
### Documentation and Instruction
|
||||||
12
apps/test/modal/cypress/support/component-index.html
Normal file
12
apps/test/modal/cypress/support/component-index.html
Normal 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>testing-modal Components App</title>
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
<div data-cy-root></div>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
@@ -1,7 +1,7 @@
|
|||||||
/* eslint-disable */
|
/* eslint-disable */
|
||||||
export default {
|
export default {
|
||||||
displayName: 'testing-modal',
|
displayName: 'test-modal',
|
||||||
preset: '../../jest.preset.js',
|
preset: '../../../jest.preset.js',
|
||||||
setupFilesAfterEnv: ['<rootDir>/src/test-setup.ts'],
|
setupFilesAfterEnv: ['<rootDir>/src/test-setup.ts'],
|
||||||
transform: {
|
transform: {
|
||||||
'^.+\\.(ts|mjs|js|html)$': [
|
'^.+\\.(ts|mjs|js|html)$': [
|
||||||
@@ -1,26 +1,26 @@
|
|||||||
{
|
{
|
||||||
"name": "testing-modal",
|
"name": "test-modal",
|
||||||
"$schema": "../node_modules/nx/schemas/project-schema.json",
|
"$schema": "../../../node_modules/nx/schemas/project-schema.json",
|
||||||
"projectType": "application",
|
"projectType": "application",
|
||||||
"sourceRoot": "apps/testing-modal/src",
|
"sourceRoot": "apps/test/modal/src",
|
||||||
"prefix": "app",
|
"prefix": "app",
|
||||||
"targets": {
|
"targets": {
|
||||||
"build": {
|
"build": {
|
||||||
"executor": "@angular-devkit/build-angular:browser",
|
"executor": "@angular-devkit/build-angular:browser",
|
||||||
"outputs": ["{options.outputPath}"],
|
"outputs": ["{options.outputPath}"],
|
||||||
"options": {
|
"options": {
|
||||||
"outputPath": "dist/apps/testing-modal",
|
"outputPath": "dist/apps/test/modal",
|
||||||
"index": "apps/testing-modal/src/index.html",
|
"index": "apps/test/modal/src/index.html",
|
||||||
"main": "apps/testing-modal/src/main.ts",
|
"main": "apps/test/modal/src/main.ts",
|
||||||
"polyfills": ["zone.js"],
|
"polyfills": ["zone.js"],
|
||||||
"tsConfig": "apps/testing-modal/tsconfig.app.json",
|
"tsConfig": "apps/test/modal/tsconfig.app.json",
|
||||||
"inlineStyleLanguage": "scss",
|
"inlineStyleLanguage": "scss",
|
||||||
"assets": [
|
"assets": [
|
||||||
"apps/testing-modal/src/favicon.ico",
|
"apps/test/modal/src/favicon.ico",
|
||||||
"apps/testing-modal/src/assets"
|
"apps/test/modal/src/assets"
|
||||||
],
|
],
|
||||||
"styles": [
|
"styles": [
|
||||||
"apps/testing-modal/src/styles.scss",
|
"apps/test/modal/src/styles.scss",
|
||||||
"./node_modules/@angular/material/prebuilt-themes/indigo-pink.css"
|
"./node_modules/@angular/material/prebuilt-themes/indigo-pink.css"
|
||||||
],
|
],
|
||||||
"scripts": []
|
"scripts": []
|
||||||
@@ -56,10 +56,10 @@
|
|||||||
"executor": "@angular-devkit/build-angular:dev-server",
|
"executor": "@angular-devkit/build-angular:dev-server",
|
||||||
"configurations": {
|
"configurations": {
|
||||||
"production": {
|
"production": {
|
||||||
"browserTarget": "testing-modal:build:production"
|
"browserTarget": "test-modal:build:production"
|
||||||
},
|
},
|
||||||
"development": {
|
"development": {
|
||||||
"browserTarget": "testing-modal:build:development"
|
"browserTarget": "test-modal:build:development"
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
"defaultConfiguration": "development"
|
"defaultConfiguration": "development"
|
||||||
@@ -67,7 +67,7 @@
|
|||||||
"extract-i18n": {
|
"extract-i18n": {
|
||||||
"executor": "@angular-devkit/build-angular:extract-i18n",
|
"executor": "@angular-devkit/build-angular:extract-i18n",
|
||||||
"options": {
|
"options": {
|
||||||
"browserTarget": "testing-modal:build"
|
"browserTarget": "test-modal:build"
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
"lint": {
|
"lint": {
|
||||||
@@ -75,8 +75,8 @@
|
|||||||
"outputs": ["{options.outputFile}"],
|
"outputs": ["{options.outputFile}"],
|
||||||
"options": {
|
"options": {
|
||||||
"lintFilePatterns": [
|
"lintFilePatterns": [
|
||||||
"apps/testing-modal/**/*.ts",
|
"apps/test/modal/**/*.ts",
|
||||||
"apps/testing-modal/**/*.html"
|
"apps/test/modal/**/*.html"
|
||||||
]
|
]
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
@@ -84,7 +84,7 @@
|
|||||||
"executor": "@nx/jest:jest",
|
"executor": "@nx/jest:jest",
|
||||||
"outputs": ["{workspaceRoot}/coverage/{projectRoot}"],
|
"outputs": ["{workspaceRoot}/coverage/{projectRoot}"],
|
||||||
"options": {
|
"options": {
|
||||||
"jestConfig": "apps/testing-modal/jest.config.ts",
|
"jestConfig": "apps/test/modal/jest.config.ts",
|
||||||
"passWithNoTests": true
|
"passWithNoTests": true
|
||||||
},
|
},
|
||||||
"configurations": {
|
"configurations": {
|
||||||
@@ -97,10 +97,10 @@
|
|||||||
"component-test": {
|
"component-test": {
|
||||||
"executor": "@nx/cypress:cypress",
|
"executor": "@nx/cypress:cypress",
|
||||||
"options": {
|
"options": {
|
||||||
"cypressConfig": "apps/testing-modal/cypress.config.ts",
|
"cypressConfig": "apps/test/modal/cypress.config.ts",
|
||||||
"testingType": "component",
|
"testingType": "component",
|
||||||
"skipServe": true,
|
"skipServe": true,
|
||||||
"devServerTarget": "testing-modal:build"
|
"devServerTarget": "test-modal:build"
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
|
Before Width: | Height: | Size: 15 KiB After Width: | Height: | Size: 15 KiB |
@@ -1,7 +1,7 @@
|
|||||||
{
|
{
|
||||||
"extends": "./tsconfig.json",
|
"extends": "./tsconfig.json",
|
||||||
"compilerOptions": {
|
"compilerOptions": {
|
||||||
"outDir": "../../dist/out-tsc",
|
"outDir": "../../../dist/out-tsc",
|
||||||
"types": []
|
"types": []
|
||||||
},
|
},
|
||||||
"files": ["src/main.ts"],
|
"files": ["src/main.ts"],
|
||||||
@@ -25,7 +25,7 @@
|
|||||||
"path": "./cypress/tsconfig.json"
|
"path": "./cypress/tsconfig.json"
|
||||||
}
|
}
|
||||||
],
|
],
|
||||||
"extends": "../../tsconfig.base.json",
|
"extends": "../../../tsconfig.base.json",
|
||||||
"angularCompilerOptions": {
|
"angularCompilerOptions": {
|
||||||
"enableI18nLegacyMessageIdFormat": false,
|
"enableI18nLegacyMessageIdFormat": false,
|
||||||
"strictInjectionParameters": true,
|
"strictInjectionParameters": true,
|
||||||
@@ -1,7 +1,7 @@
|
|||||||
{
|
{
|
||||||
"extends": "./tsconfig.json",
|
"extends": "./tsconfig.json",
|
||||||
"compilerOptions": {
|
"compilerOptions": {
|
||||||
"outDir": "../../dist/out-tsc",
|
"outDir": "../../../dist/out-tsc",
|
||||||
"module": "commonjs",
|
"module": "commonjs",
|
||||||
"types": ["jest", "node", "@testing-library/jest-dom"]
|
"types": ["jest", "node", "@testing-library/jest-dom"]
|
||||||
},
|
},
|
||||||
@@ -1,13 +0,0 @@
|
|||||||
<!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>testing-modal Components App</title>
|
|
||||||
|
|
||||||
</head>
|
|
||||||
<body>
|
|
||||||
<div data-cy-root></div>
|
|
||||||
</body>
|
|
||||||
</html>
|
|
||||||
@@ -3,7 +3,7 @@ title: 🟠 Modal
|
|||||||
description: Challenge 20 is about testing modals
|
description: Challenge 20 is about testing modals
|
||||||
author: Thomas Laforge
|
author: Thomas Laforge
|
||||||
challengeNumber: 20
|
challengeNumber: 20
|
||||||
command: testing-modal
|
command: test-modal
|
||||||
sidebar:
|
sidebar:
|
||||||
order: 111
|
order: 111
|
||||||
---
|
---
|
||||||
@@ -16,11 +16,11 @@ In the confirmation modal, if you click the **Confirm** button, a message confir
|
|||||||
|
|
||||||
The goal of this challenge is to test the dialogs inside your application. To do so, we will test the full application like an end-to-end test will do. This means, we will test the `AppComponent` as a black box and react to events on the page. <b>No internal details should be tested</b>. The difference between an e2e test and integration test is that we will mock all API calls. _(All http requests are faked inside this application, but this would not be the case in a real entreprice application.)_
|
The goal of this challenge is to test the dialogs inside your application. To do so, we will test the full application like an end-to-end test will do. This means, we will test the `AppComponent` as a black box and react to events on the page. <b>No internal details should be tested</b>. The difference between an e2e test and integration test is that we will mock all API calls. _(All http requests are faked inside this application, but this would not be the case in a real entreprice application.)_
|
||||||
|
|
||||||
You can play with it by running : `npx nx serve testing-modal`.
|
You can play with it by running : `npx nx serve test-modal`.
|
||||||
|
|
||||||
The file named `app.component.spec.ts` will let test your application using Testing Library. To run the test suits, you need to run `npx nx test testing-modal`. You can also install [Jest Runner](https://marketplace.visualstudio.com/items?itemName=firsttris.vscode-jest-runner) to execute your test by clicking on the `Run` button above each `describe` or `it` blocks.
|
The file named `app.component.spec.ts` will let test your application using Testing Library. To run the test suits, you need to run `npx nx test test-modal`. You can also install [Jest Runner](https://marketplace.visualstudio.com/items?itemName=firsttris.vscode-jest-runner) to execute your test by clicking on the `Run` button above each `describe` or `it` blocks.
|
||||||
|
|
||||||
For testing cypress, you will execute your test inside the `app.component.cy.ts` and run `npx nx component-test testing-modal` to execute your test suits. You can add the `--watch` flag to execute your test in watch mode.
|
For testing cypress, you will execute your test inside the `app.component.cy.ts` and run `npx nx component-test test-modal` to execute your test suits. You can add the `--watch` flag to execute your test in watch mode.
|
||||||
|
|
||||||
# Statement
|
# Statement
|
||||||
|
|
||||||
|
|||||||
Reference in New Issue
Block a user