test: finish porting tests to testing-library

test/Then.test.tsx

@@ -0,0 +1,15 @@
+import { render, screen } from '@testing-library/react';
+import React from 'react';
+import { Then } from '../src';
+
+describe('<Then /> component', () => {
+  test('GIVEN children THEN directly renders children', () => {
+    render(
+      <Then>
+        <span data-testid="thenChild">Then</span>
+      </Then>
+    );
+
+    expect(screen.getByTestId('thenChild')).toContainHTML('<span data-testid="thenChild">Then</span>');
+  });
+});

test/Unless.test.tsx

@@ -0,0 +1,49 @@
+import { render, screen } from '@testing-library/react';
+import React from 'react';
+import { Unless } from '../src';
+
+describe('<Unless /> component', () => {
+  describe('Truthy cases', () => {
+    test('GIVEN some children THEN does not render those', () => {
+      render(
+        <Unless condition={true}>
+          <span data-testid="unlessChild">Unless</span>
+        </Unless>
+      );
+
+      expect(screen.queryByTestId('unlessChild')).toBeNull();
+    });
+
+    test('GIVEN condition as function & children THEN does not render those', () => {
+      render(
+        <Unless condition={() => true}>
+          <span data-testid="unlessChild">Unless</span>
+        </Unless>
+      );
+
+      expect(screen.queryByTestId('unlessChild')).toBeNull();
+    });
+  });
+
+  describe('Falsy cases', () => {
+    test('GIVEN some children THEN renders those', () => {
+      render(
+        <Unless condition={false}>
+          <span data-testid="unlessChild">Unless</span>
+        </Unless>
+      );
+
+      expect(screen.queryByTestId('unlessChild')).toContainHTML('<span data-testid="unlessChild">Unless</span>');
+    });
+
+    test('GIVEN condition as function & some children THEN renders those', () => {
+      render(
+        <Unless condition={() => false}>
+          <span data-testid="unlessChild">Unless</span>
+        </Unless>
+      );
+
+      expect(screen.queryByTestId('unlessChild')).toContainHTML('<span data-testid="unlessChild">Unless</span>');
+    });
+  });
+});

test/When.test.tsx

@@ -0,0 +1,49 @@
+import React from 'react';
+import { render, screen } from '@testing-library/react';
+import { When } from '../src';
+
+describe('<When /> component', () => {
+  describe('Truthy cases', () => {
+    test('GIVEN some children THEN renders those', () => {
+      render(
+        <When condition={true}>
+          <span data-testid="whenChild">When</span>
+        </When>
+      );
+
+      expect(screen.getByTestId('whenChild')).toContainHTML('<span data-testid="whenChild">When</span>');
+    });
+
+    test('GIVEN condition as function & children THEN renders those', () => {
+      render(
+        <When condition={() => true}>
+          <span data-testid="whenChild">When</span>
+        </When>
+      );
+
+      expect(screen.getByTestId('whenChild')).toContainHTML('<span data-testid="whenChild">When</span>');
+    });
+  });
+
+  describe('Falsy cases', () => {
+    test('GIVEN some children THEN does not render those', () => {
+      render(
+        <When condition={false}>
+          <span data-testid="whenChild">When</span>
+        </When>
+      );
+
+      expect(screen.queryByTestId('whenChild')).toBeNull();
+    });
+
+    test('GIVEN condition as function & some children THEN does not render those', () => {
+      render(
+        <When condition={() => false}>
+          <span data-testid="whenChild">When</span>
+        </When>
+      );
+
+      expect(screen.queryByTestId('whenChild')).toBeNull();
+    });
+  });
+});