Fix overlay not rendering on tour restart

Author: gilbarbara

src/components/Step.tsx

@@ -184,15 +184,15 @@ export default class JoyrideStep extends React.Component<StepProps> {
   };
 
   setPopper: FloaterProps['getPopper'] = (popper, type) => {
-    const { action, step, store } = this.props;
+    const { action, lifecycle, step, store } = this.props;
 
     if (type === 'wrapper') {
       store.setPopper('beacon', popper);
     } else {
       store.setPopper('tooltip', popper);
     }
 
-    if (store.getPopper('beacon') && store.getPopper('tooltip')) {
+    if (store.getPopper('beacon') && store.getPopper('tooltip') && lifecycle === LIFECYCLE.INIT) {
       store.update({
         action,
         lifecycle: LIFECYCLE.READY,

test/tours/__snapshots__/standard.spec.tsx.snap

@@ -106,6 +106,130 @@ exports[`Joyride > Standard should render the content 1`] = `
 </div>
 `;
 
+exports[`Joyride > Standard should restart the tour: beacon 1`] = `
+<button
+  aria-label="Open the dialog"
+  class="react-joyride__beacon"
+  data-test-id="button-beacon"
+  style="background-color: transparent; border: 0px; border-radius: 0; color: rgb(85, 85, 85); cursor: pointer; font-size: 16px; line-height: 1; padding: 8px; display: inline-block; height: 36px; position: relative; width: 36px; z-index: 100;"
+  title="Open the dialog"
+  type="button"
+>
+  <span
+    style="animation: joyride-beacon-inner 1.2s infinite ease-in-out; background-color: rgb(255, 0, 68); border-radius: 50%; display: block; height: 50%; left: 50%; opacity: 0.7; position: absolute; top: 50%; transform: translate(-50%, -50%); width: 50%;"
+  />
+  <span
+    style="animation: joyride-beacon-outer 1.2s infinite ease-in-out; background-color: rgba(255, 0, 68, 0.2); border: 2px solid #f04; border-radius: 50%; box-sizing: border-box; display: block; height: 100%; left: 0px; opacity: 0.9; position: absolute; top: 0px; transform-origin: center; width: 100%;"
+  />
+</button>
+`;
+
+exports[`Joyride > Standard should restart the tour: tooltip 1`] = `
+<div
+  class="__floater"
+  style="display: inline-block; filter: drop-shadow(0 0 3px rgba(0, 0, 0, 0.3)); max-width: 100%; opacity: 1; position: absolute; transition: opacity 0.3s; visibility: visible; z-index: 200; padding: 16px 0px 0px; will-change: transform; top: 0px; left: 0px; transform: translate3d(NaNpx, NaNpx, 0);"
+  x-placement="bottom"
+>
+  <div
+    class="__floater__body"
+  >
+    <div
+      aria-label="The first step of many! Keep walking!"
+      aria-modal="true"
+      class="react-joyride__tooltip"
+      role="alertdialog"
+      style="background-color: rgb(255, 255, 255); border-radius: 5px; box-sizing: border-box; color: rgb(51, 51, 51); font-size: 16px; max-width: 100%; padding: 15px; position: relative; width: 380px;"
+    >
+      <div
+        style="line-height: 1.4; text-align: center;"
+      >
+        <div
+          style="padding: 20px 10px;"
+        >
+          The first step of many! Keep walking!
+        </div>
+      </div>
+      <div
+        style="align-items: center; display: flex; justify-content: flex-end; margin-top: 15px;"
+      >
+        <div
+          style="flex: 1;"
+        >
+          <button
+            aria-label="Skip"
+            aria-live="off"
+            data-action="skip"
+            data-test-id="button-skip"
+            role="button"
+            style="background-color: transparent; border: 0px; border-radius: 0; color: rgb(51, 51, 51); cursor: pointer; font-size: 14px; line-height: 1; padding: 8px;"
+            title="Skip"
+            type="button"
+          >
+            Skip
+          </button>
+        </div>
+        <button
+          aria-label="Next"
+          data-action="primary"
+          data-test-id="button-primary"
+          role="button"
+          style="background-color: rgb(255, 0, 68); border: 0px; border-radius: 4px; color: rgb(255, 255, 255); cursor: pointer; font-size: 16px; line-height: 1; padding: 8px;"
+          title="Next"
+          type="button"
+        >
+          Next
+        </button>
+      </div>
+      <button
+        aria-label="Close"
+        data-action="close"
+        data-test-id="button-close"
+        role="button"
+        style="background-color: transparent; border: 0px; border-radius: 0; cursor: pointer; font-size: 16px; line-height: 1; padding: 15px; position: absolute; right: 0px; top: 0px;"
+        title="Close"
+        type="button"
+      >
+        <svg
+          height="14px"
+          preserveAspectRatio="xMidYMid"
+          version="1.1"
+          viewBox="0 0 18 18"
+          width="14px"
+          xmlns="http://www.w3.org/2000/svg"
+        >
+          <g>
+            <path
+              d="M8.13911129,9.00268191 L0.171521827,17.0258467 C-0.0498027049,17.248715 -0.0498027049,17.6098394 0.171521827,17.8327545 C0.28204354,17.9443526 0.427188206,17.9998706 0.572051765,17.9998706 C0.71714958,17.9998706 0.862013139,17.9443526 0.972581703,17.8327545 L9.0000937,9.74924618 L17.0276057,17.8327545 C17.1384085,17.9443526 17.2832721,17.9998706 17.4281356,17.9998706 C17.5729992,17.9998706 17.718097,17.9443526 17.8286656,17.8327545 C18.0499901,17.6098862 18.0499901,17.2487618 17.8286656,17.0258467 L9.86135722,9.00268191 L17.8340066,0.973848225 C18.0553311,0.750979934 18.0553311,0.389855532 17.8340066,0.16694039 C17.6126821,-0.0556467968 17.254037,-0.0556467968 17.0329467,0.16694039 L9.00042166,8.25611765 L0.967006424,0.167268345 C0.745681892,-0.0553188426 0.387317931,-0.0553188426 0.165993399,0.167268345 C-0.0553311331,0.390136635 -0.0553311331,0.751261038 0.165993399,0.974176179 L8.13920499,9.00268191 L8.13911129,9.00268191 Z"
+              fill="#333"
+            />
+          </g>
+        </svg>
+      </button>
+    </div>
+    <div
+      class="__floater__arrow"
+      style="pointer-events: none; position: absolute; width: 100%; left: 0px; right: 0px; top: 0px; height: 16px;"
+    >
+      <span
+        style="display: inline-flex; position: absolute; margin-left: 8px; margin-right: 8px;"
+      >
+        <svg
+          height="16"
+          version="1.1"
+          width="32"
+          xmlns="http://www.w3.org/2000/svg"
+        >
+          <polygon
+            fill="#fff"
+            points="32,16 16,0 0,16"
+          />
+        </svg>
+      </span>
+    </div>
+  </div>
+</div>
+`;
+
 exports[`Joyride > Standard should start the tour 1`] = `
 <div
   id="react-joyride-step-0"

test/tours/standard.spec.tsx

@@ -430,4 +430,26 @@ describe('Joyride > Standard', () => {
 
     expect(mockGetPopper).toHaveBeenCalledTimes(13);
   });
+
+  it('should restart the tour', async () => {
+    mockCallback.mockClear();
+    mockGetPopper.mockClear();
+
+    fireEvent.click(screen.getByTestId('start'));
+
+    await waitFor(() => {
+      expect(mockCallback).toHaveBeenCalledTimes(3);
+    });
+
+    expect(screen.getByTestId('button-beacon')).toMatchSnapshot('beacon');
+
+    fireEvent.click(screen.getByTestId('button-beacon'));
+
+    await waitFor(() => {
+      expect(mockCallback).toHaveBeenCalledTimes(4);
+    });
+
+    expect(screen.getById('react-joyride-step-0').querySelector('div')).toMatchSnapshot('tooltip');
+    expect(screen.getByTestId('overlay')).toBeInTheDocument();
+  });
 });