add version of standard test spec which covers Joyride/Step.setPopper…

… vs. floaterProps.getPopper behaviour
gilbarbara · Jul 30, 2023 · 2983ec9 · 2983ec9
1 parent 1ad28cb
commit 2983ec9
Show file tree

Hide file tree

Showing 3 changed files with 781 additions and 0 deletions.
diff --git a/test/__fixtures__/WithFloaterGetPopper.js b/test/__fixtures__/WithFloaterGetPopper.js
@@ -0,0 +1,141 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import Joyride, { STATUS } from '../../src/index';
+
+import tourSteps from './steps';
+
+const filteredSteps = tourSteps
+  .filter((d, i) => i !== 3)
+  .map(d => {
+    if (d.target === '.mission button') {
+      d.target = '.mission h2';
+    }
+
+    return d;
+  });
+
+export default class WithFloaterGetPopper extends React.Component {
+  constructor(props) {
+    super(props);
+
+    const steps = [...filteredSteps];
+
+    if (props.withCentered) {
+      steps.push({
+        target: 'body',
+        placement: 'center',
+        content: "Let's begin our journey",
+        textAlign: 'center',
+      });
+    }
+
+    this.state = {
+      run: false,
+      steps,
+    };
+  }
+
+  static propTypes = {
+    callback: PropTypes.func.isRequired,
+  };
+
+  handleClickStart = () => {
+    this.setState({
+      run: true,
+    });
+  };
+
+  handleJoyrideCallback = data => {
+    const { callback } = this.props;
+    const { status } = data;
+
+    if ([STATUS.FINISHED, STATUS.SKIPPED].includes(status)) {
+      this.setState({ run: false });
+    }
+
+    callback(data);
+  };
+
+  render() {
+    const { run, steps } = this.state;
+    const { floaterProps } = this.props;
+
+    return (
+      <div className="demo">
+        <Joyride
+          run={run}
+          steps={steps}
+          continuous
+          scrollToFirstStep
+          showSkipButton={true}
+          callback={this.handleJoyrideCallback}
+          floaterProps={floaterProps}
+        />
+        <main>
+          <div className="hero">
+            <div className="container">
+              <div className="hero__content">
+                <h1>
+                  <span>Create walkthroughs and guided tours for your ReactJS apps.</span>
+                </h1>
+                <button className="hero__start" onClick={this.handleClickStart} type="button">
+                  Let's Go!
+                </button>
+              </div>
+            </div>
+          </div>
+          <div className="demo__section projects">
+            <div className="container">
+              <h2>
+                <span>Projects</span>
+              </h2>
+              <div className="list">
+                <div>
+                  <img
+                    src="http://placehold.it/800x600/ff0044/ffffff?txtsize=50&text=ASBESTOS"
+                    alt="ASBESTOS"
+                  />
+                </div>
+                <div>
+                  <img
+                    src="http://placehold.it/800x600/00ff44/ffffff?txtsize=50&text=GROW"
+                    alt="GROW"
+                  />
+                </div>
+                <div>
+                  <img
+                    src="http://placehold.it/800x600/333/ffffff?txtsize=50&text=∂Vo∑"
+                    alt="∂Vo∑"
+                  />
+                </div>
+              </div>
+            </div>
+          </div>
+
+          <div className="demo__section mission">
+            <div className="container">
+              <h2>
+                <span>Mission</span>
+              </h2>
+            </div>
+          </div>
+          <div className="demo__section about">
+            <div className="container">
+              <h2>
+                <span>About</span>
+              </h2>
+            </div>
+          </div>
+        </main>
+        <footer className="demo__footer">
+          <div className="container">
+            <button type="button">
+              <span />
+            </button>
+            JOYRIDE
+          </div>
+        </footer>
+      </div>
+    );
+  }
+}
diff --git a/test/tours/__snapshots__/with-floater-get-popper.spec.js.snap b/test/tours/__snapshots__/with-floater-get-popper.spec.js.snap
@@ -0,0 +1,166 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Joyride > With floaterProps.getPopper should be able to click STEP 1 Beacon 1`] = `
+{
+  "action": "update",
+  "controlled": false,
+  "index": 0,
+  "lifecycle": "tooltip",
+  "size": 5,
+  "status": "running",
+}
+`;
+
+exports[`Joyride > With floaterProps.getPopper should be able to click STEP 1 Primary button 1`] = `
+{
+  "action": "next",
+  "controlled": false,
+  "index": 1,
+  "lifecycle": "init",
+  "size": 5,
+  "status": "running",
+}
+`;
+
+exports[`Joyride > With floaterProps.getPopper should be able to click STEP 2 Primary button 1`] = `
+{
+  "action": "next",
+  "controlled": false,
+  "index": 2,
+  "lifecycle": "init",
+  "size": 5,
+  "status": "running",
+}
+`;
+
+exports[`Joyride > With floaterProps.getPopper should be able to click STEP 2 Primary button AGAIN 1`] = `
+{
+  "action": "next",
+  "controlled": false,
+  "index": 2,
+  "lifecycle": "init",
+  "size": 5,
+  "status": "running",
+}
+`;
+
+exports[`Joyride > With floaterProps.getPopper should be able to click STEP 3 Back button 1`] = `
+{
+  "action": "prev",
+  "controlled": false,
+  "index": 1,
+  "lifecycle": "init",
+  "size": 5,
+  "status": "running",
+}
+`;
+
+exports[`Joyride > With floaterProps.getPopper should be able to click STEP 3 Primary button 1`] = `
+{
+  "action": "next",
+  "controlled": false,
+  "index": 3,
+  "lifecycle": "init",
+  "size": 5,
+  "status": "running",
+}
+`;
+
+exports[`Joyride > With floaterProps.getPopper should be able to click STEP 4 Primary button 1`] = `
+{
+  "action": "update",
+  "controlled": false,
+  "index": 4,
+  "lifecycle": "tooltip",
+  "size": 5,
+  "status": "running",
+}
+`;
+
+exports[`Joyride > With floaterProps.getPopper should be able to click STEP 5 Primary button 1`] = `
+{
+  "action": "stop",
+  "controlled": false,
+  "index": 0,
+  "lifecycle": "init",
+  "size": 5,
+  "status": "paused",
+}
+`;
+
+exports[`Joyride > With floaterProps.getPopper should be able to start the tour 1`] = `
+{
+  "action": "start",
+  "controlled": false,
+  "index": 0,
+  "lifecycle": "init",
+  "size": 5,
+  "status": "running",
+}
+`;
+
+exports[`Joyride > With floaterProps.getPopper should have ended the tour 1`] = `
+{
+  "action": "stop",
+  "controlled": false,
+  "index": 0,
+  "lifecycle": "init",
+  "size": 5,
+  "status": "paused",
+}
+`;
+
+exports[`Joyride > With floaterProps.getPopper should have initiated the Joyride 1`] = `
+{
+  "action": "init",
+  "controlled": false,
+  "index": 0,
+  "lifecycle": "init",
+  "size": 5,
+  "status": "ready",
+}
+`;
+
+exports[`Joyride > With floaterProps.getPopper should have rendered the STEP 3 Tooltip 1`] = `
+{
+  "action": "update",
+  "controlled": false,
+  "index": 2,
+  "lifecycle": "tooltip",
+  "size": 5,
+  "status": "running",
+}
+`;
+
+exports[`Joyride > With floaterProps.getPopper should have rendered the STEP 3 Tooltip AGAIN 1`] = `
+{
+  "action": "update",
+  "controlled": false,
+  "index": 2,
+  "lifecycle": "tooltip",
+  "size": 5,
+  "status": "running",
+}
+`;
+
+exports[`Joyride > With floaterProps.getPopper should have rendered the STEP 4 Tooltip 1`] = `
+{
+  "action": "update",
+  "controlled": false,
+  "index": 3,
+  "lifecycle": "tooltip",
+  "size": 5,
+  "status": "running",
+}
+`;
+
+exports[`Joyride > With floaterProps.getPopper should have rendered the STEP 5 Tooltip 1`] = `
+{
+  "action": "update",
+  "controlled": false,
+  "index": 4,
+  "lifecycle": "ready",
+  "size": 5,
+  "status": "running",
+}
+`;