Use faker js to generate mock data (#29604)

### Proposed Changes * Use faker js to generate fake data in Storybook ### Checklist - [x] Tests - [x] Translations - [x] Security Implications Contemplated (add notes if applicable) ### Additional Info Also is a test to add a lib in the monorepo as there were some problems at the moment adding or upgrading libs, this PR works like POC in the CI/CD pipeline, also FakerJS is a great tool to generate fake data for unit tests and storybooks.
dotCMS · Aug 16, 2024 · 78bb755 · 78bb755
1 parent 4e3d335
commit 78bb755
Show file tree

Hide file tree

Showing 3 changed files with 15 additions and 58 deletions.
diff --git a/core-web/apps/dotcms-ui/src/stories/primeng/data/DataView.stories.ts b/core-web/apps/dotcms-ui/src/stories/primeng/data/DataView.stories.ts
@@ -1,3 +1,4 @@
+import { faker } from '@faker-js/faker';
 import { Meta, moduleMetadata, StoryObj, argsToTemplate } from '@storybook/angular';
 
 import { DataView, DataViewModule } from 'primeng/dataview';
@@ -11,64 +12,14 @@ type Data = {
     category: string;
 };
 
-const data: Data[] = [
-    {
-        id: '1000',
-        name: 'Apple iPhone 12 Pro',
-        description: 'Apple iPhone 12 Pro 128GB Graphite',
-        image: 'assets/demo/images/product/iphone.jpg',
-        price: '$999.99',
-        category: 'Cell Phones'
-    },
-    {
-        id: '1001',
-        name: 'Apple iPhone 12 Pro',
-        description: 'Apple iPhone 12 Pro 256GB Graphite',
-        image: 'assets/demo/images/product/iphone.jpg',
-        price: '$1099.99',
-        category: 'Cell Phones'
-    },
-    {
-        id: '1002',
-        name: 'Apple iPhone 12 Pro',
-        description: 'Apple iPhone 12 Pro 512GB Graphite',
-        image: 'assets/demo/images/product/iphone.jpg',
-        price: '$1299.99',
-        category: 'Cell Phones'
-    },
-    {
-        id: '1003',
-        name: 'Samsung Galaxy S21 Ultra',
-        description: 'Samsung Galaxy S21 Ultra 128GB Phantom Black',
-        image: 'assets/demo/images/product/samsung.jpg',
-        price: '$1199.99',
-        category: 'Cell Phones'
-    },
-    {
-        id: '1004',
-        name: 'Samsung Galaxy S21 Ultra',
-        description: 'Samsung Galaxy S21 Ultra 256GB Phantom Black',
-        image: 'assets/demo/images/product/samsung.jpg',
-        price: '$1299.99',
-        category: 'Cell Phones'
-    },
-    {
-        id: '1005',
-        name: 'Samsung Galaxy S21 Ultra',
-        description: 'Samsung Galaxy S21 Ultra 512GB Phantom Black',
-        image: 'assets/demo/images/product/samsung.jpg',
-        price: '$1499.99',
-        category: 'Cell Phones'
-    },
-    {
-        id: '1006',
-        name: 'Apple MacBook Pro 13',
-        description: 'Apple MacBook Pro 13-inch 256GB Space Gray',
-        image: 'assets/demo/images/product/macbook.jpg',
-        price: '$1299.99',
-        category: 'Laptops'
-    }
-];
+const data: Data[] = Array.from({ length: 100 }, () => ({
+    id: faker.commerce.isbn(),
+    name: faker.commerce.productName(),
+    description: faker.commerce.productDescription(),
+    image: faker.image.url(),
+    price: faker.commerce.price(),
+    category: faker.commerce.department()
+}));
 
 const meta: Meta<DataView> = {
     title: 'PrimeNG/Data/DataView',

diff --git a/core-web/package.json b/core-web/package.json
@@ -146,6 +146,7 @@
         "@babel/core": "^7.12.9",
         "@babel/preset-react": "^7.14.5",
         "@compodoc/compodoc": "^1.1.24",
+        "@faker-js/faker": "8.4.1",
         "@materia-ui/ngx-monaco-editor": "^6.0.0",
         "@mdx-js/react": "^2.1.2",
         "@ngneat/spectator": "^19.0.0",

diff --git a/core-web/yarn.lock b/core-web/yarn.lock
@@ -2516,6 +2516,11 @@
   resolved "https://registry.yarnpkg.com/@eslint/js/-/js-8.57.0.tgz#a5417ae8427873f1dd08b70b3574b453e67b5f7f"
   integrity sha512-Ys+3g2TaW7gADOJzPt83SJtCDhMjndcDMFVQ/Tj9iA1BfJzFKD9mAUXT3OenpuPHbI6P/myECxRJrofUsDx/5g==
 
+"@faker-js/[email protected]":
+  version "8.4.1"
+  resolved "https://registry.yarnpkg.com/@faker-js/faker/-/faker-8.4.1.tgz#5d5e8aee8fce48f5e189bf730ebd1f758f491451"
+  integrity sha512-XQ3cU+Q8Uqmrbf2e0cIC/QN43sTBSC8KF12u29Mb47tWrt2hAgBXSgpZMj4Ao8Uk0iJcU99QsOCaIL8934obCg==
+
 "@fal-works/esbuild-plugin-global-externals@^2.1.2":
   version "2.1.2"
   resolved "https://registry.yarnpkg.com/@fal-works/esbuild-plugin-global-externals/-/esbuild-plugin-global-externals-2.1.2.tgz#c05ed35ad82df8e6ac616c68b92c2282bd083ba4"