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ā.