@griddo/ax 1.67.10 → 1.68.2

package/src/__tests__/components/Fields/Select/Select.test.tsx

@@ -0,0 +1,75 @@
+import * as React from "react";
+import Select from "@ax/components/Fields/Select";
+import { ThemeProvider } from "styled-components";
+import { parseTheme } from "@griddo/core";
+import globalTheme from "@ax/themes/theme.json";
+import { render, screen, cleanup } from "@testing-library/react";
+import { mock } from "jest-mock-extended";
+
+afterEach(cleanup);
+
+const defaultProps = mock<ISelectProps>();
+defaultProps.name = "test name";
+defaultProps.options = [
+  {
+    value: "first value",
+    label: "first label",
+  },
+];
+
+describe("Select component rendering", () => {
+  test("should render the component", () => {
+    render(
+      <ThemeProvider theme={parseTheme(globalTheme)}>
+        <Select {...defaultProps} />
+      </ThemeProvider>
+    );
+    expect(screen.getByTestId("selectComponent")).toBeTruthy();
+  });
+
+  test("should render the component with value selected", () => {
+    defaultProps.value = "first value";
+    defaultProps.type = "inline";
+
+    render(
+      <ThemeProvider theme={parseTheme(globalTheme)}>
+        <Select {...defaultProps} />
+      </ThemeProvider>
+    );
+    expect(screen.getByDisplayValue("first value")).toBeTruthy();
+  });
+
+  test("should render the component with error class", async () => {
+    defaultProps.value = "first value";
+    defaultProps.error = true;
+
+    const { container } = render(
+      <ThemeProvider theme={parseTheme(globalTheme)}>
+        <Select {...defaultProps} />
+      </ThemeProvider>
+    );
+
+    const errors = container.getElementsByClassName("react-select-error");
+    expect(errors.length).toBe(1);
+  });
+});
+
+interface ISelectProps {
+  name: string;
+  value: string;
+  options: IOptionProps[];
+  error?: boolean;
+  disabled?: boolean;
+  defaultValue?: IOptionProps;
+  placeholder?: string;
+  isMulti?: boolean;
+  type?: string;
+  mandatory?: boolean;
+  alignRight?: boolean;
+  onChange: (value: string) => void;
+}
+
+interface IOptionProps {
+  value: string;
+  label: string;
+}

package/src/__tests__/components/Fields/SliderField/SliderField.test.tsx

@@ -0,0 +1,82 @@
+import * as React from "react";
+import SliderField from "@ax/components/Fields/SliderField";
+import { ThemeProvider } from "styled-components";
+import { parseTheme } from "@griddo/core";
+import globalTheme from "@ax/themes/theme.json";
+import { render, screen, cleanup, fireEvent } from "@testing-library/react";
+import { mock } from "jest-mock-extended";
+
+afterEach(cleanup);
+
+const defaultProps = mock<ITextFieldProps>();
+
+describe("Select component rendering", () => {
+  test("should render the component with no prefix and suffix", () => {
+    defaultProps.title = "A title";
+    defaultProps.value = 10;
+    defaultProps.step = 1;
+    const onChangeMock = defaultProps.onChange as jest.MockedFunction<(value: number) => void>;
+
+    render(
+      <ThemeProvider theme={parseTheme(globalTheme)}>
+        <SliderField {...defaultProps} />
+      </ThemeProvider>
+    );
+
+    expect(screen.getByTestId("sliderComponent")).toBeTruthy();
+    expect(screen.getByTestId("bubbleComponent")).toBeTruthy();
+    expect(screen.getByTestId("inputComponent")).toBeTruthy();
+  });
+
+  test("should render the component with prefix and suffix", () => {
+    defaultProps.title = "A title";
+    // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+    // @ts-ignore
+    defaultProps.value = undefined;
+    defaultProps.step = 1;
+    defaultProps.prefix = "prefix";
+    defaultProps.suffix = "suffix";
+    const onChangeMock = defaultProps.onChange as jest.MockedFunction<(value: number) => void>;
+
+    render(
+      <ThemeProvider theme={parseTheme(globalTheme)}>
+        <SliderField {...defaultProps} />
+      </ThemeProvider>
+    );
+
+    expect(screen.findByText("prefix")).toBeTruthy();
+    expect(screen.findByText("suffix")).toBeTruthy();
+  });
+});
+
+describe("Select component events trigger", () => {
+  test("should trigger the handleChange", () => {
+    defaultProps.title = "A title";
+    defaultProps.value = 10;
+    defaultProps.step = 1;
+    const onChangeMock = defaultProps.onChange as jest.MockedFunction<(value: number) => void>;
+
+    render(
+      <ThemeProvider theme={parseTheme(globalTheme)}>
+        <SliderField {...defaultProps} />
+      </ThemeProvider>
+    );
+
+    const input = screen.getByTestId("inputComponent");
+    fireEvent.change(input, { target: { value: "20" } });
+    expect(onChangeMock).toBeCalledWith(20);
+  });
+});
+
+interface ITextFieldProps {
+  title: string;
+  value: number;
+  defaultValue?: number;
+  min: number;
+  max: number;
+  step: number;
+  prefix?: string;
+  suffix?: string;
+  helptext?: string;
+  onChange: (value: number) => void;
+}

package/src/__tests__/{TagField.test.tsx → components/Fields/TagField/TagField.test.tsx}

@@ -1,8 +1,8 @@
 import * as React from "react";
-import TagField from "../components/Fields/TagField/index";
+import TagField from "@ax/components/Fields/TagField";
 import { ThemeProvider } from "styled-components";
 import { parseTheme } from "@griddo/core";
