react-testdome/toggle-message.html at main · gitafitria/react-testdome · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
<!DOCTYPE html>
<html>
  <body>
    <script src="https://unpkg.com/react@16.3.2/umd/react.production.min.js"></script>
    <script src="https://unpkg.com/react-dom@16.3.2/umd/react-dom.production.min.js"></script>
    <script
      src="https://cdnjs.cloudflare.com/ajax/libs/babel-standalone/6.26.0/babel.min.js"
      charset="utf-8"
    ></script>
    <script type="text/babel">
      class Message extends React.Component {
        constructor(props) {
          super(props);
          this.state = {showWarning: false};
        }

        render() {
          const { showParagraph } = this.state;
          return (
            <React.Fragment>
              <a href="#" onClick={() => this.handleItemClick()}> Want to buy a new car?</a>
              {showParagraph && (
                <p>Call +11 22 33 44 now!</p>
              )}

            </React.Fragment>
          );
        }

        handleItemClick() {
          this.setState(state => ({
            showParagraph: true,
          }));
        }
      }

      setTimeout(() => {
        console.log("Before click: " + rootElement.innerHTML);

        document.querySelector("a").click();
        setTimeout(() => {
          console.log("After click: " + rootElement.innerHTML);
        });
      });
      const rootElement = document.getElementById("root");
      ReactDOM.render(<Message isClicked={false}/>, rootElement);
    </script>
    <div id="root"></div>
  </body>
</html>