feat(react): add vitest (#1017)

Co-authored-by: Daniel Leroux <daniel.leroux@siemens.com>

packages/react/__mocks__/file-mock.js

@@ -0,0 +1,11 @@
+/*
+ * SPDX-FileCopyrightText: 2023 Siemens AG
+ *
+ * SPDX-License-Identifier: MIT
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+/* eslint-disable no-undef */
+module.exports = 'test-file-stub';

packages/react/package.json

@@ -22,34 +22,44 @@
     "clean": "rimraf dist && rimraf dist-transpiled",
     "compile": "rollup -c",
     "tsc": "tsc -p .",
-    "lint": "eslint src"
+    "lint": "eslint src",
+    "test": "vitest run",
+    "test:watch": "vitest"
   },
   "author": "",
   "license": "MIT",
   "devDependencies": {
     "@rollup/plugin-typescript": "^8.4.0",
     "@siemens/ix": "~2.1.0",
+    "@testing-library/jest-dom": "^5.16.5",
+    "@testing-library/react": "^13.4.0",
     "@types/estree": "~0.0.51",
     "@types/react": "~18.0.15",
     "@types/react-dom": "~18.0.6",
     "@typescript-eslint/eslint-plugin": "^5.45.0",
     "@typescript-eslint/parser": "^5.45.0",
+    "babel-jest": "^29.7.0",
     "eslint-config-ix": "*",
     "eslint-plugin-react": "^7.31.11",
+    "identity-obj-proxy": "^3.0.0",
+    "jest": "^29.1.2",
+    "jest-environment-jsdom": "^29.1.2",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
+    "react-hook-form": "~7.48.0",
     "rimraf": "^3.0.2",
     "rollup": "^2.78.1",
     "rollup-plugin-dts": "^4.2.0",
     "rollup-plugin-peer-deps-external": "^2.2.4",
     "rollup-plugin-sourcemaps": "^0.6.3",
     "rollup-plugin-terser": "^7.0.2",
-    "typescript": "^4.5.5"
+    "typescript": "^4.5.5",
+    "vitest": "^1.3.1"
   },
   "peerDependencies": {
+    "@siemens/ix-icons": "^2.0.0",
     "react": ">=17.0.2",
-    "react-dom": ">=17.0.2",
-    "@siemens/ix-icons": "^2.0.0"
+    "react-dom": ">=17.0.2"
   },
   "dependencies": {
     "@siemens/ix": "~2.1.0"

packages/react/src/tests/example/example.spec.tsx

@@ -0,0 +1,21 @@
+/*
+ * SPDX-FileCopyrightText: 2023 Siemens AG
+ *
+ * SPDX-License-Identifier: MIT
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+import { render } from '@testing-library/react';
+import React from 'react';
+import { describe, it } from 'vitest';
+import Content from './example';
+
+describe(`example`, () => {
+  it(`basic`, () => {
+    const { getByText } = render(<Content />);
+
+    const button = getByText('Hallo');
+    button.click();
+  });
+});

packages/react/src/tests/example/example.tsx

@@ -0,0 +1,21 @@
+/*
+ * SPDX-FileCopyrightText: 2023 Siemens AG
+ *
+ * SPDX-License-Identifier: MIT
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+import React from 'react';
+import { IxButton } from '../../components';
+
+const Index = () => {
+  return (
+    <>
+      <IxButton onClick={() => console.log('Hallo')}>Hallo</IxButton>
+    </>
+  );
+};
+
+export default Index;

packages/react/src/tests/setup.js

@@ -0,0 +1,17 @@
+/*
+ * SPDX-FileCopyrightText: 2024 Siemens AG
+ *
+ * SPDX-License-Identifier: MIT
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+import * as matchers from '@testing-library/jest-dom/matchers';
+import { cleanup } from '@testing-library/react';
+import { afterEach, expect } from 'vitest';
+
+expect.extend(matchers);
+
+afterEach(() => {
+  cleanup();
+});

packages/react/src/tests/undefined-error/undefined-error.spec.tsx

@@ -0,0 +1,21 @@
+/*
+ * SPDX-FileCopyrightText: 2023 Siemens AG
+ *
+ * SPDX-License-Identifier: MIT
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+import { render } from '@testing-library/react';
+import React from 'react';
+import { describe, it } from 'vitest';
+import Content from './undefined-error';
+
+describe(`undefined-error`, () => {
+  it(`basic`, () => {
+    const { getByText } = render(<Content />);
+
+    const button = getByText('Open');
+    button.click();
+  });
+});

packages/react/src/tests/undefined-error/undefined-error.tsx

@@ -0,0 +1,36 @@
+/*
+ * SPDX-FileCopyrightText: 2023 Siemens AG
+ *
+ * SPDX-License-Identifier: MIT
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+import React from 'react';
+import {
+  IxButton,
+  IxDivider,
+  IxDropdown,
+  IxDropdownHeader,
+  IxDropdownItem,
+} from '../../components';
+
+const Index = () => {
+  // The following example is one of many ways to potentially trigger an undefined access on the OnListener decorator
+  return (
+    <>
+      <IxButton id="triggerId">Open</IxButton>
+      <IxDropdown trigger="triggerId">
+        <IxDropdownHeader label="Category"></IxDropdownHeader>
+        <IxDropdownItem label="Item 1"></IxDropdownItem>
+        <IxDropdownItem label="Item 2"></IxDropdownItem>
+        <IxDropdownItem label="Item 3"></IxDropdownItem>
+        <IxDivider></IxDivider>
+        <IxDropdownItem label="Extra Item"></IxDropdownItem>
+      </IxDropdown>
+    </>
+  );
+};
+
+export default Index;

packages/react/src/tests/validation-tooltip-null-error/validation-tooltip-null-error.spec.tsx

@@ -0,0 +1,21 @@
+/*
+ * SPDX-FileCopyrightText: 2023 Siemens AG
+ *
+ * SPDX-License-Identifier: MIT
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+import { render } from '@testing-library/react';
+import React from 'react';
+import { describe, it } from 'vitest';
+import Content from './validation-tooltip-null-error';
+
+describe(`null-error`, () => {
+  it(`basic`, () => {
+    const { getByText } = render(<Content />);
+
+    const input = getByText('Name');
+    input.click();
+  });
+});

packages/react/src/tests/validation-tooltip-null-error/validation-tooltip-null-error.tsx

@@ -0,0 +1,40 @@
+/*
+ * SPDX-FileCopyrightText: 2023 Siemens AG
+ *
+ * SPDX-License-Identifier: MIT
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+import React from 'react';
+import { useForm } from 'react-hook-form';
+import { IxValidationTooltip } from '../../components';
+
+const Index = () => {
+  const { register, formState } = useForm({
+    defaultValues: {
+      name: undefined,
+    },
+    shouldFocusError: false,
+    shouldUseNativeValidation: true,
+  });
+
+  return (
+    <>
+      <IxValidationTooltip message="Error hint text">
+        <label htmlFor="name">Name</label>
+        <input
+          type="text"
+          className={`${formState.errors.name ? 'is-invalid' : ''}`}
+          id="name"
+          {...register('name', {
+            required: true,
+          })}
+        />
+      </IxValidationTooltip>
+    </>
+  );
+};
+
+export default Index;

packages/react/vite.config.ts

@@ -0,0 +1,17 @@
+/*
+ * SPDX-FileCopyrightText: 2024 Siemens AG
+ *
+ * SPDX-License-Identifier: MIT
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+import { defineConfig } from 'vitest/config';
+
+export default defineConfig({
+  test: {
+    globals: true,
+    environment: 'jsdom',
+    setupFiles: './src/tests/setup.js',
+  },
+});