frontend images

Adding helper for Default Images

A Badge generator like Badgeyay must be able to generate, store and export the user data as and when needed. This blog post covers the addition of a helper function for the default images in the badge generator. We cover the topics such as the problem caused and the solution to the problem.

The problem was that the names of default images were not being rendered properly.

Adding the functionality to badgeyay

Let us see how we implemented this functionality into the frontend of the project.

Step 1 : Generating helper function

We first need to generate the helper function in order to get it started. Generating a helper function is not a tough task. We need to follow the steps as mentioned below

$ ~ ember generate helper def-images

After this command is executed in the terminal, ember-cli generates two files, the helper file and the helper-test file.

Step 2 : Adding the functionality to helper function

After generating the helper file, we need to add relevant code in order to make sure that the above stated problem is solved. So we work on the helper function to recreate the formatted names from the incoming unformatted names from ember model.

import { helper } from ‘@ember/component/helper’;

export function defImages(params) {
var [imageName] = params;
imageName = imageName.split(‘_’);
for (var i = imageName.length – 1; i >= 0; i–) {
imageName[i] = imageName[i].charAt(0).toUpperCase() + imageName[i].slice(1);
}
return imageName.join(‘ ‘);
}

export default helper(defImages);

Step 3 : Adding test to the helper-test.js

Once we have the helper set up correctly, we can now add a test for the same.

import { module, test } from ‘qunit’;
import { setupRenderingTest } from ’ember-qunit’;
import { render } from ‘@ember/test-helpers’;
import hbs from ‘htmlbars-inline-precompile’;

module(‘Integration | Helper | defImages’, function(hooks) {
setupRenderingTest(hooks);

// Replace this with your real tests.
test(‘it renders’, async function(assert) {
this.set(‘inputValue’, ‘fossasia_badgeyay’);

await render(hbs`{{def-images inputValue}}`);

assert.equal(this.element.textContent.trim(), ‘Fossasia Badgeyay’);
});
});

Finally, we need to add the helper function to the frontend component as well.

<div class=“twelve wide column”>{{def-images image.name}}</div>

Now, the names of the individual default images are being formatted correctly.

Screenshot of changes

Resources

Continue ReadingAdding helper for Default Images