DEV Community: Michael Phan

Testing in React.js and Flask

Michael Phan — Mon, 18 Dec 2023 07:02:01 +0000

A Practical Dive into System Testing for Junior Developers

Introduction

As I approach the end of my software engineering bootcamp, I've realized that testing is a crucial aspect of building reliable applications. I used to be a bit intimidated by the idea of testing, especially since we had a lot of tests written for us during our coding challenges. Looking at those test files was overwhelming at first, but as I've learned more about it, I can't stress enough how important it can be the larger our projects scale up. As we are getting ready to present our final projects, a full stack application, I thought it'd be super helpful to talk about something that's really important but not always highlighted enough: System Testing. We've heard a bit about Unit Testing, and it will probably be the most relevant to us as junior developers, however for bigger projects such as ours, we are going to be focusing on System Testing!

Why Testing Matters

Before we jump into testing, let's understand why it's essential. Think of testing as a safety net for your code. It helps you catch bugs early in the development process, ensuring that your application behaves as expected. Here are a few key reasons why testing is so important:

1. Preventing Bugs
Testing allows you to identify and fix issues before they reach users.

2. Confidence in Code Changes
When you make changes or add new features, tests provide reassurance that existing functionality still works.

3. Collaboration and Maintenance
Tests serve as documentation for your code. They help you and your team understand how different parts of the application should work. Plus, they make it easier to maintain and improve your code over time.

Understanding Different Types of Testing
Before we discuss System Testing, let's break down the different types of testing we've come across:

Unit Testing: Testing individual units or components.
Integration Testing: Ensuring different modules work together.
System Testing: A comprehensive testing of the complete and fully integrated software application.
Acceptance Testing: Verifying the application meets business requirements.

Why System Testing Is Great For Our Projects
System Testing is a holistic approach that examines the entire application in a scenario that mimics real-world use. It's not just about checking individual parts but ensuring that everything works together seamlessly--an aspect crucial for the success of our capstone projects.

Why Focus on System Testing?

Comprehensive Coverage: It evaluates the application's overall functioning and performance.
User Perspective: System tests simulate real user experiences, covering functional and non-functional requirements.
Risk-Mitigation: Helps identify issues that might not be evident in unit or integration tests.

System Testing in Practice: A Full Stack Application Example
Let's consider an example relevant to our full stack project, a front-end built with React, and a back-end using Flask, and a database.

System Test Scenario: User Registration and Login Flow

Test Objective: Verify that a new user can register and log in to the application.
Steps:

Access the application's registration page.
Fill in the registration form with user details and submit.
Check if the user is directed to a confirmation page or receives a confirmation email. -Log out and then navigate to the login page
Log in with the newly created credentials -Verify that the user accesses the dashboard after login.

3.Tools: Tools like Selenium or Cypress can automate these steps, simulating a user's actions in a browser.

Writing a System Test (Pseudocode):

# Example of a system test script in pseudocode
# using a tool like Selenium or Cypress

navigate_to("registration_page")
fill_form({"username": "newuser", "password": "password123"})
submit_form()
assert_on_page("confirmation_page")

logout()
navigate_to("login_page")
login({"username": "newuser", "password": "password123"})
assert_on_page("dashboard")

Selenium and Cypress are among the most common and widely used tools in the development space for browser automation and system testing. They are popular for reasons such as

Selenium

Versatility: Selenium supports multiple programming languages like Java, C#, Python, Ruby, and JavaScript, making it a versatile choice for various development teams.
Browser Compatibility: It works across different browsers like Chrome, Firefox, Internet Explorer, and Safari.
Community and Support: Being one of the oldest tools in the market, it has a large community and extensive support resources.
Integration with Other Tools: Selenium integrates well with other testing frameworks and Continuous Integration (CI) tools.

Cypress

Modern Framework: Cypress is built for modern web applications and offers a more developer-friendly experience.
Real-time Testing: It allows developers to see tests running in real time, which can be beneficial for debugging.
Automatic Waiting: Cypress automatically waits for commands and assertions, reducing the flakiness of tests.
Rich Set of Features: It provides features like time travel, snapshots, and network traffic control, making testing more efficient.