-import globalTheme from "../themes/theme.json";
+import globalTheme from "@ax/themes/theme.json";
 import { render, screen, within, cleanup, fireEvent } from "@testing-library/react";
 
 afterEach(cleanup);

package/src/__tests__/{TextArea.test.tsx → components/Fields/TextArea/TextArea.test.tsx}

@@ -1,8 +1,8 @@
 import React from "react";
-import TextArea from "../components/Fields/TextArea/index";
+import TextArea from "@ax/components/Fields/TextArea";
 import { ThemeProvider } from "styled-components";
 import { parseTheme } from "@griddo/core";
-import globalTheme from "../themes/theme.json";
+import globalTheme from "@ax/themes/theme.json";
 import { render, screen, cleanup, fireEvent } from "@testing-library/react";
 
 afterEach(cleanup);

package/src/__tests__/{TextField.test.tsx → components/Fields/TextField/TextField.test.tsx}

@@ -1,8 +1,8 @@
 import * as React from "react";
-import TextField from "../components/Fields/TextField/index";
+import TextField from "@ax/components/Fields/TextField";
 import { ThemeProvider } from "styled-components";
 import { parseTheme } from "@griddo/core";
-import globalTheme from "../themes/theme.json";
+import globalTheme from "@ax/themes/theme.json";
 import { render, screen, within, cleanup, fireEvent } from "@testing-library/react";
 
 afterEach(cleanup);

package/src/__tests__/components/Fields/ToggleField/ToggleField.test.tsx

@@ -0,0 +1,100 @@
+import * as React from "react";
+import ToggleField from "@ax/components/Fields/ToggleField";
+import { ThemeProvider } from "styled-components";
+import { parseTheme } from "@griddo/core";
+import globalTheme from "@ax/themes/theme.json";
+import { render, screen, cleanup, fireEvent } from "@testing-library/react";
+import { mock } from "jest-mock-extended";
+
+afterEach(cleanup);
+
+const defaultProps = mock<IToggleFieldProps>();
+
+describe("ToggleField component rendering", () => {
+  it("should render the component", () => {
+    render(
+      <ThemeProvider theme={parseTheme(globalTheme)}>
+        <ToggleField {...defaultProps} />
+      </ThemeProvider>
+    );
+
+    const toggleFieldWrapper = screen.getByTestId("toggle-field-wrapper");
+    expect(toggleFieldWrapper).toBeTruthy();
+  });
+
+  it("should render input as checked", () => {
+    defaultProps.checked = true;
+
+    render(
+      <ThemeProvider theme={parseTheme(globalTheme)}>
+        <ToggleField {...defaultProps} />
+      </ThemeProvider>
+    );
+
+    const toggleFieldInput = screen.getByTestId<HTMLInputElement>("toggle-field-input");
+    expect(toggleFieldInput.checked).toEqual(true);
+  });
+
+  it("should render input as disabled", () => {
+    defaultProps.disabled = true;
+
+    render(
+      <ThemeProvider theme={parseTheme(globalTheme)}>
+        <ToggleField {...defaultProps} />
+      </ThemeProvider>
+    );
+
+    const toggleFieldInput = screen.getByTestId<HTMLInputElement>("toggle-field-input");
+    expect(toggleFieldInput.disabled).toEqual(true);
+  });
+
+  it("should render input with name", () => {
+    defaultProps.name = "This is the name";
+
+    render(
+      <ThemeProvider theme={parseTheme(globalTheme)}>
+        <ToggleField {...defaultProps} />
+      </ThemeProvider>
+    );
+
+    const toggleFieldInput = screen.getByTestId<HTMLInputElement>("toggle-field-input");
+    expect(toggleFieldInput.name).toEqual("This is the name");
+  });
+});
+
+describe("onClick events", () => {
+  it("should call onChange function with value true", () => {
+    defaultProps.checked = false;
+    defaultProps.onChange = jest.fn();
+
+    render(
+      <ThemeProvider theme={parseTheme(globalTheme)}>
+        <ToggleField {...defaultProps} />
+      </ThemeProvider>
+    );
+
+    const toggleFieldInput = screen.getByTestId("toggle-field-input");
+    fireEvent.click(toggleFieldInput);
+    expect(defaultProps.onChange).toHaveBeenCalledWith(true);
+  });
+
+  it("should not call onChange function", () => {
+    render(
+      <ThemeProvider theme={parseTheme(globalTheme)}>
+        <ToggleField {...defaultProps} onChange={undefined} />
+      </ThemeProvider>
+    );
+
+    const toggleFieldInput = screen.getByTestId("toggle-field-input");
+    fireEvent.click(toggleFieldInput);
+    expect(defaultProps.onChange).not.toHaveBeenCalled();
+  });
+});
+
+interface IToggleFieldProps {
+  name: string;
+  value: any;
+  checked?: boolean;
+  disabled?: boolean;
+  onChange?: (value: boolean) => void;
+}

package/src/__tests__/{UniqueCheck.test.tsx → components/Fields/UniqueCheck/UniqueCheck.test.tsx}

@@ -1,8 +1,8 @@
 import React from "react";
-import UniqueCheck from "../components/Fields/UniqueCheck/index";
+import UniqueCheck from "@ax/components/Fields/UniqueCheck";
 import { ThemeProvider } from "styled-components";
 import { parseTheme } from "@griddo/core";
-import globalTheme from "../themes/theme.json";
+import globalTheme from "@ax/themes/theme.json";
 import "@testing-library/jest-dom";
 import { render, screen, cleanup } from "@testing-library/react";