Skip to content

Commit

Permalink
Fix overlay not rendering on tour restart
Browse files Browse the repository at this point in the history
  • Loading branch information
@gilbarbara
gilbarbara committed Feb 22, 2024
1 parent 307dc4e commit 992379c
Show file tree
Hide file tree
Showing 3 changed files with 148 additions and 2 deletions.
4 changes: 2 additions & 2 deletions src/components/Step.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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,
Expand Down
124 changes: 124 additions & 0 deletions test/tours/__snapshots__/standard.spec.tsx.snap
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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"
Expand Down
22 changes: 22 additions & 0 deletions test/tours/standard.spec.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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();
});
});

0 comments on commit 992379c

Please sign in to comment.