Met behulp van Cypress te Schrijven Tests voor een Toepassing Reageren

0
44

End-to-End tests geschreven zijn, om te beweren, dat de stroom van een aanvraag van begin tot eind. In plaats van het hanteren van de tests zelf — weet je, handmatig te klikken over de aanvraag — u kunt het schrijven van een test die wordt uitgevoerd als u het bouwen van de applicatie. Dat is, wat wij noemen, continuous integration en het is een mooi ding. Wat code schrijven, sla het op en laat het gereedschap het vuile werk doen om ervoor te zorgen dat het niet breekt iets.

>Cypress is gewoon een end-to-end testen kader is dat op het werk voor ons en dat is wat we gaan zien in deze post. Het is echt voor ieder modern JavaScript-bibliotheek, maar we gaan integreren met Reageren in de voorbeelden.

Laten we het opzetten van een app te testen

In deze tutorial zullen we het schrijven van tests om een todo-applicatie die ik gebouwd heb. Je kunt een kopie maken van het archief te volgen langs als we de stekker in Cypress.

git clone [email protected]:kinsomicrote/cypress-reageren-tutorial.git

Ga naar de toepassing en installeert u de afhankelijkheden:

cd-cypress-reageren-tutorial
garen installeren

Cypress is geen onderdeel van de afhankelijkheden, maar je kunt het installeren met het volgende:

garen toevoegen cypress –dev

Nu, het uitvoeren van dit commando voor het openen van Cypress:

node_modules/.bin/cypress open

Het typen van de opdracht aan de terminal over en over kan krijgen vermoeiend, maar je kunt dit script aan het pakket.json-bestand in de project root:

“cypress”: “cypress ” open”

Nu, alles wat je hoeft te doen is doen npm uitvoeren cypress eens en Cypress staat ten alle tijden. Om een gevoel van wat de toepassing zullen we testen eruit ziet, kunt u beginnen met het Reageren toepassing door het uitvoeren van garen start.

We zullen beginnen met het schrijven van een test om te bevestigen dat Cypress werkt. In de cypress/integratie map is, maakt u een nieuw bestand met de naam init.spec.js. De test stelt dat waar is, is gelijk aan true. We hoeven alleen maar te bevestigen dat de werken om ervoor te zorgen dat Cypress is up and running zijn voor de gehele toepassing.

beschrijven(‘Cypress’, () => {
het(‘werkt’, () => {
verwacht(true).aan.gelijk(ware)
})
})

Je moet een lijst van tests open. Ga er in en selecteer init.spec.js.

Dat moet leiden tot de test uitvoeren en een pop-up scherm dat toont de test passeren.

Terwijl we nog steeds in init.spec.js laten we het toevoegen van een test om te beweren dat we een bezoek aan de app door te raken http://localhost:3000 in de browser. Dit zal ervoor zorgen dat de app zelf is uitgevoerd.

