Version 0.0

.gitignore

@@ -3,4 +3,5 @@
 node_modules
 .cache
 dist
-doc
+doc
+yarn.lock

package.json

@@ -7,13 +7,24 @@
     "dist",
     "src"
   ],
+  "repository": {
+    "url": "https://github.com/jdanign/jd-product-card",
+    "type": "git"
+  },
+  "homepage": "",
   "engines": {
     "node": ">=10"
   },
+  "keywords": [
+    "product",
+    "card",
+    "Dani García"
+  ],
   "scripts": {
     "start": "tsdx watch",
     "build": "tsdx build",
     "test": "tsdx test --passWithNoTests",
+    "test:watch": "tsdx test --watch",
     "lint": "tsdx lint",
     "prepare": "tsdx build",
     "size": "size-limit",
@@ -47,13 +58,20 @@
     }
   ],
   "devDependencies": {
+    "@babel/preset-env": "^7.24.4",
+    "@babel/preset-react": "^7.24.1",
     "@rollup/plugin-image": "^3.0.3",
     "@size-limit/preset-small-lib": "^11.1.2",
     "@types/react": "^18.2.79",
     "@types/react-dom": "^18.2.25",
+    "@types/react-test-renderer": "^18.0.7",
+    "babel-jest": "^29.7.0",
     "husky": "^9.0.11",
+    "identity-obj-proxy": "^3.0.0",
+    "jest": "^29.7.0",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
+    "react-test-renderer": "^18.2.0",
     "rollup-plugin-postcss": "^4.0.2",
     "size-limit": "^11.1.2",
     "tsdx": "^0.14.1",
@@ -62,5 +80,11 @@
   },
   "dependencies": {
     "postcss": "^8.4.38"
+  },
+  "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"
+    }
   }
 }

test/blah.test.tsx

@@ -1,11 +1,11 @@
-import * as React from 'react';
+//import * as React from 'react';
 import * as ReactDOM from 'react-dom';
-import { Thing } from '../src';
+
 
 describe('it', () => {
   it('renders without crashing', () => {
     const div = document.createElement('div');
-    ReactDOM.render(<Thing />, div);
+    // ReactDOM.render(<Thing />, div);
     ReactDOM.unmountComponentAtNode(div);
   });
-});
+});

test/components/ProductCard.test.tsx

@@ -0,0 +1,50 @@
+import * as React from 'react';
+import renderer from 'react-test-renderer';
+import { ProductCard } from "../../src/components";
+import { products } from '../data/products';
+
+
+const {act} = renderer;
+
+
+describe('ProductCard', () => { 
+    test('debe mostrar el componente correctamente', () => {
+        const wrapper = renderer.create(
+            <ProductCard product={products[0]} className='custom-class'>
+                {
+                    ()=>(
+                        <h1>Product Card</h1>
+                    )
+                }
+            </ProductCard>
+        )
+
+        expect(wrapper.toJSON()).toMatchSnapshot();
+    })
+
+    test('debe incrementar el contador', () => {
+        const wrapper = renderer.create(
+            <ProductCard product={products[0]} className='custom-class'>
+                {
+                    ({count, increaseBy})=>(
+                        <>
+                            <h1>Product Card</h1>
+                            <span>{count}</span>
+                            <button onClick={()=> increaseBy(1)}></button>
+                        </>
+                    )
+                }
+            </ProductCard>
+        )
+
+        let tree = wrapper.toJSON();
+        expect(tree).toMatchSnapshot();
+
+        // Como hace el cambio en el estado, es necesario que esté dentro de 'act'
+        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,29 @@
+import * as React from 'react';
+import renderer from 'react-test-renderer';
+import { ProductCard, ProductImage } from "../../src/components";
+import { products } from '../data/products';
+
+
+describe('ProductImage', () => { 
+    test('Debe mostrar el componente correctamente con la imagen personalizada', () => { 
+        const wrapper = renderer.create(
+            <ProductImage img='hola.jpg' />
+        )
+
+        expect(wrapper.toJSON()).toMatchSnapshot();
+    })
+
+    test('debe mostrar el componente con la imagen del producto', () => {
+        const wrapper = renderer.create(
+            <ProductCard product={products[1]} className='custom-class'>
+                {
+                    ()=>(
+                        <ProductImage />
+                    )
+                }
+            </ProductCard>
+        )
+
+        expect(wrapper.toJSON()).toMatchSnapshot();
+    })
+})

test/components/ProductTitle.test.tsx

@@ -0,0 +1,29 @@
+import * as React from 'react';
+import renderer from 'react-test-renderer';
+import { ProductCard, ProductTitle } from "../../src/components";
+import { products } from '../data/products';
+
+
+describe('ProductTitle', () => { 
+    test('Debe mostrar el componente correctamente con el título personalizado', () => { 
+        const wrapper = renderer.create(
+            <ProductTitle title='Custom Product' className='custom-class' />
+        )
+
+        expect(wrapper.toJSON()).toMatchSnapshot();
+    })
+
+    test('debe mostrar el componente con el nombre del producto', () => {
+        const wrapper = renderer.create(
+            <ProductCard product={products[0]} className='custom-class'>
+                {
+                    ()=>(
+                        <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 incrementar el contador 1`] = `
+<div
+  className="productCard custom-class"
+>
+  <h1>
+    Product Card
+  </h1>
+  <span>
+    0
+  </span>
+  <button
+    onClick={[Function]}
+  />
+</div>
+`;
+
+exports[`ProductCard debe mostrar el componente correctamente 1`] = `
+<div
+  className="productCard custom-class"
+>
+  <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 mostrar el componente correctamente con la imagen personalizada 1`] = `
+<img
+  alt="Product"
+  className="productImg "
+  src="hola.jpg"
+/>
+`;
+
+exports[`ProductImage debe mostrar el componente con la imagen del producto 1`] = `
+<div
+  className="productCard custom-class"
+>
+  <img
+    alt="Product"
+    className="productImg "
+    src="./coffee-mug2.png"
+  />
+</div>
+`;

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

@@ -0,0 +1,21 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`ProductTitle Debe mostrar el componente correctamente con el título personalizado 1`] = `
+<span
+  className="productDescription custom-class"
+>
+  Custom Product
+</span>
+`;
+
+exports[`ProductTitle debe mostrar el componente con el nombre del producto 1`] = `
+<div
+  className="productCard custom-class"
+>
+  <span
+    className="productDescription "
+  >
+    Coffee Mug - Card
+  </span>
+</div>
+`;

test/data/products.ts

@@ -0,0 +1,12 @@
+export const products = [
+    {
+        id: '1',
+        title: 'Coffee Mug - Card',
+        img: './coffee-mug.png'
+    },
+    {
+        id: '2',
+        title: 'Coffee Mug - Meme',
+        img: './coffee-mug2.png'
+    }
+];