React: Atsauksmju forma aplikācijai + testēšanas kods
Iedomāsimies, ka mums ir jāizveido “”Front-Ends” React aplikācijas komponentam, kurs sniegtu iespēju apmeklētājam sniegt atsauksmi par pieredzi pēc pakalpojumu saņemšanas kādā uzņēmumā. Tātad uzdevums ir izveidot Feedback, jeb atsauksmes iespēju. Papildus atsauksmes iespējai jābūt ar bīdāmu “range” slaideri, lai apmeklētājam būtu iespēja piešķirt punktu vertejumu un zem tā uzrakstīt komentāru, kurā komentēt savu pieredzi. Punktu vērtējumam, kurš sasniedz vismaz 5 no 10 zvaigznēm komentārs pie vērtējuma nav obligāts, bet vērtējumam zem 5 zvaigznēm jānorāda obligāts komentārs. Turklāt šo aplikāciju būs nepieciešams arī notestēt izmantojot React testēšanas bibliotēku un tam piemērotu uzrakstītu testēšanas kodu.
Tātad sāksim ar App.js kodu…
App.js kods ar skaidrojumu:
import "./App.css";
import AtsauksmesForma from './AtsauksmesForma';
function App() {
const apstrādātIesniegšanu = () => {
console.log("Forma iesniegta");
};
return (
<div className="App">
<AtsauksmesForma onSubmit={apstrādātIesniegšanu} />
</div>
);
}
export default App;Šis kods definē React komponenti, kas saucas App, kas importē un izmanto citu komponenti, kas saucas AtsauksmesForma. App komponentē tiek definēta funkcija apstrādātIesniegšanu, kas izvada ziņojumu “Forma iesniegta” konsolē, kad tā tiek izsaukta.
App komponentes return izteiksmē ir div elements ar klases nosaukumu "App", kurā tiek ievietota AtsauksmesForma komponente. AtsauksmesForma komponentei tiek nodots onSubmit atribūts ar vērtību apstrādātIesniegšanu, kas nozīmē, ka, kad lietotājs iesniedz formu, tiks izsaukta funkcija apstrādātIesniegšanu.
Visbeidzot, App komponente tiek eksportēta kā noklusējuma eksports, lai to varētu importēt citos failos.
Turpinām ar AtsauksmesForma.js koda skaidrojumu
import "./App.css";
import { useState } from "react";
function AtsauksmesForma({ onSubmit }) {
const [punkti, setPunkti] = useState("10");
const [komentars, setKomentars] = useState("");
const irAtspējots = Number(punkti) < 5 && komentars.length <= 10;
const tekstaLaukaVietturis = irAtspējots
? "Lūdzu, sniedziet komentāru, kurā izskaidrojat, kāpēc pieredze nebija laba. Minimālais garums ir 10 rakstzīmes"
: "Neobligāta atsauksme";
const apstrādātIesniegšanu = (e) => {
e.preventDefault();
onSubmit({ punkti, komentars });
};
return (
<div className="App">
<form onSubmit={apstrādātIesniegšanu}>
<fieldset>
<h2>Atsauksmju forma</h2>
<div className="Field">
<label htmlFor="punkti">Punkti: {punkti} ⭐ </label>
<input
id="punkti"
value={punkti}
onChange={(e) => {
setPunkti(e.target.value);
}}
type="range"
min="0"
max="10"
/>
</div>
<div className="Field">
<label>Komentārs: </label>
<textarea
placeholder={tekstaLaukaVietturis}
name="komentars"
value={komentars}
onChange={(e) => {
setKomentars(e.target.value);
}}
/>
</div>
<input type="submit" value="Iesniegt" disabled={irAtspējots} />
</fieldset>
</form>
</div>
);
}
export default AtsauksmesForma;Šis kods definē React komponenti, kas saucas AtsauksmesForma. Šī komponente izmanto useState āķi no react pakotnes, lai izveidotu divus stāvokļus: punkti un komentars. Sākotnēji punkti tiek iestatīts uz "10", bet komentars tiek iestatīts uz tukšu virkni.
Komponentē tiek definēts mainīgais irAtspējots, kas ir true, ja punkti ir mazāks par 5 un komentars garums ir mazāks vai vienāds ar 10. Tas tiek izmantots, lai noteiktu, vai iesniegšanas poga ir atspējota.
Komponentē tiek definēts mainīgais tekstaLaukaVietturis, kas ir atkarīgs no irAtspējots vērtības. Ja irAtspējots boolean vērtība ir true, tad teksta lauka vietā tiek parādīts teksts “Lūdzu, sniedziet komentāru, kurā izskaidrojat, kāpēc pieredze nebija laba. Minimālais garums ir 10 rakstzīmes”, bet ja tas ir false, tad teksta lauka vietā tiek parādīts teksts “Neobligāta atsauksme”.
Komponentē tiek definēta funkcija apstrādātIesniegšanu, kas tiek izsaukta, kad lietotājs iesniedz formu. Šī funkcija izsauc funkciju onSubmit, kas tiek nodota kā atribūts komponentei un tai tiek nodoti objekti ar punkti un komentars vērtībām.
Komponentes return izteiksmē tiek atgriezts JSX elements ar formu, kurai tiek nodots atribūts onSubmit ar vērtību apstrādātIesniegšanu. Forma satur divus laukus: vienu ar diapazona ievadi punktu skaitam un otru ar teksta lauku komentāram. Abiem laukiem ir norādītas funkcijas, kas tiks izsauktas, kad lietotājs mainīs to vērtības. Forma arī satur iesniegšanas pogu, kas ir atspējota, ja mainīgais irAtspējots ir true.
Visbeidzot, komponente tiek eksportēta kā noklusējuma eksports, lai to varētu importēt citos failos.
Testēšanas koda skaidrojums un testa rezultāts
import { fireEvent, render, screen } from "@testing-library/react";
import AtsauksmesForma from "./AtsauksmesForma";
describe("Atsauksmju Forma", () => {
test("Iesniegšana ir atspējota, ja punktu skaits ir mazāks par 5 un nav atsauksmes", () => {
const apstrādātIesniegšanu = jest.fn();
render(<AtsauksmesForma onSubmit={apstrādātIesniegšanu} />);
const diapazonaIevade = screen.getByLabelText(/Punkti:/);
fireEvent.change(diapazonaIevade, { target: { value: "4" } });
const iesniegtPogu = screen.getByRole("button");
fireEvent.click(iesniegtPogu);
expect(apstrādātIesniegšanu).not.toHaveBeenCalled();
expect(iesniegtPogu).toHaveAttribute("disabled");
});
});Šis kods definē testu Atsauksmju Forma izmantojot describe funkciju no jest testēšanas bibliotēkas. Testā tiek definēts viens tests ar nosaukumu “Iesniegšana ir atspējota, ja punktu skaits ir mazāks par 5 un nav atsauksmes”, kas izmanto test funkciju.
Testā tiek definēta funkcija apstrādātIesniegšanu, kas tiek izveidota ar jest.fn() un tiek izmantota, lai pārbaudītu, vai tā tiek izsaukta. Tad tiek izmantota render funkcija no @testing-library/react, lai attēlotu AtsauksmesForma komponenti un tai nodotu atribūtu onSubmit ar vērtību apstrādātIesniegšanu.
Tad tiek izmantota screen.getByLabelText funkcija, lai atrastu diapazona ievades elementu ar tekstu “Punkti:”. Tad tiek izmantota fireEvent.change funkcija, lai simulētu lietotāja darbību, mainot diapazona ievades vērtību uz “4”.
Tad tiek izmantota screen.getByRole funkcija, lai atrastu iesniegšanas pogu un tiek izmantota fireEvent.click funkcija, lai simulētu lietotāja darbību, spiežot uz pogas.
Testa rezultāts:
Kā redzams tad tests veiksmīgi izturets un aplikācija darbojās kā paredzēts
CSS kods App.css failā, ko izmantoju uzskatāmāka piemēra parādīšanai:
App.css kods:
.App {
font-family: sans-serif;
text-align: center;
height: 100vh;
background: radial-gradient(circle at center, #fff, #000);
display: flex;
align-items: center;
justify-content: center;
}
form {
background-color: rgba(255, 255, 255, 0.15);
border-radius: 10px;
padding: 20px;
backdrop-filter: blur(5px);
box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px;
overflow: hidden;
}
.Field {
display: flex;
flex-direction: column;
align-items: center;
margin-bottom: 10px;
}
input[type="range"] {
width: 100%;
}
input[type="submit"] {
background-color: #4CAF50; /* Green */
border: none;
color: white;
padding: 12px 30px;
text-align: center;
text-decoration: none;
display:inline-block;
font-size:16px;
margin-top:10px;
cursor:pointer;
border-radius:10px;
}
input[type="submit"]:hover {
background-color:#3e8e41
}
input[type="submit"]:active {
transform: translateY(4px);
}
textarea {
max-width:100%;
border-radius:10px;
}
Atbildēt
Lai komentētu, jums jāpiesakās sistēmā.