added new tests

Author: p333ter

.github/workflows/FUNDING.yml

@@ -0,0 +1,12 @@
+# These are supported funding model platforms
+
+github: p333ter # Váš GitHub username
+patreon: # Replace with a single Patreon username
+open_collective: # Replace with a single Open Collective username
+ko_fi: # Replace with a single Ko-fi username
+tidelift: # Replace with a single Tidelift platform-name/package-name e.g., npm/babel
+community_bridge: # Replace with a single Community Bridge project-name e.g., cloud-foundry
+liberapay: # Replace with a single Liberapay username
+issuehunt: # Replace with a single IssueHunt username
+otechie: # Replace with a single Otechie username
+custom: # Replace with a single custom sponsorship URL

.github/workflows/coverage.yml

@@ -0,0 +1,17 @@
+# .github/workflows/coverage.yml
+name: Coverage
+on: [push, pull_request]
+jobs:
+  coverage:
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v4
+      - uses: actions/setup-node@v4
+        with:
+          node-version: '18.18.0'
+      - run: npm ci
+      - run: npm test
+      - name: Coveralls
+        uses: coverallsapp/github-action@v2
+        with:
+          github-token: ${{ secrets.GITHUB_TOKEN }}

.npmignore

@@ -0,0 +1,21 @@
+# Development files
+coverage/
+example/
+src/__tests__/
+jest.config.js
+rollup.config.js
+tsconfig.json
+.github/
+.gitignore
+
+# Editor files
+.vscode/
+.idea/
+*.sublime-project
+*.sublime-workspace
+
+# Test files
+**/*.test.ts
+**/*.test.tsx
+**/*.spec.ts
+**/*.spec.tsx

README.md

@@ -1,8 +1,10 @@
 # @ppasmik/react-scroll-trigger
 
-[![npm](https://img.shields.io/npm/v/@ppasmik/react-scroll-trigger?style=flat-square)](https://www.npmjs.com/package/@ppasmik/react-scroll-trigger)
-[![NPM](https://img.shields.io/npm/l/@ppasmik/react-scroll-trigger?style=flat-square)](https://www.npmjs.com/package/@ppasmik/react-scroll-trigger)
-[![npm](https://img.shields.io/npm/dt/@ppasmik/react-scroll-trigger?style=flat-square)](https://www.npmjs.com/package/@ppasmik/react-scroll-trigger)
+[![npm version](https://img.shields.io/npm/v/@ppasmik/react-scroll-trigger?style=flat-square)](https://www.npmjs.com/package/@ppasmik/react-scroll-trigger)
+[![NPM license](https://img.shields.io/npm/l/@ppasmik/react-scroll-trigger?style=flat-square)](https://www.npmjs.com/package/@ppasmik/react-scroll-trigger)
+[![npm downloads](https://img.shields.io/npm/dm/@ppasmik/react-scroll-trigger?style=flat-square)](https://www.npmjs.com/package/@ppasmik/react-scroll-trigger)
+[![Coverage Status](https://img.shields.io/coveralls/github/p333ter/react-scroll-trigger?style=flat-square)](https://coveralls.io/github/p333ter/react-scroll-trigger)
+[![Build Status](https://img.shields.io/github/actions/workflow/status/p333ter/react-scroll-trigger/publish.yml?style=flat-square)](https://github.com/p333ter/react-scroll-trigger/actions)
 
 A modern, TypeScript-based React component for monitoring scroll events and triggering callbacks when elements enter, exit, or progress through the viewport. This is a rewritten and modernized version of the original react-scroll-trigger package.
 
@@ -87,15 +89,17 @@ Standard React props (className, style, etc.) are also supported and will be pas
 ## Technical Details
 
 The component uses React hooks for efficient state management:
+
 - `useRef` to track the DOM element position
 - `useState` for viewport visibility and scroll tracking
 - `useEffect` for handling scroll and resize events with proper cleanup
 
 Visibility detection:
+
 - Uses `getBoundingClientRect()` for accurate element position calculation
 - Progress is calculated based on element's position relative to viewport:
   ```ts
-  progress = 1 - elementRect.bottom / (viewportEnd + elementRect.height)
+  progress = 1 - elementRect.bottom / (viewportEnd + elementRect.height);
   ```
 - Velocity is derived from scroll position changes over time
 - All calculations are throttled (default 100ms) to optimize performance

jest.config.js

@@ -9,5 +9,14 @@
     '^.+\\.(ts|tsx)$': 'ts-jest',
   },
   moduleFileExtensions: ['ts', 'tsx', 'js', 'jsx', 'json', 'node'],
-  watchPathIgnorePatterns: ['/example/'],
+  collectCoverage: true,
+  collectCoverageFrom: [
+    'src/**/*.{ts,tsx}',
+    '!src/**/*.test.{ts,tsx}',
+    '!src/setupTests.ts',
+  ],
+  coverageReporters: ['json', 'lcov', 'text', 'clover'],
+  testEnvironmentOptions: {
+    url: 'http://localhost',
+  },
 };

src/tests/ScrollTrigger.test.tsx

@@ -43,3 +43,72 @@ describe('ScrollTrigger', () => {
     expect(onEnter).toHaveBeenCalled();
   });
 });
+
+describe('ScrollTrigger', () => {
+  const mockIntersectionObserver = () => {
+    const mock = jest.fn();
+    mock.mockReturnValue({
+      observe: () => null,
+      unobserve: () => null,
+      disconnect: () => null,
+    });
+    window.IntersectionObserver = mock;
+  };
+
+  beforeEach(() => {
+    mockIntersectionObserver();
+  });
+
+  it('renders children correctly', () => {
+    const { getByText } = render(
+      <ScrollTrigger>
+        <div>Test content</div>
+      </ScrollTrigger>
+    );
+
+    expect(getByText('Test content')).toBeInTheDocument();
+  });
+
+  it('calls onEnter when element enters viewport', () => {
+    const onEnter = jest.fn();
+    render(
+      <ScrollTrigger onEnter={onEnter}>
+        <div>Test content</div>
+      </ScrollTrigger>
+    );
+
+    // Simulate scroll
+    act(() => {
+      fireEvent.scroll(window);
+    });
+
+    expect(onEnter).toHaveBeenCalled();
+  });
+
+  it('respects custom component prop', () => {
+    const { container } = render(
+      <ScrollTrigger component="section">
+        <div>Test content</div>
+      </ScrollTrigger>
+    );
+
+    const section = container.querySelector('section');
+    expect(section).toBeInTheDocument();
+    expect(section?.textContent).toBe('Test content');
+  });
+
+  it('calls onProgress while scrolling', () => {
+    const onProgress = jest.fn();
+    render(
+      <ScrollTrigger onProgress={onProgress}>
+        <div>Test content</div>
+      </ScrollTrigger>
+    );
+
+    act(() => {
+      fireEvent.scroll(window);
+    });
+
+    expect(onProgress).toHaveBeenCalled();
+  });
+});