How to Create Team Profiles: Demo & Code Explanation

Table of Contents

1. Introduction
2. Testing the Employee Class
   1. Constructor Tests
   2. Method Tests
3. Testing the Engineer Class
   1. Constructor Tests
   2. Method Tests
4. Testing the Intern Class
   1. Constructor Tests
   2. Method Tests
5. Testing the Manager Class
   1. Constructor Tests
   2. Method Tests
6. Running the Tests
7. Demonstrating the Application
8. Code Overview
   1. Employee Class
   2. Engineer Class
   3. Intern Class
   4. Manager Class
9. HTML Generation
   1. Importing Modules
   2. Setting Up Employee Array
   3. Filtering and Mapping Employee Objects
   4. Rendering Markdown
   5. Rendering Manager
   6. Rendering Engineer
   7. Rendering Intern
10. Conclusion

Introduction

In this article, we will dive into the testing and implementation details of a JavaScript application that manages employee profiles for a team. The application allows you to create profiles for different types of employees, such as managers, engineers, and interns. We will explore the testing process for each class and discuss the functionalities of the application.

Testing the Employee Class

Constructor Tests

The first class we will test is the Employee class. We will start by testing the constructor function, which creates a blueprint object with name, ID, and email values. We will ensure that a new instance of the Employee class is created and that the created instance contains the correct values.

Method Tests

After testing the constructor, we will move on to testing the methods of the Employee class. We will check if the "getID", "getName", and "getEmail" methods correctly return the respective values for an instance of the Employee class. This will ensure that the essential functionalities of the Employee class are working as expected.

Testing the Engineer Class

Constructor Tests

Similar to the Employee class, the Engineer class also needs to be tested. We will conduct constructor tests to verify that a new instance of the Engineer class is created with the expected values of name, ID, email, and GitHub profile.

Method Tests

In addition to the constructor tests, we will also test the "getGitHub" method, which is unique to the Engineer class. This method should return the GitHub profile URL for the engineer instance. By conducting these tests, we can ensure that the Engineer class is functioning correctly.

Testing the Intern Class

Constructor Tests

Next, we will focus on the Intern class. We will perform constructor tests to ensure that a new instance of the Intern class is created with the necessary values of name, ID, email, and school.

Method Tests

The method tests for the Intern class will be similar to those for the Employee class. We will check if the "getSchool" method returns the correct school name for the intern instance. By conducting these tests, we can confirm that the Intern class is functioning as intended.

Testing the Manager Class

Constructor Tests

Lastly, we will test the Manager class. Similar to the previous classes, we will begin with constructor tests to validate that a new instance of the Manager class is created with the expected values of name, ID, email, and office number.

Method Tests

In the method tests for the Manager class, we will focus on the "getOfficeNumber" method, which is specific to this class. This method should return the office number for the manager instance. By conducting these tests, we can ensure the proper functionality of the Manager class.

Running the Tests

Once the tests for all four classes (Employee, Engineer, Intern, and Manager) have been written, we can run them using the "npm run test" command. By doing so, we can verify if all the tests pass and if the code coverage is 100% across the board. This step is crucial to ensure the reliability and correctness of the application.

Demonstrating the Application

After successfully passing all the tests, we can proceed to demonstrate the application's functionalities. By running the application, we can showcase the creation of team profiles based on the user's input. The application will generate an HTML document called "team-profile.html" and populate it with the provided information, creating a visually appealing and informative representation of the team.

Code Overview

Let's take a closer look at the code structure and functionality of the application.

Employee Class

The Employee class contains a constructor function that creates a blueprint object with properties such as name, ID, and email. This class also includes methods like "getName", "getID", and "getEmail", which return the respective values of the object.

Engineer Class

The Engineer class extends the Employee class and includes a constructor function that adds an additional property, GitHub, specific to the Engineer class. The class inherits the properties and methods from the Employee class and includes the "getGithub" and "getRole" methods, which return the GitHub profile URL and role, respectively.

Intern Class

Similar to the Engineer class, the Intern class extends the Employee class. It has a constructor function that includes an extra property, school. The class inherits the properties and methods from the Employee class and includes the "getSchool" and "getRole" methods, which return the school name and role, respectively.

Manager Class

The Manager class also extends the Employee class and has a constructor function with an additional property, office number. It inherits the properties and methods from the Employee class and includes the "getOfficeNumber" and "getRole" methods, which return the office number and role, respectively.

HTML Generation

To generate the team profile in HTML format, the application imports modules such as "inquirer", "fs", and "generate-html". These modules are used to prompt questions, write the file, and generate the markdown, respectively. The application utilizes the employee array to store employee objects.

Importing Modules

The necessary modules, including "inquirer", "fs", and "generate-html", are imported into the index.js file to facilitate the functionalities required for the application.

Setting Up Employee Array

In the index.js file, the variable "employees" is declared as an empty array. This array will store the employee objects created throughout the application.

Filtering and Mapping Employee Objects

The application utilizes the array methods "filter" and "map" to filter and map the employee objects in the "employees" array. This process creates an array of HTML representations of the employee objects, with each representation specific to the employee type (Manager, Engineer, or Intern).

Rendering Markdown

The "generateMarkdown" function takes in the array of HTML representations and generates the full markdown HTML file. The function first reads the HTML template file using the "fs" module's "readFileSync" method. It then replaces the placeholders in the template file with the actual user-inputted values using regular expressions. Finally, the function returns the updated template.

Rendering Manager, Engineer, and Intern

The application includes separate functions for rendering the Manager, Engineer, and Intern HTML representations. These functions read the respective template file, replace the placeholders with the actual user-inputted values, and return the updated template.

Conclusion

In this article, we explored the testing and implementation details of a JavaScript application for managing employee profiles. We covered the testing process for each class, including the Employee, Engineer, Intern, and Manager classes. We also discussed the functions and code structure of the application, as well as the HTML generation process. By understanding these concepts, you can effectively test and implement similar applications in the future.