diff --git a/src/components/CreateTemplate/CreateTemplate.tsx b/src/components/CreateTemplate/CreateTemplate.tsx
index a8ec881..ce1ed26 100644
--- a/src/components/CreateTemplate/CreateTemplate.tsx
+++ b/src/components/CreateTemplate/CreateTemplate.tsx
@@ -1,11 +1,11 @@
-import React, { useState, use } from "react";
+import React, { useState, useContext } from "react";
import { Dialog } from "../Dialog/Dialog";
import { CanvasPreviewContextValues } from "../../contexts/CanvasPreviewContext";
interface CreateTemplateProps {}
export const CreateTemplate: React.FunctionComponent
= (
- props,
+ props
) => {
const {
canvasTemplates,
@@ -18,7 +18,7 @@ export const CreateTemplate: React.FunctionComponent = (
canvasBackgroundValues,
canvasLogoValues,
canvasGradientValues,
- } = use(CanvasPreviewContextValues);
+ } = useContext(CanvasPreviewContextValues);
const [templateName, setTemplateName] = useState("");
const handleSave = (e: React.FormEvent) => {
diff --git a/src/components/ManageTemplates/ManageTemplates.tsx b/src/components/ManageTemplates/ManageTemplates.tsx
index eba71bf..780f53b 100644
--- a/src/components/ManageTemplates/ManageTemplates.tsx
+++ b/src/components/ManageTemplates/ManageTemplates.tsx
@@ -1,11 +1,11 @@
-import React, { use } from "react";
+import React, { useContext } from "react";
import { Dialog } from "../Dialog/Dialog";
import { CanvasPreviewContextValues } from "../../contexts/CanvasPreviewContext";
import templatesData from "../../config/templates.json";
interface ManageTemplatesProps {}
export const ManageTemplates: React.FunctionComponent = (
- props,
+ props
) => {
const {
canvasTemplates,
@@ -17,13 +17,13 @@ export const ManageTemplates: React.FunctionComponent = (
setCanvasIconValues,
setCanvasLogoValues,
setCanvasGradientValues,
- } = use(CanvasPreviewContextValues);
+ } = useContext(CanvasPreviewContextValues);
const handleDeleteTemplate = (templateName: string) => {
if (confirm("Delete selected template?") == true) {
let filteredTemplates = canvasTemplates.filter(
(template: { templateName: string }) =>
- template.templateName !== templateName,
+ template.templateName !== templateName
);
localStorage.setItem("templates", JSON.stringify(filteredTemplates));
@@ -56,9 +56,9 @@ export const ManageTemplates: React.FunctionComponent = (
href={`data:text/json;charset=utf-8, ${encodeURIComponent(
JSON.stringify(
canvasTemplates.filter((item) =>
- item.templateName.includes(template.templateName),
- ),
- ),
+ item.templateName.includes(template.templateName)
+ )
+ )
)}`}
download={`${template.templateName}-preset-big.json`}
data-testid="downloadTemplateBtn"
@@ -77,7 +77,7 @@ export const ManageTemplates: React.FunctionComponent = (
- ),
+ )
);
} else {
return (
@@ -98,7 +98,7 @@ export const ManageTemplates: React.FunctionComponent = (
>
{template.templateName}
- ) : null,
+ ) : null
);
};
diff --git a/src/components/SideBar/SideBar.tsx b/src/components/SideBar/SideBar.tsx
index 4fcba71..fae2576 100644
--- a/src/components/SideBar/SideBar.tsx
+++ b/src/components/SideBar/SideBar.tsx
@@ -1,4 +1,3 @@
-import React from "react";
import {
CanvasBackground,
CanvasGradient,
@@ -6,6 +5,7 @@ import {
CanvasHeadline,
CanvasLogo,
} from "../";
+
import keitaroLogo from "../../assets/svg/keitaro-logo-full-color.svg";
import { CanvasBorder } from "../CanvasBorder/CanvasBorder";
import { CanvasTemplates } from "../CanvasTemplates/CanvasTemplates";
diff --git a/src/components/__tests__/App.test.tsx b/src/components/__tests__/App.test.tsx
index 46fd113..1e85145 100644
--- a/src/components/__tests__/App.test.tsx
+++ b/src/components/__tests__/App.test.tsx
@@ -1,115 +1,114 @@
-// import { render, screen, fireEvent } from "@testing-library/react";
-// import "@testing-library/jest-dom";
-// import { App } from "../../App";
+import { render, screen, fireEvent } from "@testing-library/react";
+import "@testing-library/jest-dom";
+import { App } from "../../App";
-// describe("App.tsx tests", () => {
-// it("should render a component with test-id SideBar", () => {
-// render();
-// expect(screen.getByTestId("SideBar")).toBeInTheDocument();
-// });
+describe("App.tsx tests", () => {
+ it("should render a component with test-id SideBar", () => {
+ render();
+ expect(screen.getByTestId("SideBar")).toBeInTheDocument();
+ });
-// it("should render a component with test-id CanvasWrapper", () => {
-// render();
-// expect(screen.getByTestId("CanvasWrapper")).toBeInTheDocument();
-// });
+ it("should render a component with test-id CanvasWrapper", () => {
+ render();
+ expect(screen.getByTestId("CanvasWrapper")).toBeInTheDocument();
+ });
-// describe("Headline inegrated tests", () => {
-// it("should render updated text from headline textarea on the canvas", () => {
-// render();
-// const textAreaElement = screen.getByTestId(
-// /headlineTextarea/i
-// ) as HTMLInputElement;
-// fireEvent.change(textAreaElement, {
-// target: { value: "Headline text was changed" },
-// });
-// const headlinePreviewElement = screen.getByTestId(/canvasHeadlineTitle/i);
-// expect(headlinePreviewElement).toHaveTextContent(
-// "Headline text was changed"
-// );
-// });
+ describe("Headline inegrated tests", () => {
+ it("should render updated text from headline textarea on the canvas", () => {
+ render();
+ const textAreaElement = screen.getByTestId(
+ /headlineTextarea/i
+ ) as HTMLInputElement;
+ fireEvent.change(textAreaElement, {
+ target: { value: "Headline text was changed" },
+ });
+ const headlinePreviewElement = screen.getByTestId(/canvasHeadlineTitle/i);
+ expect(headlinePreviewElement).toHaveTextContent(
+ "Headline text was changed"
+ );
+ });
-// it("should change headline text color on the canvas", () => {
-// render();
-// const colorPickerElement = screen.getByTitle(
-// /Headline Color/i
-// ) as HTMLInputElement;
-// fireEvent.change(colorPickerElement, {
-// target: { value: "#f4f4f4" },
-// });
-// const headlinePreviewElement = screen.getByTestId(/canvasHeadlineTitle/i);
-// const styles = window.getComputedStyle(headlinePreviewElement);
-// expect(styles.color).toBe("rgb(244, 244, 244)");
-// });
+ it("should change headline text color on the canvas", () => {
+ render();
+ const colorPickerElement = screen.getByTitle(
+ /Headline Color/i
+ ) as HTMLInputElement;
+ fireEvent.change(colorPickerElement, {
+ target: { value: "#f4f4f4" },
+ });
+ const headlinePreviewElement = screen.getByTestId(/canvasHeadlineTitle/i);
+ const styles = window.getComputedStyle(headlinePreviewElement);
+ expect(styles.color).toBe("rgb(244, 244, 244)");
+ });
-// it("should change healine font size", () => {
-// render();
-// const rangeElement = screen.getByTitle(
-// /Headline Size/i
-// ) as HTMLInputElement;
-// fireEvent.change(rangeElement, { target: { value: "5" } });
-// const headlinePreviewElement = screen.getByTestId(/canvasHeadlineTitle/i);
-// const styles = window.getComputedStyle(headlinePreviewElement);
-// expect(styles.fontSize).toBe("5em");
-// });
+ it("should change healine font size", () => {
+ render();
+ const rangeElement = screen.getByTitle(
+ /Headline Size/i
+ ) as HTMLInputElement;
+ fireEvent.change(rangeElement, { target: { value: "5" } });
+ const headlinePreviewElement = screen.getByTestId(/canvasHeadlineTitle/i);
+ const styles = window.getComputedStyle(headlinePreviewElement);
+ expect(styles.fontSize).toBe("5em");
+ });
-// it("should change headline horizontal position", () => {
-// render();
-// const rangeElement = screen.getByTitle(
-// /Headline Horizontal Position/i
-// ) as HTMLInputElement;
-// fireEvent.change(rangeElement, { target: { value: "5" } });
-// const headlinePreviewElement = screen.getByTestId(/canvasHeadlineTitle/i);
-// const styles = window.getComputedStyle(headlinePreviewElement);
-// expect(styles.left).toBe("5em");
-// });
+ it("should change headline horizontal position", () => {
+ render();
+ const rangeElement = screen.getByTitle(
+ /Headline Horizontal Position/i
+ ) as HTMLInputElement;
+ fireEvent.change(rangeElement, { target: { value: "5" } });
+ const headlinePreviewElement = screen.getByTestId(/canvasHeadlineTitle/i);
+ const styles = window.getComputedStyle(headlinePreviewElement);
+ expect(styles.left).toBe("5em");
+ });
-// it("should change headline vertical position", () => {
-// render();
-// const rangeElement = screen.getByTitle(
-// /Headline Vertical Position/i
-// ) as HTMLInputElement;
-// fireEvent.change(rangeElement, { target: { value: "5" } });
-// const headlinePreviewElement = screen.getByTestId(/canvasHeadlineTitle/i);
-// const styles = window.getComputedStyle(headlinePreviewElement);
-// expect(styles.top).toBe("5em");
-// });
-// });
+ it("should change headline vertical position", () => {
+ render();
+ const rangeElement = screen.getByTitle(
+ /Headline Vertical Position/i
+ ) as HTMLInputElement;
+ fireEvent.change(rangeElement, { target: { value: "5" } });
+ const headlinePreviewElement = screen.getByTestId(/canvasHeadlineTitle/i);
+ const styles = window.getComputedStyle(headlinePreviewElement);
+ expect(styles.top).toBe("5em");
+ });
+ });
-// describe("CanvasBorder integrated tests", () => {
-// it("should change border width", () => {
-// render();
-// const rangeElement = screen.getByTitle(
-// /Border Width/i
-// ) as HTMLInputElement;
-// fireEvent.change(rangeElement, { target: { value: "5" } });
-// const canvasPreviewWrapper = screen.getByTestId(/canvasPreviewWrapper/i);
-// const styles = window.getComputedStyle(canvasPreviewWrapper);
-// expect(styles.borderWidth).toBe("5em");Check compatibility of third-party libraries and packages used and update them accordingly to work with React 19
+ describe("CanvasBorder integrated tests", () => {
+ it("should change border width", () => {
+ render();
+ const rangeElement = screen.getByTitle(
+ /Border Width/i
+ ) as HTMLInputElement;
+ fireEvent.change(rangeElement, { target: { value: "5" } });
+ const canvasPreviewWrapper = screen.getByTestId(/canvasPreviewWrapper/i);
+ const styles = window.getComputedStyle(canvasPreviewWrapper);
+ expect(styles.borderWidth).toBe("5em");
+ });
+ });
-// });
-// });
+ describe("KeitaroLogo integrated tests", () => {
+ it("should change logo horizontal position", () => {
+ render();
+ const rangeElement = screen.getByTitle(
+ /Logo Horizontal Position/i
+ ) as HTMLInputElement;
+ fireEvent.change(rangeElement, { target: { value: "5" } });
+ const logoPreviewElement = screen.getByTestId(/canvasLogoPreview/i);
+ const styles = window.getComputedStyle(logoPreviewElement);
+ expect(styles.left).toBe("5em");
+ });
-// describe("KeitaroLogo integrated tests", () => {
-// it("should change logo horizontal position", () => {
-// render();
-// const rangeElement = screen.getByTitle(
-// /Logo Horizontal Position/i
-// ) as HTMLInputElement;
-// fireEvent.change(rangeElement, { target: { value: "5" } });
-// const logoPreviewElement = screen.getByTestId(/canvasLogoPreview/i);
-// const styles = window.getComputedStyle(logoPreviewElement);
-// expect(styles.left).toBe("5em");
-// });
-
-// it("should change logo vertical position", () => {
-// render();
-// const rangeElement = screen.getByTitle(
-// /Logo Vertical Position/i
-// ) as HTMLInputElement;
-// fireEvent.change(rangeElement, { target: { value: "5" } });
-// const logoPreviewElement = screen.getByTestId(/canvasLogoPreview/i);
-// const styles = window.getComputedStyle(logoPreviewElement);
-// expect(styles.bottom).toBe("5em");
-// });
-// });
-// });
+ it("should change logo vertical position", () => {
+ render();
+ const rangeElement = screen.getByTitle(
+ /Logo Vertical Position/i
+ ) as HTMLInputElement;
+ fireEvent.change(rangeElement, { target: { value: "5" } });
+ const logoPreviewElement = screen.getByTestId(/canvasLogoPreview/i);
+ const styles = window.getComputedStyle(logoPreviewElement);
+ expect(styles.bottom).toBe("5em");
+ });
+ });
+});
diff --git a/src/components/__tests__/CanvasGradient.test.tsx b/src/components/__tests__/CanvasGradient.test.tsx
index a3ceea9..9d4ae96 100644
--- a/src/components/__tests__/CanvasGradient.test.tsx
+++ b/src/components/__tests__/CanvasGradient.test.tsx
@@ -1,119 +1,119 @@
-// import { render, screen, fireEvent } from "@testing-library/react";
-// import "@testing-library/jest-dom";
-// import { CanvasGradient } from "../CanvasGradient/CanvasGradient";
-// import { CanvasPreviewContextProvider } from "../../contexts/CanvasPreviewContext";
+import { render, screen, fireEvent } from "@testing-library/react";
+import "@testing-library/jest-dom";
+import { CanvasGradient } from "../CanvasGradient/CanvasGradient";
+import { CanvasPreviewContextProvider } from "../../contexts/CanvasPreviewContext";
-// const MockCanvasGradient = () => {
-// return (
-//
-//
-//
-// );
-// };
+const MockCanvasGradient = () => {
+ return (
+
+
+
+ );
+};
-// const addGradient = (numberOfGradients: number) => {
-// const buttonElement = screen.getByTestId(/addGradient/i) as HTMLButtonElement;
-// for (let i = 1; i <= numberOfGradients; i++) {
-// fireEvent.click(buttonElement);
-// }
-// };
+const addGradient = (numberOfGradients: number) => {
+ const buttonElement = screen.getByTestId(/addGradient/i) as HTMLButtonElement;
+ for (let i = 1; i <= numberOfGradients; i++) {
+ fireEvent.click(buttonElement);
+ }
+};
-// describe("CanvasGradient.tsx tests", () => {
-// it("should renderder AddGradient button", () => {
-// render();
-// const buttonElement = screen.getByTestId(
-// /addGradient/i
-// ) as HTMLButtonElement;
-// expect(buttonElement).toBeInTheDocument();
-// });
+describe("CanvasGradient.tsx tests", () => {
+ it("should renderder AddGradient button", () => {
+ render();
+ const buttonElement = screen.getByTestId(
+ /addGradient/i
+ ) as HTMLButtonElement;
+ expect(buttonElement).toBeInTheDocument();
+ });
-// it("should add or delete gradient option on button click", () => {
-// render();
-// addGradient(3);
-// const gradientOptionElements = screen.getAllByTestId(
-// /canvasGradientOption/i
-// ) as HTMLDivElement[];
-// expect(gradientOptionElements).toHaveLength(3);
-// const deleteButtonElement = screen.getAllByTestId(
-// /delete-gradient-option/i
-// ) as HTMLButtonElement[];
-// fireEvent.click(deleteButtonElement[0]);
-// expect(screen.getAllByTestId(/canvasGradientOption/i)).toHaveLength(2);
-// });
+ it("should add or delete gradient option on button click", () => {
+ render();
+ addGradient(3);
+ const gradientOptionElements = screen.getAllByTestId(
+ /canvasGradientOption/i
+ ) as HTMLDivElement[];
+ expect(gradientOptionElements).toHaveLength(3);
+ const deleteButtonElement = screen.getAllByTestId(
+ /delete-gradient-option/i
+ ) as HTMLButtonElement[];
+ fireEvent.click(deleteButtonElement[0]);
+ expect(screen.getAllByTestId(/canvasGradientOption/i)).toHaveLength(2);
+ });
-// it("should be able to select gradient type", () => {
-// render();
-// addGradient(2);
-// const selectElements = screen.getAllByTitle(
-// /Gradient Options/i
-// ) as HTMLInputElement[];
-// selectElements.forEach((element) => {
-// fireEvent.change(element, { target: { value: "linear-gradient" } });
-// expect(element.value).toBe("linear-gradient");
-// });
-// });
+ it("should be able to select gradient type", () => {
+ render();
+ addGradient(2);
+ const selectElements = screen.getAllByTitle(
+ /Gradient Options/i
+ ) as HTMLInputElement[];
+ selectElements.forEach((element) => {
+ fireEvent.change(element, { target: { value: "linear-gradient" } });
+ expect(element.value).toBe("linear-gradient");
+ });
+ });
-// it("should be able to select blending mode", () => {
-// render();
-// addGradient(2);
-// const selectElements = screen.getAllByTitle(
-// /BlendingMode/i
-// ) as HTMLInputElement[];
-// selectElements.forEach((element) => {
-// fireEvent.change(element, { target: { value: "luminosity" } });
-// expect(element.value).toBe("luminosity");
-// });
-// });
+ it("should be able to select blending mode", () => {
+ render();
+ addGradient(2);
+ const selectElements = screen.getAllByTitle(
+ /BlendingMode/i
+ ) as HTMLInputElement[];
+ selectElements.forEach((element) => {
+ fireEvent.change(element, { target: { value: "luminosity" } });
+ expect(element.value).toBe("luminosity");
+ });
+ });
-// it("should render start color pick input and change its value", () => {
-// render();
-// addGradient(2);
-// const gradientOptionElements = screen.getAllByTestId(
-// /gradientStartColorType/i
-// ) as HTMLInputElement[];
-// expect(gradientOptionElements).toHaveLength(2);
-// gradientOptionElements.forEach((element) => {
-// fireEvent.change(element, { target: { value: "#ffffff" } });
-// expect(element.value).toBe("#ffffff");
-// });
-// });
+ it("should render start color pick input and change its value", () => {
+ render();
+ addGradient(2);
+ const gradientOptionElements = screen.getAllByTestId(
+ /gradientStartColorType/i
+ ) as HTMLInputElement[];
+ expect(gradientOptionElements).toHaveLength(2);
+ gradientOptionElements.forEach((element) => {
+ fireEvent.change(element, { target: { value: "#ffffff" } });
+ expect(element.value).toBe("#ffffff");
+ });
+ });
-// it("should render end color pick input and change its value", () => {
-// render();
-// addGradient(2);
-// const gradientOptionElements = screen.getAllByTestId(
-// /gradientEndColorType/i
-// ) as HTMLInputElement[];
-// expect(gradientOptionElements).toHaveLength(2);
-// gradientOptionElements.forEach((element) => {
-// fireEvent.change(element, { target: { value: "#000000" } });
-// expect(element.value).toBe("#000000");
-// });
-// });
+ it("should render end color pick input and change its value", () => {
+ render();
+ addGradient(2);
+ const gradientOptionElements = screen.getAllByTestId(
+ /gradientEndColorType/i
+ ) as HTMLInputElement[];
+ expect(gradientOptionElements).toHaveLength(2);
+ gradientOptionElements.forEach((element) => {
+ fireEvent.change(element, { target: { value: "#000000" } });
+ expect(element.value).toBe("#000000");
+ });
+ });
-// it("should render start color percentage input and change its value", () => {
-// render();
-// addGradient(2);
-// const gradientOptionElements = screen.getAllByTestId(
-// /gradientStartColorPercentage/i
-// ) as HTMLInputElement[];
-// expect(gradientOptionElements).toHaveLength(2);
-// gradientOptionElements.forEach((element) => {
-// fireEvent.change(element, { target: { value: "20" } });
-// expect(element.value).toBe("20");
-// });
-// });
+ it("should render start color percentage input and change its value", () => {
+ render();
+ addGradient(2);
+ const gradientOptionElements = screen.getAllByTestId(
+ /gradientStartColorPercentage/i
+ ) as HTMLInputElement[];
+ expect(gradientOptionElements).toHaveLength(2);
+ gradientOptionElements.forEach((element) => {
+ fireEvent.change(element, { target: { value: "20" } });
+ expect(element.value).toBe("20");
+ });
+ });
-// it("should render end color percentage input and change its value", () => {
-// render();
-// addGradient(2);
-// const gradientOptionElements = screen.getAllByTestId(
-// /gradientEndColorPercentage/i
-// ) as HTMLInputElement[];
-// expect(gradientOptionElements).toHaveLength(2);
-// gradientOptionElements.forEach((element) => {
-// fireEvent.change(element, { target: { value: "20" } });
-// expect(element.value).toBe("20");
-// });
-// });
-// });
+ it("should render end color percentage input and change its value", () => {
+ render();
+ addGradient(2);
+ const gradientOptionElements = screen.getAllByTestId(
+ /gradientEndColorPercentage/i
+ ) as HTMLInputElement[];
+ expect(gradientOptionElements).toHaveLength(2);
+ gradientOptionElements.forEach((element) => {
+ fireEvent.change(element, { target: { value: "20" } });
+ expect(element.value).toBe("20");
+ });
+ });
+});
diff --git a/src/components/__tests__/CanvasHeadline.test.tsx b/src/components/__tests__/CanvasHeadline.test.tsx
index af940b3..4d6ed4a 100644
--- a/src/components/__tests__/CanvasHeadline.test.tsx
+++ b/src/components/__tests__/CanvasHeadline.test.tsx
@@ -1,21 +1,21 @@
-// import { render, screen, fireEvent } from "@testing-library/react";
-// import "@testing-library/jest-dom";
-// import { CanvasHeadline } from "../CanvasHeadline/CanvasHeadline";
-// import { CanvasPreviewContextProvider } from "../../contexts/CanvasPreviewContext";
+import { render, screen, fireEvent } from "@testing-library/react";
+import "@testing-library/jest-dom";
+import { CanvasHeadline } from "../CanvasHeadline/CanvasHeadline";
+import { CanvasPreviewContextProvider } from "../../contexts/CanvasPreviewContext";
-// describe("CanvasHeadlines.tsx tests", () => {
-// it("should be able to type into textarea input element", () => {
-// render(
-//
-//
-//
-// );
-// const textAreaElement = screen.getByPlaceholderText(
-// /Enter headline text here/i
-// ) as HTMLInputElement;
-// fireEvent.change(textAreaElement, {
-// target: { value: "Text for the headline component" },
-// });
-// expect(textAreaElement.value).toBe("Text for the headline component");
-// });
-// });
+describe("CanvasHeadlines.tsx tests", () => {
+ it("should be able to type into textarea input element", () => {
+ render(
+
+
+
+ );
+ const textAreaElement = screen.getByPlaceholderText(
+ /Enter headline text here/i
+ ) as HTMLInputElement;
+ fireEvent.change(textAreaElement, {
+ target: { value: "Text for the headline component" },
+ });
+ expect(textAreaElement.value).toBe("Text for the headline component");
+ });
+});
diff --git a/src/components/__tests__/CanvasLogo.test.tsx b/src/components/__tests__/CanvasLogo.test.tsx
index 0099bdf..0a096dd 100644
--- a/src/components/__tests__/CanvasLogo.test.tsx
+++ b/src/components/__tests__/CanvasLogo.test.tsx
@@ -1,36 +1,36 @@
-// import { render, screen, fireEvent } from "@testing-library/react";
-// import "@testing-library/jest-dom";
-// import { CanvasPreviewContextProvider } from "../../contexts/CanvasPreviewContext";
-// import { CanvasLogo } from "../CanvasLogo/CanvasLogo";
+import { render, screen, fireEvent } from "@testing-library/react";
+import "@testing-library/jest-dom";
+import { CanvasPreviewContextProvider } from "../../contexts/CanvasPreviewContext";
+import { CanvasLogo } from "../CanvasLogo/CanvasLogo";
-// const MockCanvasLogo = () => {
-// return (
-//
-//
-//
-// );
-// };
+const MockCanvasLogo = () => {
+ return (
+
+
+
+ );
+};
-// describe("CanvasLogo.tsx tests", () => {
-// it("should be able to set logo title", () => {
-// render();
-// const textAreaElement = screen.getByPlaceholderText(
-// /Leave a comment here/i
-// ) as HTMLInputElement;
-// fireEvent.change(textAreaElement, {
-// target: { value: "Text for the logo title" },
-// });
-// expect(textAreaElement.value).toBe("Text for the logo title");
-// });
+describe("CanvasLogo.tsx tests", () => {
+ it("should be able to set logo title", () => {
+ render();
+ const textAreaElement = screen.getByPlaceholderText(
+ /Leave a comment here/i
+ ) as HTMLInputElement;
+ fireEvent.change(textAreaElement, {
+ target: { value: "Text for the logo title" },
+ });
+ expect(textAreaElement.value).toBe("Text for the logo title");
+ });
-// it("should be able to select logo type", () => {
-// render();
-// const selectElement = screen.getByTitle(
-// /Canvas Logo Options/i
-// ) as HTMLInputElement;
-// fireEvent.change(selectElement, {
-// target: { value: "KeitaroFullColorLogo" },
-// });
-// expect(selectElement.value).toBe("KeitaroFullColorLogo");
-// });
-// });
+ it("should be able to select logo type", () => {
+ render();
+ const selectElement = screen.getByTitle(
+ /Canvas Logo Options/i
+ ) as HTMLInputElement;
+ fireEvent.change(selectElement, {
+ target: { value: "KeitaroFullColorLogo" },
+ });
+ expect(selectElement.value).toBe("KeitaroFullColorLogo");
+ });
+});
diff --git a/src/components/__tests__/ColorPicker.test.tsx b/src/components/__tests__/ColorPicker.test.tsx
index cd9b275..f068fc5 100644
--- a/src/components/__tests__/ColorPicker.test.tsx
+++ b/src/components/__tests__/ColorPicker.test.tsx
@@ -1,27 +1,27 @@
-// import { render, screen, fireEvent } from "@testing-library/react";
-// import "@testing-library/jest-dom";
-// import { ColorPicker } from "../ColorPicker/ColorPicker";
+import { render, screen, fireEvent } from "@testing-library/react";
+import "@testing-library/jest-dom";
+import { ColorPicker } from "../ColorPicker/ColorPicker";
-// describe("ColorPicker.tsx tests", () => {
-// it("should render a range input", () => {
-// render();
-// expect(
-// screen.getByTestId(/colorPicker/i) as HTMLInputElement
-// ).toBeInTheDocument();
-// });
+describe("ColorPicker.tsx tests", () => {
+ it("should render a range input", () => {
+ render();
+ expect(
+ screen.getByTestId(/colorPicker/i) as HTMLInputElement
+ ).toBeInTheDocument();
+ });
-// it("should be able to change the color", () => {
-// let value = "#000000";
-// const onChange = jest.fn((event) => {
-// value = event.target.value;
-// });
+ it("should be able to change the color", () => {
+ let value = "#000000";
+ const onChange = jest.fn((event) => {
+ value = event.target.value;
+ });
-// render();
+ render();
-// const colorPickerElement = screen.getByTestId(
-// /colorPicker/i
-// ) as HTMLInputElement;
-// fireEvent.change(colorPickerElement, { target: { value: "#ffffff" } });
-// expect(value).toBe("#ffffff");
-// });
-// });
+ const colorPickerElement = screen.getByTestId(
+ /colorPicker/i
+ ) as HTMLInputElement;
+ fireEvent.change(colorPickerElement, { target: { value: "#ffffff" } });
+ expect(value).toBe("#ffffff");
+ });
+});
diff --git a/src/components/__tests__/RangeControl.test.tsx b/src/components/__tests__/RangeControl.test.tsx
index a99e387..2048187 100644
--- a/src/components/__tests__/RangeControl.test.tsx
+++ b/src/components/__tests__/RangeControl.test.tsx
@@ -1,57 +1,57 @@
-// import { render, screen, fireEvent } from "@testing-library/react";
-// import "@testing-library/jest-dom";
-// import { RangeControl } from "../RangeControl/RangeControl";
+import { render, screen, fireEvent } from "@testing-library/react";
+import "@testing-library/jest-dom";
+import { RangeControl } from "../RangeControl/RangeControl";
-// describe("RangeControl.tsx tests", () => {
-// it("should render a range input", () => {
-// render(
-//
-// );
-// expect(
-// screen.getByTestId(/rangeSliderInput/i) as HTMLInputElement
-// ).toBeInTheDocument();
-// });
+describe("RangeControl.tsx tests", () => {
+ it("should render a range input", () => {
+ render(
+
+ );
+ expect(
+ screen.getByTestId(/rangeSliderInput/i) as HTMLInputElement
+ ).toBeInTheDocument();
+ });
-// it("should be able to change the range value", () => {
-// let value = 50;
-// const onChange = jest.fn((event) => {
-// value = Number(event.target.value);
-// });
+ it("should be able to change the range value", () => {
+ let value = 50;
+ const onChange = jest.fn((event) => {
+ value = Number(event.target.value);
+ });
-// render(
-//
-// );
-// const rangeElement = screen.getByTestId(
-// /rangeSliderInput/i
-// ) as HTMLInputElement;
-// fireEvent.click(rangeElement);
-// fireEvent.change(rangeElement, { target: { value: "7" } });
-// expect(value).toBe(7);
-// });
-// });
+ render(
+
+ );
+ const rangeElement = screen.getByTestId(
+ /rangeSliderInput/i
+ ) as HTMLInputElement;
+ fireEvent.click(rangeElement);
+ fireEvent.change(rangeElement, { target: { value: "7" } });
+ expect(value).toBe(7);
+ });
+});
diff --git a/src/components/__tests__/SideBar.test.tsx b/src/components/__tests__/SideBar.test.tsx
index d021da6..ae91e13 100644
--- a/src/components/__tests__/SideBar.test.tsx
+++ b/src/components/__tests__/SideBar.test.tsx
@@ -1,44 +1,44 @@
-// import { render, screen } from "@testing-library/react";
-// import "@testing-library/jest-dom";
-// import { SideBar } from "../SideBar/SideBar";
-// import { CanvasPreviewContextProvider } from "../../contexts/CanvasPreviewContext";
+import { render, screen } from "@testing-library/react";
+import "@testing-library/jest-dom";
+import { SideBar } from "../SideBar/SideBar";
+import { CanvasPreviewContextProvider } from "../../contexts/CanvasPreviewContext";
-// const MockSideBar = () => {
-// return (
-//
-//
-//
-// );
-// };
+const MockSideBar = () => {
+ return (
+
+
+
+ );
+};
-// describe("SideBar.tsx tests", () => {
-// it("should render a component with test-id canvasHeadline", () => {
-// render();
-// expect(screen.getByTestId("canvasHeadline")).toBeInTheDocument();
-// });
+describe("SideBar.tsx tests", () => {
+ it("should render a component with test-id canvasHeadline", () => {
+ render();
+ expect(screen.getByTestId("canvasHeadline")).toBeInTheDocument();
+ });
-// it("should render a component with test-id canvasLogo", () => {
-// render();
-// expect(screen.getByTestId("canvasLogo")).toBeInTheDocument();
-// });
+ it("should render a component with test-id canvasLogo", () => {
+ render();
+ expect(screen.getByTestId("canvasLogo")).toBeInTheDocument();
+ });
-// it("should render a component with test-id canvasBackground", () => {
-// render();
-// expect(screen.getByTestId("canvasBackground")).toBeInTheDocument();
-// });
+ it("should render a component with test-id canvasBackground", () => {
+ render();
+ expect(screen.getByTestId("canvasBackground")).toBeInTheDocument();
+ });
-// it("should render a component with test-id canvasIcon", () => {
-// render();
-// expect(screen.getByTestId("canvasIcon")).toBeInTheDocument();
-// });
+ it("should render a component with test-id canvasIcon", () => {
+ render();
+ expect(screen.getByTestId("canvasIcon")).toBeInTheDocument();
+ });
-// it("should render a component with test-id canvasBorder", () => {
-// render();
-// expect(screen.getByTestId("canvasBorder")).toBeInTheDocument();
-// });
+ it("should render a component with test-id canvasBorder", () => {
+ render();
+ expect(screen.getByTestId("canvasBorder")).toBeInTheDocument();
+ });
-// it("should render an element with alt text Keitaro Logo", () => {
-// render();
-// expect(screen.getByAltText("Keitaro Logo")).toBeInTheDocument();
-// });
-// });
+ it("should render an element with alt text Keitaro Logo", () => {
+ render();
+ expect(screen.getByAltText("Keitaro Logo")).toBeInTheDocument();
+ });
+});
diff --git a/src/index.tsx b/src/index.tsx
new file mode 100644
index 0000000..f1ad965
--- /dev/null
+++ b/src/index.tsx
@@ -0,0 +1,18 @@
+import React from "react";
+import ReactDOM from "react-dom/client";
+import { App } from "./App";
+import reportWebVitals from "./reportWebVitals";
+
+const root = ReactDOM.createRoot(
+ document.getElementById("root") as HTMLElement
+);
+root.render(
+
+
+
+);
+
+// If you want to start measuring performance in your app, pass a function
+// to log results (for example: reportWebVitals(console.log))
+// or send to an analytics endpoint. Learn more: https://bit.ly/CRA-vitals
+reportWebVitals();
diff --git a/src/main.jsx b/src/main.jsx
deleted file mode 100644
index 1d4cb85..0000000
--- a/src/main.jsx
+++ /dev/null
@@ -1,10 +0,0 @@
-import React from "react";
-import ReactDOM from "react-dom/client";
-import { App } from "./App.tsx";
-import "bootstrap-icons/font/bootstrap-icons.css";
-
-ReactDOM.createRoot(document.getElementById("root")).render(
-
-
- ,
-);
diff --git a/src/react-app-env.d.ts b/src/react-app-env.d.ts
index 929d2e1..6431bc5 100644
--- a/src/react-app-env.d.ts
+++ b/src/react-app-env.d.ts
@@ -1,7 +1 @@
-declare module "*.png";
-declare module "*.svg";
-declare module "*.jpeg";
-declare module "*.jpg";
-
-/// The experimental types should be removed when react 19 is officialy out
-///
+///
diff --git a/src/reportWebVitals.ts b/src/reportWebVitals.ts
new file mode 100644
index 0000000..5fa3583
--- /dev/null
+++ b/src/reportWebVitals.ts
@@ -0,0 +1,15 @@
+import { ReportHandler } from "web-vitals";
+
+const reportWebVitals = (onPerfEntry?: ReportHandler) => {
+ if (onPerfEntry && onPerfEntry instanceof Function) {
+ import("web-vitals").then(({ getCLS, getFID, getFCP, getLCP, getTTFB }) => {
+ getCLS(onPerfEntry);
+ getFID(onPerfEntry);
+ getFCP(onPerfEntry);
+ getLCP(onPerfEntry);
+ getTTFB(onPerfEntry);
+ });
+ }
+};
+
+export default reportWebVitals;
diff --git a/vite.config.js b/vite.config.js
deleted file mode 100644
index a64146a..0000000
--- a/vite.config.js
+++ /dev/null
@@ -1,17 +0,0 @@
-import { defineConfig } from "vite";
-import react from "@vitejs/plugin-react";
-
-// https://vitejs.dev/config/
-const ReactCompilerConfig = {
- /* ... */
-};
-
-export default defineConfig({
- plugins: [
- react({
- babel: {
- plugins: [["babel-plugin-react-compiler", ReactCompilerConfig]],
- },
- }),
- ],
-});