In addition to Selenium and Cypress, there are other tools like Puppeteer, WebDriverIO, and Playwright that are also gaining traction in the development community for similar purposes. The choice of tool often depends on the specific needs of the project and the familiarity of the development team with the tool.

Best Practices in System Testing

When conducting system testing, there are several best practices to follow:

Start Early and Test often: Incorporate system testing early in the development cycle. This helps in identifying and fixing issues sooner.
Create Realistic Test Scenarios: Simulate real-world scenarios that closely mimic user behavior and environments.
Prioritize Tests: Focus on critical paths in your application. Not all tests are equally important.
Automate Where Possible: Automate repetitive and time-consuming tests to improve efficiency.
Keep Tests Maintainable: Write clear, concise, and well-documented tests. This makes maintenance easier as your application evolves.
Review and Refine: Regularly review your test cases and update them as the application changes.

Integrating System Testing into Your Workflow

As junior developers stepping out into the field, especially with a freshly completed project that we may continue to work on and improve, understanding and implementing System Testing provides us with a more broad perspective on our applications' functionality. While Unit Testing remains a fundamental skill for us, System Testing elevates our testing approach to encompass the entire application, ensuring we deliver a product that not only works in parts but excels as a whole.

Learning System Testing now is a great way to get ready for the real world of software development. It's a skill that'll help us not just as coders but as developers who can create cool, user-friendly applications.

Extra Resources
1.integration testing documentation https://www.guru99.com/testing-documentation.html
2.What is System Testing - an ultimate beginners guide
https://www.softwaretestinghelp.com/system-testing/

Selenium Tutorial: A Complete Guide on Selenium Testing https://www.lambdatest.com/selenium

Relationships in SQLAlchemy

Michael Phan — Fri, 01 Dec 2023 08:12:21 +0000

Beginning the Relationship Mapping

As a student first diving into SQLAlchemy for our full-stack Twitter clone project, I was met with a complex web of tables and relationships. Here's the path of my understanding, supplemented by our actual code.

OneToMany/ManyToOne Relationships:
These relationships form the backbone of user-generated content platforms. A user can create many posts, but each post is tied to one creator.

class User(db.Model):
    # ... other columns ...
    # OneToMany: User to Posts
    posts = db.relationship('Post', back_populates='user', cascade='all, delete-orphan')

This code represents the concept of 'users' and their 'posts' in a straightforward manner: one user, many posts.

ManyToMany Relationships:
A user's social connections are more complex. They can follow many users and be followed by many, creating a ManyToMany relationship.

class User(db.Model):
    # ... other columns ...
    # ManyToMany: User to Followers and Following
    followers = db.relationship('Follower', back_populates='following', foreign_keys='Follower.following_id')
    following = db.relationship('Follower', back_populates='follower', foreign_keys='Follower.follower_id')

The Follower table serves as the associative table, creating a network of user connections.

Self-referential Relationships:
The Follower table's nature of referencing the same User table for both 'follower_id' and 'following_id' makes it self-referential.

class Follower(db.Model):
    # ... other columns ...
    # Self-referential: Users following Users
    follower = db.relationship('User', back_populates='followers', foreign_keys=[follower_id])
    following = db.relationship('User', back_populates='following', foreign_keys=[following_id])

This snippet is the key to creating a social graph within our application.

Circular Relationships
Circular relationships occur when two or more entities are mutually dependent on each other, creating a cycle. This can be challenging to represent and manage but is essential for certain features like threaded comments, where a post can be a comment to another post.

class Post(db.Model):
    # ... other columns ...
    # Circular relationship: Posts to Comments
    comments = db.relationship('Post', back_populates='parent', cascade='all, delete-orphan')
    parent = db.relationship('Post', back_populates='comments', remote_side=[id])

Here, a Post can be a parent to other Post records, allowing for a hierarchy of posts and comments that reference each other.

Delving Deeper
I've realized that relationships in databases, like in real life, are not one-dimensional. They're intricate and interwoven.

