Forem: Shadow Smith

Love Vuetify? Meet PrimeVue, a powerful new Vue UI Library.

Shadow Smith — Wed, 22 Jan 2020 17:17:09 +0000

Every Vue developer knows of Vuetify, the full-featured Vue UI library based on Google's Material Design Guidelines, but this article isn't about it at all.

This article is about PrimeVue.

A new UI library on the block by PrimeTek Informatics, that's boasting itself as "The most complete UI framework for Vue".

In the official press release, PrimeTek said...

PrimeVue is the most complete UI Component suite for Vue featuring over 50 components, theme designer, various VueCLI templates and professional support.

...and I can confirm that PrimeVue's Component Docs definitely back their claims, but you don't have to just take my word for it, check it out yourself.

Now that you're pumped and ready to get your feet wet with PrimeVue, let's set up a Vue tinker project and mess around with a PrimeVue Button component.

Setting up your Vue project

Open your terminal, navigate to where you want this project to be stored and do the following command.

vue create primevue-playground

Since we're just focused on playing with PrimeVue's components, pick default (babel, eslint).

? Please pick a preset:
> default (babel, eslint)
  Manually select features

Once your Vue project is set up, cd into it and add PrimeVue and PrimeIcons using npm.

cd primevue-playground && npm i primevue primeicons

Open your project in your code editor.

code .

Start your development server.

npm run serve

And then navigate to http://localhost:8080/ or whatever localhost URL is shown in your terminal.

If you see the traditional Vue boilerplate landing page, you're good and ready to move on.

Removing boilerplate fluff

Navigate to App.vue and copy/paste the following into it...

    <template>
      <div id="app">
        // PrimeVue Components will go here
      </div>
    </template>

    <script>

    export default {
      name: 'app'
    }

    </script>

And just to be tidy, delete the HelloWorld.vue component from your src/components/ directory.

Adding CSS dependencies

In order for PrimeVue styles to be applied, you have to import a few CSS dependencies in your main.js file like this.

    import Vue from 'vue'
    import App from './App.vue'

    // Importing the Nova Light PrimeVue theme styles
    import 'primevue/resources/themes/nova-light/theme.css';

    // Importing the base PrimeVue component styles
    import 'primevue/resources/primevue.min.css';

    // Importing the base PrimeIcon styles
    import 'primeicons/primeicons.css';

    Vue.config.productionTip = false

    new Vue({
      render: h => h(App),
    }).$mount('#app')

Notice the import of the theme styles?

Yeah, PrimeVue comes out-of-the-box with 9 different free themes.

You can use one of those 9, hack on the CSS yourself, buy one of 6 of their other premium themes, or purchase a license to use their Prime Designer API to make your own.

Also, this is a good time to say that I am not sponsored by PrimeTek, and this isn't an affiliate promotion. I'm just letting you know your style customization options.

Setting the stage for playing with PrimeVue components

This step is totally optional, but I like to center components in the middle of the screen when I mess around with them, and I thought you might to.

To do this, add this <style> tag and everything in it to the bottom of your App.vue file.

    <style>
    body {
      margin: 0;
    }

    #app {
      height: 100vh;
      display: flex;
      justify-content: center;
      align-items: center;
    }
    </style>

Once you do this, your App.vue file should look like this.

    <template>
      <div id="app">
        //  PrimeVue Components will go here
      </div>
    </template>

    <script>

    export default {
      name: 'app'
    }

    </script>

    <style>
    body {
      margin: 0;
    }

    #app {
      height: 100vh;
      display: flex;
      justify-content: center;
      align-items: center;
    }
    </style>

Adding a PrimeVue Button component

Now that you're ready to play with PrimeVue components, add a <Button /> by doing the following:

Add import Button from 'primevue/button'; right after the opening <script> tag in your App.vue file.
Register the Button component by putting Button in the components object on your App.vue file's Vue instance.
And then add <Button /> to your App.vue component template inside the <div> with the id of app.

Once you have completed these 3 steps, your App.vue file should look like this.

    <template>
      <div id="app">
        // Step 3. Adding PrimeVue Button to template
        <Button />
      </div>
    </template>

    <script>
    // Step 1. Adding PrimeVue Button
    import Button from 'primevue/button';

    export default {
      name: 'app',
      components: {
        // Step 2. Registering PrimeVue Button
        Button
      }
    }

    </script>

    <style>
    body {
      margin: 0;
    }

    #app {
      height: 100vh;
      display: flex;
      justify-content: center;
      align-items: center;
    }
    </style>

Now head on over to http://localhost:8080/ and make fun of how wimpy your button looks!

So next you're going to learn how to use the PrimeVue Button's props and classes to change that.

Adding text to your PrimeVue Button

This is super straightforward.

Just add a label attribute to your PrimeVue Button and pass it a value like Primary.

    <template>
      <div id="app">
        // Adding Primary label to PrimeVue Button
        <Button label="Primary" />
      </div>
    </template>

    <script>
    import Button from 'primevue/button';

    export default {
      name: 'app',
      components: {
        Button
      }
    }

    </script>

    <style>
    body {
      margin: 0;
    }

    #app {
      height: 100vh;
      display: flex;
      justify-content: center;
      align-items: center;
    }
    </style>

