Adding cypress + example test (#476)

frontend/src/components/Button.cy.tsx

@@ -0,0 +1,31 @@
+import { mount } from "cypress/react18";
+import { Button } from "./common/Button/Button";
+
+describe("Button component tests", () => {
+  const buttonText = "buttonText";
+
+  it("renders", () => {
+    mount(<Button onClick={() => {}}></Button>);
+    cy.get("button").should("exist");
+  });
+
+  it("Should have correct text", () => {
+    mount(<Button label={buttonText} onClick={() => {}}></Button>);
+    cy.get("button").contains(buttonText);
+  });
+
+  it("calls onClick when clicked", () => {
+    const onClickStub = cy.stub().as("onClick");
+
+    mount(<Button onClick={onClickStub}></Button>);
+
+    cy.get("button").click();
+    cy.get("@onClick").should("have.been.calledOnce");
+  });
+
+  it("should be disabled", () => {
+    mount(<Button onClick={() => {}} disabled></Button>);
+
+    cy.get("button").should("be.disabled");
+  });
+});

frontend/src/components/TextInput.cy.tsx

@@ -0,0 +1,26 @@
+import TextInput from "../components/TextInput";
+
+describe("TextInput", () => {
+  const label = "label";
+  const placeholder = "some placeholder";
+
+  beforeEach(() => {
+    cy.mount(
+      <TextInput
+        label={label}
+        placeholder={placeholder}
+        onChange={() => {
+          return;
+        }}
+      />
+    );
+  });
+
+  it("contains correct label", () => {
+    cy.get("label").should("contain", label);
+  });
+
+  it("contains correct placeholder", () => {
+    cy.get("input").should("have.attr", "placeholder", placeholder);
+  });
+});