version 0.0.1 listo

README.md

@@ -12,7 +12,6 @@ import { ProductCard, ProductImage, ProductTitle, ProductButtons } from 'flp-pro
 
 ```
 <ProductCard
-    key={product.id}
     product={product}
     initialValues={{
         count: 4,

example/index.tsx

@@ -1,13 +1,31 @@
 import 'react-app-polyfill/ie11';
 import * as React from 'react';
 import * as ReactDOM from 'react-dom';
-import { Thing } from '../.';
+import { ProductCard, ProductImage, ProductTitle, ProductButtons } from '../.';
+
+const product = {
+  id: '1',
+  title: 'Product title',
+};
 
 const App = () => {
   return (
-    <div>
-      <Thing />
-    </div>
+    <ProductCard
+      product={product}
+      initialValues={{
+        count: 4,
+        maxCount: 10,
+      }} >
+      {
+        ({ reset, increaseBy, isMaxCountReached, count, maxCount }) => (
+          <>
+            <ProductImage />
+            <ProductTitle />
+            <ProductButtons />
+          </>
+        )
+      }
+    </ProductCard>
   );
 };
 

package.json

@@ -14,6 +14,7 @@
     "start": "tsdx watch",
     "build": "tsdx build",
     "test": "tsdx test --passWithNoTests",
+    "test:watch": "tsdx test --watch --no-cache",
     "lint": "tsdx lint",
     "prepare": "tsdx build",
     "size": "size-limit",
@@ -53,6 +54,7 @@
     "@types/react": "^18.2.6",
     "@types/react-dom": "^18.2.4",
     "husky": "^8.0.3",
+    "identity-obj-proxy": "^3.0.0",
     "postcss": "^8.4.23",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
@@ -63,6 +65,29 @@
     "typescript": "^5.0.4"
   },
   "dependencies": {
-    "@types/estree": "^1.0.1"
-  }
+    "@babel/preset-env": "^7.21.5",
+    "@babel/preset-react": "^7.18.6",
+    "@types/estree": "^1.0.1",
+    "@types/react-test-renderer": "^18.0.0",
+    "babel-jest": "^29.5.0",
+    "jest": "^29.5.0",
+    "react-test-renderer": "^18.2.0"
+  },
+  "repository": {
+    "url": "https://github.com/flpmcruz/npm-product-card-deploy.git",
+    "type": "git"
+  },
+  "homepage": "https://github.com/flpmcruz/npm-product-card-deploy.git",
+  "jest": {
+    "moduleNameMapper": {
+      "\\.(jpg|jpeg|png|gif|eot|otf|webp|svg|ttf|woff|woff2|mp4|webm|wav|mp3|m4a|aac|oga)$": "identity-obj-proxy",
+      "\\.(css|less|scss|sass)$": "identity-obj-proxy"
+    }
+  },
+  "keywords": [
+    "react",
+    "component",
+    "product",
+    "card"
+  ]
 }

test/components/ProductCard.test.tsx

@@ -0,0 +1,46 @@
+import React from 'react'
+import renderer from 'react-test-renderer'
+import { ProductCard } from '../../src/components';
+import { product1 } from '../data/products';
+
+const { act } = renderer;
+
+describe('ProductCard', () => {
+    test('debe de mostrar el componente correctamente', () => {
+        const wrapper = renderer.create(
+            <ProductCard product={product1}>
+                {
+                    () => <h1>Product Card</h1>
+                }
+            </ProductCard>
+        )
+        expect(wrapper.toJSON()).toMatchSnapshot();
+    });
+
+    test('debe de incrementar el contador', () => {
+
+        const wrapper = renderer.create(
+            <ProductCard product={product1}>
+                {
+                    ({ count, increaseBy }) => (
+                        <>
+                            <h1>Product Card</h1>
+                            <span>{count}</span>
+                            <button onClick={() => increaseBy(1)}></button>
+                        </>
+                    )
+                }
+            </ProductCard>
+        );
+
+        let tree = wrapper.toJSON();
+        expect(tree).toMatchSnapshot();
+
+        act(() => {
+            (tree as any).children[2].props.onClick();
+        })
+
+        tree = wrapper.toJSON();
+        expect((tree as any).children[1].children[0]).toBe('1')
+    })
+})

test/components/ProductImage.test.tsx

@@ -0,0 +1,31 @@
+import React from 'react'
+import renderer from 'react-test-renderer'
+import { ProductImage, ProductCard } from '../../src/components';
+import { product2 } from '../data/products';
+
+describe('ProductImage', () => {
+
+    test('debe de mostrar el componente correctamente con la imagen personalizada', () => {
+
+        const wrapper = renderer.create(
+            <ProductImage img="https://hola.jpg" />
+        )
+        expect(wrapper.toJSON()).toMatchSnapshot();
+    });
+
+    test('debe de mostrar el componente con la imagen del producto', () => {
+
+        const wrapper = renderer.create(
+            <ProductCard product={product2}>
+                {
+                    () => (
+                        <ProductImage />
+                    )
+                }
+            </ProductCard>
+        )
+        expect(wrapper.toJSON()).toMatchSnapshot();
+
+    })
+
+})

test/components/ProductTitle.test.tsx

@@ -0,0 +1,24 @@
+import React from 'react';
+import renderer from 'react-test-renderer';
+import ProductCard, { ProductTitle } from '../../src/components';
+import { product1 } from '../data/products';
+
+describe('ProductTitle', () => {
+    test('debe mostrar el componente con el titulo personalizado', () => {
+        const wrapper = renderer.create(<ProductTitle title="Custom Product" />)
+
+        expect(wrapper.toJSON()).toMatchSnapshot();
+    });
+
+    test('debe mostrar el componente con el titulo por defecto', () => {
+        const wrapper = renderer.create(
+            <ProductCard product={product1}>
+                {
+                    () => <ProductTitle />
+                }
+            </ProductCard>
+        )
+        expect(wrapper.toJSON()).toMatchSnapshot();
+    }
+    );
+});

test/components/__snapshots__/ProductCard.test.tsx.snap

@@ -0,0 +1,27 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`ProductCard debe de incrementar el contador 1`] = `
+<div
+  className="productCard undefined"
+>
+  <h1>
+    Product Card
+  </h1>
+  <span>
+    0
+  </span>
+  <button
+    onClick={[Function]}
+  />
+</div>
+`;
+
+exports[`ProductCard debe de mostrar el componente correctamente 1`] = `
+<div
+  className="productCard undefined"
+>
+  <h1>
+    Product Card
+  </h1>
+</div>
+`;

test/components/__snapshots__/ProductImage.test.tsx.snap

@@ -0,0 +1,21 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`ProductImage debe de mostrar el componente con la imagen del producto 1`] = `
+<div
+  className="productCard undefined"
+>
+  <img
+    alt="Product Image"
+    className="productImg undefined"
+    src="./coffee-mug.png"
+  />
+</div>
+`;
+
+exports[`ProductImage debe de mostrar el componente correctamente con la imagen personalizada 1`] = `
+<img
+  alt="Product Image"
+  className="productImg undefined"
+  src="https://hola.jpg"
+/>
+`;

test/components/__snapshots__/ProductTitle.test.tsx.snap

@@ -0,0 +1,21 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`ProductTitle debe mostrar el componente con el titulo personalizado 1`] = `
+<span
+  className="productDescription undefined"
+>
+  Custom Product
+</span>
+`;
+
+exports[`ProductTitle debe mostrar el componente con el titulo por defecto 1`] = `
+<div
+  className="productCard undefined"
+>
+  <span
+    className="productDescription undefined"
+  >
+    Coffee Mug - Sin imagen
+  </span>
+</div>
+`;

test/data/products.ts

@@ -0,0 +1,10 @@
+export const product1 = {
+    id: '1',
+    title: 'Coffee Mug - Sin imagen', 
+}
+
+export const product2 = {
+    id: '1',
+    title: 'Coffee Mug - Con imagen',
+    img: './coffee-mug.png' 
+}