chore: add unit tests (#98)

* chore: add unit tests

* fix: eslint path

* update unit tests

.nvmrc

@@ -0,0 +1 @@
+20.12.2

eslint.config.js

@@ -0,0 +1,44 @@
+module.exports = {
+  extends: ['airbnb', 'airbnb-typescript'],
+  plugins: ['@typescript-eslint'],
+  parserOptions: {
+    ecmaFeatures: {
+      jsx: true,
+      experimentalObjectRestSpread: true,
+    },
+    project: './tsconfig.json',
+  },
+  rules: {
+    'no-underscore-dangle': 0,
+    'import/no-extraneous-dependencies': 0,
+    'react/require-extension': 0,
+    'react/jsx-filename-extension': 0,
+    'react/destructuring-assignment': 0,
+    'react/default-props-match-prop-types': 0,
+    'react/jsx-props-no-spreading': 0,
+    'react/static-property-placement': 0,
+    'react/jsx-uses-react': 'off',
+    'react/react-in-jsx-scope': 'off',
+    'arrow-body-style': 0,
+    'prefer-arrow-callback': 0,
+    'func-names': 0,
+    'react/forbid-prop-types': 0,
+    'comma-dangle': 0,
+    'react/sort-comp': 0,
+    'react/prop-types': 0,
+    'arrow-parens': 0,
+    'import/extensions': [
+      'error',
+      'always',
+      {
+        js: 'never',
+        jsx: 'never',
+        ts: 'never',
+        tsx: 'never',
+      },
+    ],
+  },
+  env: {
+    jest: true,
+  },
+};

jest-config.js

@@ -2,5 +2,7 @@ module.exports = {
   transform: {
     '^.+\\.(jsx|tsx|js|ts)?$': 'babel-jest'
   },
-  reporters: ['default', 'jest-junit']
+  reporters: ['default', 'jest-junit'],
+  setupFilesAfterEnv: ['<rootDir>/setupTests.ts'],
+  testEnvironment: "jsdom"
 };

package.json

@@ -20,8 +20,8 @@
   ],
   "scripts": {
     "bundlesize": "bundlesize",
-    "lint": "eslint src",
-    "lintfix": "eslint src --fix",
+    "lint": "eslint",
+    "lintfix": "eslint --fix",
     "postpublish": "npm run publish-storybook",
     "prepublish": ". ./.scripts/prepublish.sh",
     "publish-storybook": "bash .scripts/publish_storybook.sh",
@@ -30,8 +30,8 @@
     "test-watch": "npm run testonly --watch",
     "test": "npm run lint && npm run testonly",
     "test:ci": "npm run lint && npm run testonly:ci",
-    "testonly": "jest --config jest-config.js",
-    "testonly:ci": "jest --config jest-config.js -u"
+    "testonly": "jest src --config jest-config.js",
+    "testonly:ci": "jest src --config jest-config.js -u"
   },
   "devDependencies": {
     "@babel/cli": "^7.2.3",
@@ -44,6 +44,10 @@
     "@storybook/addon-webpack5-compiler-babel": "^3.0.3",
     "@storybook/react": "^8.4.7",
     "@storybook/react-webpack5": "^8.4.7",
+    "@testing-library/dom": "^10.4.0",
+    "@testing-library/jest-dom": "^6.6.3",
+    "@testing-library/react": "^16.1.0",
+    "@testing-library/user-event": "^14.5.2",
     "@types/jest": "^29.0.0",
     "@types/react": "^18.0.0",
     "@types/react-dom": "^18.0.0",
@@ -65,10 +69,10 @@
     "git-url-parse": "^13.0.0",
     "jest": "^29.0.0",
     "jest-cli": "^29.0.0",
+    "jest-environment-jsdom": "^29.7.0",
     "jest-junit": "^15.0.0",
     "react": "^19.0.0",
     "react-dom": "^19.0.0",
-    "react-test-renderer": "^19.0.0",
     "storybook": "^8.4.7",
     "ts-loader": "^9.2.8",
     "typescript": "^5.0.0"

setupTests.ts

@@ -0,0 +1 @@
+import '@testing-library/jest-dom';

src/react-15.6/__snapshots__/index.test.tsx.snap

@@ -0,0 +1,10 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`AspectRatio Component should render correctly 1`] = `
+<div
+  class="react-aspect-ratio-placeholder"
+  style="--aspect-ratio: (1);"
+>
+  Content
+</div>
+`;

