add data test ID to 2e karakter creator

frontend/src/second-edition/components/BasicNewLevel.tsx

@@ -59,7 +59,9 @@ function BasicNewLevel(props: {
                             value={karakter.szintlepesek[szint-1].HProll || 1}
                             min={1}
                             max={12}
-                            onChange={e => changeRolledHP(Number(e.target.value))} />
+                            onChange={e => changeRolledHP(Number(e.target.value))}
+                            data-testid={`HP-${szint}`}
+                        />
                     </div>
                 </div>
                 { isTBincreased && <div className='row m-2'>

frontend/src/second-edition/components/FajSelector2E.tsx

@@ -6,7 +6,12 @@ function FajSelector2E(props: { faj: Faj2E, changeFaj: (val: Faj2E) => void }) {
     return <>
         <div className='row m-2'>
             <label className='col-md-2 col-sm-3 col-form-label'>Faj</label>
-            <select className='col form-select' value={faj} onChange={e => changeFaj(e.target.value as Faj2E)}>
+            <select
+                className='col form-select'
+                value={faj}
+                onChange={e => changeFaj(e.target.value as Faj2E)}
+                data-testid="faj"
+            >
                 <option key={Faj2E.Ember} value={Faj2E.Ember}>{FajLabel(Faj2E.Ember)}</option>
                 <optgroup label='más emberi népek'>
                     <option key={Faj2E.Amazon} value={Faj2E.Amazon}>{FajLabel(Faj2E.Amazon)}</option>
@@ -29,10 +34,10 @@ function FajSelector2E(props: { faj: Faj2E, changeFaj: (val: Faj2E) => void }) {
         <div className='row m-2'>
             <label className='col-md-2 col-sm-3 form-label'></label>
             <div className='col'>
-                <p className='row pt-2'>
+                <p className='row pt-2' data-testid="faj-description">
                     {FajDescription(faj)}
                 </p>
-                <ul>
+                <ul data-testid="faj-specials">
                     {FajSpecials(faj).map(((special, i) => (<li key={faj + i}>{special}</li>)))}
                 </ul>
             </div>

frontend/src/second-edition/components/FegyverSelector.tsx

@@ -61,13 +61,19 @@ export function FegyverLabel(fegyver: Fegyver): string {
         fegyver.Range > 10 ? ` | táv: ${fegyver.Range}` : ''}`
 }
 
-function FegyverSelector(props: {fegyverek: Fegyver[], selectedId: string, onChange: (id: string) => void}) {
+function FegyverSelector(props: {
-    
+    fegyverek: Fegyver[],
-    const { fegyverek, selectedId, onChange } = props
+    selectedId: string,
-    
+    onChange: (id: string) => void,
+    dataTestId?: string,
+}) {
+    const { fegyverek, selectedId, onChange, dataTestId } = props
     return <>
-        <select className='col form-select' value={selectedId}
+        <select className='col form-select'
-                onChange={e => onChange(e.target.value)}>
+                value={selectedId}
+                onChange={e => onChange(e.target.value)}
+                data-testid={dataTestId}
+        >
             <optgroup label="Közelharci">
                 {fegyverek.filter(f => f.Type === 'kozelharci').map(f => <option
                     key={f.Id} value={f.Id}>{FegyverLabel(f)}</option>)}

frontend/src/second-edition/components/Felszereles.tsx

@@ -25,13 +25,30 @@ function Felszereles(props: {felszereles: KarakterFelszereles, changeFelszereles
         changeFelszereles({...felszereles, fegyverIDk: arraySetN(felszereles.fegyverIDk, idx, newID)})
     }
 
+    const changePancel = (event: React.ChangeEvent<HTMLSelectElement>) => {
+        changeFelszereles({...felszereles, pancelID: event.target.value === 'nincs' ? undefined : event.target.value})
+    }
+    const changePajzs = (event: React.ChangeEvent<HTMLSelectElement>) => {
+        changeFelszereles({...felszereles, pajzsID: event.target.value === 'nincs' ? undefined : event.target.value})
+    }
+    const removeFegyver = (idx: number) => () => changeFelszereles({
+        ...felszereles,
+        fegyverIDk: [...felszereles.fegyverIDk.slice(0, idx), ...felszereles.fegyverIDk.slice(idx+1)]
+    })
+    const addFegyver = () => changeFelszereles({...felszereles, fegyverIDk: [...felszereles.fegyverIDk, 'bot']})
+
     return <>
         <div className='row'>
             <h5 className='col align-self-center'>Felszerelés</h5>
         </div>
         <div className='row m-2'>
             <label className='col-md-2 col-sm-3 col-form-label'>Viselt páncél</label>
-            <select className='col form-select' value={felszereles.pancelID} onChange={e => changeFelszereles({...felszereles, pancelID: e.target.value === 'nincs' ? undefined : e.target.value})}>
+            <select
+                className='col form-select'
+                value={felszereles.pancelID}
+                onChange={changePancel}
+                data-testid={"pancel"}
+            >
                 <option key={'nincs'} value={'nincs'}>Nincs</option>
                 {
                     <optgroup label={PancelTypeLabel("konnyu")}>
@@ -50,8 +67,12 @@ function Felszereles(props: {felszereles: KarakterFelszereles, changeFelszereles
         </div>
         <div className='row m-2'>
             <label className='col-md-2 col-sm-3 col-form-label'>Hordott pajzs</label>
-            <select className='col form-select' value={felszereles.pajzsID}
+            <select
-                    onChange={e => changeFelszereles({...felszereles, pajzsID: e.target.value === 'nincs' ? undefined : e.target.value})}>
+                className='col form-select'
+                value={felszereles.pajzsID}
+                onChange={changePajzs}
+                data-testid={"pajzs"}
+            >
                 <option key={'nincs'} value={'nincs'}>Nincs</option>
                 {allowedPajzs.map(p => <option key={p.Id} value={p.Id}>{`${p.Name} (+${p.VO} VO) - ${p.Price} at`}</option>)}
             </select>
@@ -59,14 +80,26 @@ function Felszereles(props: {felszereles: KarakterFelszereles, changeFelszereles
         {valasztottFegyverek.map(({idx, fegyver}) => (
             <div key={`fegyver-${idx}`} className='row m-2'>
                 <label className='col-md-2 col-sm-3 col-form-label'>Fegyver</label>
-                <FegyverSelector fegyverek={allowedFegyverek} selectedId={fegyver.Id} onChange={(fegyverId) => changeFegyver(idx, fegyverId)} />
+                <FegyverSelector
-                <button className='col-md-2 col-sm-3 btn btn-outline-dark btn-lg ms-2' type='button'
+                    fegyverek={allowedFegyverek}
-                        onClick={() => changeFelszereles({
+                    selectedId={fegyver.Id}
-                            ...felszereles,
+                    onChange={(fegyverId) => changeFegyver(idx, fegyverId)}
-                            fegyverIDk: [...felszereles.fegyverIDk.slice(0, idx), ...felszereles.fegyverIDk.slice(idx+1)]})}>Elvesz</button>
+                    dataTestId={`felszereles-fegyver-${idx}`}
+                />
+                <button
+                    className='col-md-2 col-sm-3 btn btn-outline-dark btn-lg ms-2'
+                    type='button'
+                    onClick={removeFegyver(idx)}>Elvesz
+                </button>
             </div>
         ))}
-        <button className='btn btn-outline-dark btn btn-lg ms-2' type='button' onClick={() => changeFelszereles({...felszereles, fegyverIDk: [...felszereles.fegyverIDk, 'bot']})}>Fegyver hozzáadása</button>
+        <button
+            className='btn btn-outline-dark btn btn-lg ms-2'
+            type='button'
+            onClick={addFegyver}
+        >
+            Fegyver hozzáadása
+        </button>
     </>
 }
 

frontend/src/second-edition/components/HarcosFegyverSpec.tsx

@@ -23,7 +23,12 @@ function HarcosFegyverSpecializacio(props: {
     return <>
         <div className='row m-2'>
             <label className='col-md-2 col-sm-3 col-form-label' >Fegyver specializáció</label>
-            <FegyverSelector fegyverek={pickableFegyverek} selectedId={specialization} onChange={changeSpecialization} />
+            <FegyverSelector
+                fegyverek={pickableFegyverek}
+                selectedId={specialization}
+                onChange={changeSpecialization}
+                dataTestId={"harcos-specialization-" + szint}
+            />
             {fegyver == null && <span className='form-field-error'>Ismeretlen fegyver: {specialization}</span>}
         </div>
     </>

frontend/src/second-edition/components/JellemSelector.tsx

@@ -7,7 +7,12 @@ function JellemSelector(props: {selected: JellemID, changeJellem: (val: JellemID
     return <>
         <div className='row m-2'>
             <label className='col-md-2 col-sm-3 col-form-label'>Jellem</label>
-            <select className='col form-select' value={selected} onChange={e => changeJellem(e.target.value as JellemID)}>
+            <select
+                className='col form-select'
+                value={selected}
+                data-testid="jellem"
+                onChange={e => changeJellem(e.target.value as JellemID)}
+            >
                 {AllJellemIDs.map((id) => (
                     <option key={id} value={id}>{GetJellem(id).Label}</option>
                 ))}
@@ -16,7 +21,7 @@ function JellemSelector(props: {selected: JellemID, changeJellem: (val: JellemID
         <div className='row m-2'>
             <label className='col-md-2 col-sm-3 form-label'></label>
             <div className='col'>
-                <p className='row pt-2'>
+                <p className='row pt-2' data-testid="jellem-description">
                     {jellem.Description}
                 </p>
             </div>

frontend/src/second-edition/components/KalozKritikus.tsx

@@ -20,7 +20,12 @@ function KalozKritikus(props: {
     return <>
         <div className='row m-2'>
             <label className='col-md-2 col-sm-3 col-form-label'>Kritikus</label>
-            <FegyverSelector fegyverek={fegyverek} selectedId={kritFegyverId} onChange={changeKrit} />
+            <FegyverSelector
+                fegyverek={fegyverek}
+                selectedId={kritFegyverId}
+                onChange={changeKrit}
+                dataTestId={`kaloz-krit-${szint}`}
+            />
         </div>
     </>
 }

frontend/src/second-edition/components/KarakterKepzettsegek2E.tsx

@@ -8,16 +8,22 @@ import {
 } from "../domain-models/kepzettsegek2E";
 import {arraySetN} from "../../util";
 
-
 function InternalKepzettsegekSelector(props: {
     title: string,
     numberOfKepzettseg: number,
     getKepzettsegListaN: (n: number) => Kepzettseg[],
     kepzettsegek: KepzettsegId[],
-    changeKepzettsegek: (newKepzettsegek: KepzettsegId[]) => void
+    changeKepzettsegek: (newKepzettsegek: KepzettsegId[]) => void,
+    dataTestId?: string,
 }) {
-    const {title, numberOfKepzettseg, getKepzettsegListaN, kepzettsegek, changeKepzettsegek} = props
+    const {
-
+        title,
+        numberOfKepzettseg,
+        getKepzettsegListaN,
+        kepzettsegek,
+        changeKepzettsegek,
+        dataTestId,
+    } = props
     const klist = Array.from(new Array(numberOfKepzettseg).keys())
 
     const preCalculated: {
@@ -44,6 +50,7 @@ function InternalKepzettsegekSelector(props: {
                         kepzettsegek={preCalculated[idx].kepzettsegek}
                         selected={preCalculated[idx].selected}
                         changeKepzettseg={preCalculated[idx].changeKepzettseg}
+                        dataTestId={`${dataTestId}-${idx}`}
                     />)
                 }
             </div>
@@ -75,14 +82,18 @@ function KarakterKepzettsegek (props: {
             numberOfKepzettseg={numberOfKepzettsegek}
             getKepzettsegListaN={getKepzettsegListaN}
             changeKepzettsegek={changeKepzettsegek}
-            kepzettsegek={kepzettsegek} />
+            kepzettsegek={kepzettsegek}
+            dataTestId={"kepzettseg"}
+        />
 
         {tolvajKepzettsegek.length > 0 && <InternalKepzettsegekSelector
             title="Tolvaj képzettségek"
             numberOfKepzettseg={4}
             getKepzettsegListaN={getTolvajKepzettsegListaN}
             changeKepzettsegek={changeTolvajKepzettsegek}
-            kepzettsegek={tolvajKepzettsegek} />}
+            kepzettsegek={tolvajKepzettsegek}
+            dataTestId={"tolvaj-kepzettseg"}
+        />}
     </>
 }
 

frontend/src/second-edition/components/KepzettsegSelector2E.tsx

@@ -8,14 +8,21 @@ function kepzettsegOptionText(k: Kepzettseg) {
     return k.Name + ' (' + k.Tulajdonsag.reduce((acc, k) => (acc === '' ? acc : acc + ' / ') + TulajdonsagLabel(k), '') + ')' + (osztalyok == null ? '' : (' - ' + osztalyok));
 }
 
-function KepzettsegSelector (props: {kepzettsegek: Kepzettseg[], changeKepzettseg: (newKepzettseg: KepzettsegId) => void, selected : Kepzettseg}) {
+function KepzettsegSelector (props: {
-
+    kepzettsegek: Kepzettseg[],
-    const { kepzettsegek, changeKepzettseg, selected } = props
+    changeKepzettseg: (newKepzettseg: KepzettsegId) => void,
-
+    selected : Kepzettseg,
+    dataTestId?: string,
+}) {
+    const { kepzettsegek, changeKepzettseg, selected, dataTestId } = props
     return <>
         <div className='row'>
-            <select className='form-control'
+            <select
-                    value={selected.Id} onChange={e => changeKepzettseg(e.target.value as KepzettsegId)}>
+                className='form-control'
+                value={selected.Id}
+                onChange={e => changeKepzettseg(e.target.value as KepzettsegId)}
+                data-testid={dataTestId}
+            >
                 {kepzettsegek.map(k =>(
                     <option key={k.Id} value={k.Id}>
                         {kepzettsegOptionText(k)}

frontend/src/second-edition/components/LevelUps.tsx

@@ -49,12 +49,14 @@ function LevelUp(props: {
                 osztaly={osztaly}
                 changeOsztaly={changeOsztaly}
                 osztalySzint={classLevels[osztaly]}
+                dataTestId={`osztaly-${szint}`}
             />}
         {szint % 4 === 0 && 
             <TulajdonsagNoveles
                 tulajdonsagok={karakter.tulajdonsagok}
                 tulajdonsagNoveles={karakter.szintlepesek[szint-1].tulajdonsagNoveles!}
                 changeTulajdonsagNoveles={changeTulajdonsagNoveles}
+                dataTestId={`tulajdonsag-${szint}`}
             />}
         <BasicNewLevel
             szint={szint}

frontend/src/second-edition/components/MultiClassOsztalySelector2E.tsx

@@ -5,19 +5,22 @@ import React from "react";
 function MultiClassOsztalySelector2E(props: {
     faj: Faj2E,
     osztaly: Osztaly2E,
-    changeOsztaly: (o: Osztaly2E) => void
+    changeOsztaly: (o: Osztaly2E) => void,
-    osztalySzint: number
+    osztalySzint: number,
+    dataTestId?: string,
 }) {
-    const {faj, osztaly, changeOsztaly, osztalySzint} = props
+    const {faj, osztaly, changeOsztaly, osztalySzint, dataTestId} = props
-    
     return <>
         <div className='row'>
             <div className="col-lg-6">
                 <div className="row m-md-2">
                     <label className='col-8 col-sm-6 col-form-label'>Osztály</label>
                     <div className="col">
-                        <select className="col form-select" value={osztaly}
+                        <select className="col form-select"
-                                onChange={(e) => changeOsztaly(e.target.value as Osztaly2E)}>
+                                value={osztaly}
+                                onChange={(e) => changeOsztaly(e.target.value as Osztaly2E)}
+                                data-testid={dataTestId}
+                        >
                             <optgroup label='Harcos'>
                                 <option value={Osztaly2E.Harcos}>{OsztalyLabel(Osztaly2E.Harcos)}</option>
                                 {SzintKorlatokFajokra(faj)[Osztaly2E.Amazon] > 0 && (

frontend/src/second-edition/components/OsztalySelector2E.tsx

@@ -18,8 +18,12 @@ function OsztalySelector2E(props: {
     return <>
         <div className='row m-2'>
             <label className='col-md-2 col-sm-3 col-form-label'>Osztály</label>
-            <select className="col form-select" value={currentOsztaly}
+            <select
-                    onChange={(e) => changeOsztaly(e.target.value as Osztaly2E)}>
+                className="col form-select"
+                value={currentOsztaly}
+                onChange={(e) => changeOsztaly(e.target.value as Osztaly2E)}
+                data-testid="osztaly"
+            >
                 <optgroup label='Harcos'>
                     <option value={Osztaly2E.Harcos}>{OsztalyLabel(Osztaly2E.Harcos)}</option>
                     {SzintKorlatokFajokra(currentFaj)[Osztaly2E.Amazon] > 0 && (
@@ -44,13 +48,13 @@ function OsztalySelector2E(props: {
         <div className='row m-2'>
         <label className='col-md-2 col-sm-3 form-label'></label>
             <div className='col'>
-                <p className='row pt-2'>
+                <p className='row pt-2' data-testid="osztaly-description">
                     {OsztalyDescription(currentOsztaly)}
                 </p>
-                <ul>
+                <ul data-testid="osztaly-properties">
                     {OsztalyProperties(currentOsztaly).map(((special, i) => (<li key={currentOsztaly + i}>{special}</li>)))}
                 </ul>
-                <div className='col'>
+                <div className='col' data-testid="osztaly-specials">
                     {OsztalySpecialSkills(currentOsztaly).map(skill =>
                         <div key={skill.Id}>
                             <strong className='d-inline'>

frontend/src/second-edition/components/TulajdonsagInput2E.tsx

@@ -18,6 +18,7 @@ function TulajdonsagInput(props: {
     currentValue: number
     tooLowError: string,
     tooHighError: string
+    dataTestId?: string
 }) {
     const {
         tulajdonsag,
@@ -27,11 +28,19 @@ function TulajdonsagInput(props: {
         fajiModosito,
         tooLowError,
         tooHighError,
+        dataTestId
     } = props;
     return (<div className='row m-2'>
         <label className='col-lg-1 col-sm-2 col-form-label'>{tulajdonsag}</label>
         <div className='col-lg-1 col-sm-2 m-2'>
-            <input className='form-control' maxLength={2} type='number' value={currentValue} onChange={e => changeValue(Number(e.target.value))} />
+            <input
+                className='form-control'
+                maxLength={2}
+                type='number'
+                value={currentValue}
+                onChange={e => changeValue(Number(e.target.value))}
+                data-testid={dataTestId}
+            />
         </div>
         <span className='col-sm-2 m-2'>
                             {fajiModositoText(currentFaj, fajiModosito)}

frontend/src/second-edition/components/TulajdonsagNoveles.tsx

@@ -8,16 +8,27 @@ import {
 } from "../domain-models/tulajdonsag2E";
 import {SignedNumberToText} from "../../shared/components/Helpers";
 
-function TulajdonsagNoveles(props: {tulajdonsagok: KarakterTulajdonsagok, tulajdonsagNoveles: Tulajdonsag2E, changeTulajdonsagNoveles: (tulajdonsag: Tulajdonsag2E) => void}) {
+function TulajdonsagNoveles(props: {
-    const {tulajdonsagok, tulajdonsagNoveles, changeTulajdonsagNoveles} = props
+    tulajdonsagok: KarakterTulajdonsagok,
+    tulajdonsagNoveles: Tulajdonsag2E,
+    changeTulajdonsagNoveles: (tulajdonsag: Tulajdonsag2E) => void,
+    dataTestId?: string
+}) {
+    const {tulajdonsagok, tulajdonsagNoveles, changeTulajdonsagNoveles, dataTestId} = props
+    const selectableTulajdonsagok = TulajdonsagIDs.filter(t => t === tulajdonsagNoveles || tulajdonsagok[t] < 18)
     return <>
         <div className='row'>
             <div className='col-lg-6'>
                 <div className='row m-2'>
                     <label className='col-sm-6 col-8 col-form-label'>Tulajdonság növelés{' '}</label>
                     <div className='col'>
-                        <select className='form-select' value={tulajdonsagNoveles} onChange={(e) => changeTulajdonsagNoveles(e.target.value as Tulajdonsag2E)}>
+                        <select
-                            {TulajdonsagIDs.filter(t => t === tulajdonsagNoveles || tulajdonsagok[t] < 18).map(t => (
+                            className='form-select'
+                            value={tulajdonsagNoveles}
+                            onChange={(e) => changeTulajdonsagNoveles(e.target.value as Tulajdonsag2E)}
+                            data-testid={dataTestId}
+                        >
+                            {selectableTulajdonsagok.map(t => (
                                 <option value={t} key={t}>{TulajdonsagLabel(t)}</option>
                             ))}
                         </select>

frontend/src/second-edition/components/Tulajdonsagok2E.tsx

@@ -17,7 +17,7 @@ function Tulajdonsagok(props: {
         <div className='row'>
             <h5 className='col-lg-2 col-sm-4 align-self-center'>Tulajdonságok</h5>
             <div className='col-sm-2 m-2'>
-                <button className='btn btn-dark' type='button'
+                <button className='btn btn-dark' type='button' data-testid="tulajdonsag-dobas"
                         onClick={() => changeTulajdonsagok(RollAllAbilities())}>Dobás
                 </button>
             </div>
@@ -30,6 +30,7 @@ function Tulajdonsagok(props: {
             changeValue={(val: number) => changeTulajdonsagok({...tulajdonsagok, t_ero: val})}
             tooLowError='Túl gyenge vagy, nem bírtad felemelni a kezed a jelentkezéshez!'
             tooHighError='Szét szakadtak az izmaid!'
+            dataTestId={"t_ero"}
         />
         <TulajdonsagInput
             tulajdonsag='Ügyesség'
@@ -39,6 +40,7 @@ function Tulajdonsagok(props: {
             changeValue={(val: number) => changeTulajdonsagok({...tulajdonsagok, t_ugy: val})}
             tooLowError='Orrabuktál jelentkezés helyett!'
             tooHighError='Emberfeletti zsonglörködésedre záptojással válaszoltak a helyiek!'
+            dataTestId={"t_ugy"}
         />
         <TulajdonsagInput
             tulajdonsag='Egészség'
@@ -48,6 +50,7 @@ function Tulajdonsagok(props: {
             changeValue={(val: number) => changeTulajdonsagok({...tulajdonsagok, t_egs: val})}
             tooLowError='Túl beteg vagy ahhoz, hogy kalandozni menj!'
             tooHighError='Kicsattanó egészségedet csak a diambroid állíthatja meg, minő véletlen, hogy pont az arcodba robbant...'
+            dataTestId={"t_egs"}
         />
         <TulajdonsagInput
             tulajdonsag='Intelligencia'
@@ -57,6 +60,7 @@ function Tulajdonsagok(props: {
             changeValue={(val: number) => changeTulajdonsagok({...tulajdonsagok, t_int: val})}
             tooLowError='Elfelejtetted, hogy mikor is kéne kalandozni indulni!'
             tooHighError='Ilyen tudás és logika birtokában mi szükséged van új információkra? Mindent le tudsz vezetni a már meglévő ismereteidből, és ezt azonnal beláttad.'
+            dataTestId={"t_int"}
         />
         <TulajdonsagInput
             tulajdonsag='Bölcsesség'
@@ -66,6 +70,7 @@ function Tulajdonsagok(props: {
             changeValue={(val: number) => changeTulajdonsagok({...tulajdonsagok, t_bol: val})}
             tooLowError='Nem bírtál ellenállni a kíváncsiságodnak, hogy közelebbről is megvizsgáld a tőr hegyét. Nagyon közelről.'
             tooHighError='Hatalmas bölcsességedben beláttad a kalandozás veszélyeit és inkább más tevékenységbe fogtál.'
+            dataTestId={"t_bol"}
         />
         <TulajdonsagInput
             tulajdonsag='Karizma'
@@ -75,8 +80,8 @@ function Tulajdonsagok(props: {
             changeValue={(val: number) => changeTulajdonsagok({...tulajdonsagok, t_kar: val})}
             tooLowError='Mintha taszítanád az embereket, sose sikerült kalandozó csapatot találnod.'
             tooHighError='Az ellenkező nem tagjai nem engedték, hogy útnak indulj.'
+            dataTestId={"t_kar"}
         />
-
     </>
 }
 

frontend/src/second-edition/pages/CreateCharacter2E.tsx

@@ -122,29 +122,18 @@ function CreateCharacter2E(props: {
                     <label className='col-md-2 col-sm-3 col-form-label'>Név</label>
                     <input className='col form-control'
                            value={karakter.nev}
+                           data-testid="nev"
                            onChange={(e) => setKarakter({...karakter, nev: e.target.value})}/>
                     {!karakter.nev &&
                         <span className='form-field-error'>A karaktered nem mászkálhat névtelenül a világban!</span>}
                 </div>
-                <div className='row m-2'>
-                    <label className='col-md-2 col-sm-3 col-form-label'>Nem</label>
-                    <input className='col form-control'
-                           value={karakter.nem}
-                           onChange={(e) => setKarakter({...karakter, nem: e.target.value})}/>
-                </div>
-                <div className='row m-2'>
-                    <label className='col-md-2 col-sm-3 col-form-label'>Kor</label>
-                    <input className='col form-control'
-                           value={karakter.kor}
-                           type={"number"}
-                           onChange={(e) => setKarakter({...karakter, kor: Number(e.target.value)})}/>
-                </div>
                 <JellemSelector selected={karakter.jellem}
                                 changeJellem={(val) => setKarakter({...karakter, jellem: val})}/>
                 <div className='row m-2'>
                     <label className='col-md-2 col-sm-3 col-form-label'>Választott istenség</label>
                     <input className='col form-control'
                            value={karakter.isten}
+                           data-testid="isten"
                            onChange={(e) => setKarakter({...karakter, isten: e.target.value})}/>
                 </div>
                 <FajSelector2E
@@ -212,8 +201,11 @@ function CreateCharacter2E(props: {
                             ⇩</button>}
                 </div>
                 <hr/>
-                <Felszereles osztaly={karakter.szintlepesek[0].osztaly} felszereles={karakter.felszereles}
+                <Felszereles
-                             changeFelszereles={changeFelszereles}/>
+                    osztaly={karakter.szintlepesek[0].osztaly}
+                    felszereles={karakter.felszereles}
+                    changeFelszereles={changeFelszereles}
+                />
 
                 <hr/>
                 <div className='row'>
@@ -223,8 +215,11 @@ function CreateCharacter2E(props: {
                 {fetchedUser.email != null &&
                     <div className='row m-2'>
                         <label className='col-md-2 col-sm-3 col-form-label'>Publikus karakterlap?</label>
-                        <select className="col form-select" value={isPublic.toString()}
+                        <select
-                                onChange={(event) => setIsPublic(event.target.value === "true")}>
+                            className="col form-select" value={isPublic.toString()}
+                            onChange={(event) => setIsPublic(event.target.value === "true")}
+                            data-testid={"karakter-publikus"}
+                        >
                             <option value="true">Igen</option>
                             <option value="false">Nem</option>
                         </select>