Now take a peek at http://localhost:8080/.

Your button says Primary and looks pretty good, but now let's add an icon!

Adding an icon to your PrimeVue Button

To add an icon to your <Button label="Primary" /> component, head on over to this PrimeIcons showcase page and locate an icon you would like to add.

Then add the icon attribute with the name of the icon you want while following PrimeIcons' pi pi-{icon name} naming convention.

So for instance, if you like the plus icon, you would add icon="pi pi-plus" to your <Button label="Primary" /> component like this.

    <template>
      <div id="app">
        // Adding the plus icon to your PrimeVue Button
        <Button label="Primary" icon="pi pi-plus" />
      </div>
    </template>

    <script>
    import Button from 'primevue/button';

    export default {
      name: 'app',
      components: {
        Button
      }
    }

    </script>

    <style>
    body {
      margin: 0;
    }

    #app {
      height: 100vh;
      display: flex;
      justify-content: center;
      align-items: center;
    }
    </style>

Changing the PrimeVue Button's color

Now to change your <Button />'s color, clone your <Button label="Primary" icon="pi pi-plus" /> component and change the label to Success like so.

    <template>
      <div id="app">
        <Button label="Primary" icon="pi pi-plus" />
        // Adding 2nd PrimeVue Button labeled "Success"
        <Button label="Success" icon="pi pi-plus" />
      </div>
    </template>

    <script>
    import Button from 'primevue/button';

    export default {
      name: 'app',
      components: {
        Button
      }
    }

    </script>

    <style>
    body {
      margin: 0;
    }

    #app {
      height: 100vh;
      display: flex;
      justify-content: center;
      align-items: center;
    }
    </style>

Now add the class p-button-success to your new <Button label="Success" icon="pi pi-plus" /> component...

    <template>
      <div id="app">
        <Button label="Primary" icon="pi pi-plus" />
        // Adding the class "p-button-success" to the 2nd PrimeVue Button labeled "Success"
        <Button label="Success" icon="pi pi-plus" class="p-button-success" />
      </div>
    </template>

    <script>
    import Button from 'primevue/button';

    export default {
      name: 'app',
      components: {
        Button
      }
    }

    </script>

    <style>
    body {
      margin: 0;
    }

    #app {
      height: 100vh;
      display: flex;
      justify-content: center;
      align-items: center;
    }
    </style>

...and you will see a second green button in your browser labeled "Success".

Now for kicks, change your new <Button label="Success" icon="pi pi-plus" class="p-button-success" /> component's icon attribute to pi pi-check to change the icon to a check mark.

Changing your PrimeVue theme

To change your PrimeVue theme, all you have to do is change the 1st CSS import in your main.js file.

So give it a try!

Change your theme from the Nova Light theme to the Rhea theme by changing your 1st CSS import to import 'primevue/resources/themes/rhea/theme.css';.

    import Vue from 'vue'
    import App from './App.vue'

    // Importing the Rhea PrimeVue theme styles
    import 'primevue/resources/themes/rhea/theme.css';

    // Importing the base PrimeVue component styles
    import 'primevue/resources/primevue.min.css';

    // Importing the base PrimeIcon styles
    import 'primeicons/primeicons.css';

    Vue.config.productionTip = false

    new Vue({
      render: h => h(App),
    }).$mount('#app')

Now head over to your browser and take a look at the fresh new style!

Super easy stuff.

Final thoughts

I highly recommend you invest the time, dive deeper into the PrimeVue Documentation, and keep playing with all of the components at your disposal.

Building a custom UI Component library that is beautiful, flexible, feature rich, and adheres to Section 508 Accessibility standards is very. very. hard.—especially for startups, tinkerers, and hobbyists.

And when it comes to larger companies and teams, there is a higher return on investment if time is spent on solving business problems that provide value to their customers, over building and maintaining all of the little puzzle pieces in between.

I'm definitely not saying that PrimeVue, Vuetify, Quasar, and other Vue UI Libraries are a magic bullet for every Vue team, but they absolutely have their place in the Vue ecosystem.

And in regards to PrimeVue, PrimeTek stated in their press release that their...

...goal is to make PrimeVue a well-known and valuable member of the Vue Ecosystem in 2020...

...and from what I have seen, it appears they have hit the ground running.

What is Apollo Link and its purpose in the GraphQL ecosystem?

Shadow Smith — Mon, 20 Jan 2020 18:39:03 +0000

To kick this explanation off, the Apollo Link Documentation describes Apollo Link as...

A standard interface for modifying control flow of GraphQL requests and fetching GraphQL results.

...but what does that really mean?

Personally, I feel the easiest way to begin understanding Apollo Link is to first understand what problem Apollo Link has been built to solve.

In the original Apollo Link announcement post, the Apollo team explains that the GraphQL developer community, as a whole, has varying functionality requirements for a GraphQL client library, and because of this, they simply could not add every needed functionality to Apollo Client core.

So on July, 25th 2017, the Apollo team introduced Apollo Link as a way to add modular pieces of functionality to Apollo Client, effectively allowing the community to create customized versions of Apollo Client to satisfy their specific GraphQL Clients needs.

To further elaborate on this definition, let's break down this simple passage from the Apollo Link documentation.

