You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
An *attribute directive* modifies the behavior of an element, component or another directive.
5
+
Its name reflects the way the directive is applied: as an attribute on a host element.
6
+
7
+
## Testing the `HighlightDirective`
8
+
9
+
The sample application's `HighlightDirective` sets the background color of an element based on either a data bound color or a default color \(lightgray\).
10
+
It also sets a custom property of the element \(`customProperty`\) to `true` for no reason other than to show that it can.
Testing the specific use of the `HighlightDirective` within the `AboutComponent` requires only the techniques explored in the ["Nested component tests"](guide/testing/components-scenarios#nested-component-tests) section of [Component testing scenarios](guide/testing/components-scenarios).
* The `By.directive` predicate is a great way to get the elements that have this directive *when their element types are unknown*
44
+
* The [`:not` pseudo-class](https://developer.mozilla.org/docs/Web/CSS/:not) in `By.css('h2:not([highlight])')` helps find `<h2>` elements that *do not* have the directive.
45
+
`By.css('*:not([highlight])')` finds *any* element that does not have the directive.
46
+
47
+
*`DebugElement.styles` affords access to element styles even in the absence of a real browser, thanks to the `DebugElement` abstraction.
48
+
But feel free to exploit the `nativeElement` when that seems easier or more clear than the abstraction.
49
+
50
+
* Angular adds a directive to the injector of the element to which it is applied.
51
+
The test for the default color uses the injector of the second `<h2>` to get its `HighlightDirective` instance and its `defaultColor`.
52
+
53
+
*`DebugElement.properties` affords access to the artificial custom property that is set by the directive
An *attribute directive* modifies the behavior of an element, component or another directive.
5
-
Its name reflects the way the directive is applied: as an attribute on a host element.
4
+
Una *directiva de atributo* modifica el comportamiento de un elemento, componente u otra directiva.
5
+
Su nombre refleja la forma en que se aplica la directiva: como un atributo en un elemento host.
6
6
7
-
## Testing the`HighlightDirective`
7
+
## Probar la`HighlightDirective`
8
8
9
-
The sample application's `HighlightDirective`sets the background color of an element based on either a data bound color or a default color \(lightgray\).
10
-
It also sets a custom property of the element \(`customProperty`\)to`true`for no reason other than to show that it can.
9
+
La `HighlightDirective`de la aplicación de muestra establece el color de fondo de un elemento basado en un color vinculado a datos o un color predeterminado\(lightgray\).
10
+
También establece una propiedad personalizada del elemento \(`customProperty`\)a`true`sin otra razón que mostrar que puede hacerlo.
Testing the specific use of the`HighlightDirective`within the`AboutComponent`requires only the techniques explored in the ["Nested component tests"](guide/testing/components-scenarios#nested-component-tests)section of [Component testing scenarios](guide/testing/components-scenarios).
18
+
Probar el uso específico de la`HighlightDirective`dentro del`AboutComponent`requiere solo las técnicas exploradas en la sección ["Pruebas de componentes anidados"](guide/testing/components-scenarios#nested-component-tests)de [Escenarios de prueba de componentes](guide/testing/components-scenarios).
*The `By.directive`predicate is a great way to get the elements that have this directive *when their element types are unknown*
44
-
*The [`:not` pseudo-class](https://developer.mozilla.org/docs/Web/CSS/:not)in`By.css('h2:not([highlight])')`helps find `<h2>`elements that *do not* have the directive.
45
-
`By.css('*:not([highlight])')`finds *any* element that does not have the directive.
43
+
*El predicado `By.directive`es una excelente manera de obtener los elementos que tienen esta directiva *cuando sus tipos de elemento son desconocidos*
44
+
*La [pseudo-clase `:not`](https://developer.mozilla.org/docs/Web/CSS/:not)en`By.css('h2:not([highlight])')`ayuda a encontrar elementos `<h2>`que *no* tienen la directiva.
45
+
`By.css('*:not([highlight])')`encuentra *cualquier* elemento que no tenga la directiva.
46
46
47
-
*`DebugElement.styles`affords access to element styles even in the absence of a real browser, thanks to the `DebugElement` abstraction.
48
-
But feel free to exploit the`nativeElement`when that seems easier or more clear than the abstraction.
47
+
*`DebugElement.styles`permite el acceso a los estilos del elemento incluso en ausencia de un navegador real, gracias a la abstracción `DebugElement`.
48
+
Pero siéntete libre de explotar el`nativeElement`cuando eso parezca más fácil o más claro que la abstracción.
49
49
50
-
* Angular adds a directive to the injector of the element to which it is applied.
51
-
The test for the default color uses the injector of the second `<h2>`to get its `HighlightDirective`instance and its`defaultColor`.
50
+
* Angular agrega una directiva al injector del elemento al que se aplica.
51
+
La prueba para el color predeterminado usa el injector del segundo `<h2>`para obtener su instancia de `HighlightDirective`y su`defaultColor`.
52
52
53
-
*`DebugElement.properties`affords access to the artificial custom property that is set by the directive
53
+
*`DebugElement.properties`permite el acceso a la propiedad personalizada artificial que se establece por la directiva
The Angular CLI can run unit tests and create code coverage reports.
5
+
Code coverage reports show you any parts of your code base that might not be properly tested by your unit tests.
6
+
7
+
To generate a coverage report run the following command in the root of your project.
8
+
9
+
<docs-codelanguage="shell">
10
+
ng test --no-watch --code-coverage
11
+
</docs-code>
12
+
13
+
When the tests are complete, the command creates a new `/coverage` directory in the project.
14
+
Open the `index.html` file to see a report with your source code and code coverage values.
15
+
16
+
If you want to create code-coverage reports every time you test, set the following option in the Angular CLI configuration file, `angular.json`:
17
+
18
+
<docs-codelanguage="json">
19
+
"test": {
20
+
"options": {
21
+
"codeCoverage": true
22
+
}
23
+
}
24
+
</docs-code>
25
+
26
+
## Code coverage enforcement
27
+
28
+
The code coverage percentages let you estimate how much of your code is tested.
29
+
If your team decides on a set minimum amount to be unit tested, enforce this minimum with the Angular CLI.
30
+
31
+
For example, suppose you want the code base to have a minimum of 80% code coverage.
32
+
To enable this, open the [Karma](https://karma-runner.github.io) test platform configuration file, `karma.conf.js`, and add the `check` property in the `coverageReporter:` key.
HELPFUL: Read more about creating and fine tuning Karma configuration in the [testing guide](guide/testing#configuration).
54
+
55
+
The `check` property causes the tool to enforce a minimum of 80% code coverage when the unit tests are run in the project.
56
+
57
+
Read more on coverage configuration options in the [karma coverage documentation](https://github.com/karma-runner/karma-coverage/blob/master/docs/configuration.md).
The Angular CLI can run unit tests and create code coverage reports.
5
-
Code coverage reports show you any parts of your code base that might not be properly tested by your unit tests.
4
+
Angular CLI puede ejecutar pruebas unitarias y crear reportes de cobertura de código.
5
+
Los reportes de cobertura de código te muestran cualquier parte de tu código base que podría no estar correctamente probada por tus pruebas unitarias.
6
6
7
-
To generate a coverage report run the following command in the root of your project.
7
+
Para generar un reporte de cobertura ejecuta el siguiente comando en la raíz de tu proyecto.
8
8
9
9
<docs-codelanguage="shell">
10
10
ng test --no-watch --code-coverage
11
11
</docs-code>
12
12
13
-
When the tests are complete, the command creates a new `/coverage`directory in the project.
14
-
Open the `index.html`file to see a report with your source code and code coverage values.
13
+
Cuando las pruebas estén completas, el comando crea un nuevo directorio `/coverage`en el proyecto.
14
+
Abre el archivo `index.html`para ver un reporte con tu código fuente y valores de cobertura de código.
15
15
16
-
If you want to create code-coverage reports every time you test, set the following option in the Angular CLI configuration file, `angular.json`:
16
+
Si quieres crear reportes de cobertura de código cada vez que pruebas, establece la siguiente opción en el archivo de configuración de Angular CLI, `angular.json`:
17
17
18
18
<docs-codelanguage="json">
19
19
"test": {
@@ -23,13 +23,13 @@ If you want to create code-coverage reports every time you test, set the followi
23
23
}
24
24
</docs-code>
25
25
26
-
## Code coverage enforcement
26
+
## Aplicación de cobertura de código
27
27
28
-
The code coverage percentages let you estimate how much of your code is tested.
29
-
If your team decides on a set minimum amount to be unit tested, enforce this minimum with the Angular CLI.
28
+
Los porcentajes de cobertura de código te permiten estimar cuánto de tu código está probado.
29
+
Si tu equipo decide sobre una cantidad mínima establecida para ser probada unitariamente, aplica este mínimo con Angular CLI.
30
30
31
-
For example, suppose you want the code base to have a minimum of 80% code coverage.
32
-
To enable this, open the [Karma](https://karma-runner.github.io) test platform configuration file, `karma.conf.js`, and add the `check`property in the`coverageReporter:` key.
31
+
Por ejemplo, supón que quieres que la base de código tenga un mínimo de 80% de cobertura de código.
32
+
Para habilitar esto, abre el archivo de configuración de la plataforma de pruebas [Karma](https://karma-runner.github.io), `karma.conf.js`, y agrega la propiedad `check`en la clave`coverageReporter:`.
33
33
34
34
<docs-codelanguage="javascript">
35
35
coverageReporter: {
@@ -50,8 +50,8 @@ coverageReporter: {
50
50
}
51
51
</docs-code>
52
52
53
-
HELPFUL: Read more about creating and fine tuning Karma configuration in the [testing guide](guide/testing#configuration).
53
+
ÚTIL: Lee más sobre crear y ajustar la configuración de Karma en la [guía de pruebas](guide/testing#configuration).
54
54
55
-
The `check`property causes the tool to enforce a minimum of 80% code coverage when the unit tests are run in the project.
55
+
La propiedad `check`hace que la herramienta aplique un mínimo de 80% de cobertura de código cuando las pruebas unitarias se ejecutan en el proyecto.
56
56
57
-
Read more on coverage configuration options in the [karma coverage documentation](https://github.com/karma-runner/karma-coverage/blob/master/docs/configuration.md).
57
+
Lee más sobre opciones de configuración de cobertura en la [documentación de karma coverage](https://github.com/karma-runner/karma-coverage/blob/master/docs/configuration.md).
0 commit comments