refactor(tests): lint test files

.eslintrc.json

@@ -10,11 +10,21 @@
     "no-nested-ternary": "off",
     "no-param-reassign": "off",
     "func-names": "off",
-    "max-classes-per-file": "off"
+    "max-classes-per-file": "off",
+    "react/prefer-stateless-function": "off",
+    "react/prop-types": "off"
   },
   "globals": {
     "window": true,
     "EventTarget": true,
-    "WebSocket": true
+    "WebSocket": true,
+    "describe": true,
+    "afterAll": true,
+    "test": true,
+    "expect": true,
+    "afterEach": true,
+    "document": true,
+    "jest": true,
+    "Event": true
   }
 }

__tests__/Clock.test.jsx

@@ -0,0 +1,40 @@
+import React, { StrictMode } from 'react';
+import { render, cleanup, act } from '@testing-library/react/pure';
+import sinon from 'sinon';
+import App from '../examples/clock/src/App';
+
+describe('Clock App', () => {
+  const clock = sinon.useFakeTimers();
+  const { container, unmount } = render(
+    <StrictMode>
+      <App />
+    </StrictMode>,
+  );
+
+  const clearIntervalSpy = sinon.spy(global, 'clearInterval');
+
+  afterAll(() => {
+    cleanup();
+    clock.restore();
+    clearIntervalSpy.restore();
+  });
+
+  test('should update to display the current time every second', () => {
+    expect(container).toHaveTextContent('12:00:00 AM');
+
+    act(() => {
+      clock.tick(2000);
+    });
+    expect(container).toHaveTextContent('12:00:02 AM');
+
+    act(() => {
+      clock.tick(8500);
+    });
+    expect(container).toHaveTextContent('12:00:10 AM');
+  });
+
+  test('should clean up the interval timer when the component is unmounted', () => {
+    unmount();
+    expect(clearIntervalSpy.callCount).toBe(1);
+  });
+});

__tests__/Clock.test.native.jsx

@@ -0,0 +1,40 @@
+import React, { StrictMode } from 'react';
+import {
+  render,
+  flushMicrotasksQueue,
+} from 'react-native-testing-library';
+import sinon from 'sinon';
+import App from '../examples/native-clock/App';
+
+describe('Clock App', () => {
+  const clock = sinon.useFakeTimers();
+  const { getByText, unmount } = render(
+    <StrictMode>
+      <App />
+    </StrictMode>,
+  );
+  // flush the inital didMount effect
+  flushMicrotasksQueue();
+
+  const clearIntervalSpy = sinon.spy(global, 'clearInterval');
+
+  afterAll(() => {
+    clock.restore();
+    clearIntervalSpy.restore();
+  });
+
+  test('should update to display the current time every second', () => {
+    expect(getByText('12:00:00 AM')).toBeDefined();
+
+    clock.tick(2000);
+    expect(getByText('12:00:02 AM')).toBeDefined();
+
+    clock.tick(8500);
+    expect(getByText('12:00:10 AM')).toBeDefined();
+  });
+
+  test('should clean up the interval timer when the component is unmounted', () => {
+    unmount();
+    expect(clearIntervalSpy.callCount).toBe(1);
+  });
+});

__tests__/Contacts.test.jsx

@@ -0,0 +1,115 @@
+import React, { StrictMode } from 'react';
+import {
+  render,
+  cleanup,
+  fireEvent,
+} from '@testing-library/react/pure';
+import App from '../examples/contacts/src/App';
+
+describe('Contacts App', () => {
+  const { container } = render(
+    <StrictMode>
+      <App />
+    </StrictMode>,
+  );
+  afterAll(cleanup);
+
+  test('should add new contacts', () => {
+    expect(container).toMatchSnapshot('01. Initial state');
+
+    const nameField = container.querySelector('input[name="name"]');
+    const emailField = container.querySelector('input[name="email"]');
+    const createButton = container.querySelector('button');
+
+    fireEvent.change(nameField, {
+      target: { name: 'name', value: 'Test Contact' },
+    });
+    expect(container).toMatchSnapshot('02. Create Test Contact name');
+
+    fireEvent.change(emailField, {
+      target: { name: 'email', value: 'test.contact@gmail.com' },
+    });
+    expect(container).toMatchSnapshot(
+      '03. Create Test Contact email',
+    );
+
+    fireEvent.click(createButton);
+    expect(container).toMatchSnapshot('04. Add Test Contact');
+
+    fireEvent.change(nameField, {
+      target: { name: 'name', value: '' },
+    });
+    fireEvent.change(emailField, {
+      target: { name: 'email', value: '' },
+    });
+    fireEvent.click(createButton);
+    expect(container).toMatchSnapshot('05. Add Placeholder Contact');
+  });
+
+  test('should edit contact', () => {
+    let display;
+    let editor;
+    let editButton;
+
+    display = container.querySelector('.contact-display');
+    editButton = display.querySelector('.zmdi-edit');
+
+    fireEvent.click(editButton);
+    expect(container).toMatchSnapshot(
+      '06. Switch Test Contact to Edit Mode',
+    );
+
+    editor = container.querySelector('.contact-editor');
+    const nameField = editor.querySelector('input[name="name"]');
+    const cancelButton = editor.querySelector('.zmdi-close');
+
+    fireEvent.change(nameField, {
+      target: { name: 'name', value: 'Edited Test Contact' },
+    });
+    expect(container).toMatchSnapshot('07. Edit Test Contact name');
+
+    fireEvent.click(cancelButton);
+    expect(container).toMatchSnapshot('08. Cancel Test Contact edit');
+
+    display = container.querySelector('.contact-display');
+    editButton = display.querySelector('.zmdi-edit');
+
+    fireEvent.click(editButton);
+    expect(container).toMatchSnapshot(
+      '09. Switch Test Contact to edit Mode',
+    );
+
+    editor = container.querySelector('.contact-editor');
+    const emailField = editor.querySelector('input[name="email"]');
+    const saveButton = editor.querySelector('.zmdi-save');
+
+    fireEvent.change(emailField, {
+      target: {
+        name: 'email',
+        value: 'test.contact.edited@gmail.com',
+      },
+    });
+    expect(container).toMatchSnapshot('10. Edit Test Contact email');
+
+    fireEvent.click(saveButton);
+    expect(container).toMatchSnapshot('11. Save Test Contact edit');
+  });
+
+  test('should delete contact', () => {
+    let deleteButton = container.querySelectorAll(
+      '.contact-display .zmdi-delete',
+    )[1];
+
+    fireEvent.click(deleteButton);
+    expect(container).toMatchSnapshot(
+      '12. Delete Placeholder Contact',
+    );
+
+    deleteButton = container.querySelector(
+      '.contact-display .zmdi-delete',
+    );
+
+    fireEvent.click(deleteButton);
+    expect(container).toMatchSnapshot('13. Delete Test Contact');
+  });
+});