You've probably come across "middleware" that might transform a request and its result: Apollo Link is an abstraction that's meant to solve similar problems in a much more flexible and elegant way.

So essentially in layman's terms, Apollo Link is a simple-to-use toolkit that contains optional helpers that are designed to solve common problems between your frontend application's Apollo Client and your backend GraphQL API server.

To check out all of Apollo's developed Links, head on over to the Apollo Link Documentation and browse through them, and while you're at it, the GraphQL community can also create custom Apollo Links that solve niche edge cases, so be sure to check those out as well.

Bulk deleting local Git branches using Regex

Shadow Smith — Wed, 15 Jan 2020 17:37:01 +0000

If you are reading this, you obviously have a need to bulk delete local Git branches because you are crushing all of your assigned Work Items.

So here's a shortcut to clean up your local environment.

Write your dry run using regex using this command formula:

git branch | grep [regex expression goes here]

So for example, to view all local branches that are prefixed with "feature", you would use the command.

git branch | grep feature*

Once you run that command and triple check that you wish to delete all of the local branches that are returned, run this command to delete them.

git branch | grep feature* | xargs git branch -D

BONUS TIP:
Here's how to delete all local branches except for master.

git branch | grep -v "master" | xargs git branch -D

You're welcome!

Vue component TDD with Jest and Storybook

Shadow Smith — Tue, 14 Jan 2020 19:05:52 +0000

In this article, I'm going to show you how to build a custom Vue button component in isolation using Test Driven Development (TDD).

Just a heads up, this guide assumes you have used Vue and Jest before and at least know what Test Driven Development is, so keep that in mind if you feel lost.

Overview of what you're building

The button component you are going to be building will have a default and primary style, take 2 props, and emit a click event—all of which will have tests written before each of the component features are even created.

Let's get started.

Setting up your Vue project

Open your terminal and navigate to where you want this project to be stored and do the following commands.

vue create storybook-tdd

Pick Manually select features

? Please pick a preset:
  default (babel, eslint)
> Manually select features

Check Babel, Linter / Formatter, and Unit Testing

? Check the features needed for your project:
 (*) Babel                              
 ( ) TypeScript                          
 ( ) Progressive Web App (PWA) Support   
 ( ) Router                              
 ( ) Vuex                                
 ( ) CSS Pre-processors                  
 (*) Linter / Formatter                  
 (*) Unit Testing                       
 ( ) E2E Testing

Pick ESLint with error prevention only

? Pick a linter / formatter config:
> ESLint with error prevention only
  ESLint + Airbnb config
  ESLint + Standard config
  ESLint + Prettier

Pick Lint on save

? Pick additional lint features:
 (*) Lint on save
 ( ) Lint and fix on commit

Pick Jest

? Pick a unit testing solution:
  Mocha + Chai
> Jest

Pick In package.json

? Where do you prefer placing config for Babel, PostCSS, ESLint, etc.?
  In dedicated config files
> In package.json

If you want to save this as a preset, you can here.

Save this as a preset for future projects?

And once you have answered that question, creation of your storybook-tdd project will begin.

Adding Storybook

Storybook is a tool used to develop User Interface components in isolation, and if done correctly, can also act as an interactive documentation for your components at the same time.

Storybook gives you the ability to build components without focusing on the exact implementation of the components but rather their different states, styles, and functionalities.

So let's move into our Vue project and add Storybook with this command.

cd storybook-tdd && npx -p @storybook/cli sb init --type vue

Setting up your TDDButton component TDD environment

First thing's first, open your project in your code editor by typing code . in your terminal.

Create a file called TDDButton.vue in your src/components/ directory and add the following code.

    <template>
    </template>

Open up the example.spec.js file in your test/unit/ directory and delete everything inside except for these top 2 lines.

    import { shallowMount } from '@vue/test-utils'
    import HelloWorld from '@/components/HelloWorld.vue'

Change the example.spec.js file's name to TDDButton.spec.js for consistency and change the HelloWorld component import to your TDDButton.

    import { shallowMount } from '@vue/test-utils'
    import TDDButton from '@/components/TDDButton.vue'

Setting up Storybook for your TDDButton

Delete everything inside of your projects stories/ directory.

Create a file called TDDButton.stories.js in your stories/ directory.

This is going to be where we visually develop the TDDComponent's different styles.

Add the following to your TDDButton.stories.js file.

    // Adding your TDDButton component
    import TDDButton from '../src/components/TDDButton.vue'

    // Adding your TDDButton component to your Storybook sandbox
    export default {
        title: 'TDDButton',
        component: TDDButton
    }

    // Adding a Default style'd component to your Storybook sandbox's TDDButton
    export const Default = () => ({
      components: { TDDButton },
      template: '<TDDButton />'
    })

Now that is finished, run the following command in your terminal to launch your Storybook sandbox at http://localhost:6006.

npm run storybook

Once you run that command, your Storybook sandbox should automatically open, and you will see your TDDButton with a Default "Story" in the sidebar to the left.

However, everything is and should be blank right now, but you are going to be fleshing all of this out next.

Let's get started.

Writing your 1st test

From here on, you are going to be using the test runner, Jest, along with Vue Test Utils to move through the "Write Test > See Tests Fail > Write Code > Pass Tests > Refactor" Test Driven Development process.

