Forem: Phoebe M

Frontend Mentor - Job listings with filtering solution using Vue.js and Fetch API

Phoebe M — Mon, 27 Nov 2023 02:23:19 +0000

This is a solution to the Job listings with filtering challenge on Frontend Mentor. Have you completed this challenge? What was your solution?

Job listings with filtering solution using Vue.js and Fetch API
- Table of contents
- Overview
- The challenge
- Links
- My process
- Built with
- My Solution (In-Depth)
- What I Learned
- Useful resources
- Author

Overview

The challenge

Users should be able to:

View the optimal layout for the site depending on their device's screen size
See hover states for all interactive elements on the page
Filter job listings based on the categories

My process

Built with

Semantic HTML5 markup
CSS custom properties
Flexbox
CSS Grid
Mobile-first workflow
Vue.js - JS library

My Solution (In-Depth)

Using the JavaScript Fetch API, I loaded the job listing data and saved it to an array, jobList.

  loadDataFromJson: async function () {
    let url = "./data.json";

    await fetch(url)
    .then(async (response) => {
      this.jobList = await response.json();
    })
    .catch((error) => console.log(error));
  },

The visibility of the filter bar is based on the length of the array, jobFilters.

  <div class="job-list-filter" v-show="jobFilters.length>0"> 
    ...
  </div>

On initial load, the jobFilters array is empty and, as a result, the filter bar is hidden. When a user clicks on the filter tabs on the right side of each job listing, the addFilter() method is invoked which checks to see if the filter already exists in jobFilters. If not, the value is stored in the array and the filter bar becomes visible.

  addFilter: function (filter) {
    var filterExists = this.jobFilters.includes(filter);
    if (!filterExists) {
      this.jobFilters.push(filter);
    }
  },

The jobList is rendered to the webpage using a computed property, filteredJobList. On initial load, all job listings are rendered since the user hasn't clicked on any filters yet. However, when the user clicks on a filter, the program uses the array methods, .filter() and .every(), to loop through jobList and display only the jobs that match the filters in jobFilters array.

  filteredJobList: function () {
      return this.jobList.filter((job) => {
        let items = [job.role, job.level, ...job.languages, ...job.tools];
        let filters = this.jobFilters;
        return filters.every((filter) => items.includes(filter));
      });
    },

What I Learned

This challenge was a great way to refamiliarize myself with array helper methods such as .every(), and with using the Fetch API. I was also able to use CSS Grid and FlexBox to get the desired layout, which is always fun.

Useful resources

Author

Website - Phoebe Michel
Frontend Mentor - @awkwardblackcoder

A Beginner's Guide to Writing End-to-End Tests with TestCafe

Phoebe M — Wed, 04 Mar 2020 18:12:30 +0000

Lately, with the planning of a new application launch, I'm learning all the aspects needed to design/develop an application, which isn't just coding and styling it. Yes, your application may look great when you're done, but can you imagine what will happen if any one component of a major system fails or if an issue goes undetected? This is where the importance of End-to-End testing(in addition to a series of other tests, of course) comes in.

What is End-to-End testing?

End-to-end testing is a method used to check whether your application is behaving exactly how it's supposed to as a whole from start to finish. Through this technique, you are testing all of the important functionalities of your product, such as how well it is communicating with other databases, networks, and applications.

In this post, I will go over the following:

What is TestCafe
How to Install TestCafe
Writing and running your first test script

What is TestCafe?

TestCafe is a new, open-source, Node.js-based end-to-end testing tool used to automate testing for web apps. It takes care of all testing stages: starting browsers, running tests, gathering test results and generating reports. Using TestCafe for end-to-end testing has many advantages:

It is easy to install
It all supports all browsers and their versions
It doesn't need any plugins or has any dependencies; it works right out of the box, without you having to install any other software or web drivers.

Installing TestCafe

First things first, because TestCafe is JavaScript/Node.js-based, you need to install node.js to your system. If you already have it installed, you should be able to install packages using the npm command.
Now, all you have to do to install testcafe is to run this command globally in your terminal:

Writing Tests

To practice writing tests, we will be using TestCafe demo page.

Create a directory to house your test files. I'll name mine 'TestCafe-Example'.
Open a code editor of your choice and open up your newly created folder. (I use VSCode as my editor)
Create a new file called 'app.test.js' in your directory.

Now that you have your test file created, time to add in the code.

Import the testcafe module
Create a fixture.
A fixture is a category of tests used to make our tests cleaner and readable. A test suite can contain one or more fixtures. To declare a test fixture, use the fixture function:
fixture(fixtureName) or fixture `fixtureName` Note: The fixture declaration can be used to specify the target webpage
Add a test.
To initiate a test, call the test function and pass the test code inside it.

test(testName, fn(t))

In the above code sample, the test will type text into the 'Developer Name' input element and click the Submit button. The submit button will redirect you to a page that says 'Thank You, %username%!'(Feel free to change the text in the input element to whatever you like!)

The 't' object represents the test controller used to access the test run API's methods. You can use the test controller to:
- call the test actions
- handle browser dialog
- use the wait function, and
- execute assertions.

To check that the text on the page contains the right name, we'll create a selector that locates the article header and adds an assertion that checks that the text says 'Thank you, Phoebe M.' (or whatever name you replaced mine with 😊)

Now to test it! If running on a local machine, simply run this command:

With this command, TestCafe will find and launch Google Chrome to run the test. Of course, if you're using a different browser or you named your test file something differently, feel free to update the command accordingly.

Note: To see a list of browsers that TestCafe detects on your machine, run the following command:

And that's it! The simplest way to write and run an end to end test script.

Resources

TutorialsPoint - End-to-End Testing
TestCafe - Getting Started Guide
SitePoint
DevExpress - TestCafe Documentation