add example and test for it

cypress/integration/app.spec.js

@@ -1,6 +1,75 @@
+// describe and it are comming from Mocha
+// expect is comming form Chai
+
+// you can add this line Triple slash directives
+// to activate IntelliSense
+// /// <reference types="Cypress" />
+// or you can add the file jsconfig.json
+
 describe("First Test", () => {
+  it("Does not do much!", () => {
+    expect(true).to.not.equal(false);
+  });
+
   it("App should have a class called App-header", () => {
+    // visit the home page
+    // the baseUrl configured in cypress.json file
+    cy.visit("/");
+    // check for the existance of the elment using his class name
+    cy.get(".App").should("exist");
+  });
+
+  it("should calculate the two numbers entered by the user", () => {
     cy.visit("/");
-    cy.get(".App-header").should("exist");
+
+    /* 
+     get the element contains the word Sum
+     in our case it's the buttom
+     the button should be disabled
+    */
+    cy.contains("Sum").should("be.disabled");
+
+    // get the element by class name
+    cy.get(".result").contains("result :");
+
+    /*
+     get the input by its id 
+     then simulate the user typing
+     the number 2 then check if 
+     the input has the value 2
+    */
+    cy.get("#num1")
+      .type(2)
+      .should("have.value", "2");
+
+    cy.get("#num2")
+      .type(2)
+      .should("have.value", "2");
+
+    /*
+     get element bt its type
+     and check the type of the button
+     using match and regex
+    */
+    cy.get("button")
+      .contains("Sum")
+      .should("have.attr", "type")
+      .and("match", /button/);
+
+    // another way of checking the type
+    cy.contains("Sum")
+      .should("have.attr", "type", "button")
+      .should("not.be.disabled");
+
+    /*
+     click the button which should sum
+     the two numbers
+    */
+    cy.get("button")
+      .contains("Sum")
+      .click();
+
+    // check the result div after clicking the Sum button
+    cy.get(".result").contains("result : 4");
   });
 });

src/App.js

@@ -1,24 +1,39 @@
-import React from "react";
-import logo from "./logo.svg";
+import React, { useState } from "react";
 import "./App.css";
 
 function App() {
+  const [num1, setNum1] = useState();
+  const [num2, setNum2] = useState();
+  const [result, setResult] = useState();
+
   return (
     <div className="App">
-      <header className="App-header">
-        <img src={logo} className="App-logo" alt="logo" />
-        <p>
-          Edit <code>src/App.js</code> and save to reload.
-        </p>
-        <a
-          className="App-link"
-          href="https://reactjs.org"
-          target="_blank"
-          rel="noopener noreferrer"
-        >
-          Learn React
-        </a>
-      </header>
+      {/* <header className="App-header"></header> */}
+      <h1>Cypress test Example</h1>
+      <div>
+        Num 1 {"   "}
+        <input
+          id="num1"
+          type="number"
+          onChange={e => setNum1(e.target.value)}
+        />
+      </div>
+      <div>
+        Num 2 {"   "}
+        <input
+          id="num2"
+          type="number"
+          onChange={e => setNum2(e.target.value)}
+        />
+      </div>
+      <div className="result">result : {result}</div>
+      <button
+        type="button"
+        disabled={!num1 || !num2}
+        onClick={() => setResult(+num1 + +num2)}
+      >
+        Sum
+      </button>
     </div>
   );
 }