feat(web): detect, clips, snapshots toggles

2021-02-17 20:53:57 -08:00
parent e399790442
commit b6ba6459fb
18 changed files with 500 additions and 92 deletions
--- a/web/src/components/tests/Toolltip.test.jsx
+++ b/web/src/components/tests/Toolltip.test.jsx
@@ -0,0 +1,115 @@
+import { h, createRef } from 'preact';
+import Tooltip from '../Tooltip';
+import { render, screen } from '@testing-library/preact';
+
+describe('Tooltip', () => {
+  test('renders in a relative position', async () => {
+    jest
+      .spyOn(window.HTMLElement.prototype, 'getBoundingClientRect')
+      // relativeTo
+      .mockReturnValueOnce({
+        x: 100,
+        y: 100,
+        width: 50,
+        height: 10,
+      })
+      // tooltip
+      .mockReturnValueOnce({ width: 40, height: 15 });
+
+    const ref = createRef();
+    render(
+      <div>
+        <div ref={ref} />
+        <Tooltip relativeTo={ref} text="hello" />
+      </div>
+    );
+
+    const tooltip = await screen.findByRole('tooltip');
+    const style = window.getComputedStyle(tooltip);
+    expect(style.left).toEqual('105px');
+    expect(style.top).toEqual('70px');
+  });
+
+  test('if too far right, renders to the left', async () => {
+    window.innerWidth = 1024;
+    jest
+      .spyOn(window.HTMLElement.prototype, 'getBoundingClientRect')
+      // relativeTo
+      .mockReturnValueOnce({
+        x: 1000,
+        y: 100,
+        width: 24,
+        height: 10,
+      })
+      // tooltip
+      .mockReturnValueOnce({ width: 50, height: 15 });
+
+    const ref = createRef();
+    render(
+      <div>
+        <div ref={ref} />
+        <Tooltip relativeTo={ref} text="hello" />
+      </div>
+    );
+
+    const tooltip = await screen.findByRole('tooltip');
+    const style = window.getComputedStyle(tooltip);
+    expect(style.left).toEqual('942px');
+    expect(style.top).toEqual('97px');
+  });
+
+  test('if too far left, renders to the right', async () => {
+    jest
+      .spyOn(window.HTMLElement.prototype, 'getBoundingClientRect')
+      // relativeTo
+      .mockReturnValueOnce({
+        x: 0,
+        y: 100,
+        width: 24,
+        height: 10,
+      })
+      // tooltip
+      .mockReturnValueOnce({ width: 50, height: 15 });
+
+    const ref = createRef();
+    render(
+      <div>
+        <div ref={ref} />
+        <Tooltip relativeTo={ref} text="hello" />
+      </div>
+    );
+
+    const tooltip = await screen.findByRole('tooltip');
+    const style = window.getComputedStyle(tooltip);
+    expect(style.left).toEqual('32px');
+    expect(style.top).toEqual('97px');
+  });
+
+  test('if too close to top, renders to the bottom', async () => {
+    window.scrollY = 90;
+    jest
+      .spyOn(window.HTMLElement.prototype, 'getBoundingClientRect')
+      // relativeTo
+      .mockReturnValueOnce({
+        x: 100,
+        y: 100,
+        width: 24,
+        height: 10,
+      })
+      // tooltip
+      .mockReturnValueOnce({ width: 50, height: 15 });
+
+    const ref = createRef();
+    render(
+      <div>
+        <div ref={ref} />
+        <Tooltip relativeTo={ref} text="hello" />
+      </div>
+    );
+
+    const tooltip = await screen.findByRole('tooltip');
+    const style = window.getComputedStyle(tooltip);
+    expect(style.left).toEqual('87px');
+    expect(style.top).toEqual('160px');
+  });
+});