Backref and Back Populates:
These SQLAlchemy features allow us to define the nature of our relationships bidirectionally. They ensure that both sides of the relationship are synchronized.

Cascade Options:
The cascade parameters were a lesson in responsibility. Like ensuring you clean up after a pet, cascading helps clean up related records to prevent database clutter.

Understanding Hybrid Properties
Hybrid properties in SQLAlchemy act like computed columns and provide a way to define custom, calculated fields.

class User(db.Model):
    # ... other columns ...
    @hybrid_property
    def password(self):
        # Password is not directly accessible
        raise AttributeError('Password access is not allowed')

    @password.setter
    def password(self, password):
        # Password is hashed for security
        self._password_hash = bcrypt.hashpw(password.encode('utf-8'), bcrypt.gensalt())

This example shows the encapsulation and security considerations for user passwords.

Performance Considerations
I learned the importance of choosing the right loading strategy—lazy, eager, or selective—to optimize database access patterns.

You know when you finally get that eureka moment? That happened to me with database relationships. They're not just lines connecting dots in a diagram; they're like the digital version of how we all interact with each other on social media. It's pretty cool to think about how those tables and columns in our database are actually laying down the tracks for friendships, conversations, and all the drama in between – right in the code!

SQLAlchemy doesn't just help us map out our database; it allows us to craft a narrative of interactions, shaping our application's story through data.

This journey taught me that each line of code echoes a relationship, a connection. It's about the macro—the application as a whole—and the micro—the individual relationships and their nuances.

Conclusion

Understanding SQLAlchemy relationships took me from confusion to clarity, from being a student to thinking like a developer. I'm not just proud of the application we built but also of the deeper understanding of how each part interconnects.

This deep dive into SQLAlchemy really felt like a journey into the heart of tech development. It's fascinating to see how these database relationships aren't just technical stuff – they're the building blocks of the online world. Kind of like getting a behind-the-scenes look at how all our digital interactions are wired together.

References:
https://docs.sqlalchemy.org/en/14/orm/basic_relationships.html / SQLAlchemy Documentation

Unlocking Python's Power With List Comprehensions and Advanced Data Structures

Michael Phan — Wed, 15 Nov 2023 14:04:05 +0000

Introduction:

Python, renowned for its simplicity and efficiency, offers powerful tools that can optimize and simplify code. Among these are list comprehensions and advanced data structures. This blog will explore these concepts, shedding light on their utility and elegance.

Section 1: Demystifying List Comprehensions
List comprehensions provide a concise way to create lists. They are more compact and faster than traditional for-loops, making your code more Pythonic.

Understanding the Basics:
A list comprehension consists of brackets containing an expression followed by a for clause, then zero or more for or if clauses. The expression can be anything, meaning you can put in all kinds of objects in lists.

Basic List Comprehension
Here’s a simple example:

squares = [x**2 for x in range(10)]
print(squares)

This snippet generates a list of square numbers from 0 to 9. It’s equivalent to writing a for-loop but is more succinct and readable.

Section 2: Advanced Usage of List Comprehensions
List comprehensions can be more complex. They can include multiple for clauses, which behave like nested loops.

Nested Loops in List Comprehensions
Consider generating a list of tuples:

pairs = [(x, y) for x in [1,2,3] for y in [3,1,4] if x != y]
print(pairs)

This snippet generates a list of tuples, representing all combinations of the two lists, excluding pairs with the same elements.

Section 3: Exploring Advanced Data Structures
Python offers several advanced data structures like tuples, sets, and dictionaries, which are crucial for various complex tasks.

Tuples:
Tuples are immutable sequences, typically used to store heterogeneous data.

Tuples

my_tuple = (1, "Hello", 3.4)
print(my_tuple)

Sets:
Sets are unordered collections of unique elements. They are ideal for membership testing and eliminating duplicate entries.

Sets

my_set = {1, 2, 3, 2, 3}
print(my_set)  # Output: {1, 2, 3}

Dictionaries:
Dictionaries store key-value pairs and are optimized for retrieving data. They are mutable and dynamic, allowing keys to be added or removed.