So let's keep moving.

Understanding what Vue Test Utils is

Vue Test Utils is the official unit testing utility library for Vue, and it is absolutely vital when building Vue components using Test Driven Development.

Therefore, we will be using it a lot throughout the remainder of this article, so I recommend pulling up the Vue Test Utils documentation as you follow along from here on.

Mounting and destroying your component

Before you can write your first test, you need to mount your TDDButton component to create a wrapper that contains the fully mounted and rendered component.

In order to keep your tests fast, you need to mount your component before each test and destroy the component after.

You can do this by utilizing Jest's Setup and Teardown helper functions beforeEach() and afterEach(), so go ahead and initialize our wrapper variable and set up our Jest helper functions.

    import { shallowMount } from '@vue/test-utils'
    import TDDButton from '@/components/TDDButton.vue'

    // Initalizing wrapper variable
    let wrapper = null

    // Jest's beforeEach helper function
    beforeEach(() => {})

    // Jest's afterEach helper function
    afterEach(() => {})

Now to mount your component, you will use the shallowMount function imported from @vue/test-utils on line 1.

ShallowMount is a Vue Test Utils function that allows you to mount and render just the component you imported with its child components stubbed, so the mount and render doesn't fail.

There is also a Mount function which mounts and renders your imported component and its children components, but this is unfavorable for Unit Testing because it opens up the possibility for your component's children to affect the outcome of your tests.

So now to mount your TDDButton component before every test, add wrapper = shallowMount(TDDButton) inside of your beforeEach() function's callback like so.

    import { shallowMount } from '@vue/test-utils'
    import TDDButton from '@/components/TDDButton.vue'

    // Initalizing wrapper variable
    let wrapper = null

    // Mount the component to make a wrapper before each test
    beforeEach(() => {
        wrapper = shallowMount(TDDButton)
    })

    // Jest's afterEach helper function
    afterEach(() => {})

And to destroy your TDDButton component after every test, add wrapper.destroy() inside of your afterEach() function's callback like this.

    import { shallowMount } from '@vue/test-utils'
    import TDDButton from '@/components/TDDButton.vue'

    // Initalizing wrapper variable
    let wrapper = null

    // Mount the component to make a wrapper before each test
    beforeEach(() => {
        wrapper = shallowMount(TDDButton)
    })

    // Destroy the component wrapper after each test
    afterEach(() => {
        wrapper.destory()
    })

Conducting our first TDD feedback loop

Now that your component is mounted and ready for testing, the first test you need to write is to check if the component's name is "TDDButton".

To do this, you will need to use Vue Test Utils name() method.

