test: add useSingleton tests

Author: atomiks

package.json

@@ -10,7 +10,7 @@
   "scripts": {
     "dev": "parcel demo/index.html -d .devserver --no-cache",
     "build": "rollup --config",
-    "test": "jest --coverage --silent",
+    "test": "jest --coverage",
     "lint": "eslint \"{src,test}/**/*.js\"",
     "format": "prettier --write \"{src,test,demo}/**/*.{js,ts,json,css,md}\""
   },

test/Tippy.test.js

@@ -2,6 +2,8 @@ import React from 'react';
 import TippyBase from '../src';
 import {render, cleanup} from '@testing-library/react';
 
+jest.useFakeTimers();
+
 afterEach(cleanup);
 
 describe('<Tippy />', () => {
@@ -370,6 +372,18 @@ describe('<Tippy />', () => {
 
     expect(instance.plugins).toMatchSnapshot();
   });
+
+  test('render prop', () => {
+    render(
+      <Tippy render={attrs => <div {...attrs}>Hello</div>} showOnCreate={true}>
+        <button />
+      </Tippy>,
+    );
+
+    jest.runAllTimers();
+
+    expect(instance.popper).toMatchSnapshot();
+  });
 });
 
 describe('Tippy.propTypes', () => {

test/__snapshots__/Tippy.test.js.snap

@@ -27,3 +27,15 @@ Array [
   },
 ]
 `;
+
+exports[`<Tippy /> render prop 1`] = `
+<div
+  data-tippy-root=""
+  id="tippy-29"
+  style="pointer-events: none; transition: none; position: absolute; left: 0px; top: 0px; margin: 0px;"
+>
+  <div>
+    Hello
+  </div>
+</div>
+`;

test/__snapshots__/useSingleton.test.js.snap

@@ -0,0 +1,25 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`useSingleton headless mode updates content correctly 1`] = `
+<div
+  data-tippy-root=""
+  id="tippy-1"
+  style="pointer-events: none; transition: none; position: absolute; left: 0px; top: 0px; margin: 0px;"
+>
+  <div>
+    a
+  </div>
+</div>
+`;
+
+exports[`useSingleton headless mode updates content correctly 2`] = `
+<div
+  data-tippy-root=""
+  id="tippy-1"
+  style="pointer-events: none; transition: none; position: absolute; left: 0px; top: 0px; margin: 0px;"
+>
+  <div>
+    b
+  </div>
+</div>
+`;

test/useSingleton.test.js

@@ -1,10 +1,135 @@
 /* eslint-disable */
 import React from 'react';
-import TippyBase, {useSingleton as useSingletonBase} from '../src';
-import {render, cleanup} from '@testing-library/react';
+import Tippy, {useSingleton} from '../src';
+import {useSingleton as useSingletonHeadless} from '../src/headless';
+import {render, cleanup, fireEvent} from '@testing-library/react';
 
 jest.useFakeTimers();
 
 afterEach(cleanup);
 
-it('works', () => {});
+let instance;
+function onCreate(i) {
+  instance = i;
+}
+
+it('changes the singleton content correctly', () => {
+  function App() {
+    const [source, target] = useSingleton();
+
+    return (
+      <>
+        <Tippy
+          onCreate={onCreate}
+          singleton={source}
+          trigger="click"
+          hideOnClick={false}
+        />
+        <Tippy content="a" singleton={target}>
+          <button data-testid="a" />
+        </Tippy>
+        <Tippy content="b" singleton={target}>
+          <button data-testid="b" />
+        </Tippy>
+      </>
+    );
+  }
+
+  const {getByTestId} = render(<App />);
+
+  const buttonA = getByTestId('a');
+  const buttonB = getByTestId('b');
+
+  fireEvent.click(buttonA);
+
+  expect(instance.state.isVisible).toBe(true);
+  expect(instance.props.content.textContent).toBe('a');
+
+  fireEvent.click(buttonB);
+
+  expect(instance.props.content.textContent).toBe('b');
+});
+
+describe('disabled prop', () => {
+  function App({disabled}) {
+    const [source, target] = useSingleton({disabled});
+
+    return (
+      <>
+        <Tippy
+          onCreate={onCreate}
+          singleton={source}
+          trigger="click"
+          hideOnClick={false}
+        />
+        <Tippy content="a" singleton={target}>
+          <button data-testid="a" />
+        </Tippy>
+        <Tippy content="b" singleton={target}>
+          <button data-testid="b" />
+        </Tippy>
+      </>
+    );
+  }
+
+  it('it is set correctly on mount and on updates', () => {
+    const {getByTestId, rerender} = render(<App disabled={true} />);
+    const buttonA = getByTestId('a');
+
+    fireEvent.click(buttonA);
+
+    expect(instance.state.isVisible).toBe(false);
+
+    rerender(<App disabled={false} />);
+
+    fireEvent.click(buttonA);
+
+    expect(instance.state.isVisible).toBe(true);
+
+    rerender(<App disabled={true} />);
+
+    fireEvent.click(buttonA);
+
+    expect(instance.state.isVisible).toBe(false);
+  });
+});
+
+describe('useSingleton headless mode', () => {
+  function App() {
+    const [source, target] = useSingletonHeadless();
+
+    return (
+      <>
+        <Tippy
+          onCreate={onCreate}
+          render={(attrs, content) => <div {...attrs}>{content}</div>}
+          singleton={source}
+          trigger="click"
+          hideOnClick={false}
+        />
+        <Tippy content="a" singleton={target}>
+          <button data-testid="a" />
+        </Tippy>
+        <Tippy content="b" singleton={target}>
+          <button data-testid="b" />
+        </Tippy>
+      </>
+    );
+  }
+
+  it('updates content correctly', () => {
+    const {getByTestId} = render(<App />);
+
+    const buttonA = getByTestId('a');
+    const buttonB = getByTestId('b');
+
+    fireEvent.click(buttonA);
+
+    expect(instance.state.isVisible).toBe(true);
+    expect(instance.popper).toMatchSnapshot();
+
+    fireEvent.click(buttonB);
+
+    expect(instance.popper).toMatchSnapshot();
+  });
+});