chore: enable more eslint rules consistent formatting (#4003)

.eslintrc.js

@@ -15,6 +15,7 @@ module.exports = {
 	},
 	plugins: [
 		"@typescript-eslint",
+		"jest-formatting",
 		"jest",
 		"prettier",
 		"promise",
@@ -36,6 +37,7 @@ module.exports = {
 		"plugin:import/errors",
 		"plugin:import/typescript",
 		"plugin:import/warnings",
+		"plugin:jest-formatting/strict",
 		"plugin:jest/recommended",
 		"plugin:prettier/recommended",
 		"plugin:promise/recommended",
@@ -100,6 +102,8 @@ module.exports = {
 		"jest/valid-expect-in-promise": "off",
 		"max-lines": ["warn", { max: 300, skipBlankLines: true, skipComments: true }],
 		"max-lines-per-function": ["warn", { max: 40, skipBlankLines: true, skipComments: true }],
+		"no-nested-ternary": "warn", // @TODO: set to error and resolve issues
+		"no-unneeded-ternary": "warn", // @TODO: set to error and resolve issues
 		"no-unused-expressions": "off",
 		"no-unused-vars": "off",
 		"prefer-const": [
@@ -170,14 +174,15 @@ module.exports = {
 		"unicorn/no-object-as-default-parameter": "warn", // @TODO: set to error and fix resulting issues
 		"unicorn/no-useless-undefined": "off",
 		"unicorn/prefer-array-some": "warn", // @TODO: set to error and fix resulting issues
+		"unicorn/prefer-at": "off", // @TODO: set to error and fix resulting issues
 		"unicorn/prefer-module": "warn", // @TODO: set to error and fix resulting issues
 		"unicorn/prefer-node-protocol": "off",
 		"unicorn/prefer-number-properties": "warn", // @TODO: set to error and fix resulting issues
 		"unicorn/prefer-prototype-methods": "warn", // @TODO: set to error and fix resulting issues
 		"unicorn/prefer-spread": "warn", // @TODO: set to error and fix resulting issues
 		"unicorn/prefer-string-slice": "warn", // @TODO: set to error and fix resulting issues
 		"unicorn/prefer-ternary": "off",
-		"unicorn/prevent-abbreviations": "error", // @TODO: set to error and fix resulting issues
+		"unicorn/prefer-top-level-await": "error", // @TODO: set to error and fix resulting issues
 		"unicorn/prevent-abbreviations": "warn", // @TODO: set to error and fix resulting issues
 		"unused-imports/no-unused-imports-ts": "error",
 	},

package.json

@@ -233,6 +233,7 @@
 		"eslint-nibble": "^7.0.0",
 		"eslint-plugin-import": "^2.22.1",
 		"eslint-plugin-jest": "^24.3.6",
+		"eslint-plugin-jest-formatting": "^3.0.0",
 		"eslint-plugin-jsx-a11y": "^6.4.1",
 		"eslint-plugin-prettier": "^3.3.1",
 		"eslint-plugin-promise": "^5.1.0",

src/app/App.test.tsx

@@ -131,6 +131,7 @@ describe("App", () => {
 		});
 
 		await env.profiles().restore(passwordProtectedProfile, getDefaultPassword());
+
 		expect(history.location.pathname).toMatch("/");
 
 		await act(async () => {
@@ -215,6 +216,7 @@ describe("App", () => {
 		process.env.REACT_APP_IS_E2E = "1";
 
 		const { container, asFragment, getByText, getByTestId } = renderWithRouter(<App />, { withProviders: false });
+
 		expect(getByTestId("Splash__text")).toBeInTheDocument();
 
 		await act(async () => {
@@ -234,6 +236,7 @@ describe("App", () => {
 		jest.spyOn(window.navigator, "onLine", "get").mockReturnValueOnce(false);
 
 		const { container, asFragment, getByTestId } = renderWithRouter(<App />, { withProviders: false });
+
 		expect(getByTestId("Splash__text")).toBeInTheDocument();
 
 		await act(async () => {
@@ -286,6 +289,7 @@ describe("App", () => {
 		process.env.REACT_APP_IS_E2E = "1";
 
 		const { container, asFragment, getByText, getByTestId } = renderWithRouter(<App />, { withProviders: false });
+
 		expect(getByTestId("Splash__text")).toBeInTheDocument();
 
 		await act(async () => {
@@ -308,6 +312,7 @@ describe("App", () => {
 		process.env.REACT_APP_IS_E2E = undefined;
 
 		const { asFragment, getByText, getByTestId } = renderWithRouter(<App />, { withProviders: false });
+
 		expect(getByTestId("Splash__text")).toBeInTheDocument();
 
 		await act(async () => {

src/app/components/Address/Address.test.tsx

@@ -8,28 +8,33 @@ const sampleAddress = "ASuusXSW9kfWnicScSgUTjttP6T9GQ3kqT";
 describe("Formatted Address", () => {
 	it("should render address only", () => {
 		const { container } = render(<Address address={sampleAddress} />);
+
 		expect(container).toMatchSnapshot();
 	});
 
 	it("should render with wallet name", () => {
 		const { container } = render(<Address address={sampleAddress} walletName="Sample Wallet" />);
+
 		expect(container).toMatchSnapshot();
 	});
 
 	it("should not render without address", () => {
 		const { container } = render(<Address />);
+
 		expect(container).toMatchSnapshot();
 	});
 
 	it.each(["sm", "lg", "xl"])("should render with size %s", (size) => {
 		const { getByTestId } = render(<Address address={sampleAddress} walletName="Sample Wallet" size={size} />);
+
 		expect(getByTestId("Address__alias")).toHaveClass(`text-${size}`);
 	});
 
 	it("should render with normal font", () => {
 		const { container } = render(
 			<Address fontWeight="normal" address={sampleAddress} walletName="Sample Wallet" />,
 		);
+
 		expect(container).toMatchSnapshot();
 	});
 
@@ -42,6 +47,7 @@ describe("Formatted Address", () => {
 				size="lg"
 			/>,
 		);
+
 		expect(getByTestId("Address__address")).toHaveClass("text-theme-primary-600");
 	});
 });

src/app/components/Amount/Amount.test.tsx

@@ -6,10 +6,12 @@ import { Amount } from "./Amount";
 describe("AmountGeneric", () => {
 	it("should format crypto or fiat depending on the ticker", () => {
 		const { rerender } = render(<Amount value={123.456} ticker="EUR" />);
+
 		expect(screen.getByTestId("AmountFiat")).toBeInTheDocument();
 		expect(screen.queryByTestId("AmountCrypto")).not.toBeInTheDocument();
 
 		rerender(<Amount value={123.456} ticker="ARK" />);
+
 		expect(screen.queryByTestId("AmountFiat")).not.toBeInTheDocument();
 		expect(screen.getByTestId("AmountCrypto")).toBeInTheDocument();
 	});

src/app/components/Amount/AmountCrypto.test.tsx

@@ -6,24 +6,31 @@ import { AmountCrypto } from "./AmountCrypto";
 describe("AmountCrypto", () => {
 	it("should format crypto", () => {
 		const { rerender } = render(<AmountCrypto value={1} ticker="ARK" />);
+
 		expect(screen.getByTestId("AmountCrypto")).toHaveTextContent(/^1 ARK$/);
 
 		rerender(<AmountCrypto value={1234.56} ticker=" " />);
+
 		expect(screen.getByTestId("AmountCrypto")).toHaveTextContent(/^1,234.56$/);
 
 		rerender(<AmountCrypto value={123_456} ticker="BTC" />);
+
 		expect(screen.getByTestId("AmountCrypto")).toHaveTextContent(/^123,456 BTC$/);
 
 		rerender(<AmountCrypto value={0} ticker="DARK" />);
+
 		expect(screen.getByTestId("AmountCrypto")).toHaveTextContent(/^0 DARK$/);
 
 		rerender(<AmountCrypto value={10} ticker="ARK" showSign />);
+
 		expect(screen.getByTestId("AmountCrypto")).toHaveTextContent(/^\+ 10 ARK$/);
 
 		rerender(<AmountCrypto value={10} ticker="ARK" showSign isNegative />);
+
 		expect(screen.getByTestId("AmountCrypto")).toHaveTextContent(/^- 10 ARK$/);
 
 		rerender(<AmountCrypto value={10} ticker="ARK" showTicker={false} />);
+
 		expect(screen.getByTestId("AmountCrypto")).toHaveTextContent(/^10$/);
 	});
 
@@ -33,6 +40,7 @@ describe("AmountCrypto", () => {
 	// eslint-disable-next-line jest/no-disabled-tests
 	it.skip("should format crypto with custom locale", () => {
 		render(<AmountCrypto value={0.1} ticker="ARK" locale="pt-BR" />);
+
 		expect(screen.getByTestId("AmountCrypto")).toHaveTextContent("0,1 ARK");
 	});
 });

src/app/components/Amount/AmountFiat.test.tsx

@@ -6,15 +6,19 @@ import { AmountFiat } from "./AmountFiat";
 describe("AmountFiat", () => {
 	it("should format fiat", () => {
 		const { rerender } = render(<AmountFiat value={123.456} ticker="EUR" />);
+
 		expect(screen.getByTestId("AmountFiat")).toHaveTextContent("€123.46");
 
 		rerender(<AmountFiat value={1} ticker="EUR" />);
+
 		expect(screen.getByTestId("AmountFiat")).toHaveTextContent("€1.00");
 
 		rerender(<AmountFiat value={1} ticker="EUR" showSign />);
+
 		expect(screen.getByTestId("AmountFiat")).toHaveTextContent("+ €1.00");
 
 		rerender(<AmountFiat value={1} ticker="EUR" showSign isNegative />);
+
 		expect(screen.getByTestId("AmountFiat")).toHaveTextContent("- €1.00");
 	});
 });

src/app/components/Avatar/Avatar.test.tsx

@@ -6,18 +6,21 @@ import { Avatar } from "./Avatar";
 describe("Avatar", () => {
 	it("should render", () => {
 		const { getByTestId, asFragment } = render(<Avatar address="abc" />);
+
 		expect(getByTestId("Avatar")).toBeTruthy();
 		expect(asFragment()).toMatchSnapshot();
 	});
 
 	it("should render with highlight", () => {
 		const { getByTestId, asFragment } = render(<Avatar address="abc" highlight />);
+
 		expect(getByTestId("Avatar")).toBeTruthy();
 		expect(asFragment()).toMatchSnapshot();
 	});
 
 	it("should render with custom shadow color", () => {
 		const { getByTestId, asFragment } = render(<Avatar address="abc" shadowClassName="ring-theme-black" />);
+
 		expect(getByTestId("Avatar")).toBeTruthy();
 		expect(asFragment()).toMatchSnapshot();
 	});
@@ -26,18 +29,21 @@ describe("Avatar", () => {
 		const { getByTestId, asFragment } = render(
 			<Avatar address="abc" shadowClassName="ring-theme-black" highlight />,
 		);
+
 		expect(getByTestId("Avatar")).toBeTruthy();
 		expect(asFragment()).toMatchSnapshot();
 	});
 
 	it("should render without shadow", () => {
 		const { getByTestId, asFragment } = render(<Avatar address="abc" size="lg" noShadow />);
+
 		expect(getByTestId("Avatar")).toBeTruthy();
 		expect(asFragment()).toMatchSnapshot();
 	});
 
 	it.each(["sm", "lg", "xl"])("should render with size", (size) => {
 		const { getByTestId, asFragment } = render(<Avatar address="abc" size={size} />);
+
 		expect(getByTestId("Avatar")).toBeTruthy();
 		expect(asFragment()).toMatchSnapshot();
 	});

src/app/components/Badge/Badge.test.tsx

@@ -6,24 +6,28 @@ import { Badge } from "./Badge";
 describe("Badge", () => {
 	it("should render", () => {
 		const { container } = render(<Badge />);
+
 		expect(container).toMatchSnapshot();
 	});
 
 	it("should render with icon", () => {
 		const { container } = render(<Badge icon="settings" />);
+
 		expect(container).toMatchSnapshot();
 	});
 
 	it.each(["top", "top-right", "right", "bottom-right", "bottom", "bottom-left", "left", "top-left"])(
 		"should render with position '%s'",
 		(position) => {
 			const { container } = render(<Badge icon="settings" position={position} />);
+
 			expect(container).toMatchSnapshot();
 		},
 	);
 
 	it.each(["md", "lg"])("should render with size '%s'", (size) => {
 		const { container } = render(<Badge icon="settings" size={size} />);
+
 		expect(container).toMatchSnapshot();
 	});
 });

src/app/components/Button/Button.test.tsx

@@ -68,6 +68,7 @@ describe("Button", () => {
 		const { getByText } = render(<Button onClick={onClick}>Click Me</Button>);
 
 		fireEvent.click(getByText("Click Me"));
+
 		expect(onClick).toHaveBeenCalled();
 	});
 
@@ -77,6 +78,7 @@ describe("Button", () => {
 				Click Me
 			</Button>,
 		);
+
 		expect(container).toMatchSnapshot();
 	});
 
@@ -86,6 +88,7 @@ describe("Button", () => {
 				Click Me
 			</Button>,
 		);
+
 		expect(container).toMatchSnapshot();
 	});
 
@@ -95,6 +98,7 @@ describe("Button", () => {
 				Click Me
 			</Button>,
 		);
+
 		expect(container).toMatchSnapshot();
 	});
 

src/app/components/ButtonGroup/ButtonGroup.test.tsx

@@ -8,14 +8,15 @@ import { useSelectionState } from "./useSelectionState";
 describe("ButtonGroup", () => {
 	it("should render", () => {
 		const { getByTestId, asFragment } = render(<ButtonGroup />);
+
 		expect(getByTestId("ButtonGroup")).toBeTruthy();
 		expect(asFragment()).toMatchSnapshot();
 	});
 });
 
 describe("ButtonGroupOption", () => {
 	it("should render", () => {
-		const isSelected = jest.fn((value: any) => (value === 1 ? true : false));
+		const isSelected = jest.fn((value: any) => value === 1);
 		const setSelectedValue = jest.fn();
 		const { getAllByTestId, asFragment } = render(
 			<>
@@ -30,10 +31,12 @@ describe("ButtonGroupOption", () => {
 		);
 
 		const buttons = getAllByTestId("ButtonGroupOption");
+
 		expect(buttons[0]).toHaveAttribute("aria-checked", "true");
 		expect(buttons[1]).toHaveAttribute("aria-checked", "false");
 
 		fireEvent.click(buttons[0]);
+
 		expect(setSelectedValue).toHaveBeenCalledWith(1);
 
 		expect(asFragment()).toMatchSnapshot();
@@ -54,6 +57,7 @@ describe("ButtonGroupOption", () => {
 		);
 
 		const buttons = getAllByTestId("ButtonGroupOption");
+
 		expect(buttons[0]).toHaveAttribute("aria-checked", "false");
 		expect(buttons[1]).toHaveAttribute("aria-checked", "false");
 

src/app/components/Card/Card.test.tsx

@@ -16,6 +16,7 @@ describe("Card", () => {
 		const { container, asFragment, getByText } = render(<Card onClick={() => handleClick()}>Test</Card>);
 
 		expect(container).toBeTruthy();
+
 		fireEvent.click(getByText("Test"));
 
 		expect(handleClick).toHaveBeenCalled();

src/app/components/Circle/Circle.test.tsx

@@ -6,11 +6,13 @@ import { Circle } from "./Circle";
 describe("Circle", () => {
 	it("should render", () => {
 		const { container } = render(<Circle />);
+
 		expect(container).toMatchSnapshot();
 	});
 
 	it("should render as blank", () => {
 		const { container } = render(<Circle />);
+
 		expect(container).toMatchSnapshot();
 	});
 
@@ -20,11 +22,13 @@ describe("Circle", () => {
 				<div data-testid="circle__content" />
 			</Circle>,
 		);
+
 		expect(container).toMatchSnapshot();
 	});
 
 	it("should render as avatar", () => {
 		const { container } = render(<Circle avatarId="test" />);
+
 		expect(container).toMatchSnapshot();
 	});