Dictionaries

my_dict = {'name': 'John', 'age': 26}
print(my_dict['name'])  # Output: John

Dictionaries are incredibly versatile, ideal for scenarios where data needs to be easily accessible by a key.

Section 4: Advanced Data Structures in Action
In practice, these advanced data structures can significantly simplify complex data manipulations. They shine especially when combined with list comprehensions.

Combining Data Structures

Consider this example where we filter a list of dictionaries:

employees = [{'name': 'John', 'dept': 'Engineering'},
             {'name': 'Jane', 'dept': 'Sales'}]

engineering = [emp['name'] for emp in employees if emp['dept'] == 'Engineering']
print(engineering)

This snippet demonstrates using a list comprehension with a dictionary to filter data.

Section 5: Practical Applications and Best Practices
Understanding when and how to use these tools is crucial. List comprehensions are best for simple transformations, while advanced data structures are essential for complex data manipulation and storage.

Conclusion:
Mastering list comprehensions and advanced data structures is a stepping stone to more advanced Python programming. These concepts are not just limited to small-scale problems but are extensively used in real-world applications, including data analysis, machine learning, web development, and automation. As you continue to explore Python, these tools will prove invaluable, helping you to write code that is not only effective but also clean and aligned with Python's core philosophy.

References:
Python's Official Documentation

useEffect Hooks in React

Michael Phan — Fri, 20 Oct 2023 07:38:52 +0000

*Unlocking the Secrets of useEffect in React: *
My attempt at simplifying useEffect:
Imagine you have a smart house, or a bunch of smart appliances. Various activities happen automatically—lights turn off and on, the temperature adjusts, and the doors lock or unlock based on different factors like time or whether someone is home. In React, a tool used to build websites, useEffect is like the system that manages these automated activities, known as "side effects."

What is useEffect?
useEffect is a tool that helps us manage various activities in our website automatically. Just like a smart home system that manages lights or temperature, useEffect takes care of different tasks such as loading data or reacting to user interactions.
useEffect performs side effects in a function component. Side effects could be data-fetching, subscriptions, manually changing the DOM, etc.

When Do We Use useEffect?
In a smart house, you might want the lights to turn on automatically at 6 PM. Similarly, in a website, you might want to load some data as soon as a visitor arrives.

Cleaning Up With useEffect
After hosting a party, you’d clean up and reset your home. Similarly, useEffect lets us clean up after activities, ensuring that everything runs smoothly and nothing is left hanging.

Custom Rules with useEffect
Sometimes, you might have specific rules, like turning off lights in unoccupied rooms. You can customize useEffect to handle such special cases, making it adaptable to various needs.

Guidelines for Using useEffect
Avoid Endless Loops: Make sure your commands don’t keep repeating endlessly, like a light that keeps turning off and on.

Specify Dependencies: Ensure you clearly state what factors or conditions your activities depend on, so they run at the right times.

*Advanced Automation with useEffect: *
Tailoring Your Smart House
Continuing with our smart house analogy, let’s delve deeper into the customization and advanced features that useEffect offers in enhancing our React homes (websites).

Multiple useEffect for Different Activities
Imagine you want to control the lights in one room and the air conditioning in another separately. In React, you can use multiple useEffect hooks to manage different activities independently.

Here, each useEffect is like a separate control system managing a different part of the house, allowing for more specialized and organized configurations.

Crafting Custom Controls with useEffect
Custom hooks in React are like creating your personalized smart home routines or modes, like a "Cinema Mode" that dims the lights and sets the room temperature to a comfortable level.

This way, you can create reusable sets of commands (routines) that can be easily applied whenever needed, making the system more versatile and user-friendly.

Conclusion
Understanding useEffect is like mastering the control system of a smart house in the world of website development. It allows your website to perform various tasks automatically, making the user’s experience smooth and dynamic. With useEffect, you can manage, customize, and optimize these tasks to create effective and user-friendly websites.

more info https://legacy.reactjs.org/docs/hooks-effect.html

My Journey into JavaScript: Balancing Late Nights and Learning

