@crashbytes/react-version-compare 1.0.3 → 1.0.4

package/README.md

@@ -2,16 +2,30 @@
 
 A React component for comparing strings and arrays with precise word-level and item-level highlighting of differences.
 
-[![npm version](https://badge.fury.io/js/react-version-compare.svg)](https://badge.fury.io/js/react-version-compare)
+[![npm version](https://badge.fury.io/js/%40crashbytes%2Freact-version-compare.svg)](https://www.npmjs.com/package/@crashbytes/react-version-compare)
+[![npm](https://img.shields.io/npm/v/@crashbytes/react-version-compare.svg)](https://www.npmjs.com/package/@crashbytes/react-version-compare)
 [![License](https://img.shields.io/badge/license-Apache%202.0-blue.svg)](LICENSE)
+[![npm Audit](https://github.com/CrashBytes/react-version-compare/actions/workflows/security-audit.yml/badge.svg)](https://github.com/CrashBytes/react-version-compare/actions/workflows/security-audit.yml)
+[![CodeQL](https://github.com/CrashBytes/react-version-compare/actions/workflows/security-audit.yml/badge.svg?branch=main)](https://github.com/CrashBytes/react-version-compare/security/code-scanning)
+[![React 18](https://github.com/CrashBytes/react-version-compare/actions/workflows/react-compat.yml/badge.svg)](https://github.com/CrashBytes/react-version-compare/actions/workflows/react-compat.yml)
+[![React 19](https://github.com/CrashBytes/react-version-compare/actions/workflows/react-compat.yml/badge.svg)](https://github.com/CrashBytes/react-version-compare/actions/workflows/react-compat.yml)
+[![npm Provenance](https://img.shields.io/badge/provenance-sigstore-blue)](https://www.npmjs.com/package/@crashbytes/react-version-compare)
+[![Coverage](https://img.shields.io/badge/coverage-99.31%25-brightgreen.svg)](https://crashbytes.github.io/react-version-compare/coverage/)
+[![Tests](https://img.shields.io/badge/tests-124%20passing-brightgreen.svg)](https://crashbytes.github.io/react-version-compare/coverage/)
 
-## Live Storybook Demo
+## Live Demos
 
-You can explore and interact with all features of this component in the live Storybook:
+### Interactive Storybook
 
-👉 **[Live Storybook Demo](https://crashbytes.github.io/react-version-compare/)**
+👉 **[Live Storybook Demo](https://crashbytes.github.io/react-version-compare/storybook/)**
 
-The Storybook provides interactive examples for all comparison scenarios. You can adjust the inputs and props using the controls panel to see how the component behaves with different data. This is the best way to preview, test, and understand the capabilities of `react-version-compare` without writing any code.
+Explore and interact with all features of this component. Adjust inputs and props using the controls panel to see how the component behaves with different data.
+
+### Test Coverage Report
+
+📊 **[View Coverage Report](https://crashbytes.github.io/react-version-compare/coverage/)**
+
+Detailed test coverage metrics showing 99.31% statement coverage, 94.39% branch coverage, and 100% function coverage.
 
 ## Features
 
@@ -23,6 +37,7 @@ The Storybook provides interactive examples for all comparison scenarios. You ca
 - 📱 **Responsive**: Works on desktop and mobile devices
 - ⚡ **TypeScript Support**: Full TypeScript definitions included
 - 🎛️ **Multiple Views**: Side-by-side or inline comparison modes
+- ✅ **Comprehensive Testing**: 80%+ test coverage with 114+ test scenarios
 
 ## Installation
 
@@ -161,6 +176,55 @@ const modified = ['Item A', 'Modified Item B', 'Item C', 'Item D'];
 />
 ```
 
+## Testing
+
+This package includes comprehensive unit and integration tests with 80%+ coverage.
+
+### Running Tests
+
+```bash
+# Run all tests
+npm test
+
+# Run tests with coverage report
+npm run test:coverage
+
+# Run tests in watch mode (for development)
+npm run test:watch
+
+# Run specific test file
+npm test -- Compare.enhanced.test.tsx
+```
+
+### Test Coverage
+
+The test suite includes:
+- **114+ test scenarios** covering edge cases and real-world usage
+- **Unit tests**: Component logic, utility functions, type guards
+- **Integration tests**: Real-world scenarios (code snippets, JSON, SQL, URLs)
+- **Edge case tests**: Empty inputs, null/undefined, large datasets, unicode
+- **Accessibility tests**: Semantic structure, screen reader support
+- **Performance tests**: Large arrays (100+ items), large strings (1000+ words)
+
+Coverage thresholds enforced by Jest:
+- Branches: 75%
+- Functions: 80%
+- Lines: 80%
+- Statements: 80%
+
+See [TEST-COVERAGE-SUMMARY.md](./TEST-COVERAGE-SUMMARY.md) for detailed test documentation.
+
+### Test Files
+
+```
+__tests__/
+├── Compare.test.tsx                    # Original basic tests
+├── Compare.enhanced.test.tsx           # Edge cases & comprehensive coverage
+├── Compare.integration.test.tsx        # Real-world scenarios
+├── ContentfulDiff.test.tsx             # Original utility tests
+└── ContentfulDiff.enhanced.test.tsx    # Complete utility coverage
+```
+
 ## Styling
 
 The component uses CSS classes that you can customize:
@@ -205,6 +269,25 @@ Apache License 2.0 - see the [LICENSE](LICENSE) file for details.
 
 Contributions are welcome! Please feel free to submit a Pull Request.
 
+### Development Setup
+
+```bash
+# Install dependencies
+npm install
+
+# Run tests
+npm test
+
+# Run tests with coverage
+npm run test:coverage
+
+# Build the package
+npm run build
+
+# Run Storybook for local development
+npm run storybook
+```
+
 ## Support
 
 If you encounter any issues or have questions, please [open an issue](https://github.com/CrashBytes/react-version-compare/issues) on GitHub.
@@ -221,4 +304,4 @@ To bump the version, use [npm version](https://docs.npmjs.com/cli/v10/commands/n
 npm version patch   # or 'minor' or 'major'
 ```
 
-This will update `package.json`, create a git tag, and (optionally) commit the change.
+This will update `package.json`, create a git tag, and (optionally) commit the change.

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@crashbytes/react-version-compare",
-  "version": "1.0.3",
+  "version": "1.0.4",
   "description": "A React component for comparing strings and arrays with precise word-level and item-level highlighting of differences.",
   "main": "dist/cjs/index.js",
   "module": "dist/esm/index.js",
@@ -18,6 +18,8 @@
     "test": "jest --no-coverage",
     "test:coverage": "jest --coverage",
     "test:watch": "jest --watch",
+    "coverage:report": "jest --coverage && open coverage/lcov-report/index.html",
+    "coverage:deploy": "npm run test:coverage && gh-pages -d coverage/lcov-report -e coverage",
     "clean": "rm -rf dist",
     "prepublishOnly": "npm run clean && npm run build",
     "lint": "eslint src --ext .ts,.tsx",
@@ -27,7 +29,9 @@
     "storybook": "storybook dev -p 6006",
     "build-storybook": "storybook build",
     "storybook:build": "storybook build",
-    "storybook:deploy": "storybook build && gh-pages -d storybook-static"
+    "storybook:deploy": "npm run build-storybook && gh-pages -d storybook-static",
+    "deploy:all": "npm run test:coverage && npm run build-storybook && npm run deploy:combined",
+    "deploy:combined": "node scripts/deploy-gh-pages.js"
   },
   "keywords": [
     "react",