react-on-aws/index.html at master · schlaetzer/react-on-aws · 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
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>React</title>
  </head>
  <body>
    <main id='content'></main>
    <div id='mocha'></div>
    <script src="https://unpkg.com/babel-standalone"></script>
    <script type="text/javascript" src="https://unpkg.com/react@16.0.0/umd/react.production.min.js"></script>
    <script type="text/javascript" src="https://unpkg.com/react-dom@16.0.0/umd/react-dom.production.min.js"></script>
    <script type="text/javascript" src="https://unpkg.com/chai@4.0.2/chai.js"></script>
    <script type="text/javascript" src="https://unpkg.com/mocha@3.4.2/mocha.js"></script>

    <script type="text/babel" data-presets="react">
      class NameInput extends React.Component {
        render() {
          return (
            <div>
              <label>Name: <input type="text" className='inputText' /></label>
              <button id="inputButton" onClick={()=>defineVar()}>Hallo</button>
            </div>
          )
        }
      }
      let variable;
      function defineVar() {
        variable = "hallo";
      }
      ReactDOM.render(<NameInput/>, document.getElementById('content'));
    </script>

    <script type="text/babel" data-presets="react">
      // https://www.chaijs.com/
      const assert = chai.assert;

      //behavior driven development
      mocha.ui("bdd");
      mocha.reporter("html");
      describe("Example tests", () => {
        it("Proves that math works", () => {
          assert.equal(5, 3+2, "Math works!");
        });

        it("Found our component", () => {
          // Tests if NameInput exists
          assert.isDefined(NameInput, "Component is defined");
        });

        it("Test a function", ()=>{
          let myName = "Thorben";
          const greet = (name) => "Hello "+name;
          assert.include(greet(myName), myName, "Greeting includes name")
        });

      });

      describe("Example tests", () => {
        it("Rendered the nameInput component", ()=>{
          let inputs = document.querySelector(".inputText");
          assert.isDefined(inputs, "There is a input text");
        });

        it("Fill variable if button is clicked", ()=>{
          const button = document.querySelector("#inputButton");
          button.click();
          assert.isDefined(variable, "variable is defined");
        })
      });
      mocha.run();
    </script>

    <script type="text/javascript" src="dist/bundle.js"></script>

  </body>
</html>