Learn more about our current job openings and benefits of working at FSL.
Detailed reviews and feedback from past and current clients.
Get to know the Management Team behind FullStack Labs.
Our step-by-step process for designing and developing new applications.
Writings from our team on technology, design, and business.
Get answers to the questions most frequently asked by new clients.
Learn about our company culture and defining principles.
A high level overview of FullStack Labs, who we are, and what we do.
A JavaScript framework that allows rapid development of native Android and IOS apps.
A JavaScript framework maintained by Facebook that's ideal for building complex, modern user interfaces within single page web apps.
A server side programming language known for its ease of use and speed of development.
A lightweight and efficient backend javascript framework for web apps.
An interpreted high-level programming language great for general purpose programming.
A JavaScript framework maintained by Google that addresses many of the challenges encountered when building single-page apps.
A JavaScript framework that allows developers to build large, complex, scalable single-page web applications.
A progressive JavaScript framework known for its approachability, versatility, and performance.
A progressive JavaScript framework known for its approachability, versatility, and performance.
A progressive JavaScript framework known for its approachability, versatility, and performance.
A progressive JavaScript framework known for its approachability, versatility, and performance.
A progressive JavaScript framework known for its approachability, versatility, and performance.
A progressive JavaScript framework known for its approachability, versatility, and performance.
A progressive JavaScript framework known for its approachability, versatility, and performance.
View a sampling of our work implemented using a variety of our favorite technologies.
View examples of the process we use to build custom software solutions for our clients.
View projects implemented using this javascript framework ideal for building complex, modern user interfaces within single page web apps.
View projects implemented using this framework that allows rapid development of native Android and IOS apps.
View projects implemented using this backend javascript framework for web apps.
View projects implemented using this high-level programming language great for general purpose programming.
View projects implemented using this server side programming language known for its ease of use and speed of development.
We have vast experience crafting healthcare software development solutions, including UI/UX Design, Application Development, Legacy Healthcare Systems, and Team Augmentation. Our development services help the healthcare industry by enhancing accessibility, productivity, portability, and scalability.
We offer a range of custom software development solutions for education companies of all sizes. We're experts in Education Software Development and specialists in enhancing the learning experience across web, mobile, and conversational UI.
We're experts in developing Custom Software Solutions for the Logistics Industry. Our work offered a whole new and more efficient way for Logistics companies to manage their crucial operations.
We partner with various construction industry organizations to build custom software development solutions. Our Construction Software Development Services allow construction companies to manage projects, resources, and documentation.
We have vast experience crafting healthcare software development solutions, including UI/UX Design, Application Development, Legacy Healthcare Systems, and Team Augmentation. Our development services help the healthcare industry by enhancing accessibility, productivity, portability, and scalability.
We offer a range of custom software development solutions for education companies of all sizes. We're experts in Education Software Development and specialists in enhancing the learning experience across web, mobile, and conversational UI.
We're experts in developing Custom Software Solutions for the Logistics Industry. Our work offered a whole new and more efficient way for Logistics companies to manage their crucial operations.
We partner with various construction industry organizations to build custom software development solutions. Our Construction Software Development Services allow construction companies to manage projects, resources, and documentation.
Learn more about our current job openings and benefits of working at FSL.
Detailed reviews and feedback from past and current clients.
Get to know the Management Team behind FullStack Labs.
Our step-by-step process for designing and developing new applications.
Writings from our team on technology, design, and business.
Get answers to the questions most frequently asked by new clients.
Learn about our company culture and defining principles.
A high level overview of FullStack Labs, who we are, and what we do.
A JavaScript framework that allows rapid development of native Android and IOS apps.
A JavaScript framework maintained by Facebook that's ideal for building complex, modern user interfaces within single page web apps.
A server side programming language known for its ease of use and speed of development.
A lightweight and efficient backend javascript framework for web apps.
An interpreted high-level programming language great for general purpose programming.
A JavaScript framework maintained by Google that addresses many of the challenges encountered when building single-page apps.
A JavaScript framework that allows developers to build large, complex, scalable single-page web applications.
A progressive JavaScript framework known for its approachability, versatility, and performance.
A dynamic programming language used in all sorts of web and mobile applications.
A cross-platform programming language designed to run robust applications on any device.
A UI toolkit used to build natively compiled applications from a single codebase.
A functional programming language that’s ideal for scalability, maintainability, and reliability.
A Customer Relationship Management (CRM) platform that seamlessly integrates with your business operations.
A high-performance programming language that makes it easy to build simple, reliable, and efficient software.
View a sampling of our work implemented using a variety of our favorite technologies.
View examples of the process we use to build custom software solutions for our clients.
View projects implemented using this javascript framework ideal for building complex, modern user interfaces within single page web apps.
View projects implemented using this framework that allows rapid development of native Android and IOS apps.
View projects implemented using this backend javascript framework for web apps.
View projects implemented using this high-level programming language great for general purpose programming.
View projects implemented using this server side programming language known for its ease of use and speed of development.
Thinking about time is hard. Testing software is hard too. Testing time-based software can be brutal. In this article, I'll explain some techniques that simplify time-based software feature testing.
Usually, software doesn't care what time it is. For example, a social media timeline only has one time state: past. There is no such thing as a social media post in a future state because the post hasn't been created yet.
Now, let's use a different example like a digital itinerary. The itinerary contains reservations that represent a single date and time.
Here are some hypothetical acceptance criteria for the digital itinerary:
As a user, when I view...
A future reservation, I want to see a "Cancel" button.
A current reservation, I want to see the date as "Today".
A past reservation, I want to see a "Send Receipt" button.
You can see how this complicates things. The user wants different functionality based on what time they are viewing the same data.
In the next section, I'll dive into some code and show how to build this feature.
I'm not going to dive super deep here. Instead, I'll show a quick overview of how I built the hypothetical itinerary feature.
First, I created and ran a new SPA using create-react-app.
Once the app was running, I added a fake reservations API to simulate our reservations server:
Next, I create a ReservationCard component to display the reservations:
Finally, I will rework App.js to fetch our reservations and render them:
The finished product should look something like this:
Notice that in src/api/getReservations.js I've hard-coded the reservation dateTime as "2021-10-10T14:48:00". This is simulating a reservation in the database for Donnie's Pizzeria on Oct. 10th, 2021.
Depending on when you're running this code, the reservation card displays different content. This illustrates the complexity of time-based features.
Now that the feature is working, we need to test it. This article is about testing with Cypress, but the same principles apply elsewhere.
First, let's install Cypress and then run it.
Now let's write our test:
Now make sure the react app is running at http://localhost:3000 and then run your test.
Can you spot the issues with this test?
If you run the test on Oct. 10th, 2021 then the reservation card will display "Today" instead of "Sun Oct 10, 2021".
If you run the test before Oct. 10th then the button will show "Cancel" instead of "Send Receipt".
This test is flaky because it will pass or fail depending on what time the test is run. Flaky tests slow down development and can take a lot of time to debug. This is bad!
In the next section, I'll explain how to fix this flaky test.
The problem with this test is that we don't have control over when it is run. That means we don't control which time state we are testing in (i.e. past, present, future).
This is where cy.clock() comes in.
Let's rewrite our test using cy.clock to simulate all three-time states:
Great! Now our tests are passing regardless of when they are run. We are confident that our feature works in past, present, and future states.
Let's take a look at what we did here, and then I'll wrap up.
First, we split up our tests into past, present, and future scenarios.
Next, before each test suite runs we mock the system date using cy.clock.
We know that our reservation date is Oct. 10th, 2021. If we mock 'now' as Jan 1st, 2021, then we are simulating a user who is viewing an upcoming reservation! Similarly, if we mock 'now' as Dec 31st, 2021 then we are simulating a user viewing a past reservation.
IMPORTANT: It's crucial that you include the ["Date"] as the second parameter to cy.clock. If you fail to do this, then other time-related functions such as setTimeout will stop working.
In this article, we used cy.clock to write consistent tests for a time-based feature.
We learned:
Thanks for reading, and good luck building (and testing) your time-based feature!
We’d love to learn more about your project.
Engagements start at $75,000.