This is pretty straightforward, but if you need it, here's the documentation page for this method.

    // ...continuation of your TDDButton.spec.js file

    describe('TDDButton', () => {

        // Checking if the component's name is 'TDDButton'
        it('Named TDDButton', () => {
            expect(wrapper.name()).toBe('TDDButton')
        })

    }

Now that you have written your first test, run npm run test:unit in your terminal to watch your test fail.

Writing the bare minimum to pass the test

Now to pass your simple test, all you have to do is name your TDDButton component by adding the following to the bottom of your TDDButton.vue file.

    <template>
    </template>

    // Adding a name to your TDDButton component
    <script>
    export default {
      name: 'TDDButton'
    }
    </script>

Now if you run npm run test:unit again, you will see it pass.

Congratulations! You just completed your first Vue component TDD feedback loop!

Now keep going.

Testing if your TDDButton component is a button

Now you need to test if your TDDButton is actually rendering a <button> element.

To do this, you will need to use the Vue Test Utils contains() method.

This is also pretty straightforward, but if you need it, here's the documentation page for this method as well.

    // ...continuation of your TDDButton.spec.js file

    describe('TDDButton', () => {

        // Checking if the component's name is 'TDDButton'
        it('Named TDDButton', () => {
            expect(wrapper.name()).toBe('TDDButton')
        })

        // Checking if the component contains a 'button' element
        it('Contains a button element', () => {
            expect(wrapper.contains('button')).toBe(true)
        })

    }

Now run npm run test:unit and watch the test fail.

Passing the button element test

Now to pass this test, you have to add a <button> element to your TDDButton component like so.

    <template>
        // Adding a 'button' element
        <button></button>
    </template>

    // Adding a name to your TDDButton component
    <script>
    export default {
      name: 'TDDButton'
    }
    </script>

Now if you run npm run test:unit, you will see it pass.

Writing a label prop test

For your TDDButton component, you want the user of the component to be able to use a label prop to set the text on the button.

To do this, you will want to test if your TDDButton component's text equals a String that is passed to it through a label prop.

In order to write this test, you have to use the Vue Test Utils setProps() method to pass props to your mounted component.

Here's the documentation page for that method, and here's how you would write the test for that.

    // ...continuation of your TDDButton.spec.js file

    describe('TDDButton', () => {

        // Checking if the component's name is 'TDDButton'
        it('Named TDDButton', () => {
            expect(wrapper.name()).toBe('TDDButton')
        })

        // Checking if the component contains a 'button' element
        it('Contains a button element', () => {
            expect(wrapper.contains('button')).toBe(true)
        })

        // Checking if the component renders the label on the 'button' element
        it('Renders button text using a label prop', () => {
            wrapper.setProps({ label: 'Call to action' })
            expect(wrapper.text()).toBe('Call to action')
      })

    }

And you guessed it, when you run npm run test:unit the test will fail, but that's what we want to see!

Passing the label prop test

Now to pass this test it takes 2 steps, but I want you to run a test after the 1st step to illustrate the power of TDD.

The 1st thing you need to do is give your TDDButton component the ability to receive a label prop.

Here's how you do that.

    <template>
        // Adding a 'button' element
        <button></button>
    </template>

    // Adding a name to your TDDButton component
    <script>
    export default {
      name: 'TDDButton',
        // Adding 'label' prop
        props: ['label']
    }
    </script>

Now if you run npm run test:unit, you will see it will fail because the label prop's value isn't being used as the <button> element's label.

Here's how you fix that.

    <template>
        // Passing the 'label' prop's value to the 'button' element
        <button>{{ label }}</button>
    </template>

    // Adding a name to your TDDButton component
    <script>
    export default {
      name: 'TDDButton',
        // Adding 'label' prop
        props: ['label']
    }
    </script>

Now if you run npm run test:unit, it will pass.

Updating our Storybook sandbox

Now if you run npm run storybook in your terminal, you will see that there is a <button> element without a label.

However, now that you have given your TDDButton component the ability to receive a label as a prop, we can update this in our Storybook sandbox.

To do this, go to your TDDButton.stories.js file and add a label prop with the value Default to your story like so.

    // Adding your TDDButton component
    import TDDButton from '../src/components/TDDButton.vue'

    // Adding your TDDButton component to your Storybook sandbox
    export default {
        title: 'TDDButton',
        component: TDDButton
    }

    // Adding a Default style'd component to your Storybook sandbox's TDDButton
    export const Default = () => ({
      components: { TDDButton },
        // Adding the 'label' prop to our Default style'd component
      template: '<TDDButton label="Default" />'
    })

Once you do this, you will see that the text "Default" has been added to your Default style'd TDDButton in your Storybook sandbox.

Writing a default button styles test

Now for your TDDButton, you want 2 different styles, your custom default styles and a primary style.

In order to test for default button styles, you will need to test if your TDDButton component has a default TDDButton class on the <button> element.

Here's how you write the test for that.

    // ...continuation of your TDDButton.spec.js file

    describe('TDDButton', () => {

        // Checking if the component's name is 'TDDButton'
        it('Named TDDButton', () => {
            expect(wrapper.name()).toBe('TDDButton')
        })

        // Checking if the component contains a 'button' element
        it('Contains a button element', () => {
            expect(wrapper.contains('button')).toBe(true)
        })

        // Checking if the component renders the label on the 'button' element
        it('Renders button text using a label prop', () => {
        wrapper.setProps({ label: 'Call to action' })
        expect(wrapper.text()).toBe('Call to action')
      })

        // Checking if the component has the default 'TDDButton' class
        it('Has default button styles', () => {
        expect(wrapper.classes('TDDButton')).toBe(true)
      })

    }

Now run npm run test:unit to see the test fail.

Passing the default button styles test

Now to pass this test, you need to add a TDDButton class to your TDDButton's <button> element.

Even though this will not cause your test to fail, you will want to also add the default button styles to the TDDButton class during this step, so here's how.

    <template>
        // Adding the 'TDDButton' class to the 'button' element
        <button class="TDDButton">{{ label }}</button>
    </template>

    // Adding a name to your TDDButton component
    <script>
    export default {
      name: 'TDDButton',
        // Adding 'label' prop
        props: ['label']
    }
    </script>

    // Adding the default styles to the 'TDDButton' class 
    <style>
    .TDDButton {
      all: unset;
      font-family: sans-serif;
      padding: .5rem 1rem;
      border-radius: .25rem;
      cursor: pointer;
      background: lightgray;
    }
    </style>

Now run npm run test:unit to see the test pass and then run npm run storybook to see your TDDButton component's updated default styles.

Writing a primary styles test

For your TDDButton component, you also want to give the users of the component the ability to pass the value primary to a type prop to change its styles.

To write this test, you will need to draw from the experience you gained from writing the "label prop test" and the "default styles test" because this test passes a type prop to add a primary class to your TDDButton component's <button> element.

Here's how to write this test.

    // ...continuation of your TDDButton.spec.js file

    describe('TDDButton', () => {

        // Checking if the component's name is 'TDDButton'
        it('Named TDDButton', () => {
            expect(wrapper.name()).toBe('TDDButton')
        })

        // Checking if the component contains a 'button' element
        it('Contains a button element', () => {
            expect(wrapper.contains('button')).toBe(true)
        })

        // Checking if the component renders the label on the 'button' element
        it('Renders button text using a label prop', () => {
        wrapper.setProps({ label: 'Call to action' })
        expect(wrapper.text()).toBe('Call to action')
      })

        // Checking if the component has the default 'TDDButton' class
        it('Has default button styles', () => {
        expect(wrapper.classes('TDDButton')).toBe(true)
      })

        // Checking if the component has the 'primary' class when 'primary'
        // is the value of the 'type' propery
        it('Has primary styles', () => {
        wrapper.setProps({ type: 'primary' })
        expect(wrapper.classes('primary')).toBe(true)
      })

    }

Run npm run test:unit, and it will fail.

Passing the primary button styles test

Now to pass this test, you need to add a type prop to your TDDButton component that also conditionally adds the type prop's value to the <button>'s class list.

While you do this, you will also add styles to the primary class, so you can add the variation to your Storybook sandbox.

So here's how you do all of that.

    <template>
        // Adding the type prop's value to the class list of the 'button' element
        <button class="TDDButton" :class="type">{{ label }}</button>
    </template>

    // Adding a name to your TDDButton component
    <script>
    export default {
      name: 'TDDButton',
        // Adding 'label' prop
        props: ['label', 'type']
    }
    </script>

    <style>
    .TDDButton {
      all: unset;
      font-family: sans-serif;
      padding: .5rem 1rem;
      border-radius: .25rem;
      cursor: pointer;
      background: lightgray;
    }

    // Adding the primary styles to the 'primary' class
    .primary {
      background: deeppink;
      color: white;
    }
    </style>

Once you're done with that, run npm run test:unit to see the test pass, but if you run npm run storybook to see your TDDButton component's primary styles, you will notice that nothing has changed.

Let's fix that.

Adding your TDDButton's primary style to Storybook

Now to shift gears a bit, you are going to want to document the different styles of your TDDButton component in your Storybook sandbox.

If you recall, you added this bit of code to your TDDButton.stories.js file near the beginning of this article that was responsible for setting up the default style of your TDDButton component in your Storybook sandbox.

    // Adding your TDDButton component
    import TDDButton from '../src/components/TDDButton.vue'

    // Adding your TDDButton component to your Storybook sandbox
    export default {
        title: 'TDDButton',
        component: TDDButton
    }

    // Adding a Default style'd component to your Storybook sandbox's TDDButton
    export const Default = () => ({
      components: { TDDButton },
      template: '<TDDButton label="Default" />'
    })

To add your TDDButton's primary style, you simply need to:

Clone the bit of code where you are "Adding the Default style'd component"
Change the exported const name to Primary
Pass the value Primary to the label prop
And then pass the value primary to a type prop

Here's what your TDDButton.stories.js file should like when you are done.

    // Adding your TDDButton component
    import TDDButton from '../src/components/TDDButton.vue'

    // Adding your TDDButton component to your Storybook sandbox
    export default {
        title: 'TDDButton',
        component: TDDButton
    }

    // Adding a Default style'd component to your Storybook sandbox's TDDButton
    export const Default = () => ({
      components: { TDDButton },
      template: '<TDDButton label="Default" />'
    })

    // Adding a Primary style'd component to your Storybook sandbox's TDDButton
    export const Primary = () => ({
      components: { TDDButton },
      template: '<TDDButton label="Primary" type="primary" />'
    });

Once you have finished this, run npm run storybook, and you will see a new "Story" in the left sidebar called Primary that has a version of your TDDButton component with your primary styles.

Writing a click listener test

Finally, since your TDDButton component is a button, you will want to test if it emits a click event.

In order to write this test, you will need to use the Vue Test Utils trigger() method to virtually click your TDDButton during your test and then listen for a click event to be emitted.

Here's the documentation page for the trigger method, and here's how you write this test.

    // ...continuation of your TDDButton.spec.js file

    describe('TDDButton', () => {

        // Checking if the component's name is 'TDDButton'
        it('Named TDDButton', () => {
            expect(wrapper.name()).toBe('TDDButton')
        })

        // Checking if the component contains a 'button' element
        it('Contains a button element', () => {
            expect(wrapper.contains('button')).toBe(true)
        })

        // Checking if the component renders the label on the 'button' element
        it('Renders button text using a label prop', () => {
        wrapper.setProps({ label: 'Call to action' })
        expect(wrapper.text()).toBe('Call to action')
      })

        // Checking if the component has the default 'TDDButton' class
        it('Has default button styles', () => {
        expect(wrapper.classes('TDDButton')).toBe(true)
      })

        // Checking if the component has the 'primary' class when 'primary'
        // is the value of the 'type' propery
        it('Has primary styles', () => {
        wrapper.setProps({ type: 'primary' })
        expect(wrapper.classes('primary')).toBe(true)
      })

        // Checking if a 'click' event is emitted when the component is clicked
        it('Emits a click event when clicked', () => {
        wrapper.trigger('click')
        expect(wrapper.emitted('click')).toBeTruthy()
      })

    }

Now if you run npm run test:unit, this will of course fail.

Passing the click listener test

In order to pass this test, you have to add a @click listener on your TDDButton's <button> element that emits a click event.

Here's how to do this.

    <template>
        // Adding the '@click' event listener that emits a 'click' event
        <button class="TDDButton" :class="type" @click="$emit('click')">{{ label }}</button>
    </template>

    // Adding a name to your TDDButton component
    <script>
    export default {
      name: 'TDDButton',
        // Adding 'label' prop
        props: ['label', 'type']
    }
    </script>

    <style>
    .TDDButton {
      all: unset;
      font-family: sans-serif;
      padding: .5rem 1rem;
      border-radius: .25rem;
      cursor: pointer;
      background: lightgray;
    }

    // Adding the primary styles to the 'primary' class
    .primary {
      background: deeppink;
      color: white;
    }
    </style>

Now if you run npm run test:unit, you will see that this test passes.

Congratulations! You have learned the basics of building custom Vue components in isolation using Test Driven Development (TDD).

Conclusion

Vue components are simple in concept.

They are small, modular, reusable User Interface building blocks that unlock the ability to rapidly create robust application front ends.

However, in order to build a component design system that works correctly every time, a contract of expected behaviors must be enforced for every component in the entire system.

For instance, in order for a user to accomplish a specific task, they must interact with components X, Y, and Z, and those components must correctly do their jobs in order to satisfy the users' expectations.

If they fail our users, we fail our users, and Test Driven Development is one of the best ways to ensure that our components don't let our users down and bugs don't run rampant in our software.

With all of this said, Test Driven Development does slow down the development process, so if you or your team is crunched for time and need to move fast, it may not be best for you, but if you value stability, it is definitely worth it.

You will always get faster with practice.

How to make an API from scraped data using Express & Puppeteer

Shadow Smith — Mon, 13 Jan 2020 21:20:03 +0000

In this article, I'm going to show you how to make an extremely simple API using Express & Puppeteer that gives a user the ability to fetch a JSON object that includes every Digimon's name from this website.

So let's get started.

Setting up our project using the terminal

First things first, open up your terminal, navigate to where you want this project to live, and execute the following command.

mkdir digimon-name-api

Now, move into your new directory.

cd digimon-name-api

And then create your package.json file.

This is the file that tracks all of the specific details of your project.

npm init -y

Now that you have your package.json file, install Express and Puppeteer.

npm i express puppeteer

And then install Nodemon as a development dependency.

If you haven't heard of Nodemon, you're welcome, and I will explain what it is a little later.

npm i nodemon --save-dev

Now go ahead and create your app's entry point.

touch index.js

And then, open up your project in our code editor.

code .

Set up Express

In your index.js file, add and initialize Express.

    const express = require('express'); // Adding Express
    const app = express(); // Initializing Express

Next, make Express listen on port 7000.

    const express = require('express'); // Adding Express
    const app = express(); // Initializing Express

    // Making Express listen on port 7000
    app.listen(7000, function () {
      console.log(`Running on port 7000.`);
    });

Set up Nodemon

Inside of the scripts object, add "dev": "nodemon index".

Now when you run npm run dev in your terminal, Nodemon will watch for your code changes and restart your Express server, so you don't have to.

    {
      "name": "digimon-name-api",
      "version": "1.0.0",
      "description": "",
      "main": "index.js",
      "scripts": {
        "dev": "nodemon index" // Setting up Nodemon
      },
      "keywords": [],
      "author": "Shadow Smith",
      "license": "MIT",
      "dependencies": {
        "express": "^4.17.1",
        "puppeteer": "^2.0.0"
      },
      "devDependencies": {
        "nodemon": "^2.0.2"
      }
    }

Set up Puppeteer

Whenever you want to scrape data from a website, one of the ways you can do this is by using Puppeteer.

On Puppeteer's documentation, Puppeteer is described as...

...a Node library which provides a high-level API to control Chrome or Chromium over the DevTools Protocol. Puppeteer runs headless by default, but can be configured to run full (non-headless) Chrome or Chromium.

So in layman's terms, we are able to control a browser using code.

Now get to it and add Puppeteer to your index.js file like so.

    const express = require('express'); // Adding Express
    const app = express(); // Initializing Express
    const puppeteer = require('puppeteer'); // Adding Puppeteer

    // Making Express listen on port 7000
    app.listen(7000, function() {
      console.log('Running on port 7000.');
    });

Now that Puppeteer is added, launch your Puppeteer controlled headless browser and navigate to the Digimon website that contains the details this API will scrape.

Please note: It is important to always close the browser when you are done because it will slowly eat away at your computer's processing power.

    const express = require('express'); // Adding Express
    const app = express(); // Initializing Express
    const puppeteer = require('puppeteer'); // Adding Puppeteer

    // Launching the Puppeteer controlled headless browser and navigate to the Digimon website
    puppeteer.launch().then(async function(browser) {
        const page = await browser.newPage();
        await page.goto('http://digidb.io/digimon-list/');

        // Closing the Puppeteer controlled headless browser
        await browser.close();
    });

    // Making Express listen on port 7000
    app.listen(7000, function() {
      console.log('Running on port 7000.');
    });

So this is pretty cool, but there is no way to confirm that this is actually working.

One way to confirm it's working is to take a screenshot of the page using Puppeteer and save it in your project.

This is how you do that.

    const express = require('express'); // Adding Express
    const app = express(); // Initializing Express
    const puppeteer = require('puppeteer'); // Adding Puppeteer

    // Launching the Puppeteer controlled headless browser and navigate to the Digimon website
    puppeteer.launch().then(async function(browser) {
        const page = await browser.newPage();
        await page.goto('http://digidb.io/digimon-list/');

        // Taking a screenshot of the page and saving it
        await page.screenshot({path: 'digimon-website.png'});

        // Closing the Puppeteer controlled headless browser
        await browser.close();
    });

    // Making Express listen on port 7000
    app.listen(7000, function() {
      console.log('Running on port 7000.');
    });

If you see a screenshot that looks like DigiDB, everything is working properly.

Scrape Digimon names

In order to scrape multiple names, you have to use the page.$$eval() Puppeteer method.

This method gives you the ability to query the DOM for specific Nodes and then pass those Nodes into a callback function to pull data off of each them.

So now, remove the code that takes the screenshot and replace it with the code below that targets the DOM Nodes that contain the Digimon names and then maps them to an array using $$eval's callback function.

    const express = require('express'); // Adding Express
    const app = express(); // Initializing Express
    const puppeteer = require('puppeteer'); // Adding Puppeteer

    // Launching the Puppeteer controlled headless browser and navigate to the Digimon website
    puppeteer.launch().then(async function(browser) {
        const page = await browser.newPage();
        await page.goto('http://digidb.io/digimon-list/');

        // Targeting the DOM Nodes that contain the Digimon names
        const digimonNames = await page.$$eval('#digiList tbody tr td:nth-child(2) a', function(digimons) {
        // Mapping each Digimon name to an array
            return digimons.map(function(digimon) {
          return digimon.innerText;
        });
      });

        // Closing the Puppeteer controlled headless browser
        await browser.close();
    });

    // Making Express listen on port 7000
    app.listen(7000, function() {
      console.log('Running on port 7000.');
    });

Log the Digimon names as a test

Add a simple console.log(digimonNames); bit of code just below our last code addition, and you should see a large array of Digimon names printed to your terminal.

    const express = require('express'); // Adding Express
    const app = express(); // Initializing Express
    const puppeteer = require('puppeteer'); // Adding Puppeteer

    // Launching the Puppeteer controlled headless browser and navigate to the Digimon website
    puppeteer.launch().then(async function(browser) {
        const page = await browser.newPage();
        await page.goto('http://digidb.io/digimon-list/');

        // Targeting the DOM Nodes that contain the Digimon names
        const digimonNames = await page.$$eval('#digiList tbody tr td:nth-child(2) a', function(digimons) {
        // Mapping each Digimon name to an array
            return digimons.map(function(digimon) {
          return digimon.innerText;
        });
      });

        // Log the array of Digimon names to the terminal
        console.log(digimonNames);

        // Closing the Puppeteer controlled headless browser
        await browser.close();
    });

    // Making Express listen on port 7000
    app.listen(7000, function() {
      console.log('Running on port 7000.');
    });

Adding a simple API route

Awesome!

Now that you have successfully scraped all of the Digimon names from the DigiDB website, all you have to do is set up a simple API route that will return the Digimon names when a user does a GET request against it.

Remove the console.log(digimonNames); bit of code from the last step and add a simple GET request route as a test.

Now, use Postman to perform a GET request against http://localhost:7000, and you should see the response "Test".

    const express = require('express'); // Adding Express
    const app = express(); // Initializing Express
    const puppeteer = require('puppeteer'); // Adding Puppeteer

    // Launching the Puppeteer controlled headless browser and navigate to the Digimon website
    puppeteer.launch().then(async function(browser) {
        const page = await browser.newPage();
        await page.goto('http://digidb.io/digimon-list/');

        // Targeting the DOM Nodes that contain the Digimon names
        const digimonNames = await page.$$eval('#digiList tbody tr td:nth-child(2) a', function(digimons) {
        // Mapping each Digimon name to an array
            return digimons.map(function(digimon) {
          return digimon.innerText;
        });
      });

        // Closing the Puppeteer controlled headless browser
        await browser.close();

        // Adding simple GET request route as a test
        app.get('/', function(req, res) {
            // Sending 'Test' back to Postman
            res.send('Test');
        });
    });

    // Making Express listen on port 7000
    app.listen(7000, function() {
      console.log('Running on port 7000.');
    });

Wrap the Puppeteer browser logic with the GET API route and change res.send('Test'); to res.send(digimonNames);.

Now when you perform a GET request against http://localhost:7000, you should see the Digimon names array in Postman.

    const express = require('express'); // Adding Express
    const app = express(); // Initializing Express
    const puppeteer = require('puppeteer'); // Adding Puppeteer

    // Wrapping the Puppeteer browser logic in a GET request
    app.get('/', function(req, res) {

        // Launching the Puppeteer controlled headless browser and navigate to the Digimon website
        puppeteer.launch().then(async function(browser) {
            const page = await browser.newPage();
            await page.goto('http://digidb.io/digimon-list/');

            // Targeting the DOM Nodes that contain the Digimon names
            const digimonNames = await page.$$eval('#digiList tbody tr td:nth-child(2) a', function(digimons) {
            // Mapping each Digimon name to an array
                return digimons.map(function(digimon) {
              return digimon.innerText;
            });
          });

            // Closing the Puppeteer controlled headless browser
            await browser.close();

            // Sending the Digimon names to Postman
            res.send(digimonNames);
        });
    });

    // Making Express listen on port 7000
    app.listen(7000, function() {
      console.log('Running on port 7000.');
    });

And you're done!

Congratulations! Now you just need to deploy it to Heroku for free so the world can play with it, but that's a lesson for another day.