chore: add events

Author: mdjastrzebski

examples/basic/tutorial-rsd/4-events-rsd.test.tsx

@@ -0,0 +1,92 @@
+import * as React from 'react';
+import { html } from 'react-strict-dom';
+import { render, screen, userEvent } from '@testing-library/react-native';
+
+function Counter() {
+  const [count, setCount] = React.useState(0);
+
+  return (
+    <html.div>
+      <html.p>{count}</html.p>
+      <html.button role="button" onClick={() => setCount(count + 1)}>
+        Increment
+      </html.button>
+    </html.div>
+  );
+}
+
+test('Counter should increment the count when the button is pressed', async () => {
+  const user = userEvent.setup();
+
+  render(<Counter />);
+  expect(screen.getByText('0')).toBeOnTheScreen();
+
+  const button = screen.getByRole('button', { name: 'Increment' });
+  expect(button).toBeOnTheScreen();
+
+  await user.press(button);
+  expect(screen.getByText('1')).toBeOnTheScreen();
+});
+
+function LoginForm() {
+  const [email, setEmail] = React.useState('');
+  const [password, setPassword] = React.useState('');
+  const [state, setState] = React.useState('idle');
+
+  const handleLogin = () => {
+    if (email === '[email protected]' && password === 'password') {
+      setState('success');
+    } else {
+      setState('error');
+    }
+  };
+
+  if (state === 'success') {
+    return (
+      <html.div>
+        <html.h1>Login successful</html.h1>
+      </html.div>
+    );
+  }
+  return (
+    <html.div>
+      <html.input
+        placeholder="Email"
+        value={email}
+        onChange={(e: React.ChangeEvent<HTMLInputElement>) => setEmail(e.target.value)}
+      />
+      <html.input
+        placeholder="Password"
+        value={password}
+        onChange={(e: React.ChangeEvent<HTMLInputElement>) => setPassword(e.target.value)}
+      />
+      {state === 'error' && <html.p role="alert">Invalid credentials</html.p>}
+
+      <html.button role="button" onClick={handleLogin}>
+        Login
+      </html.button>
+    </html.div>
+  );
+}
+
+test('should login with valid credentials', async () => {
+  const user = userEvent.setup();
+  render(<LoginForm />);
+
+  await user.type(screen.getByPlaceholderText('Email'), '[email protected]');
+  await user.type(screen.getByPlaceholderText('Password'), 'password');
+  await user.press(screen.getByRole('button', { name: 'Login' }));
+
+  expect(screen.getByRole('heading', { name: 'Login successful' })).toBeOnTheScreen();
+});
+
+test('should show error message with invalid credentials', async () => {
+  const user = userEvent.setup();
+  render(<LoginForm />);
+
+  await user.type(screen.getByPlaceholderText('Email'), '[email protected]');
+  await user.type(screen.getByPlaceholderText('Password'), 'wrong-password');
+  await user.press(screen.getByRole('button', { name: 'Login' }));
+
+  expect(screen.getByRole('alert', { name: 'Invalid credentials' })).toBeOnTheScreen();
+});

examples/basic/tutorial/4-events.test.tsx

@@ -1,40 +1,87 @@
 import * as React from 'react';
-import { Text, View, Button } from 'react-native';
-import { fireEvent, render, screen, userEvent } from '@testing-library/react-native';
+import { Text, View, Pressable, TextInput } from 'react-native';
+import { render, screen, userEvent } from '@testing-library/react-native';
 
 function Counter() {
   const [count, setCount] = React.useState(0);
 
   return (
     <View>
       <Text>{count}</Text>
-      <Button title="Increment" onPress={() => setCount(count + 1)} />
+      <Pressable role="button" onPress={() => setCount(count + 1)}>
+        <Text>Increment</Text>
+      </Pressable>
     </View>
   );
 }
 
-describe('Counter', () => {
-  it('should increment the count', async () => {
-    const user = userEvent.setup();
+test('Counter should increment the count when the button is pressed', async () => {
+  const user = userEvent.setup();
 
-    render(<Counter />);
-    expect(screen.getByText('0')).toBeOnTheScreen();
+  render(<Counter />);
+  expect(screen.getByText('0')).toBeOnTheScreen();
 
-    const button = screen.getByRole('button', { name: 'Increment' });
-    expect(button).toBeOnTheScreen();
+  const button = screen.getByRole('button', { name: 'Increment' });
+  expect(button).toBeOnTheScreen();
 
-    await user.press(button);
-    expect(screen.getByText('1')).toBeOnTheScreen();
-  });
+  await user.press(button);
+  expect(screen.getByText('1')).toBeOnTheScreen();
+});
+
+function LoginForm() {
+  const [email, setEmail] = React.useState('');
+  const [password, setPassword] = React.useState('');
+  const [state, setState] = React.useState('idle');
 
-  it('should increment the count when the button is pressed', () => {
-    render(<Counter />);
-    expect(screen.getByText('0')).toBeOnTheScreen();
+  const handleLogin = () => {
+    if (email === '[email protected]' && password === 'password') {
+      setState('success');
+    } else {
+      setState('error');
+    }
+  };
+
+  if (state === 'success') {
+    return (
+      <View>
+        <Text role="heading">Login successful</Text>
+      </View>
+    );
+  }
+  return (
+    <View>
+      <TextInput placeholder="Email" value={email} onChangeText={setEmail} />
+      <TextInput placeholder="Password" value={password} onChangeText={setPassword} />
+      {state === 'error' && (
+        <Text accessible role="alert">
+          Invalid credentials
+        </Text>
+      )}
+
+      <Pressable role="button" onPress={handleLogin}>
+        <Text>Login</Text>
+      </Pressable>
+    </View>
+  );
+}
+
+test('should login with valid credentials', async () => {
+  const user = userEvent.setup();
+  render(<LoginForm />);
+
+  await user.type(screen.getByPlaceholderText('Email'), '[email protected]');
+  await user.type(screen.getByPlaceholderText('Password'), 'password');
+  await user.press(screen.getByRole('button', { name: 'Login' }));
+
+  expect(screen.getByRole('heading', { name: 'Login successful' })).toBeOnTheScreen();
+});
 
-    const button = screen.getByRole('button', { name: 'Increment' });
-    expect(button).toBeOnTheScreen();
+test('should show error message with invalid credentials', async () => {
+  const user = userEvent.setup();
+  render(<LoginForm />);
 
-    fireEvent.press(button);
-    expect(screen.getByText('1')).toBeOnTheScreen();
-  });
+  await user.type(screen.getByPlaceholderText('Email'), '[email protected]');
+  await user.type(screen.getByPlaceholderText('Password'), 'wrong-password');
+  await user.press(screen.getByRole('button', { name: 'Login' }));
+  expect(screen.getByRole('alert', { name: 'Invalid credentials' })).toBeOnTheScreen();
 });