het(‘bezoekt de app’, () => {
cy.bezoek(‘http://localhost:3000’)
})

We noemen de methode bezoek (en) en geven we het de URL van de app. We hebben toegang tot een globale object met de naam cy voor het aanroepen van de methoden die voor ons beschikbaar zijn op Cypress.

Om te voorkomen dat schrijven de URL van de tijd en het weer, kunnen we stellen een basis-URL die kan worden gebruikt tijdens de tests die we schrijven. Open de cipressen.json-bestand in de home directory van de applicatie en voeg definieer de URL er:

{
“baseUrl”: “http://localhost:3000”
}

U kunt de test blok er als volgt uitzien:

het(‘bezoekt de app’, () => {
cy.bezoek(‘/’)
})

…en de test moet nog steeds langs. 🤞

Het testen van de besturingselementen en-ingangen

De test die we schrijven, zal de dekking van hoe gebruikers omgaan met de todo-applicatie. We willen bijvoorbeeld om ervoor te zorgen dat de input is scherpgesteld wanneer de app wordt geladen, zodat gebruikers kunnen beginnen met het invoeren van taken onmiddellijk. We willen er ook voor zorgen dat er een standaard taak er in, zodat de lijst niet leeg is standaard. Als er geen taken zijn, willen we om tekst te tonen die de gebruiker vertelt zo veel.

Om te beginnen, ga je gang en maak een nieuw bestand in de map integratie genoemd form.spec.js. De naam van het bestand dat is niet zo belangrijk. We prepending “vorm” want wat we aan het testen bent, is uiteindelijk een vorm van input. Je kan het ook noemen wil iets anders, afhankelijk van hoe u van plan bent op het organiseren van tests.

We gaan voor het toevoegen van een beschrijven blok aan het bestand:

beschrijven(‘Formulier’, () => {
beforeEach(() => {
cy.bezoek(‘/’)
})

het(‘het richt zich op de input’, () => {
cy.gericht().moet(‘have.class’, ‘vorm-control’)
})
})

De beforeEach blok wordt gebruikt om te voorkomen dat onnodige herhaling. Voor elk blok van de test, we moeten een bezoek brengen aan de toepassing. Het zou overbodig zijn om te herhalen dat de lijn elke keer beforeEach zorgt Cypress bezoeken de toepassing in elk geval.

Voor de test, laten we eens kijken dat het DOM-element in focus bij de toepassing voor het eerst wordt geladen is een klasse van vorm-control. Als u de bron-bestand, zal je zien dat de input-element heeft een klasse met de naam form-controle, en we hebben autoFocus als een van de element kenmerken:

<input
type=”text”
autoFocus
waarde={dit.staat.item}
onChange={dit.handleInputChange}
placeholder=”een taak Invoeren”
className=”form-control”
/>

Als je dat opslaat, gaat u terug naar het scherm en selecteer test form.spec.js voor het uitvoeren van de test.

Het volgende wat we gaan doen is testen of een gebruiker met succes kunt een waarde invoeren in het invoerveld.

het(‘accepteert input’, () => {
const ingang = “meer informatie over Cypress”
cy.get(‘.vorm-control’)
.type(input)
.moet(‘hebben.waarde’, ingang)
})

We hebben nog wat tekst (“meer informatie over Cypress”) naar de input. Vervolgens maken we gebruik van cy.voor verkrijgen van de DOM-element met de vorm-control naam van de klasse. Kunnen We ook iets doen, zoals cy.get(‘input’) en hetzelfde resultaat te krijgen. Na het krijgen van het element, cy.type() wordt gebruikt om de waarde die we toegewezen aan de ingang, dan kunnen we stellen dat het DOM-element met class vorm-control heeft een waarde die overeenkomt met de waarde van de invoer.

In andere woorden:

Onze applicatie moet ook twee todos die zijn gemaakt door standaard als de app draait. Het is belangrijk dat we een test controleert dat zij inderdaad vermeld.

Wat willen we? In onze code zijn maken we gebruik van een item uit de lijst (<li>) element taken te tonen als u items in een lijst. Omdat we nog twee items standaard, het betekent dat de lijst hebben een lengte van twee aan de start. Dus, de test zal er als volgt uitzien:

het(‘toont de lijst met todo’, () => {
cy.get(‘li’)
.moet(‘hebben.lengte’, 2)
})

Oh! En wat zou deze app worden als een gebruiker niet in staat was om een nieuwe taak toevoegen aan de lijst? We zouden beter de test dat ook.

het(‘voegt een nieuwe todo’, () => {
const ingang = “meer informatie over cypress”
cy.get(‘.vorm-control’)
.type(input)
.type (“{enter}’)
.get(‘li’)
.moet(‘hebben.lengte’, 3)
})

Dit lijkt op wat we schreven in de laatste twee proeven. Krijgen We de ingang en simuleren een waarde typt in het. Vervolgens simuleren we het indienen van een taak is die update de status van de toepassing, waardoor de lengte van 2 tot 3. Dus, echt zijn, kunnen we uit van wat we al hebben!

Het wijzigen van de waarde van drie naar twee zal de test om te falen — dat is wat we zouden verwachten, omdat de lijst moet twee taken standaard en het indienen van een keer moeten resulteren in een totaal van drie.

U vraagt zich misschien af wat er zou gebeuren als de gebruiker verwijdert één (of beide) van de standaard taken voordat u tot het indienen van een nieuwe taak. Goed, we konden het schrijven van een test voor, maar we zijn niet het maken van die veronderstelling in dit voorbeeld omdat we alleen maar willen om te bevestigen dat de taken kunnen worden ingediend. Dit is een eenvoudige manier voor ons om te testen de basic indienen van functionaliteit als wij ontwikkelen en we kunnen het account voor gevorderden/edge gevallen later.

De laatste optie die we moeten testen, is het verwijderen van taken. Ten eerste willen we om er een te verwijderen van het standaard-taak-items en dan zien of er een resterende zodra de verwijdering gebeurt. Het is dezelfde soort van deal als voorheen, maar we verwachten een item links in de lijst in plaats van de drie die we verwacht bij het toevoegen van een nieuwe taak aan de lijst.

het(‘verwijdert een todo’, () => {
cy.get(‘li’)
.eerste (de)
.het vinden van(‘.btn-gevaar’)
.klik op()
.get(‘li’)
.moet(‘hebben.lengte’, 1)
})

OK, dus wat gebeurt er als we het verwijderen van het standaard-taken in de lijst en de lijst helemaal leeg is? Laten we zeggen dat we willen om deze tekst als er geen meer items in de lijst zijn: “Alle taken zijn voltooid. Mooi gedaan!”

Is dit niet teveel afwijkt van wat we hebben gedaan. U kunt proberen eerst kom dan terug om te zien of de code voor het.

het.alleen(‘verwijdert alle todo’, () => {
cy.get(‘li’)
.eerste (de)
.het vinden van(‘.btn-gevaar’)
.klik op()
.get(‘li’)
.eerste (de)
.het vinden van(‘.btn-gevaar’)
.klik op()
.get(‘.no-taak’)
.moet(‘hebben.tekst’, ‘Al je taken zijn voltooid. Mooi gedaan!’)
})

Beide onderzoeken lijken: we halen de lijst-item-element, richten zich op de eerste, en maak gebruik van cy.zoeken() om te zoeken voor de DOM-element met een btn-gevaar naam van de klasse (die, nogmaals, is een volkomen willekeurige klasse naam voor de knop verwijderen in dit voorbeeld app). We simuleren een klik op de gebeurtenis op het element om de taak te verwijderen item.

Ik ben controleren voor “Geen taak!” in deze test.

Het testen van het netwerk aanvragen

Netwerk verzoeken zijn soort van een big deal, want dat is vaak de bron van de gegevens gebruikt in een toepassing. Dat we een onderdeel in onze app, die een aanvraag naar de server om gegevens te verkrijgen die zal worden weergegeven aan de gebruiker. Laten we zeggen dat de component markup ziet er zo uit:

klasse App breidt Reageren.Onderdeel {
staat = {
isLoading: true,
gebruikers: [],
fout: null
};
fetchUsers() {
ophalen(`https://jsonplaceholder.typicode.com/users`)
.vervolgens(respons => reactie.json())
.vervolgens(gegevens =>
deze.setState({
gebruikers: gegevens,
isLoading: false,
})
)
.catch(fout => dit.setState({ fout, isLoading: false }));
}
componentDidMount() {
deze.fetchUsers();
}
render() {
const { isLoading, gebruikers, fout } = dit.staat;
return (
<Reageren.Fragment>
<h1>Willekeurige Gebruiker</h1>
{fout ? <p>{fout.bericht}</p> : null}
{!isLoading ? (
gebruikers.kaart(user => {
const { gebruikersnaam, naam, e-mail } = gebruiker;
return (
<div key={username}>
<p>Naam: {naam}</p>
<p>E-Mailadres: {e-mail}</p>
<hr />
</div>
);
})
) : (
<h3>Laden…</h3>
)}
</Reageren.Fragment>
);
}
}

Hier zijn maken we gebruik van de JSON-Aanduiding API als een voorbeeld. We hebben een test zoals deze voor het testen van de reactie van de server:

beschrijven(‘Verzoek’, () => {
het(‘toont willekeurige gebruikers van de API’, () => {
cy.verzoek(‘https://jsonplaceholder.typicode.com/users’)
.moet((response) => {
verwachten(reactie.status).aan.eq(200)
verwachten(reactie.lichaam).aan.hebben.lengte(10)
verwachten(reactie).aan.hebben.eigendom(‘koppen’)
verwachten(reactie).aan.hebben.eigendom(‘duur’)
})
})
})

Het voordeel van het testen van de server (in tegenstelling tot het stoten) is dat we zeker zijn dat het antwoord dat we krijgen is dezelfde als die die een gebruiker krijgt. Om meer te leren over netwerk-aanvragen en hoe u kunt stub-netwerk verzoeken, zie deze pagina op de Cypress documentatie.

Testen uitvoeren vanaf de commando-regel

Cypress tests kunt uitvoeren vanaf de aansluiting zonder de bijgeleverde UI:

./node_modules/.bin/cypress uitvoeren

of …

npx cypress uitvoeren

Laten we het uitvoeren van het formulier testen wij schreef:

npx cypress uitvoeren –record –spec “cypress/integration/form.spec.js”

Terminal moeten de resultaten daar met een samenvatting van wat werd getest.

Er is veel meer over het gebruik van Cypress met de commando regel in de documentatie.

Dat is een wrap!

Tests zijn iets dat ofwel de mensen steeds opgewonden of angstig zijn, afhankelijk van wie je praten. Hopelijk hebben we bekeken in deze post wordt iedereen enthousiast over de uitvoering van tests in een applicatie en laat zien hoe relatief eenvoudig het kan zijn. Cypress is een uitstekende tool en degene die ik heb vond ik mezelf te bereiken voor in mijn eigen werk, maar er zijn ook anderen. Ongeacht welke tool je ook gebruikt (en hoe je je voelt over tests), hopelijk zie je de voordelen van het testen en zijn meer gedwongen om hen te geven een keer te proberen.

Gerelateerde bronnen

  • Cipres: Het Schrijven Van Uw Eerste Test
  • GitHub: Cypress archief
  • CSS-Tricks: Aan de Slag met Reageren Testen Bibliotheek
  • CSS-Tricks: het Schrijven van Tests voor het Reageren Toepassingen met Behulp van de Grap en Enzym
  • CSS-Tricks: Testen voor Visuele Regressies met Percy