chore(i18n,curriculum): update translations (#43267)
This commit is contained in:
camperbot
GitHub
@@ -46,7 +46,7 @@ Here's a <a href="https://www.freecodecamp.org" target="_blank">link to www.free
|
||||
|
||||
# --instructions--
|
||||
|
||||
Annida l'elemento `a` esistente all'interno di un nuovo elemento `p`. Il nuovo paragrafo dovrebbe contenere un testo che dice `View more cat photos`, dove `cat photos` è un collegamento, e il resto è testo semplice.
|
||||
Annida l'elemento `a` esistente all'interno di un nuovo elemento `p`. Non creare un nuovo elemento di ancoraggio. Il nuovo paragrafo dovrebbe contenere testo che dice `View more cat photos`, dove `cat photos` è un collegamento, e il resto è testo semplice.
|
||||
|
||||
# --hints--
|
||||
|
||||
|
||||
@@ -27,7 +27,7 @@ Se si omette l'attributo `value`, i dati del modulo inviato usano il valore pred
|
||||
|
||||
# --instructions--
|
||||
|
||||
Dai a ciascuno degli input `radio` e `checkbox` l'attributo `value`. Usa il testo dell'etichetta, in minuscolo, come valore per l'attributo.
|
||||
Dai a ciascuno degli elementi di input esistenti di tipo `radio` e `checkbox` l'attributo `value`. Non creare alcun nuovo elemento radio o casella di controllo. Usa il testo dell'etichetta, in minuscolo, come valore per l'attributo.
|
||||
|
||||
# --hints--
|
||||
|
||||
|
||||
@@ -8,7 +8,7 @@ dashedName: render-conditionally-from-props
|
||||
|
||||
# --description--
|
||||
|
||||
Fino ad ora hai visto come usare `if/else`, `&&`, e l'operatore ternario (`condition ? expressionIfTrue : expressionIfFalse`) per fare decisioni condizionali su cosa e quando presentare. Tuttavia, c'è ancora un argomento importante da discutere che consente di combinare uno o tutti questi concetti con un'altra potente funzionalità di React: le props. Usare le proprietà (props) per presentare il codice condizionalmente è molto comune tra gli sviluppatori di React — cioè essi usano il valore di una determinata proprietà per prendere automaticamente delle decisioni su cosa presentare.
|
||||
Finora, hai visto come usare `if/else`, `&&`, e l'operatore ternario (`condition ? expressionIfTrue : expressionIfFalse`) per prendere decisioni condizionali su cosa presentare e quando. Tuttavia, c'è ancora un argomento importante da discutere che consente di combinare uno o tutti questi concetti con un'altra potente funzionalità di React: le props. Usare le proprietà (props) per presentare il codice condizionalmente è molto comune tra gli sviluppatori di React — cioè essi usano il valore di una determinata proprietà per prendere automaticamente delle decisioni su cosa presentare.
|
||||
|
||||
In questa sfida, configurerai un componente figlio per prendere decisioni di rendering basate sulle props. Utilizzerai anche l'operatore ternario, ma puoi vedere come molti degli altri concetti che sono stati trattati nelle ultime sfide potrebbero essere altrettanto utili in questo contesto.
|
||||
|
||||
|
||||
@@ -8,7 +8,7 @@ dashedName: copy-an-object-with-object-assign
|
||||
|
||||
# --description--
|
||||
|
||||
Le ultime sfide funzionavano con gli array, ma ci sono modi per aiutare a far rispettare l'immutabilità dello stato anche quando esso è un `object`. Uno strumento utile per gestire gli oggetti è l'utilità `Object.assign()`. `Object.assign()` prende un oggetto di destinazione e degli oggetti di origine e mappa le proprietà dagli oggetti di origine all'oggetto di destinazione. Tutte le proprietà corrispondenti sono sovrascritte dalle proprietà degli oggetti sorgente. Questo comportamento è comunemente usato per fare copie superficiali di oggetti passando un oggetto vuoto come primo argomento seguito dall'oggetto o dagli oggetti che si desidera copiare. Ecco un esempio:
|
||||
Le ultime sfide funzionavano con gli array, ma ci sono modi per aiutare a far rispettare l'immutabilità dello stato anche quando esso è un `object`. Uno strumento utile per gestire gli oggetti è l'utilità `Object.assign()`. `Object.assign()` prende un oggetto di destinazione e degli oggetti di origine e mappa le proprietà dagli oggetti di origine all'oggetto di destinazione. Tutte le proprietà corrispondenti sono sovrascritte dalle proprietà degli oggetti sorgente. Questo comportamento è comunemente usato per fare copie superficiali di oggetti passando un oggetto vuoto come primo argomento seguito dall'oggetto o dagli oggetti che si desidera copiare. Qui un esempio:
|
||||
|
||||
```js
|
||||
const newObject = Object.assign({}, obj1, obj2);
|
||||
|
||||
@@ -10,7 +10,7 @@ dashedName: handle-an-action-in-the-store
|
||||
|
||||
Dopo che un'azione è stata creata e spedita, lo store di Redux deve sapere come rispondere a quell'azione. Questo è il lavoro di una funzione `reducer` (riduttore). I reducer in Redux sono responsabili delle modifiche allo stato che si verificano in risposta alle azioni. Un `reducer` prende `state` e `action` come argomenti, e restituisce sempre un nuovo `state`. È importante capire che questo è l'**unico** ruolo del reducer. Questo non ha effetti collaterali - non chiama mai un endpoint API e non ha mai sorprese nascoste. Il reducer è semplicemente una funzione pura che prende uno stato e un'azione, e restituisce un nuovo stato.
|
||||
|
||||
Un altro principio chiave in Redux è che lo `state` è di sola lettura. In altre parole, la funzione `reducer` deve **sempre** restituire una nuova copia dello `state` e non modificare mai direttamente lo state. Redux non applica l'immutabilità dello stato, tuttavia sei responsabile di applicarlo nel codice delle tue funzioni reducer. Nelle prossime sfide farai pratica con questo.
|
||||
Un altro principio chiave in Redux è che lo `state` è di sola lettura. In altre parole, la funzione `reducer` deve **sempre** restituire una nuova copia dello `state` e non modificare mai direttamente lo state. Redux non forza l'immutabilità dello stato, tuttavia sei responsabile di applicarlo nel codice delle tue funzioni reducer. Nelle prossime sfide farai pratica con questo.
|
||||
|
||||
# --instructions--
|
||||
|
||||
|
||||
@@ -12,7 +12,7 @@ Queste ultime sfide descrivono diversi metodi per far rispettare il principio fo
|
||||
|
||||
Se scattassi un'istantanea dello stato di un'applicazione Redux nel tempo, vedresti qualcosa come `state 1`, `state 2`, `state 3`,`state 4`, `...` e così via dove ogni stato può essere simile al precedente, ma ognuno è un dato distinto. Questa immutabilità, infatti, è ciò che fornisce caratteristiche come il debugging time-travel (viaggio nel tempo) di cui potresti aver sentito parlare.
|
||||
|
||||
Redux non applica attivamente l'immutabilità dello stato nel suo store o nei reducer: questa responsabilità ricade sul programmatore. Fortunatamente, JavaScript (specialmente ES6) fornisce diversi strumenti utili che puoi usare per far rispettare l'immutabilità del tuo stato, che si tratti di una `string`, `number`, `array` o `object`. Nota che le stringhe e i numeri sono valori primitivi e sono immutabili per natura. In altre parole, 3 è sempre 3. Non è possibile modificare il valore del numero 3. Un `array` o `object`, invece, è mutabile. In pratica, il tuo stato sarà probabilmente costituito da un `array` o da un `object`, trattandosi di strutture di dati utili per rappresentare molti tipi di informazioni.
|
||||
Redux non obbliga attivamente l'immutabilità dello stato nel suo store o nei reducer: questa responsabilità ricade sul programmatore. Fortunatamente, JavaScript (specialmente ES6) fornisce diversi strumenti utili che puoi usare per far rispettare l'immutabilità del tuo stato, che si tratti di una `string`, `number`, `array` o `object`. Nota che le stringhe e i numeri sono valori primitivi e sono immutabili per natura. In altre parole, 3 è sempre 3. Non è possibile modificare il valore del numero 3. Un `array` o `object`, invece, è mutabile. In pratica, il tuo stato sarà probabilmente costituito da un `array` o da un `object`, trattandosi di strutture di dati utili per rappresentare molti tipi di informazioni.
|
||||
|
||||
# --instructions--
|
||||
|
||||
|
||||
@@ -32,7 +32,7 @@ Ci sarebbe molto da digitare per riscrivere questa regola per tutti gli elementi
|
||||
}
|
||||
```
|
||||
|
||||
La definizione inizia con `@mixin` seguito da un nome personalizzato. I parametri ( `$x`, `$y`, `$blur`e `$c` nell'esempio sopra) sono opzionali. Ora ogni volta che è necessaria una regola `box-shadow`, invece di dover digitare tutti i prefissi dei venditori dovremo solo scrivere una singola linea che chiama il mixin. Un mixin è chiamato con la direttiva `@include`:
|
||||
La definizione inizia con `@mixin` seguito da un nome personalizzato. I parametri ( `$x`, `$y`, `$blur`e `$c` nell'esempio sopra) sono opzionali. Ora ogni volta che è necessaria una regola `box-shadow`, invece di dover digitare tutti i prefissi dei venditori dovremo scrivere una singola linea che chiama il mixin. Un mixin è chiamato con la direttiva `@include`:
|
||||
|
||||
```scss
|
||||
div {
|
||||
|
||||
@@ -30,7 +30,7 @@ Supponi ora di volere un altro pannello chiamato `.big-panel`. Ha le stesse prop
|
||||
}
|
||||
```
|
||||
|
||||
Il `.big-panel` avrà le stesse proprietà di `.panel` in aggiunta ai nuovi stili.
|
||||
`.big-panel` avrà le stesse proprietà di `.panel` in aggiunta ai nuovi stili.
|
||||
|
||||
# --instructions--
|
||||
|
||||
|
||||
@@ -26,7 +26,7 @@ nav ul li {
|
||||
}
|
||||
```
|
||||
|
||||
Per un grande progetto però, il file CSS avrà molte linee e regole. Questo è dove la nidificazione può aiutare a organizzare il codice inserendo le regole di stile figlie all'interno dei rispettivi elementi genitori:
|
||||
Per un grande progetto però, il file CSS avrà molte linee e regole. Qui la nidificazione può aiutare a organizzare il codice inserendo le regole di stile figlie all'interno dei rispettivi elementi genitori:
|
||||
|
||||
```scss
|
||||
nav {
|
||||
@@ -45,7 +45,7 @@ nav {
|
||||
|
||||
# --instructions--
|
||||
|
||||
Utilizzare la tecnica di nidificazione mostrata sopra per riorganizzare le regole CSS per entrambi i figli dell'elemento `.blog-post`. Ai fini dei test, l'elemento `h1` dovrebbe venire prima dell'elemento `p`.
|
||||
Utilizza la tecnica di nidificazione mostrata sopra per riorganizzare le regole CSS per entrambi i figli dell'elemento `.blog-post`. Ai fini dei test, l'elemento `h1` dovrebbe venire prima dell'elemento `p`.
|
||||
|
||||
# --hints--
|
||||
|
||||
|
||||
@@ -32,7 +32,7 @@ Un esempio in cui le variabili sono utili è quando un certo numero di elementi
|
||||
|
||||
# --instructions--
|
||||
|
||||
Crea una variabile `$text-color` e impostala su `red`. Quindi cambiare il valore della proprietà `color` per il `.blog-post` e per `h2` impostandoli alla variabile `$text-color`.
|
||||
Crea una variabile `$text-color` e impostala su `red`. Quindi cambia il valore della proprietà `color` per `.blog-post` e per `h2` impostandoli alla variabile `$text-color`.
|
||||
|
||||
# --hints--
|
||||
|
||||
|
||||
@@ -1,6 +1,6 @@
|
||||
---
|
||||
id: 587d7dbf367417b2b2512bba
|
||||
title: Usare @each per iterare sugli elementi in una lista
|
||||
title: Usare @each per iterare sugli elementi di una lista
|
||||
challengeType: 0
|
||||
forumTopicId: 301461
|
||||
dashedName: use-each-to-map-over-items-in-a-list
|
||||
|
||||
@@ -1,6 +1,6 @@
|
||||
---
|
||||
id: 587d7dbe367417b2b2512bb8
|
||||
title: Usare @if e @else per aggiungere logica ai tuoi stili
|
||||
title: Usare @if e @else per aggiungere logica agli stili
|
||||
challengeType: 0
|
||||
forumTopicId: 301463
|
||||
dashedName: use-if-and-else-to-add-logic-to-your-styles
|
||||
|
||||
@@ -12,13 +12,55 @@ Costruisci un'app JavaScript full-stack che sia funzionalmente simile a questa:
|
||||
|
||||
- Clonare [questa repository GitHub](https://github.com/freeCodeCamp/boilerplate-project-exercisetracker/) e completa il tuo progetto localmente.
|
||||
- Usare [la nostra bozza di progetto su Replit](https://replit.com/github/freeCodeCamp/boilerplate-project-exercisetracker) per completare il tuo progetto.
|
||||
- Usare un costruttore di siti di tua scelta per completare il progetto. Assicurati di incorporare tutti i file della nostra repository GitHub.
|
||||
- Usare un costruttore di siti di tua scelta per completare il progetto. Assicurati di incorporare tutti i file del nostro repository GitHub.
|
||||
|
||||
Quando hai finito, assicurati che una demo funzionante del tuo progetto sia ospitata pubblicamente da qualche parte. Quindi invia l'URL nel campo `Solution Link`. Facoltativamente, invia anche un link al codice sorgente del tuo progetto nel campo `GitHub Link`.
|
||||
Quando hai finito, assicurati che una demo funzionante del tuo progetto sia ospitata in qualche percorso pubblico. Quindi invia l'URL nel campo `Solution Link`. Facoltativamente, invia anche un link al codice sorgente del tuo progetto nel campo `GitHub Link`.
|
||||
|
||||
# --instructions--
|
||||
|
||||
Le tue risposte dovrebbero avere le seguenti strutture.
|
||||
|
||||
Exercise:
|
||||
|
||||
```js
|
||||
{
|
||||
username: "fcc_test"
|
||||
description: "test",
|
||||
duration: 60,
|
||||
date: "Mon Jan 01 1990",
|
||||
_id: "5fb5853f734231456ccb3b05"
|
||||
}
|
||||
```
|
||||
|
||||
User:
|
||||
|
||||
```js
|
||||
{
|
||||
username: "fcc_test",
|
||||
_id: "5fb5853f734231456ccb3b05"
|
||||
}
|
||||
```
|
||||
|
||||
Log:
|
||||
|
||||
```js
|
||||
{
|
||||
username: "fcc_test",
|
||||
count: 1,
|
||||
_id: "5fd01a41c5b5cf05d080502f",
|
||||
log: [{
|
||||
description: "test",
|
||||
duration: 60,
|
||||
date: "Mon Jan 01 1990",
|
||||
}]
|
||||
}
|
||||
```
|
||||
|
||||
**Suggerimento:** Per la prorpietà `date`, puoi usare il metodo `toDateString` della API `Date` per ottenere l'output previsto.
|
||||
|
||||
# --hints--
|
||||
|
||||
Dovresti inviare il tuo progetto, non l'URL di esempio.
|
||||
È necessario fornire il proprio progetto, non l'URL di esempio.
|
||||
|
||||
```js
|
||||
(getUserInput) => {
|
||||
|
||||
@@ -12,9 +12,9 @@ Costruisci un'app JavaScript full-stack che sia funzionalmente simile a questa:
|
||||
|
||||
- Clonare [questa repository GitHub](https://github.com/freeCodeCamp/boilerplate-project-filemetadata/) e completare il tuo progetto localmente.
|
||||
- Usare [la nostra bozza di progetto su Replit](https://replit.com/github/freeCodeCamp/boilerplate-project-filemetadata) per completare il tuo progetto.
|
||||
- Usare un costruttore di siti di tua scelta per completare il progetto. Assicurati di incorporare tutti i file della nostra repository GitHub.
|
||||
- Usare un costruttore di siti di tua scelta per completare il progetto. Assicurati di incorporare tutti i file del nostro repository GitHub.
|
||||
|
||||
Quando hai finito, assicurati che una demo funzionante del tuo progetto sia ospitata da qualche parte di pubblico. Quindi invia l'URL nel campo `Solution Link`. Facoltativamente, invia anche un link al codice sorgente dei tuoi progetti nel campo `GitHub Link`.
|
||||
Quando hai finito, assicurati che una demo funzionante del tuo progetto sia ospitata in qualche percorso pubblico. Quindi invia l'URL nel campo `Solution Link`. Facoltativamente, invia anche un link al codice sorgente dei tuoi progetti nel campo `GitHub Link`.
|
||||
|
||||
# --instructions--
|
||||
|
||||
|
||||
@@ -12,9 +12,9 @@ Costruisci un'app JavaScript full-stack che sia funzionalmente simile a questa:
|
||||
|
||||
- Clonare [questa repository GitHub](https://github.com/freeCodeCamp/boilerplate-project-headerparser/) e completare il tuo progetto localmente.
|
||||
- Usare [la nostra bozza di progetto su Replit](https://replit.com/github/freeCodeCamp/boilerplate-project-headerparser) per completare il tuo progetto.
|
||||
- Usare un costruttore di siti di tua scelta per completare il progetto. Assicurati di incorporare tutti i file della nostra repository GitHub.
|
||||
- Usare un costruttore di siti di tua scelta per completare il progetto. Assicurati di incorporare tutti i file del nostro repository GitHub.
|
||||
|
||||
Quando hai finito, assicurati che una demo funzionante del tuo progetto sia ospitata da qualche parte di pubblico. Quindi invia l'URL nel campo `Solution Link`. Facoltativamente, invia anche un link al codice sorgente del tuo progetto nel campo `GitHub Link`.
|
||||
Quando hai finito, assicurati che una demo funzionante del tuo progetto sia ospitata in qualche percorso pubblico. Quindi invia l'URL nel campo `Solution Link`. Facoltativamente, invia anche un link al codice sorgente del tuo progetto nel campo `GitHub Link`.
|
||||
|
||||
# --hints--
|
||||
|
||||
|
||||
@@ -12,9 +12,9 @@ Costruisci un'app JavaScript full-stack che sia funzionalmente simile a questa:
|
||||
|
||||
- Clonare [questa repository GitHub](https://github.com/freeCodeCamp/boilerplate-project-timestamp/) e completare il tuo progetto localmente.
|
||||
- Usare [la nostra bozza di progetto su Replit](https://replit.com/github/freeCodeCamp/boilerplate-project-timestamp) per completare il tuo progetto.
|
||||
- Usare un costruttore di siti di tua scelta per completare il progetto. Assicurati di incorporare tutti i file della nostra repository GitHub.
|
||||
- Usare un costruttore di siti di tua scelta per completare il progetto. Assicurati di incorporare tutti i file del nostro repository GitHub.
|
||||
|
||||
Quando hai finito, assicurati che una demo funzionante del tuo progetto sia ospitata da qualche parte di pubblico. Quindi invia l'URL nel campo `Solution Link`. Facoltativamente, invia anche un link al codice sorgente dei tuoi progetti nel campo `GitHub Link`.
|
||||
Quando hai finito, assicurati che una demo funzionante del tuo progetto sia ospitata in qualche percorso pubblico. Quindi invia l'URL nel campo `Solution Link`. Facoltativamente, invia anche un link al codice sorgente dei tuoi progetti nel campo `GitHub Link`.
|
||||
|
||||
# --hints--
|
||||
|
||||
|
||||
@@ -12,9 +12,9 @@ Costruisci un'app JavaScript full-stack che sia funzionalmente simile a questa:
|
||||
|
||||
- Clonare [questa repository GitHub](https://github.com/freeCodeCamp/boilerplate-project-urlshortener/) e completare il tuo progetto localmente.
|
||||
- Usare [la nostra bozza di progetto su Replit](https://replit.com/github/freeCodeCamp/boilerplate-project-urlshortener) per completare il tuo progetto.
|
||||
- Usare un costruttore di siti di tua scelta per completare il progetto. Assicurati di incorporare tutti i file della nostra repository GitHub.
|
||||
- Usare un costruttore di siti di tua scelta per completare il progetto. Assicurati di incorporare tutti i file del nostro repository GitHub.
|
||||
|
||||
Quando hai finito, assicurati che una demo funzionante del tuo progetto sia ospitata da qualche parte di pubblico. Quindi invia l'URL nel campo `Solution Link`. Facoltativamente, invia anche un link al codice sorgente dei tuoi progetti nel campo `GitHub Link`.
|
||||
Quando hai finito, assicurati che una demo funzionante del tuo progetto sia ospitata in qualche percorso pubblico. Quindi invia l'URL nel campo `Solution Link`. Facoltativamente, invia anche un link al codice sorgente dei tuoi progetti nel campo `GitHub Link`.
|
||||
|
||||
# --instructions--
|
||||
|
||||
|
||||
@@ -10,7 +10,7 @@ dashedName: chain-middleware-to-create-a-time-server
|
||||
|
||||
Il middleware può essere montato su un percorso specifico utilizzando `app.METHOD(path, middlewareFunction)`. Il middleware può anche essere concatenato all'interno della definizione del percorso.
|
||||
|
||||
Guarda l'esempio seguente:
|
||||
Considera l'esempio seguente:
|
||||
|
||||
```js
|
||||
app.get('/user', function(req, res, next) {
|
||||
|
||||
@@ -12,9 +12,9 @@ Lavorare su queste sfide ti porterà a scrivere il tuo codice utilizzando uno de
|
||||
|
||||
- Clonare [questo repository GitHub](https://github.com/freeCodeCamp/boilerplate-express/) e completare queste sfide localmente.
|
||||
- Usare [la nostra bozza di progetto su Replit](https://replit.com/github/freeCodeCamp/boilerplate-express) per completare queste sfide.
|
||||
- Usa un costruttore di siti di tua scelta per completare il progetto. Assicurati di incorporare tutti i file della nostra repository GitHub.
|
||||
- Usare un costruttore di siti di tua scelta per completare il progetto. Assicurati di incorporare tutti i file del nostro repository GitHub.
|
||||
|
||||
Quando hai finito, assicurati che una demo funzionante del tuo progetto sia ospitata da qualche parte di pubblico. Quindi invia l'URL nel campo `Solution Link`.
|
||||
Quando hai finito, assicurati che una demo funzionante del tuo progetto sia ospitata in qualche percorso pubblico. Quindi invia l'URL nel campo `Solution Link`.
|
||||
|
||||
Durante il processo di sviluppo, è importante essere in grado di controllare cosa sta succedendo nel tuo codice.
|
||||
|
||||
|
||||
@@ -8,7 +8,7 @@ dashedName: add-a-version-to-your-package-json
|
||||
|
||||
# --description--
|
||||
|
||||
`version` è uno dei campi obbligatori del file package.json. Questo campo descrive la versione corrente del tuo progetto. Ecco un esempio:
|
||||
`version` è uno dei campi obbligatori del file package.json. Questo campo descrive la versione corrente del tuo progetto. Qui un esempio:
|
||||
|
||||
```json
|
||||
"version": "1.2.0",
|
||||
|
||||
@@ -8,7 +8,7 @@ dashedName: add-keywords-to-your-package-json
|
||||
|
||||
# --description--
|
||||
|
||||
Il campo `keywords` è dove puoi descrivere il tuo progetto usando le parole chiave correlate. Ecco un esempio:
|
||||
Il campo `keywords` è dove puoi descrivere il tuo progetto usando le parole chiave correlate. Qui un esempio:
|
||||
|
||||
```json
|
||||
"keywords": [ "descriptive", "related", "words" ],
|
||||
|
||||
@@ -12,9 +12,9 @@ Lavorare su queste sfide ti porterà a scrivere il tuo codice utilizzando uno de
|
||||
|
||||
- Clonare [questo repository GitHub](https://github.com/freeCodeCamp/boilerplate-npm/) e completare queste sfide localmente.
|
||||
- Usare [la nostra bozza di progetto su Replit](https://replit.com/github/freeCodeCamp/boilerplate-npm) per completare queste sfide.
|
||||
- Usare un costruttore di siti a tua scelta per completare il progetto. Assicurati di incorporare tutti i file dal nostro repository GitHub.
|
||||
- Usare un costruttore di siti di tua scelta per completare il progetto. Assicurati di incorporare tutti i file del nostro repository GitHub.
|
||||
|
||||
Quando hai finito, assicurati che una demo funzionante del tuo progetto sia ospitata pubblicamente da qualche parte. Quindi invia l'URL nel campo `Solution Link`. Facoltativamente, invia anche un link al codice sorgente del tuo progetto nel campo `GitHub Link`.
|
||||
Quando hai finito, assicurati che una demo funzionante del tuo progetto sia ospitata in qualche percorso pubblico. Quindi invia l'URL nel campo `Solution Link`. Facoltativamente, invia anche un link al codice sorgente del tuo progetto nel campo `GitHub Link`.
|
||||
|
||||
Il file `package.json` è il centro di qualsiasi progetto Node.js o pacchetto npm. Memorizza informazioni sul tuo progetto, in modo simile a come la sezione <head> di un documento HTML descrive il contenuto di una pagina web. Consiste di un singolo oggetto JSON dove le informazioni sono memorizzate in coppie chiave-valore. Ci sono solo due campi obbligatori; "name" e "version", ma è buona pratica fornire ulteriori informazioni sul tuo progetto che potrebbero essere utili per futuri utenti o manutentori.
|
||||
|
||||
|
||||
@@ -12,9 +12,9 @@ Lavorare su queste sfide ti porterà a scrivere il tuo codice utilizzando uno de
|
||||
|
||||
- Clonare [questo repository GitHub](https://github.com/freeCodeCamp/boilerplate-mongomongoose/) e completare queste sfide localmente.
|
||||
- Usare [la nostra bozza di progetto su Replit](https://replit.com/github/freeCodeCamp/boilerplate-mongomongoose) per completare queste sfide.
|
||||
- Usa un costruttore di siti a tua scelta per completare il progetto. Assicurati di incorporare tutti i file dal nostro repository GitHub.
|
||||
- Usare un costruttore di siti di tua scelta per completare il progetto. Assicurati di incorporare tutti i file del nostro repository GitHub.
|
||||
|
||||
Quando hai finito, assicurati che una demo funzionante del tuo progetto sia ospitata pubblicamente da qualche parte. Quindi invia l'URL nel campo `Solution Link`.
|
||||
Quando hai finito, assicurati che una demo funzionante del tuo progetto sia ospitata in qualche percorso pubblico. Quindi invia l'URL nel campo `Solution Link`.
|
||||
|
||||
In questa sfida, imposterai un database MongoDB Atlas e importerai i pacchetti necessari per connetterti ad esso.
|
||||
|
||||
|
||||
@@ -8,15 +8,17 @@ dashedName: run-functional-tests-on-an-api-response-using-chai-http-iv---put-met
|
||||
|
||||
# --description--
|
||||
|
||||
Come promemoria, questo progetto verrà costruito a partire dalla seguente bozza su [Replit](https://replit.com/github/freeCodeCamp/boilerplate-mochachai), o clonato da [GitHub](https://github.com/freeCodeCamp/boilerplate-mochachai/). Questo esercizio è simile a quello precedente. Guardalo per i dettagli.
|
||||
Come promemoria, questo progetto verrà costruito a partire dalla seguente bozza su [Replit](https://replit.com/github/freeCodeCamp/boilerplate-mochachai), o clonato da [GitHub](https://github.com/freeCodeCamp/boilerplate-mochachai/).
|
||||
|
||||
Ora che hai visto come si fa, tocca a te farlo da zero.
|
||||
Questo esercizio è simile a quello precedente.
|
||||
|
||||
Ora che sai come testare una richiesta `PUT`, è il tuo turno di farlo da zero.
|
||||
|
||||
# --instructions--
|
||||
|
||||
All'interno di `tests/2_functional-tests.js`, modifica il test `'send {surname: "da Verrazzano"}'` (`// #4`):
|
||||
All'interno di `tests/2_functional-tests.js`, cambia il test `'Send {surname: "da Verrazzano"}'` (`// #4`) e usa i metodi `put` e `send` per testare l'endpoint `'/travellers'`.
|
||||
|
||||
Invia la seguente risposta JSON come carico utile sulla rotta `/travellers`:
|
||||
Invia il seguente oggetto JSON con la tua richiesta PUT:
|
||||
|
||||
```json
|
||||
{
|
||||
@@ -26,16 +28,16 @@ Invia la seguente risposta JSON come carico utile sulla rotta `/travellers`:
|
||||
|
||||
Controlla quanto segue, all'interno della callback `request.end`:
|
||||
|
||||
1. `status`
|
||||
2. `type`
|
||||
3. `body.name`
|
||||
4. `body.surname`
|
||||
1. Lo `status` dovrebbe essere `200`
|
||||
2. Il `type` dovrebbe essere `application/json`
|
||||
3. Il `body.name` dovrebbe essere `Giovanni`
|
||||
4. Il `body.surname` dovrebbe essere `da Verrazzano`
|
||||
|
||||
Segui l'ordine di asserzione indicato sopra - facciamo affidamento su di esso. Assicurati di rimuovere `assert.fail()`, una volta finito.
|
||||
Segui l'ordine di asserzione indicato sopra - facciamo affidamento su di esso. Inoltre, assicurati di rimuovere `assert.fail()` una volta completato.
|
||||
|
||||
# --hints--
|
||||
|
||||
Tutti i test dovrebbero essere superati
|
||||
Tutti i test dovrebbero passare
|
||||
|
||||
```js
|
||||
(getUserInput) =>
|
||||
@@ -49,7 +51,7 @@ Tutti i test dovrebbero essere superati
|
||||
);
|
||||
```
|
||||
|
||||
Dovresti verificare che 'res.status' sia 200
|
||||
Dovresti verificare che `res.status` sia 200
|
||||
|
||||
```js
|
||||
(getUserInput) =>
|
||||
@@ -65,7 +67,7 @@ Dovresti verificare che 'res.status' sia 200
|
||||
);
|
||||
```
|
||||
|
||||
Dovresti verificare che 'res.type' sia 'application/json'
|
||||
Dovresti verificare che `res.type` sia `'application/json'`
|
||||
|
||||
```js
|
||||
(getUserInput) =>
|
||||
@@ -81,7 +83,7 @@ Dovresti verificare che 'res.type' sia 'application/json'
|
||||
);
|
||||
```
|
||||
|
||||
Dovresti verificare che 'res.body.name' sia 'Giovanni'
|
||||
Dovresti verificare che `res.body.name` sia `'Giovanni'`
|
||||
|
||||
```js
|
||||
(getUserInput) =>
|
||||
@@ -97,7 +99,7 @@ Dovresti verificare che 'res.body.name' sia 'Giovanni'
|
||||
);
|
||||
```
|
||||
|
||||
Dovresti verificare che 'res.body.surname' sia 'da Verrazzano''
|
||||
Dovresti verificare che `res.body.surname` sia `'da Verrazzano'`
|
||||
|
||||
```js
|
||||
(getUserInput) =>
|
||||
|
||||
@@ -12,9 +12,9 @@ Come promemoria, questo progetto verrà costruito a partire dalla seguente bozza
|
||||
|
||||
# --instructions--
|
||||
|
||||
All'interno di `tests/2_functional-tests.js`, modifica il test `'Test GET /hello with your name'` (`// #2`) per asserire che le risposte `status` e `text` facciano passare i test.
|
||||
All'interno di `tests/2_functional-tests.js`, modifica il test `'Test GET /hello with your name'` (`// #2`) per asserire che lo `status` e il `text` della risposta facciano passare i test.
|
||||
|
||||
Invia il tuo nome nella query, aggiungendo `?name=<your_name>` alla rotta. L'endpoint risponde con `'hello <your_name>'`.
|
||||
Invia il tuo nome come query URL, aggiungendo `?name=<your_name>` alla rotta. L'endpoint risponde con `'hello <your_name>'`.
|
||||
|
||||
# --hints--
|
||||
|
||||
@@ -32,7 +32,7 @@ Tutti i test dovrebbero essere superati
|
||||
);
|
||||
```
|
||||
|
||||
Dovresti verificare che 'res.status' == 200
|
||||
Dovresti verificare che `res.status` sia 200
|
||||
|
||||
```js
|
||||
(getUserInput) =>
|
||||
@@ -48,7 +48,7 @@ Dovresti verificare che 'res.status' == 200
|
||||
);
|
||||
```
|
||||
|
||||
Dovresti verificare che 'res.text' == 'hello Guest'
|
||||
Dovresti verificare che `res.text` == `'hello <your_name>'`
|
||||
|
||||
```js
|
||||
(getUserInput) =>
|
||||
|
||||
@@ -10,41 +10,40 @@ dashedName: run-functional-tests-on-api-endpoints-using-chai-http
|
||||
|
||||
Come promemoria, questo progetto verrà costruito a partire dalla seguente bozza su [Replit](https://replit.com/github/freeCodeCamp/boilerplate-mochachai), o clonato da [GitHub](https://github.com/freeCodeCamp/boilerplate-mochachai/).
|
||||
|
||||
Mocha consente di testare operazioni asincrone. C'è una piccola (GRANDE) differenza. Riesce a individuarla?
|
||||
Mocha consente di testare le operazioni asincrone come le chiamate agli endpoint API con un plugin chiamato `chai-http`.
|
||||
|
||||
Possiamo testare i nostri endpoint API utilizzando un plugin, chiamato `chai-http`. Vediamo come funziona. E ricorda, le chiamate API sono asincrone.
|
||||
|
||||
Il seguente è un esempio di test che utilizza `chai-http` per la suite `'GET /hello?name=[name] => "hello [name]"'`. Il test invia un nome in una stringa di query URL (`?name=John`) utilizzando una richiesta `GET` al `server`. Nella funzione di callback del metodo `end`, l'oggetto di risposta (`res`) viene ricevuto e contiene la proprietà `status`. Il primo `assert.equal` controlla se lo stato è pari a `200`. Il secondo `assert.equal` verifica che la stringa di risposta (`res.text`) sia uguale a `"hello John"`.
|
||||
Il seguente esempio è un esempio di test che utilizza `chai-http` per una suite chiamata `'GET /hello?name=[name] => "hello [name]"'`:
|
||||
|
||||
```js
|
||||
suite('GET /hello?name=[name] => "hello [name]"', function () {
|
||||
test("?name=John", function (done) {
|
||||
test('?name=John', function (done) {
|
||||
chai
|
||||
.request(server)
|
||||
.get("/hello?name=John")
|
||||
.get('/hello?name=John')
|
||||
.end(function (err, res) {
|
||||
assert.equal(res.status, 200, "response status should be 200");
|
||||
assert.equal(
|
||||
res.text,
|
||||
"hello John",
|
||||
'response should be "hello John"'
|
||||
);
|
||||
assert.equal(res.status, 200, 'Response status should be 200');
|
||||
assert.equal(res.text, 'hello John', 'Response should be "hello John"');
|
||||
done();
|
||||
});
|
||||
});
|
||||
});
|
||||
```
|
||||
|
||||
Nota il parametro `done` nella funzione di callback del test. Chiamarlo alla fine senza un argomento è necessario per segnalare il successo del completamento asincrono.
|
||||
Il test invia una richiesta `GET` al server con un nome come stringa di ricerca URL (`?name=John`). Nella funzione di callback del metodo `end`, l'oggetto di risposta (`res`) viene ricevuto e contiene la proprietà `status`.
|
||||
|
||||
Il primo `assert.equal` controlla se lo stato è pari a `200`. Il secondo `assert.equal` verifica che la stringa di risposta (`res.text`) sia uguale a `"hello John"`.
|
||||
|
||||
Inoltre, nota il parametro `done` nella funzione di callback del test. Chiamarlo senza un argomento alla fine di un test è necessario per segnalare che l'operazione asincrona è completa.
|
||||
|
||||
# --instructions--
|
||||
|
||||
All'interno di `tests/2_functional-tests.js`, modifica il test `'Test GET /hello with no name'` (`// #1`) per asserire che le risposte `status` e `text` facciano passare i test. Non alterare gli argomenti passati alle asserzioni.
|
||||
All'interno di `tests/2_functional-tests.js`, modifica il test `'Test GET /hello with no name'` (`// #1`) per asserire che lo `status` e il `text` della risposta facciano passare i test. Non alterare gli argomenti passati alle asserzioni.
|
||||
|
||||
Non ci dovrebbe essere alcun nome nella query; l'endpoint risponde con `hello Guest`.
|
||||
Non ci dovrebbe essere una URL di query. Senza un nome nella query URL, l'endpoint risponde con `hello Guest`.
|
||||
|
||||
# --hints--
|
||||
|
||||
Tutti i test dovrebbero essere superati
|
||||
Tutti i test dovrebbero passare
|
||||
|
||||
```js
|
||||
(getUserInput) =>
|
||||
@@ -58,7 +57,7 @@ Tutti i test dovrebbero essere superati
|
||||
);
|
||||
```
|
||||
|
||||
Dovresti verificare che 'res.status' == 200
|
||||
Dovresti verificare che `res.status` sia 200
|
||||
|
||||
```js
|
||||
(getUserInput) =>
|
||||
@@ -74,7 +73,7 @@ Dovresti verificare che 'res.status' == 200
|
||||
);
|
||||
```
|
||||
|
||||
Dovresti testare che 'res.text' == 'hello Guest'
|
||||
Dovresti verificare che `res.text` == `'hello Guest'`
|
||||
|
||||
```js
|
||||
(getUserInput) =>
|
||||
|
||||
@@ -12,17 +12,17 @@ Come promemoria, questo progetto verrà costruito a partire dalla seguente bozza
|
||||
|
||||
# --instructions--
|
||||
|
||||
All'interno di `tests/2_functional-tests.js`, nel test `'submit "surname" : "Vespucci" - write your e2e test...'` (`// #6`), automatizza la compilazione e invia il modulo:
|
||||
All'interno di `tests/2_functional-tests.js`, nel `'Submit the surname "Vespucci" in the HTML form'` test (`// #5`), automatizza quanto segue:
|
||||
|
||||
1. Compila il modulo con il `surname` di `Vespucci`
|
||||
2. Invia premendo il pulsante `'submit'`
|
||||
1. Compila il modulo con il cognome `Vespucci`
|
||||
2. Premi il pulsante submit
|
||||
|
||||
All'interno della callback:
|
||||
E all'interno della callback `pressButton`:
|
||||
|
||||
1. asserisci che lo stato è `200`
|
||||
2. asserisci che il testo all'interno dell'elemento `span#name` è `'Amerigo'`
|
||||
3. asserisci che il testo all'interno dell'elemento `span#surname` è `'Vespucci'`
|
||||
4. asserisci che gli elementi `span#dates` esistono e il loro conteggio è `1`
|
||||
1. Asserisci che lo stato sia OK `200`
|
||||
2. Asserisci che il testo all'interno dell'elemento `span#name` è `'Amerigo'`
|
||||
3. Asserisci che il testo all'interno dell'elemento `span#surname` è `'Vespucci'`
|
||||
4. Asserisci che gli elementi `span#dates` esistono e il loro conteggio è `1`
|
||||
|
||||
Non dimenticare di rimuovere la chiamata `assert.fail()`.
|
||||
|
||||
@@ -32,7 +32,7 @@ Tutti i test dovrebbero essere superati.
|
||||
|
||||
```js
|
||||
(getUserInput) =>
|
||||
$.get(getUserInput('url') + '/_api/get-tests?type=functional&n=5').then(
|
||||
$.get(getUserInput('url') + '/_api/get-tests?type=functional&n=6').then(
|
||||
(data) => {
|
||||
assert.equal(data.state, 'passed');
|
||||
},
|
||||
@@ -46,7 +46,7 @@ Dovresti asserire che la richiesta dell'headless browser sia riuscita.
|
||||
|
||||
```js
|
||||
(getUserInput) =>
|
||||
$.get(getUserInput('url') + '/_api/get-tests?type=functional&n=5').then(
|
||||
$.get(getUserInput('url') + '/_api/get-tests?type=functional&n=6').then(
|
||||
(data) => {
|
||||
assert.equal(data.assertions[0].method, 'browser.success');
|
||||
},
|
||||
@@ -56,11 +56,11 @@ Dovresti asserire che la richiesta dell'headless browser sia riuscita.
|
||||
);
|
||||
```
|
||||
|
||||
Dovresti asserire che il testo all'interno dell'elemento 'span#name' sia 'Amerigo'.
|
||||
Dovresti controllare che il testo all'interno dell'elemento `span#name` è `'Amerigo'`.
|
||||
|
||||
```js
|
||||
(getUserInput) =>
|
||||
$.get(getUserInput('url') + '/_api/get-tests?type=functional&n=5').then(
|
||||
$.get(getUserInput('url') + '/_api/get-tests?type=functional&n=6').then(
|
||||
(data) => {
|
||||
assert.equal(data.assertions[1].method, 'browser.text');
|
||||
assert.match(data.assertions[1].args[0], /('|")span#name\1/);
|
||||
@@ -72,11 +72,11 @@ Dovresti asserire che il testo all'interno dell'elemento 'span#name' sia 'Amerig
|
||||
);
|
||||
```
|
||||
|
||||
Dovresti asserire che il testo all'interno dell'elemento 'span#surname' sia 'Vespucci'.
|
||||
Dovresti verificare che il testo all'interno dell'elemento `span#surname` è `'Vespucci'`.
|
||||
|
||||
```js
|
||||
(getUserInput) =>
|
||||
$.get(getUserInput('url') + '/_api/get-tests?type=functional&n=5').then(
|
||||
$.get(getUserInput('url') + '/_api/get-tests?type=functional&n=6').then(
|
||||
(data) => {
|
||||
assert.equal(data.assertions[2].method, 'browser.text');
|
||||
assert.match(data.assertions[2].args[0], /('|")span#surname\1/);
|
||||
@@ -88,11 +88,11 @@ Dovresti asserire che il testo all'interno dell'elemento 'span#surname' sia 'Ves
|
||||
);
|
||||
```
|
||||
|
||||
Dovresti asserire che l'elemento 'span#dates' esista e il suo conteggio sia 1.
|
||||
Dovresti affermare che l'elemento `span#dates` esiste e il suo conteggio è 1.
|
||||
|
||||
```js
|
||||
(getUserInput) =>
|
||||
$.get(getUserInput('url') + '/_api/get-tests?type=functional&n=5').then(
|
||||
$.get(getUserInput('url') + '/_api/get-tests?type=functional&n=6').then(
|
||||
(data) => {
|
||||
assert.equal(data.assertions[3].method, 'browser.elements');
|
||||
assert.match(data.assertions[3].args[0], /('|")span#dates\1/);
|
||||
|
||||
@@ -1,6 +1,6 @@
|
||||
---
|
||||
id: 587d8250367417b2b2512c5d
|
||||
title: Eseguire test funzionali usando un headless browser
|
||||
title: Eseguire test funzionali utilizzando un browser senza intestazione
|
||||
challengeType: 2
|
||||
forumTopicId: 301595
|
||||
dashedName: run-functional-tests-using-a-headless-browser
|
||||
@@ -10,23 +10,31 @@ dashedName: run-functional-tests-using-a-headless-browser
|
||||
|
||||
Come promemoria, questo progetto verrà costruito a partire dalla seguente bozza su [Replit](https://replit.com/github/freeCodeCamp/boilerplate-mochachai), o clonato da [GitHub](https://github.com/freeCodeCamp/boilerplate-mochachai/).
|
||||
|
||||
Nella vista principale HTML abbiamo fornito un modulo di input. Esso invia con una richiesta Ajax i dati all'endpoint `PUT /travellers` che abbiamo usato sopra. Quando la richiesta è completata con successo, il codice client aggiunge un `<div>` contenente le informazioni restituite dalla chiamata al DOM. Ecco un esempio di come interagire con questo modulo:
|
||||
Nella pagina c'è un modulo di inserimento. Esso invia i dati all'endpoint `PUT /travellers` come richiesta AJAX.
|
||||
|
||||
Quando la richiesta è completata con successo, il codice client aggiunge al DOM un `<div>` contenente le informazioni nella risposta.
|
||||
|
||||
Ecco un esempio di come usare Zombie.js per interagire con il modulo:
|
||||
|
||||
```js
|
||||
test('#test - submit the input "surname" : "Polo"', function (done) {
|
||||
browser.fill('surname', 'Polo').pressButton('submit', function () {
|
||||
browser.assert.success();
|
||||
browser.assert.text('span#name', 'Marco');
|
||||
browser.assert.text('span#surname', 'Polo');
|
||||
browser.assert.elements('span#dates', 1);
|
||||
done();
|
||||
test('Submit the surname "Polo" in the HTML form', function (done) {
|
||||
browser.fill('surname', 'Polo').then(() => {
|
||||
browser.pressButton('submit', () => {
|
||||
browser.assert.success();
|
||||
browser.assert.text('span#name', 'Marco');
|
||||
browser.assert.text('span#surname', 'Polo');
|
||||
browser.assert.elements('span#dates', 1);
|
||||
done();
|
||||
});
|
||||
});
|
||||
}
|
||||
});
|
||||
```
|
||||
|
||||
In primo luogo, il metodo `fill` dell'oggetto `browser` compila il campo `surname` del modulo con il valore `'Polo'`. Subito dopo, il metodo `pressButton` invoca l'event lister `submit` del modulo. Il metodo `pressButton` è asincrono.
|
||||
Per prima cosa, il metodo `fill` dell'oggetto `browser` compila il campo `surname` del modulo con il valore `'Polo'`. `fill` restituisce una promessa, quindi `then` viene incatenato fuori.
|
||||
|
||||
Poi, una volta ricevuta una risposta dalla richiesta AJAX, vengono fatte alcune asserzioni, confermando che:
|
||||
All'interno della callback `then`, il metodo `pressButton` dell'oggetto `browser` viene utilizzato per invocare l'event listener `submit` del modulo. Il metodo `pressButton` è asincrono.
|
||||
|
||||
Poi, una volta ricevuta una risposta dalla richiesta AJAX, vengono fatte alcune asserzioni confermando:
|
||||
|
||||
1. Lo stato della risposta è `200`
|
||||
2. Il testo all'interno dell'elemento `<span id='name'></span>` corrisponde a `'Marco'`
|
||||
@@ -37,17 +45,17 @@ Infine, viene invocata la callback `done`, che è necessaria a causa del test as
|
||||
|
||||
# --instructions--
|
||||
|
||||
All'interno di `tests/2_functional-tests.js`, nel test `'submit "surname" : "Colombo" - write your e2e test...'` (`// #5`), automatizza la compilazione e invia il modulo:
|
||||
All'interno di `tests/2_functional-tests.js`, nel test `'Submit the surname "Colombo" in the HTML form'` (`// #5`), automatizza quanto segue:
|
||||
|
||||
1. Compila il modulo
|
||||
2. Invia premendo il pulsante `'submit'`.
|
||||
1. Compila il modulo con il cognome `Colombo`
|
||||
2. Premi il pulsante submit
|
||||
|
||||
All'interno della callback:
|
||||
E all'interno della callback `pressButton`:
|
||||
|
||||
1. asserisci che lo stato è OK `200`
|
||||
2. asserisci che il testo all'interno dell'elemento `span#name` è `'Cristoforo'`
|
||||
3. asserisci che il testo all'interno dell'elemento `span#surname` è `'Colombo'`
|
||||
4. asserisci che gli elementi `span#dates` esistono e il loro conteggio è `1`
|
||||
1. Asserisci che lo stato sia OK `200`
|
||||
2. Asserisci che il testo all'interno dell'elemento `span#name` sia `'Cristoforo'`
|
||||
3. Asserisci che il testo all'interno dell'elemento `span#surname` sia `'Colombo'`
|
||||
4. Asserisci che gli elementi `span#dates` esistono e il loro conteggio è `1`
|
||||
|
||||
Non dimenticare di rimuovere la chiamata `assert.fail()`.
|
||||
|
||||
@@ -57,7 +65,7 @@ Tutti i test dovrebbero essere superati.
|
||||
|
||||
```js
|
||||
(getUserInput) =>
|
||||
$.get(getUserInput('url') + '/_api/get-tests?type=functional&n=4').then(
|
||||
$.get(getUserInput('url') + '/_api/get-tests?type=functional&n=5').then(
|
||||
(data) => {
|
||||
assert.equal(data.state, 'passed');
|
||||
},
|
||||
@@ -71,7 +79,7 @@ Dovresti asserire che la richiesta dell'headless browser sia riuscita.
|
||||
|
||||
```js
|
||||
(getUserInput) =>
|
||||
$.get(getUserInput('url') + '/_api/get-tests?type=functional&n=4').then(
|
||||
$.get(getUserInput('url') + '/_api/get-tests?type=functional&n=5').then(
|
||||
(data) => {
|
||||
assert.equal(data.assertions[0].method, 'browser.success');
|
||||
},
|
||||
@@ -81,11 +89,11 @@ Dovresti asserire che la richiesta dell'headless browser sia riuscita.
|
||||
);
|
||||
```
|
||||
|
||||
Dovresti asserire che il testo all'interno dell'elemento 'span#name' sia 'Cristoforo'.
|
||||
Dovresti asserire che il testo all'interno dell'elemento `span#name` è `'Cristoforo'`.
|
||||
|
||||
```js
|
||||
(getUserInput) =>
|
||||
$.get(getUserInput('url') + '/_api/get-tests?type=functional&n=4').then(
|
||||
$.get(getUserInput('url') + '/_api/get-tests?type=functional&n=5').then(
|
||||
(data) => {
|
||||
assert.equal(data.assertions[1].method, 'browser.text');
|
||||
assert.match(data.assertions[1].args[0], /('|")span#name\1/);
|
||||
@@ -97,11 +105,11 @@ Dovresti asserire che il testo all'interno dell'elemento 'span#name' sia 'Cristo
|
||||
);
|
||||
```
|
||||
|
||||
Dovresti asserire che il testo all'interno dell'elemento 'span#surname' sia 'Colombo'.
|
||||
Dovresti asserire che il testo all'interno dell'elemento `span#surname` è `'Colombo'`.
|
||||
|
||||
```js
|
||||
(getUserInput) =>
|
||||
$.get(getUserInput('url') + '/_api/get-tests?type=functional&n=4').then(
|
||||
$.get(getUserInput('url') + '/_api/get-tests?type=functional&n=5').then(
|
||||
(data) => {
|
||||
assert.equal(data.assertions[2].method, 'browser.text');
|
||||
assert.match(data.assertions[2].args[0], /('|")span#surname\1/);
|
||||
@@ -113,11 +121,11 @@ Dovresti asserire che il testo all'interno dell'elemento 'span#surname' sia 'Col
|
||||
);
|
||||
```
|
||||
|
||||
Dovresti asserire che l'elemento 'span#dates' esiste e il suo conteggio sia 1.
|
||||
Dovresti affermare che l'elemento `span#dates` esiste e il suo conteggio è 1.
|
||||
|
||||
```js
|
||||
(getUserInput) =>
|
||||
$.get(getUserInput('url') + '/_api/get-tests?type=functional&n=4').then(
|
||||
$.get(getUserInput('url') + '/_api/get-tests?type=functional&n=5').then(
|
||||
(data) => {
|
||||
assert.equal(data.assertions[3].method, 'browser.elements');
|
||||
assert.match(data.assertions[3].args[0], /('|")span#dates\1/);
|
||||
|
||||
@@ -9,37 +9,35 @@ dashedName: simulate-actions-using-a-headless-browser
|
||||
|
||||
Come promemoria, questo progetto verrà costruito a partire dalla seguente bozza su [Replit](https://replit.com/github/freeCodeCamp/boilerplate-mochachai), o clonato da [GitHub](https://github.com/freeCodeCamp/boilerplate-mochachai/).
|
||||
|
||||
Nelle prossime sfide simuleremo l'interazione umana con una pagina utilizzando un dispositivo chiamato 'Headless Browser' (browser senza testa).
|
||||
Nelle prossime sfide, simulerai l'interazione umana con una pagina utilizzando un headless browser (browser senza testa).
|
||||
|
||||
Un headless browser è un browser web senza interfaccia utente grafica. Questo tipo di strumento è particolarmente utile per testare le pagine web, poiché è in grado di renderizzare e capire HTML, CSS, e JavaScript proprio come farebbe un browser.
|
||||
I browser senza intestazione sono browser web senza interfaccia grafica. Essi sono in grado di visualizzare e interpretare HTML, CSS, e JavaScript allo stesso modo in cui farebbe un browser normale, rendendoli particolarmente utili per testare le pagine web.
|
||||
|
||||
Per queste sfide stiamo usando Zombie.JS. È un browser leggero che è totalmente basato su JS, che non richiede binari aggiuntivi da installare. Questa funzione lo rende utilizzabile in un ambiente come Replit. Ci sono molte altre opzioni (più potenti).
|
||||
Per le seguenti sfide userai Zombie.js, che è un browser senza testa leggero che non si basa su binari aggiuntivi da installare. Questa funzione lo rende utilizzabile in ambienti limitati come Replit. Ma ci sono molte altre, più potenti opzioni di browser senza intestazione.
|
||||
|
||||
Mocha ti consente di preparare il terreno eseguendo del codice prima dei test effettivi. Questo può essere utile, ad esempio, per creare elementi nel database, che saranno utilizzati nei test successivi.
|
||||
Mocha consente di eseguire qualche codice prima dell'effettiva esecuzione dei test. Questo può essere utile per fare cose come aggiungere voci a un database che sarà utilizzato nel resto dei test.
|
||||
|
||||
Con un headless browser, prima del test effettivo, abbiamo bisogno di **visitare** la pagina che stiamo per controllare. L'hook' `suiteSetup` viene eseguito solo una volta all'avvio della suite. Altri tipi di hook possono essere esuiti prima di ogni test, dopo ogni test, o alla fine della suite. Vedi la documentazione di Mocha per maggiori informazioni.
|
||||
Con un browser senza testa, prima di eseguire i test, è necessario **visitare** la pagina da testare.
|
||||
|
||||
L'hook `suiteSetup` viene eseguito solo una volta all'inizio di una suite di test.
|
||||
|
||||
Ci sono diversi altri tipi di hook che possono eseguire il codice prima di ogni test, dopo ogni test, o alla fine di una suite di test. Vedi la documentazione di Mocha per maggiori informazioni.
|
||||
|
||||
# --instructions--
|
||||
|
||||
All'interno di `tests/2_functional-tests.js`, immediatamente dopo la dichiarazione `Browser`, aggiungi l'URL del tuo progetto alla proprietà `site` della variabile:
|
||||
|
||||
```js
|
||||
Browser.site = 'https://sincere-cone.gomix.me'; // Your URL here
|
||||
Browser.site = 'https://boilerplate-mochachai.your-username.repl.co'; // Your URL here
|
||||
```
|
||||
|
||||
Se stai testando su un ambiente locale, sostituisci la riga precedente con
|
||||
|
||||
```js
|
||||
Browser.localhost('example.com', process.env.PORT || 3000);
|
||||
```
|
||||
|
||||
All'interno di `tests/2_functional-tests.js`, al livello root della suite `'Functional Tests with Zombie.js'`, crea una nuova istanza dell'oggetto `Browser` con il seguente codice:
|
||||
Poi al livello di root della suite `'Functional Tests with Zombie.js'`, instanzia una nuova istanza dell'oggetto `Browser` con il seguente codice:
|
||||
|
||||
```js
|
||||
const browser = new Browser();
|
||||
```
|
||||
|
||||
Quindi, utilizza l'hook `suiteSetup` per indirizzare il `browser` al percorso `/` con il seguente codice:
|
||||
E usa l'hook `suiteSetup` per indirizzare il `browser` al percorso `/` con il seguente codice:
|
||||
|
||||
```js
|
||||
suiteSetup(function(done) {
|
||||
@@ -53,11 +51,9 @@ Tutti i test dovrebbero essere superati.
|
||||
|
||||
```js
|
||||
(getUserInput) =>
|
||||
$.get(getUserInput('url') + '/_api/get-tests?type=functional').then(
|
||||
$.get(getUserInput('url') + '/_api/get-tests?type=functional&n=4').then(
|
||||
(data) => {
|
||||
data.slice(0, 4).forEach((test) => {
|
||||
assert.equal(test.state, 'passed');
|
||||
})
|
||||
assert.equal(data.state, 'passed');
|
||||
},
|
||||
(xhr) => {
|
||||
throw new Error(xhr.responseText);
|
||||
|
||||
@@ -1,6 +1,6 @@
|
||||
---
|
||||
id: 602da04c22201c65d2a019f4
|
||||
title: Number Guessing Game
|
||||
title: Gioco di indovinare il numero
|
||||
challengeType: 12
|
||||
helpCategory: Relational Databases
|
||||
url: https://github.com/moT01/.number-guessing-game
|
||||
|
||||
Reference in New Issue
Block a user