use a custom component to render the root node

Elvin Dzhavadov · Elvin Dzhavadov · commit c645f4e98908 · 2020-07-27T12:26:55.000+03:00
diff --git a/README.md b/README.md
@@ -1,6 +1,6 @@
 # react-string-diff
 
-Highlight the difference between two string in a React component
+Highlight the difference between two strings in a React component
 
 [![NPM](https://img.shields.io/npm/v/react-string-diff.svg)](https://www.npmjs.com/package/react-string-diff)
 [![MIN](https://badgen.net/bundlephobia/min/react-string-diff)](https://bundlephobia.com/result?p=react-string-diff)
@@ -16,13 +16,14 @@ npm i react-string-diff
 ```
 ## Props
 
-| Prop                      | Type            | Default                        | Description                                                                                                                               |
-| ------------------------- | --------------- | ------------------------------ | ------------------------------------------------------------------------------------------------------------------------------------------|
+| Prop                      | Type            | Default                        | Description                                                                                                                              |
+| ------------------------- | --------------- | ------------------------------ | -----------------------------------------------------------------------------------------------------------------------------------------|
 | oldValue                  | `string*`       |                                | Old value as string.                                                                                                                     |
 | newValue                  | `string*`       |                                | New value as string.                                                                                                                     |
-| method                    | `DiffMethod`    | `DiffMethod.Chars`             | JsDiff text diff method used for diffing strings. Check out [supported methods](#methods).                                                |
-| styles                    | `DiffStyles`    | `defaultStyles`                | Switch between `unified` and `split` view.                                                                                                |
-| className                 | `string`        |                                | [Overriding styles](#overriding-styles)                                                                                            |
+| component                 | `elementType`   | `div`                          | The component used for the root node. Either a string to use a HTML element or a component                                               |
+| className                 | `string`        |                                | Css class for a strings div wrapper                                                                                                      |
+| method                    | `DiffMethod`    | `DiffMethod.Chars`             | JsDiff text diff method used for diffing strings. Check out [supported methods](#methods).                                               |
+| styles                    | `DiffStyles`    | `defaultStyles`                | [Overriding styles](#overriding-styles).                                                                                                 |
 
 
 ## Usage
diff --git a/package.json b/package.json
@@ -32,6 +32,7 @@
   },
   "module": "dist/react-string-diff.esm.js",
   "devDependencies": {
+    "@testing-library/react": "^10.4.7",
     "@types/diff": "^4.0.2",
     "@types/react": "^16.9.43",
     "@types/react-dom": "^16.9.8",
diff --git a/src/index.tsx b/src/index.tsx
@@ -8,7 +8,7 @@ export enum DiffMethod {
   Lines = 'diffLines',
   TrimmedLines = 'diffTrimmedLines',
   Sentences = 'diffSentences',
-  CSS = 'diffCss'
+  CSS = 'diffCss',
 }
 
 type DiffStyles = {
@@ -19,12 +19,12 @@ type DiffStyles = {
 
 const defaultStyle: DiffStyles = {
   added: {
-    backgroundColor: 'lightgreen'
+    backgroundColor: 'lightgreen',
   },
   removed: {
-    backgroundColor: 'salmon'
+    backgroundColor: 'salmon',
   },
-  default: {}
+  default: {},
 };
 
 export type StringDiffProps = {
@@ -33,14 +33,16 @@ export type StringDiffProps = {
   method?: DiffMethod;
   styles?: DiffStyles;
   className?: string;
+  component?: React.ElementType;
 };
 
 export const StringDiff: React.FC<StringDiffProps> = ({
   oldValue,
   newValue,
   method = DiffMethod.Chars,
   styles = defaultStyle,
-  className
+  className,
+  component: Component = 'div',
 }) => {
   const result = useMemo(() => {
     const diff = Diff[method](oldValue, newValue);
@@ -62,5 +64,5 @@ export const StringDiff: React.FC<StringDiffProps> = ({
       );
     });
   }, [oldValue, newValue, method]);
-  return <div className={className}>{result}</div>;
+  return <Component className={className}>{result}</Component>;
 };
diff --git a/test/string-diff.test.tsx b/test/string-diff.test.tsx
@@ -1,11 +1,22 @@
 import * as React from 'react';
-import * as ReactDOM from 'react-dom';
+import { render, screen } from '@testing-library/react';
 import { StringDiff } from '../src';
 
 describe('it', () => {
-  it('renders without crashing', () => {
-    const div = document.createElement('div');
-    ReactDOM.render(<StringDiff newValue="testNew" oldValue="test" />, div);
-    ReactDOM.unmountComponentAtNode(div);
+  it('should display added', () => {
+    render(<StringDiff newValue="testNew" oldValue="test" />);
+    const diffNode = screen.getByText(/New/i);
+    expect(diffNode.style.backgroundColor).toEqual('lightgreen');
+  });
+  it('should display added', () => {
+    render(<StringDiff newValue="test" oldValue="testOld" />);
+    const diffNode = screen.getByText(/Old/i);
+    expect(diffNode.style.backgroundColor).toEqual('salmon');
+  });
+  it('should change parent dom element', () => {
+    const { container } = render(
+      <StringDiff component="p" newValue="test" oldValue="testOld" />
+    );
+    expect(container.querySelector('p')?.textContent).toEqual('testOld');
   });
 });
diff --git a/yarn.lock b/yarn.lock
@@ -773,7 +773,7 @@
     core-js-pure "^3.0.0"
     regenerator-runtime "^0.13.4"
 
-"@babel/runtime@^7.10.2", "@babel/runtime@^7.7.2", "@babel/runtime@^7.8.4":
+"@babel/runtime@^7.10.2", "@babel/runtime@^7.10.3", "@babel/runtime@^7.7.2", "@babel/runtime@^7.8.4":
   version "7.10.5"
   resolved "https://registry.yarnpkg.com/@babel/runtime/-/runtime-7.10.5.tgz#303d8bd440ecd5a491eae6117fd3367698674c5c"
   integrity sha512-otddXKhdNn7d0ptoFRHtMLa8LqDxLYwTjB4nYgM1yy5N6gU/MUf8zqyyLltCH3yAVitBzmwK4us+DD0l/MauAg==
@@ -969,6 +969,16 @@
     "@types/istanbul-reports" "^1.1.1"
     "@types/yargs" "^13.0.0"
 
+"@jest/types@^25.5.0":
+  version "25.5.0"
+  resolved "https://registry.yarnpkg.com/@jest/types/-/types-25.5.0.tgz#4d6a4793f7b9599fc3680877b856a97dbccf2a9d"
+  integrity sha512-OXD0RgQ86Tu3MazKo8bnrkDRaDXXMGUqd+kTtLtK1Zb7CRzQcaSRPPPV37SvYTdevXEBVxe0HXylEjs8ibkmCw==
+  dependencies:
+    "@types/istanbul-lib-coverage" "^2.0.0"
+    "@types/istanbul-reports" "^1.1.1"
+    "@types/yargs" "^15.0.0"
+    chalk "^3.0.0"
+
 "@rollup/plugin-commonjs@^11.0.0":
   version "11.1.0"
   resolved "https://registry.yarnpkg.com/@rollup/plugin-commonjs/-/plugin-commonjs-11.1.0.tgz#60636c7a722f54b41e419e1709df05c7234557ef"
@@ -1017,6 +1027,30 @@
     estree-walker "^1.0.1"
     picomatch "^2.2.2"
 
+"@testing-library/dom@^7.17.1":
+  version "7.21.5"
+  resolved "https://registry.yarnpkg.com/@testing-library/dom/-/dom-7.21.5.tgz#d87312efc5039313f9ea246ed722d808f2ffcbb3"
+  integrity sha512-zZqC5T/9Upjs0/3hyrYNpGxw75dr/bLLD27pUdb3WWJ50JHwutvnQ1FJNHbVth9f2hLzEnh7hBdZ9pD++8pJ8g==
+  dependencies:
+    "@babel/runtime" "^7.10.3"
+    "@types/aria-query" "^4.2.0"
+    aria-query "^4.2.2"
+    dom-accessibility-api "^0.4.6"
+    pretty-format "^25.5.0"
+
+"@testing-library/react@^10.4.7":
+  version "10.4.7"
+  resolved "https://registry.yarnpkg.com/@testing-library/react/-/react-10.4.7.tgz#fc14847fb70a5e93576b8f7f0d1490ead02a9061"
+  integrity sha512-hUYbum3X2f1ZKusKfPaooKNYqE/GtPiQ+D2HJaJ4pkxeNJQFVUEvAvEh9+3QuLdBeTWkDMNY5NSijc5+pGdM4Q==
+  dependencies:
+    "@babel/runtime" "^7.10.3"
+    "@testing-library/dom" "^7.17.1"
+
+"@types/aria-query@^4.2.0":
+  version "4.2.0"
+  resolved "https://registry.yarnpkg.com/@types/aria-query/-/aria-query-4.2.0.tgz#14264692a9d6e2fa4db3df5e56e94b5e25647ac0"
+  integrity sha512-iIgQNzCm0v7QMhhe4Jjn9uRh+I6GoPmt03CbEtwx3ao8/EfoQcmgtqH4vQ5Db/lxiIGaWDv6nwvunuh0RyX0+A==
+
 "@types/babel__core@^7.1.0":
   version "7.1.9"
   resolved "https://registry.yarnpkg.com/@types/babel__core/-/babel__core-7.1.9.tgz#77e59d438522a6fb898fa43dc3455c6e72f3963d"
@@ -1166,6 +1200,13 @@
   dependencies:
     "@types/yargs-parser" "*"
 
+"@types/yargs@^15.0.0":
+  version "15.0.5"
+  resolved "https://registry.yarnpkg.com/@types/yargs/-/yargs-15.0.5.tgz#947e9a6561483bdee9adffc983e91a6902af8b79"
+  integrity sha512-Dk/IDOPtOgubt/IaevIUbTgV7doaKkoorvOyYM2CMwuDyP89bekI7H4xLIwunNYiK9jhCkmc6pUrJk3cj2AB9w==
+  dependencies:
+    "@types/yargs-parser" "*"
+
 "@typescript-eslint/eslint-plugin@3.6.0":
   version "3.6.0"
   resolved "https://registry.yarnpkg.com/@typescript-eslint/eslint-plugin/-/eslint-plugin-3.6.0.tgz#ba2b6cae478b8fca3f2e58ff1313e4198eea2d8a"
@@ -1371,7 +1412,7 @@ ansi-styles@^3.2.0, ansi-styles@^3.2.1:
   dependencies:
     color-convert "^1.9.0"
 
-ansi-styles@^4.1.0:
+ansi-styles@^4.0.0, ansi-styles@^4.1.0:
   version "4.2.1"
   resolved "https://registry.yarnpkg.com/ansi-styles/-/ansi-styles-4.2.1.tgz#90ae75c424d008d2624c5bf29ead3177ebfcf359"
   integrity sha512-9VGjrMsG1vePxcSweQsN20KY/c4zN0h9fLjqAbwbPfahM3t+NL+M9HC8xeXG2I8pX5NoamTGNuomEUFI7fcUjA==
@@ -1842,6 +1883,14 @@ chalk@^2.0.0, chalk@^2.0.1, chalk@^2.1.0, chalk@^2.4.1, chalk@^2.4.2:
     escape-string-regexp "^1.0.5"
     supports-color "^5.3.0"
 
+chalk@^3.0.0:
+  version "3.0.0"
+  resolved "https://registry.yarnpkg.com/chalk/-/chalk-3.0.0.tgz#3f73c2bf526591f574cc492c51e2456349f844e4"
+  integrity sha512-4D3B6Wf41KOYRFdszmDqMCGq5VV/uMAB273JILmO+3jAlh8X4qDtdtgCR3fxtbLEMzSx22QdhnDcJvu2u1fVwg==
+  dependencies:
+    ansi-styles "^4.1.0"
+    supports-color "^7.1.0"
+
 chalk@^4.0.0, chalk@^4.1.0:
   version "4.1.0"
   resolved "https://registry.yarnpkg.com/chalk/-/chalk-4.1.0.tgz#4e14870a618d9e2edd97dd8345fd9d9dc315646a"
@@ -2203,6 +2252,11 @@ doctrine@^3.0.0:
   dependencies:
     esutils "^2.0.2"
 
+dom-accessibility-api@^0.4.6:
+  version "0.4.6"
+  resolved "https://registry.yarnpkg.com/dom-accessibility-api/-/dom-accessibility-api-0.4.6.tgz#f3f2af68aee01b1c862f37918d41841bb1aaf92a"
+  integrity sha512-qxFVFR/ymtfamEQT/AsYLe048sitxFCoCHiM+vuOdR3fE94i3so2SCFJxyz/RxV69PZ+9FgToYWOd7eqJqcbYw==
+
 domexception@^1.0.1:
   version "1.0.1"
   resolved "https://registry.yarnpkg.com/domexception/-/domexception-1.0.1.tgz#937442644ca6a31261ef36e3ec677fe805582c90"
@@ -4857,6 +4911,16 @@ pretty-format@^24.9.0:
     ansi-styles "^3.2.0"
     react-is "^16.8.4"
 
+pretty-format@^25.5.0:
+  version "25.5.0"
+  resolved "https://registry.yarnpkg.com/pretty-format/-/pretty-format-25.5.0.tgz#7873c1d774f682c34b8d48b6743a2bf2ac55791a"
+  integrity sha512-kbo/kq2LQ/A/is0PQwsEHM7Ca6//bGPPvU6UnsdDRSKTWxT/ru/xb88v4BJf6a69H+uTytOEsTusT9ksd/1iWQ==
+  dependencies:
+    "@jest/types" "^25.5.0"
+    ansi-regex "^5.0.0"
+    ansi-styles "^4.0.0"
+    react-is "^16.12.0"
+
 progress-estimator@^0.2.2:
   version "0.2.2"
   resolved "https://registry.yarnpkg.com/progress-estimator/-/progress-estimator-0.2.2.tgz#1c3947a5782ea56e40c8fccc290ac7ceeb1b91cb"
@@ -4922,7 +4986,7 @@ react-dom@^16.13.1:
     prop-types "^15.6.2"
     scheduler "^0.19.1"
 
-react-is@^16.8.1, react-is@^16.8.4:
+react-is@^16.12.0, react-is@^16.8.1, react-is@^16.8.4:
   version "16.13.1"
   resolved "https://registry.yarnpkg.com/react-is/-/react-is-16.13.1.tgz#789729a4dc36de2999dc156dd6c1d9c18cea56a4"
   integrity sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ==
