chore: rename random helper -> faker-random

Author: tzellman

CHANGELOG.md

@@ -1,5 +1,11 @@
 # Changelog
 
+### 0.4.1
+
+#### Changes
+
+-   Renamed `random` helper to `faker-random`, to avoid clash with `ember-math-helpers`
+
 ### 0.4.0
 
 This release includes a `random` helper for accessing the `faker` random utilities.

README.md

@@ -30,14 +30,14 @@ ember install ember-fakerjs
 The list of helpers available are:
 
 -   `faker-fake` use this to generate content by directly using the `faker` API
--   `random` utility that provides parameterized access to the `random` subsection of the `faker` API
+-   `faker-random` utility that provides parameterized access to the `random` subsection of the `faker` API
 -   `faker-text`, `faker-sentence`, `faker-sentences` - generate lorem content
 
 Example usage:
 
 ```hbs
-{{random "number" max=100}}
-{{random "arrayelement" array("Link" "Ganon" "Zelda")}}
+{{faker-random "number" max=100}}
+{{faker-random "arrayelement" array("Link" "Ganon" "Zelda")}}
 {{faker-sentence 10}} {{!-- create a 10-word sentence --}}
 {{faker-sentences 5}} {{!-- create a 5-sentence string --}}
 <img src={{faker-fake "{{image.avatar}}"}} alt="avatar">

addon/helpers/random.js addon/helpers/faker-random.js

@@ -1,7 +1,7 @@
 import { helper } from '@ember/component/helper';
 import faker from 'faker';
 
-export default helper(function random(params, hash) {
+export default helper(function fakerRandom(params, hash) {
     const method = params.length > 0 ? params[0].toLowerCase() : undefined;
     const options = { ...(hash ?? {}) };
     switch (method) {

app/helpers/faker-random.js

@@ -0,0 +1 @@
+export { default } from 'ember-fakerjs/helpers/faker-random';

app/helpers/random.js

@@ -1,6 +1,6 @@
 {
   "name": "ember-fakerjs",
-  "version": "0.4.0",
+  "version": "0.4.1",
   "description": "Faker.js template helpers for Ember.",
   "keywords": [
     "ember-addon",

package-lock.json

@@ -1,3 +1,8 @@
 @tailwind base;
 @tailwind components;
 @tailwind utilities;
+
+html,
+body {
+    height: 100%;
+}

package.json

@@ -1,5 +1,5 @@
 {{page-title "ember-fakerjs Demo"}}
 
-<main class="bg-indigo-400 h-full w-full flex flex-col">
+<main class="bg-indigo-500 h-full w-full flex flex-col space-y-4 py-2 px-8">
     {{outlet}}
 </main>

tests/dummy/app/styles/app.css

@@ -1,32 +1,34 @@
-<section class="bg-white p-3 m-4 flex flex-col">
+<section class="bg-white px-3 flex flex-col rounded-md">
+    <div class="text-xl font-bold pb-1">\{{faker-random "arrayElement" (array "Link" "Ganon" "Zelda")}}</div>
+    <div>{{faker-random "arrayElement" (array "Link" "Ganon" "Zelda")}}</div>
+</section>
+<section class="bg-white p-3 flex flex-col rounded-md">
+    <div class="text-xl font-bold pb-1">\{{faker-fake "\{{name.lastName}}, \{{name.firstName}} \{{name.suffix}}"}}</div>
+    <div>{{faker-fake "{{name.lastName}}, {{name.firstName}} {{name.suffix}}"}}</div>
+</section>
+<section class="bg-white p-3 flex flex-col rounded-md">
+    <div class="text-xl font-bold pb-1">\{{faker-fake "\{{hacker.phrase}}"}}</div>
+    <div>{{faker-fake "{{hacker.phrase}}"}}</div>
+</section>
+<section class="bg-white p-3 flex flex-col rounded-md">
     <div class="text-xl font-bold pb-1">\{{faker-sentence 10}}</div>
     <div>{{faker-sentence 10}}</div>
 </section>
-<section class="bg-white p-3 m-4 flex flex-col">
+<section class="bg-white p-3 flex flex-col rounded-md">
     <div class="text-xl font-bold pb-1">\{{faker-sentences 5}}</div>
     <div>{{faker-sentences 5}}</div>
 </section>
-<section class="bg-white p-3 m-4 flex flex-col">
+<section class="bg-white p-3 flex flex-col rounded-md">
     <div class="text-xl font-bold pb-1">\{{faker-text}}</div>
     <div>{{faker-text}}</div>
 </section>
-<section class="bg-white p-3 m-4 flex flex-col">
-    <div class="text-xl font-bold pb-1">\{{faker-fake "\{{name.lastName}}, \{{name.firstName}} \{{name.suffix}}"}}</div>
-    <div>{{faker-fake "{{name.lastName}}, {{name.firstName}} {{name.suffix}}"}}</div>
-</section>
-<section class="bg-white p-3 m-4 flex flex-col">
-    <div class="text-xl font-bold pb-1">\{{faker-fake "\{{hacker.phrase}}"}}</div>
-    <div>{{faker-fake "{{hacker.phrase}}"}}</div>
-</section>
-
-<section class="bg-white p-3 m-4 flex flex-col">
+<section class="bg-white p-3 flex flex-col rounded-md">
     <div class="text-xl font-bold pb-1">\{{faker-fake "\{{internet.color}}"}}</div>
     {{#with (faker-fake "{{internet.color}}") as |color|}}
         <div class="py-4 px-1" style={{html-safe (concat "background-color: " color)}}>{{color}}</div>
     {{/with}}
 </section>
-
-<section class="bg-white p-3 m-4 flex flex-col">
+<section class="bg-white p-3 flex flex-col rounded-md">
     <div class="text-xl font-bold pb-1">\{{faker-fake "\{{image.cats}}"}}</div>
-    <div><img class="w-64" src={{faker-fake "{{image.cats}}"}} alt="fake"></div>
+    <div><img class="w-32" src={{faker-fake "{{image.cats}}"}} alt="fake"></div>
 </section>

tests/dummy/app/templates/application.hbs

@@ -25,15 +25,15 @@ module('Integration | Helper | random', function (hooks) {
         ];
         for (const method of methods) {
             this.set('method', method);
-            await render(hbs`{{random method}}`);
+            await render(hbs`{{faker-random method}}`);
             assert.ok(this.element.textContent.trim(), 'renders content');
         }
     });
 
     test('it renders specific values', async function (assert) {
-        await render(hbs`{{random "arrayelement" (array 1 2 3)}}`);
+        await render(hbs`{{faker-random "arrayelement" (array 1 2 3)}}`);
         assert.ok(/[1-3]/.test(this.element.textContent.trim()), 'arrayelement');
-        await render(hbs`{{random "notsupported"}}`);
+        await render(hbs`{{faker-random "notsupported"}}`);
         assert.notOk(this.element.textContent.trim(), 'should be empty');
     });
 });