From d75b9a1e150ab211c1052fb49bede9bd16320aca Mon Sep 17 00:00:00 2001
From: Armand Philippot <git@armandphilippot.com>
Date: Sat, 7 Oct 2023 18:44:14 +0200
Subject: feat(components): add a generic Flip component

The flipping animation is used at several places so it makes sense to
use a single component to handle the animation. It will avoid styles
duplication.
---
 src/components/atoms/flip/flip.test.tsx | 72 +++++++++++++++++++++++++++++++++
 1 file changed, 72 insertions(+)
 create mode 100644 src/components/atoms/flip/flip.test.tsx

(limited to 'src/components/atoms/flip/flip.test.tsx')

diff --git a/src/components/atoms/flip/flip.test.tsx b/src/components/atoms/flip/flip.test.tsx
new file mode 100644
index 0000000..0fd986e
--- /dev/null
+++ b/src/components/atoms/flip/flip.test.tsx
@@ -0,0 +1,72 @@
+import { describe, expect, it } from '@jest/globals';
+import { render, screen as rtlScreen } from '@testing-library/react';
+import { Flip } from './flip';
+import { FlipSide } from './flip-side';
+
+describe('Flip', () => {
+  it('renders the back and front sides', () => {
+    const front = 'laboriosam sint rem';
+    const back = 'tempore autem ea';
+
+    render(
+      <Flip>
+        <FlipSide>{front}</FlipSide>
+        <FlipSide isBack>{back}</FlipSide>
+      </Flip>
+    );
+
+    expect(rtlScreen.getByText(front)).toBeInTheDocument();
+    expect(rtlScreen.getByText(back)).toBeInTheDocument();
+  });
+
+  it('can be animated horizontally', () => {
+    const front = 'repudiandae maiores sunt';
+    const back = 'facilis nostrum voluptatibus';
+
+    render(
+      <Flip direction="horizontal">
+        <FlipSide>{front}</FlipSide>
+        <FlipSide isBack>{back}</FlipSide>
+      </Flip>
+    );
+
+    expect(rtlScreen.getByText(front).parentElement).toHaveClass(
+      'wrapper--horizontal'
+    );
+  });
+
+  it('can be animated vertically', () => {
+    const front = 'quis et id';
+    const back = 'quis est itaque';
+
+    render(
+      <Flip direction="vertical">
+        <FlipSide>{front}</FlipSide>
+        <FlipSide isBack>{back}</FlipSide>
+      </Flip>
+    );
+
+    expect(rtlScreen.getByText(front).parentElement).toHaveClass(
+      'wrapper--vertical'
+    );
+  });
+
+  it('can be animated manually', () => {
+    const front = 'quis et id';
+    const back = 'quis est itaque';
+
+    render(
+      <Flip showBack>
+        <FlipSide>{front}</FlipSide>
+        <FlipSide isBack>{back}</FlipSide>
+      </Flip>
+    );
+
+    expect(rtlScreen.getByText(front).parentElement).toHaveClass(
+      'wrapper--manual'
+    );
+    expect(rtlScreen.getByText(front).parentElement).toHaveClass(
+      'wrapper--is-back'
+    );
+  });
+});
-- 
cgit v1.2.3