src/react-15.6/index.test.tsx

@@ -0,0 +1,32 @@
+import { render } from '@testing-library/react';
+import AspectRatio from '.';
+
+describe('AspectRatio Component', () => {
+  it('should render correctly', () => {
+    const { container } = render(<AspectRatio>Content</AspectRatio>);
+    expect(container.firstChild).toMatchSnapshot();
+  });
+
+  it('should apply default class name', () => {
+    const { container } = render(<AspectRatio>Content</AspectRatio>);
+    expect(container.firstChild).toHaveClass('react-aspect-ratio-placeholder');
+  });
+
+  it('should apply custom class name', () => {
+    const customClassName = 'custom-class';
+    const { container } = render(<AspectRatio className={customClassName}>Content</AspectRatio>);
+    expect(container.firstChild).toHaveClass(customClassName);
+  });
+
+  it('should apply custom style', () => {
+    const customStyle = { backgroundColor: 'red' };
+    const { container } = render(<AspectRatio style={customStyle}>Content</AspectRatio>);
+    expect(container.firstChild).toHaveStyle(customStyle);
+  });
+
+  it('should apply custom ratio', () => {
+    const customRatio = 1.5;
+    const { container } = render(<AspectRatio ratio={customRatio}>Content</AspectRatio>);
+    expect(container.firstChild).toHaveStyle({ '--aspect-ratio': `(${customRatio})` });
+  });
+});

src/react-15.6.tsx → src/react-15.6/index.tsx

@@ -1,6 +1,6 @@
 import { Component } from 'react';
 
-import type { Props } from './types';
+import type { Props } from '../types';
 
 const CUSTOM_PROPERTY_NAME = '--aspect-ratio';
 const DEFAULT_CLASS_NAME = 'react-aspect-ratio-placeholder';

src/react-latest/__snapshots__/index.test.tsx.snap

@@ -0,0 +1,10 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`AspectRatio Component should render correctly 1`] = `
+<div
+  class="react-aspect-ratio-placeholder"
+  style="--aspect-ratio: (1);"
+>
+  Content
+</div>
+`;

src/react-latest/index.test.tsx

@@ -0,0 +1,32 @@
+import { render } from '@testing-library/react';
+import AspectRatio from '.';
+
+describe('AspectRatio Component', () => {
+  it('should render correctly', () => {
+    const { container } = render(<AspectRatio>Content</AspectRatio>);
+    expect(container.firstChild).toMatchSnapshot();
+  });
+
+  it('should apply default class name', () => {
+    const { container } = render(<AspectRatio>Content</AspectRatio>);
+    expect(container.firstChild).toHaveClass('react-aspect-ratio-placeholder');
+  });
+
+  it('should apply custom class name', () => {
+    const customClassName = 'custom-class';
+    const { container } = render(<AspectRatio className={customClassName}>Content</AspectRatio>);
+    expect(container.firstChild).toHaveClass(customClassName);
+  });
+
+  it('should apply custom style', () => {
+    const customStyle = { backgroundColor: 'red' };
+    const { container } = render(<AspectRatio style={customStyle}>Content</AspectRatio>);
+    expect(container.firstChild).toHaveStyle(customStyle);
+  });
+
+  it('should apply custom ratio', () => {
+    const customRatio = 1.5;
+    const { container } = render(<AspectRatio ratio={customRatio}>Content</AspectRatio>);
+    expect(container.firstChild).toHaveStyle({ '--aspect-ratio': `(${customRatio})` });
+  });
+});

src/react-latest.tsx → src/react-latest/index.tsx

@@ -1,5 +1,5 @@
 import { forwardRef } from 'react';
-import type { Props } from './types';
+import type { Props } from '../types';
 
 const CUSTOM_PROPERTY_NAME = '--aspect-ratio';
 const DEFAULT_CLASS_NAME = 'react-aspect-ratio-placeholder';

tsconfig.json

@@ -12,6 +12,7 @@
     "outDir": "dist",
     "skipLibCheck": true,
     "target": "ESNext",
+    "types": ["@testing-library/jest-dom"]
   },
   "include": [
     "src/**/*"