diff --git a/.babelrc b/.babelrc
deleted file mode 100644
index 7565280..0000000
--- a/.babelrc
+++ /dev/null
@@ -1,11 +0,0 @@
-{
- "presets": [["@babel/preset-env"], "@babel/preset-react", "@babel/preset-typescript"],
- "env": {
- "test": {
- "plugins": ["istanbul", "@babel/plugin-proposal-optional-chaining"]
- },
- "cypress": {
- "plugins": ["istanbul"]
- }
- }
-}
diff --git a/README.md b/README.md
index 04e6e02..dd9b789 100644
--- a/README.md
+++ b/README.md
@@ -30,13 +30,13 @@
- [Installation](#installation)
- [Roadmap](#roadmap)
- [Issues](#issues)
- - [🐛 Bugs](#-bugs)
- - [💡 Feature Requests](#-feature-requests)
+ - [🐛 Bugs](#-bugs)
+ - [💡 Feature Requests](#-feature-requests)
- [Tests](#tests)
- - [Run all component tests](#run-all-component-tests)
- - [Jest tests](#jest-tests)
- - [Cypress component tests:](#cypress-component-tests)
- - [End-to-end tests:](#end-to-end-tests)
+ - [Run all tests](#run-all-tests)
+ - [Unit tests](#unit-tests)
+ - [Cypress component tests:](#cypress-component-tests)
+ - [End-to-end tests:](#end-to-end-tests)
@@ -115,23 +115,24 @@ a 👍. This helps maintainers prioritize what to work on.
## Tests
-There are two layers of tests written for this library:
+There are three layers of tests written for this library:
-- We use Jest and Cypress to do component testing.
-- The end-to-end tests are also made using the Cypress runner.
+- Unit tests: we use vitest
+- Component tests: we use cypress
+- End-to-end tests: we also use cypress
To run the whole suite of tests, make sure you've done the steps in [installation](#installation), then:
-### Run all component tests
+### Run all tests
```sh
npm run test
```
-### Jest tests
+### Unit tests
```sh
-npm run test:jest
+npm run test:unit
```
### Cypress component tests:
@@ -143,12 +144,5 @@ npm run test:ct
### End-to-end tests:
```sh
-# 1.1 Open Storybook
-npm run storybook
-
-# 1.2 Open Cypress
-npm run test:cypress
-
-# 2. Run them in Headless mode
npm run test:e2e
```
diff --git a/config/setupVitest.ts b/config/setupVitest.ts
new file mode 100644
index 0000000..1dd407a
--- /dev/null
+++ b/config/setupVitest.ts
@@ -0,0 +1,5 @@
+// jest-dom adds custom jest matchers for asserting on DOM nodes.
+// allows you to do things like:
+// expect(element).toHaveTextContent(/react/i)
+// learn more: https://github.com/testing-library/jest-dom
+import "@testing-library/jest-dom";
diff --git a/cypress/test/hooks/use-auto-id.spec.tsx b/cypress/test/hooks/use-auto-id.spec.tsx
new file mode 100644
index 0000000..3b27d0a
--- /dev/null
+++ b/cypress/test/hooks/use-auto-id.spec.tsx
@@ -0,0 +1,60 @@
+/*
+ * Please refer to the terms of the license agreement.
+ *
+ * (c) 2021 Feedzai, Rights Reserved.
+ */
+import React from "react";
+import { useAutoId } from "../../../src/hooks/useAutoId";
+
+function DemoComponent({ value = null, prefix }: { value?: string | null; prefix?: string }) {
+ const firstId = useAutoId(value, prefix);
+ const secondId = useAutoId();
+ return (
+
+
A paragraph
+
An inline span element
+
joaodias.me ;
+}
+
+describe("useAutoId", () => {
+ it("should generate a unique ID value", () => {
+ cy.mount(
+ Demo Button
+
+ );
+}
+
+it("does not focus on mount when false", () => {
+ cy.mount(A Button
- )
+
+ A Button
+
+ );
};
describe("useTabbable", () => {
@@ -35,7 +38,7 @@ describe("useTabbable", () => {
const CUSTOM_PROPS: typeof props = {
...props,
disabled: true,
- }
+ };
cy.mount({""} );
- });
-
- test("Heading is clamped to a valid range", () => {
- const { getByText } = render(
-
- A test title
- ,
- );
- const headingElement = getByText("A test title");
-
- expect(headingElement.tagName).toBe("H6");
- });
-
- test("Heading is clamped to a valid range in another case", () => {
- const { getByText } = render(
-
- A test title
- ,
- );
- const headingElement = getByText("A test title");
-
- expect(headingElement.tagName).toBe("H6");
- });
-});
diff --git a/test/src/helpers/isBoolean.test.tsx b/test/src/helpers/isBoolean.test.tsx
deleted file mode 100644
index 3264d28..0000000
--- a/test/src/helpers/isBoolean.test.tsx
+++ /dev/null
@@ -1,16 +0,0 @@
-import { isBoolean, boolOrBoolString } from "../../../src/helpers";
-
-describe("isBoolean", () => {
- it("should return true if the passed value is boolean", () => {
- expect(isBoolean(true)).toBeTruthy();
- expect(isBoolean(false)).toBeTruthy();
- });
-});
-
-describe("boolOrBoolString", () => {
- it("should return true if the passed value is a trueboolean", () => {
- expect(boolOrBoolString(true)).toBeTruthy();
- expect(boolOrBoolString("true")).toBeTruthy();
- expect(boolOrBoolString("false")).toBeFalsy();
- });
-});
diff --git a/test/src/helpers/isFunction.test.tsx b/test/src/helpers/isFunction.test.tsx
deleted file mode 100644
index e2ab549..0000000
--- a/test/src/helpers/isFunction.test.tsx
+++ /dev/null
@@ -1,11 +0,0 @@
-import { isFunction } from "../../../src/helpers";
-
-describe("isFunction", () => {
- it("should return true if the passed value is a function", () => {
- const testFunction = jest.fn();
- const dummyFunction = () => "test";
-
- expect(isFunction(testFunction)).toBeTruthy();
- expect(isFunction(dummyFunction)).toBeTruthy();
- });
-});
diff --git a/test/src/helpers/isNil.test.tsx b/test/src/helpers/isNil.test.tsx
deleted file mode 100644
index a0dd3d4..0000000
--- a/test/src/helpers/isNil.test.tsx
+++ /dev/null
@@ -1,13 +0,0 @@
-import { isNil } from "../../../src/helpers";
-
-describe("isNil", () => {
- it("should return true if the passed value is a nil", () => {
- expect(isNil(null)).toBe(true);
- expect(isNil(undefined)).toBe(true);
- });
-
- it("should return false if the passed value is not nil", () => {
- expect(isNil("null")).toBe(false);
- expect(isNil("undefined")).toBe(false);
- });
-});
diff --git a/test/src/helpers/isNumber.test.tsx b/test/src/helpers/isNumber.test.tsx
deleted file mode 100644
index 391bf64..0000000
--- a/test/src/helpers/isNumber.test.tsx
+++ /dev/null
@@ -1,13 +0,0 @@
-import { isNumber } from "../../../src/helpers";
-
-describe("isNumber", () => {
- it("should return true if the passed value is an integer", () => {
- expect(isNumber(10)).toBe(true);
- expect(isNumber(parseInt("10"))).toBe(true);
- });
- it("should return false if the passed value is not a number", () => {
- expect(isNumber("10")).toBe(false);
- expect(isNumber("")).toBe(false);
- expect(isNumber(true)).toBe(false);
- });
-});
diff --git a/test/src/helpers/isString.test.tsx b/test/src/helpers/isString.test.tsx
deleted file mode 100644
index 54271e1..0000000
--- a/test/src/helpers/isString.test.tsx
+++ /dev/null
@@ -1,14 +0,0 @@
-import { isString } from "../../../src/helpers";
-
-describe("isString", () => {
- it("should return true if the passed value is a string", () => {
- expect(isString("lorem ipsum")).toBe(true);
- expect(isString("true")).toBe(true);
- expect(isString("")).toBe(true);
- });
- it("should return false if the passed value is not a string", () => {
- expect(isString(true)).toBe(false);
- expect(isString(123)).toBe(false);
- expect(isString(null)).toBe(false);
- });
-});
diff --git a/test/src/hooks/useAutoId.test.tsx b/test/src/hooks/useAutoId.test.tsx
deleted file mode 100644
index 6fd4ffe..0000000
--- a/test/src/hooks/useAutoId.test.tsx
+++ /dev/null
@@ -1,67 +0,0 @@
-/*
- * Please refer to the terms of the license
- * agreement.
- *
- * (c) 2021 Feedzai, Rights Reserved.
- */
-
-/**
- * useAutoId.test.tsx
- *
- * @author João Dias
- * @since 1.1.0
- */
-import React from "react";
-import "@testing-library/jest-dom";
-import { render, screen } from "@testing-library/react";
-import { useAutoId } from "../../../src/hooks/useAutoId";
-
-function DemoComponent({ value = null, prefix }: { value?: string | null; prefix?: string }) {
- const firstId = useAutoId(value, prefix);
- const secondId = useAutoId();
- return (
-
-
A paragraph
-
An inline span element
-
Feedzai ;
-}
-
-describe("useAutoId", () => {
- it("should generate a unique ID value", () => {
- render(
* @since 1.0.0
*/
+import { describe, it, expect } from "vitest";
import React from "react";
import { JSDOM } from "jsdom";
-import { expect } from "@jest/globals";
-import {
- RovingAction,
- RovingState,
- TabStop,
-} from "../../../../src/components/roving-tabindex/index";
-import { reducer } from "../../../../src/components/roving-tabindex/rover-provider/reducer";
+import { RovingAction, RovingState, TabStop } from "../../src/components/roving-tabindex/index";
+import { reducer } from "../../src/components/roving-tabindex/rover-provider/reducer";
const testDOM = new JSDOM(`
@@ -506,7 +502,7 @@ describe("reducer", () => {
});
});
- test("changing the direction", () => {
+ it("changing the direction", () => {
const givenState: RovingState = Object.freeze({
direction: "horizontal",
selectedId: buttonOneId,
diff --git a/test/src/hooks/useFocusVisible.test.tsx b/test/vitest/use-focus-visible.test.tsx
similarity index 55%
rename from test/src/hooks/useFocusVisible.test.tsx
rename to test/vitest/use-focus-visible.test.tsx
index 28eabdb..a729df7 100644
--- a/test/src/hooks/useFocusVisible.test.tsx
+++ b/test/vitest/use-focus-visible.test.tsx
@@ -1,3 +1,5 @@
+///
* @since ```feedzai.next.release```
*/
+import { describe, it, expect, beforeEach } from "vitest";
import React from "react";
import "@testing-library/jest-dom";
-import { act, fireEvent, render, screen } from "@testing-library/react";
-import { renderHook } from "@testing-library/react";
-import { useFocusVisible, useFocusVisibleListener } from "../../../src/hooks";
+import { fireEvent, render, screen } from "@testing-library/react";
+import { useFocusVisible } from "../../src/hooks";
function Example({ id }: { id?: string }) {
const { isFocusVisible } = useFocusVisible();
@@ -71,7 +73,7 @@ describe("useFocusVisible", () => {
it("returns positive isFocusVisible result after toggling browser tabs after keyboard navigation", () => {
render(
* @since ```feedzai.next.release```
*/
-
+import { describe, it, expect, vi } from "vitest";
import React, { PropsWithChildren } from "react";
-import "@testing-library/jest-dom";
import { act, render, waitFor } from "@testing-library/react";
-import { useFocusWithin } from "../../../src/hooks";
-import { UseFocusWithinProps } from "../../../src/hooks/useFocusWithin/types";
+import { useFocusWithin } from "../../src/hooks";
+import { UseFocusWithinProps } from "../../src/hooks/useFocusWithin/types";
const Example: React.FC> = (props) => {
const { focusWithinProps } = useFocusWithin(props);
@@ -79,7 +78,7 @@ describe("useFocusWithin", () => {
,
);
- const el = tree.getByTestId("fdz-js-example");
+ const el = tree.getAllByTestId("fdz-js-example")[0];
const child = tree.getByTestId("child");
act(() => {
child.focus();
@@ -95,27 +94,34 @@ describe("useFocusWithin", () => {
});
expect(events).toEqual([
- { type: "focus", target: child },
+ {
+ type: "focus",
+ target: child,
+ },
{ type: "focuschange", isFocused: true },
- { type: "blur", target: child },
+ {
+ type: "blur",
+ target: child,
+ },
{ type: "focuschange", isFocused: false },
]);
});
it("events do not bubble when stopPropagation is called", () => {
- const onWrapperFocus = jest.fn();
- const onWrapperBlur = jest.fn();
- const onInnerFocus = jest.fn((e) => e.stopPropagation());
- const onInnerBlur = jest.fn((e) => e.stopPropagation());
+ const onWrapperFocus = vi.fn();
+ const onWrapperBlur = vi.fn();
const tree = render(
-
+ e.stopPropagation()}
+ onBlurWithin={(e) => e.stopPropagation()}
+ >
= (props) => {
const { focusWithinProps } = useFocusWithin(props);
@@ -166,8 +143,8 @@ describe("useFocusWithin", () => {
);
};
- const onFocus = jest.fn();
- const onBlur = jest.fn();
+ const onFocus = vi.fn();
+ const onBlur = vi.fn();
const tree = render(> = {
es: "index.es.mjs",
umd: "index.umd.cjs",
};
- return OUTPUT[format];
+ return OUTPUT[format] ?? `index.${format}.js`;
},
},
rollupOptions: {
@@ -40,4 +77,6 @@ export default defineConfig({
},
},
},
+
+ test: VITEST_CONFIG,
});