Michael Phan — Fri, 29 Sep 2023 09:30:29 +0000

Introduction to Flatiron School SWE Bootcamp

When I first joined my coding bootcamp, I had no idea what to expect. I anticipated a solitary journey, assuming I would be on my own in my quest to learn JavaScript. However, I was pleasantly surprised to discover that the experience was far more social and enriching than I had imagined. This newfound camaraderie, combined with the challenges of late-night coding and the battle with imposter syndrome, transformed my journey into a truly rewarding and fulfilling adventure.

The Appeal of DOM Manipulation

The first phase of my bootcamp focused on JavaScript, with its ability to manipulate the Document Object Model (DOM), fascinated me from the start. It held the promise of creating dynamic and interactive web applications, but I soon realized that it wasn't just about memorizing code snippets – it was about deeply understanding the concepts behind them.

Late Nights and Struggles

As I delved into the world of JavaScript, I found myself burning out more often than not. I was determined to master the language and ensure that my understanding was solid. However, my relentless pursuit of knowledge began to take a toll on my health. It was a wakeup call that made me realize the need for balance in my learning journey.

The Reward of Understanding

Amidst the late-night coding sessions and moments of frustration, there came a breakthrough. That moment when everything clicked, and I truly understood a concept, was euphoric. It was the reward for all the effort I had invested. This feeling of mastery fueled my determination to keep going, but I knew I needed to find a healthier approach.

Learning Efficiency and Balance

I realized that efficiency in learning is not about how many hours you spend coding but about how effectively you utilize your time. Late nights and all-nighters were not sustainable in the long run. I started to adopt strategies to maximize my learning without sacrificing my well-being.

Structured Learning: I organized my learning into focused sessions with breaks in between to prevent burnout.

Code Analogies: I discovered that code analogies were incredibly helpful in grasping complex concepts. They served as mental bridges, connecting new knowledge to familiar concepts.

Hands-on Learning: Practical exercises and projects allowed me to apply what I learned immediately, reinforcing my understanding.

The Power of Asking for Help

One of the most significant lessons I learned was the importance of seeking help. There's no shame in asking questions or reaching out to peers, instructors, or online communities. When I encountered roadblocks, I realized that a simple explanation or code snippet from someone else could provide the clarity I needed.

From Comparing to Empowering

Early on, I found that I was comparing myself often to the rest of the group. Instead of viewing my peers as competitors, I realized that we all shared the same goal. We were on a collective journey against the curriculum, not against each other. This shift in perspective transformed my experience. Rather than comparing myself in a detrimental way, I began to see my cohort as a source of support and encouragement. We were a team, each with unique strengths, working together to conquer the challenges of coding.

Looking Ahead

As I reflect on this first phase of my coding bootcamp, I find myself excited for what lies ahead. The next phase will focus on React, and I'm eager to delve into new ways of efficiently coding and building dynamic web applications. My journey continues, and I'm ready to embrace the challenges and rewards that come with it.

A Pledge to Active Learning

I've come to recognize that I learn best through hands-on experience. Lectures alone can leave me feeling adrift. So, as I step into the next phase of my bootcamp, I'm committed to a new approach. I'll engage in prior practice and practical exercises to ensure that I come to lectures armed with questions and a readiness to be actively involved. This, I believe, will enhance my learning process and bring me closer to my goals.

Conclusion

My journey through phase 1 of my coding bootcamp has been a transformative experience. It exceeded my initial expectations of a solitary pursuit and introduced me to an amazing community of fellow learners. I faced the formidable imposter syndrome head-on, turning it from a hindrance into a driving force.

As I continue down this coding path, I am not only learning the intricacies of JavaScript, React, Python, and Flask, but also the importance of collaboration, support, balance, and shared goals. The late-night struggles and the imposter syndrome challenges have all been instrumental in shaping my perspective, making me realize that it's not about being the best coder in the room but about being the best learner I can be.

I will always wish nothing but success for everyone on a similar journey, for we are not in competition with each other; we are allies in the pursuit of the never ending knowledge and skill that this industry requires.