feat(tests): separate jsx and tsx tests

azimutlabs · Nov 18, 2021 · 2979fba · 2979fba
1 parent 2f327d4
commit 2979fba
Show file tree

Hide file tree

Showing 2 changed files with 50 additions and 18 deletions.
diff --git a/packages/tests/src/eslint-config-react.test.ts b/packages/tests/src/eslint-config-react.test.ts
@@ -1,13 +1,50 @@
 import { eslintConfigReact } from '@azimutlabs/eslint-config-react/lib/config';
 
+import { eslintConfigTypescriptBase } from '../../eslint-config-typescript/lib';
 import { buildEslint } from './services/builders';
 import { getMessagesFromLintResults } from './services/getMessagesFromLintResults';
 
-const eslintBase = buildEslint(eslintConfigReact);
+const eslintBase = buildEslint(eslintConfigReact, {
+  overrideConfig: eslintConfigTypescriptBase,
+});
 
 describe('successful cases', () => {
-  it('should lint a client-side react component without jsx', async () => {
-    const file = `import { createElement, forwardRef } from 'react';
+  it('should lint a client-side typescript react component', async () => {
+    const file = `import { forwardRef } from 'react';
+import type { ReactNode } from 'react';
+
+interface ButtonProps {
+  readonly disabled?: boolean;
+  readonly color?: string;
+  readonly children?: ReactNode;
+}
+
+export const Button = forwardRef<HTMLButtonElement, ButtonProps>(
+  ({ children, color: _color, ...rest }, ref) => (
+    <button
+      ref={ref}
+      type="button"
+      {...rest}
+    >
+      <span className="d-flex">
+        {children}
+      </span>
+    </button>
+  ),
+);
+
+Button.displayName = 'Button';
+Button.defaultProps = {
+  disabled: true,
+};
+`;
+    expect(
+      getMessagesFromLintResults(await eslintBase.lintText(file, { filePath: 'component.tsx' }))
+    ).toStrictEqual([]);
+  });
+
+  it('should lint a client-side jsx react component', async () => {
+    const file = `import { forwardRef } from 'react';
 
 export const Button = forwardRef(({ children, color: _color, ...rest }, ref) => (
   <button
@@ -22,7 +59,6 @@ export const Button = forwardRef(({ children, color: _color, ...rest }, ref) =>
 ));
 
 Button.displayName = 'Button';
-
 Button.defaultProps = {
   disabled: true,
 };

diff --git a/packages/tests/src/eslint-config-typescript.test.ts b/packages/tests/src/eslint-config-typescript.test.ts
@@ -29,8 +29,7 @@ http.createServer(requestListener).listen(port);
   });
 
   it('should lint a client-side react component without jsx', async () => {
-    const file = `import { createElement, forwardRef } from 'react';
-import type { FC } from 'react';
+    const file = `import { forwardRef } from 'react';
 
 enum Colors {
   Blue = 'blue',
@@ -45,27 +44,24 @@ interface ColorProps<C extends Color = AnyColor> {
   readonly color: C;
 }
 
-interface ButtonProps extends ColorProps<Colors.Blue | Colors.Red> {}
+interface ButtonProps extends ColorProps<Colors.Blue | Colors.Red> {
+  readonly disabled?: boolean;
+}
 
 export const isBordered = true;
 
-export const Button: FC<ButtonProps> = forwardRef(({ children, color: _color, ...rest }, ref) =>
-  createElement(
-    'button',
-    {
-      ...rest,
-      ref,
-      'aria-disabled': disabled ? 'disabled' : 'not',
-    },
-    children,
-  ),
+export const Button = forwardRef<HTMLButtonElement, ButtonProps>(
+  ({ disabled, color: _color, ...rest }, ref) =>
+    <button {...rest} ref={ref} aria-disabled={disabled ? 'disabled' : 'not'} />
 );
 
 Button.defaultProps = {
   disabled: true,
 };
 `;
-    expect(getMessagesFromLintResults(await eslintBase.lintText(file))).toStrictEqual([]);
+    expect(
+      getMessagesFromLintResults(await eslintBase.lintText(file, { filePath: 'index.tsx' }))
+    ).toStrictEqual([]);
   });
 
   it('should lint a next-env.d.ts', async () => {