[[oktatas:telefon:react_native|< React Native]]

====== React Native - Tesztelés ======

  * **Szerző:** Sallai András
  * Copyright (c) Sallai András, 2023
  * Licenc: [[https://creativecommons.org/licenses/by-sa/4.0/|CC Attribution-Share Alike 4.0 International]]
  * Web: https://szit.hu

===== Bevezetés =====

Ebben a leírásban React Native alkalmazás tesztelését tekintjük át. Jest és React Native Testing Library-t használjuk.


Eszközök:
  * https://jestjs.io/ (2023)
    * https://jestjs.io/docs/tutorial-react-native (2023)
  * https://callstack.github.io/react-native-testing-library/ (2023)
    * https://callstack.github.io/react-native-testing-library/docs/api (2023)
    * https://www.npmjs.com/package/@testing-library/react-native (2023)

Triangle példakód:
  * https://github.com/oktat/mobil_triangle_test.git

<note tip>
A függőségek pnpm paranccsal való kezelése hibákhoz vezethet. 
</note>
===== Háromszög területszámítás =====
==== Függőségek ====

<code>
yarn add --dev @testing-library/react-native
yarn add --dev react-router-dom
yarn add --dev react-test-renderer
yarn add --dev jest
</code>

==== Script ====

Egészítsük ki a package.json fájlt:

<code javascript package.json>
  "scripts": {
    "test": "jest"
  },
  "jest": {
    "preset": "react-native"
  },
</code>

==== Alkalmazás ====

Az alkalmazást kiegészítjük tesztelésre szánt azonosítókkal, testID attribútumokka. Például:
<code javascript>
<TextInput testID="base" />
</code>

<code javascript App.js>
import { 
  StyleSheet, 
  Text, 
  View, 
  TextInput, 
  Button
} from 'react-native';
import {useState} from 'react';

export default function App() {
  
  const [base, setBase] = useState(0);
  const [height, setHeihgt] = useState(0);
  const [area, setArea] = useState(0);

  function calcArea(base, height) {
    return base * height / 2;
  }

  function startCalc() {
    let res = calcArea(base, height)
    setArea(res)
  }

  return (
    <View style={styles.container}>
      <Text style={styles.elso} testID="title">Háromszög</Text>
      
      <TextInput style={styles.input}      
      onChangeText={text => setBase(text)}
      testID="base"
      />
      <TextInput style={styles.input}      
      onChangeText={text => setHeihgt(text)}
      testID="height"
      />

      <Button title='Számol' 
      onPress={startCalc} 
      testID="calcButton"
      />

      <TextInput 
      style={styles.input}      
      value={area}
      testID="area"
      />
      
      <Text style={styles.elso}>
        {area}
      </Text>

      <Button title="Nulla" onPress={ () => {
        setBase(0)
        setHeihgt(0)
        setArea(0)        
      }} />
    </View>

  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#008',
    alignItems: 'center',
    justifyContent: 'center',    
  },
  elso: {
    color: '#fff',
    fontSize: 30,
  },
  input: {
    backgroundColor: 'lightblue',
    width: '90%',
    fontSize: 30,
  },
});

</code>

==== Teszt ====

<code javascript __test__/AppTest.js>
import {render, screen, fireEvent} from '@testing-library/react-native'
import App from '../App'

describe('Triangle tesztelése', () => {
  beforeEach(() => {
    render(<App />)
  })
  
  it('Cím tesztelése', async () => {
      const title = screen.getByTestId('title').props.children
      expect(title).toMatch(/Háromszög/)
  })
  
  it('Bemenet 30, 35-re elvárt 525', async () => {
    fireEvent.changeText(screen.getByTestId('base'), 30)
    fireEvent.changeText(screen.getByTestId('height'), 35)
    fireEvent.press(screen.getByTestId('calcButton'))
    const area = await screen.getByTestId('area').props.value
    expect(area).toEqual(525)
  })

});
</code>

==== Linkek ====

  * https://reactnative.dev/docs/testing-overview (2023)
  * https://jestjs.io/docs/tutorial-react-native (2023)