From 0cefc1e38bc82fc9c47c0b8c7146925d9c031772 Mon Sep 17 00:00:00 2001
From: morbalint <balint@morasz.hu>
Date: Sun, 31 Mar 2024 12:35:28 +0200
Subject: [PATCH] add experimental test for 2E Tulajdonsagok component

---
 frontend/src/App.test.tsx                     |  2 +-
 .../components/Tulajdonsagok2E.test.tsx       | 52 +++++++++++++++++++
 .../components/Tulajdonsagok2E.tsx            |  7 ++-
 3 files changed, 58 insertions(+), 3 deletions(-)
 create mode 100644 frontend/src/second-edition/components/Tulajdonsagok2E.test.tsx

diff --git a/frontend/src/App.test.tsx b/frontend/src/App.test.tsx
index 9552a0a..434d452 100644
--- a/frontend/src/App.test.tsx
+++ b/frontend/src/App.test.tsx
@@ -2,6 +2,6 @@ import React from 'react';
 import { render } from '@testing-library/react';
 import App from './App';
 
-test('renders learn react link', () => {
+test('renders App', () => {
   render(<App faro={undefined}/>);
 });
diff --git a/frontend/src/second-edition/components/Tulajdonsagok2E.test.tsx b/frontend/src/second-edition/components/Tulajdonsagok2E.test.tsx
new file mode 100644
index 0000000..133ceb6
--- /dev/null
+++ b/frontend/src/second-edition/components/Tulajdonsagok2E.test.tsx
@@ -0,0 +1,52 @@
+import React from "react";
+import {fireEvent, render} from "@testing-library/react"
+import Tulajdonsagok from "./Tulajdonsagok2E";
+import {Faj2E} from "../domain-models/faj2E";
+import {TulajdonsagDefaults} from "../domain-models/tulajdonsag2E";
+import {
+    setEro,
+} from "../domain-models/tulajdonsagSlice";
+import '@testing-library/jest-dom'
+import {Provider} from "react-redux";
+import store from "../../store";
+
+describe("render Tulajdonsagok", () => {
+    test('change Ero', async () => {
+        type SetEroAction = ReturnType<typeof setEro>
+        let invocations: SetEroAction[] = []
+        const dispatch = (action: SetEroAction) => {
+            invocations.push(action)
+        }
+        const sut = render(<Tulajdonsagok
+            currentFaj={Faj2E.Ember}
+            tulajdonsagok={TulajdonsagDefaults}
+            dispatch={dispatch}
+        />)
+        const eroInput = await sut.findByTestId("t_ero");
+        fireEvent.change(eroInput, {target: {value: "20"}})
+        expect(invocations).toHaveLength(1)
+        const action = invocations[0]
+        expect(action.payload).toEqual(20)
+    })
+
+    test('display Ero too low error', async () => {
+        const sut = render(<Tulajdonsagok
+            currentFaj={Faj2E.Ember}
+            tulajdonsagok={{...TulajdonsagDefaults, t_ero: 1}}
+            dispatch={() => {}}
+        />)
+        const eroError = await sut.findByText("Túl gyenge vagy, nem bírtad felemelni a kezed a jelentkezéshez!");
+        expect(eroError).toBeVisible()
+    })
+
+    test('change Ero and display Ero too high error with store', async () => {
+        const sut = render(
+            <Provider store={store} >
+                <Tulajdonsagok currentFaj={Faj2E.Ember}/>
+            </Provider>)
+        const eroInput = await sut.findByTestId("t_ero");
+        fireEvent.change(eroInput, {target: {value: "20"}})
+        const eroError = await sut.findByText("Szét szakadtak az izmaid!");
+        expect(eroError).toBeVisible()
+    })
+})
\ No newline at end of file
diff --git a/frontend/src/second-edition/components/Tulajdonsagok2E.tsx b/frontend/src/second-edition/components/Tulajdonsagok2E.tsx
index 00daf08..a80a900 100644
--- a/frontend/src/second-edition/components/Tulajdonsagok2E.tsx
+++ b/frontend/src/second-edition/components/Tulajdonsagok2E.tsx
@@ -1,5 +1,6 @@
 import React from "react";
 import {
+    KarakterTulajdonsagok,
     Tulajdonsag2E,
 } from "../domain-models/tulajdonsag2E";
 import TulajdonsagInput from "./TulajdonsagInput2E";
@@ -18,10 +19,12 @@ import {
 
 function Tulajdonsagok(props: {
     currentFaj: Faj2E,
+    tulajdonsagok?: KarakterTulajdonsagok
+    dispatch?: (action: any) => any
 }) {
     const {currentFaj} = props
-    const dispatch = useDispatch.withTypes<AppDispatch>()()
-    const tulajdonsagok = useSelector.withTypes<RootState>()(tulajdonsagSelector)
+    const dispatch = props.dispatch ?? useDispatch.withTypes<AppDispatch>()()
+    const tulajdonsagok = props.tulajdonsagok ?? useSelector.withTypes<RootState>()(tulajdonsagSelector)
     return <>
         <div className='row'>
             <h5 className='col-lg-2 col-sm-4 align-self-center'>Tulajdonságok</h5>