EXTREMELY FAST & SIMPLE CI TESTING - SemaphoreCI

LearnCode.academy · Beginner ·🌐 Frontend Engineering ·9y ago

Key Takeaways

Sets up continuous testing for a Node.js project using SemaphoreCI

Full Transcript

in this video we are going to set up continuous testing for a node.js project using SEMA 4ci now sema4 is one of my favorite continuous testing platforms of all time because they really excel at speed which is one of my number one concerns when it comes to continuous testing I want it to test fast and from the moment you push code to GitHub to the moment your tests run and complete in my experience semi 4ci is by far the fastest continuous integration platform out there so here's my project it's the simple react Plus mobx app that I've been using for my last two videos and I've since added some tests to it that I can now run using the just command and the tests run and pass so if I run just here then there's my three test Suites they run and they pass now if you want to see what I did to get the test up and running you can look at the source code or even better I wrote an article on it on some Force Community tutorials uh and so it basically covers everything I did and why so those are up and running the only thing I want want to do at this point is I want to add that just command to my npm test script so when I run npm test it also runs just there this isn't something you have to do but it does make your life ever so slightly easier so this is pushed to GitHub and now I just want to get this thing continuously testing so when I create a pull request it adds those pretty little badges that testing is underway and testing is complete and whenever I make changes to master or any branch it's going to test those so let's go over to semi for C I have a brand new account here and I'm going to go ahead and add a new project then I'm going to pick my account and I'm going to connect it to GitHub this is an extremely simple process you can choose public or private since this is a public project I'm just going to do public I'm never going to test private projects here and I've gone ahead and I've authorized that application so now I can go back to my account and I can see all my GitHub projects so I can see this sem test semafor test there we go Sam test and I can start building off the master Branch let's go ahead do that and it's going to kind of analyze my project and determine hey this is a no. JS project let's kind of pull in some San defaults for you and get things started so I should have that here in just a moment okay there we go language is Javascript hey you're right on that let's go ahead pick my node.js version I'm using the latest and then is the setup npm install yes it is is the job npm test yep that's my job I could change that to just but I'll leave it npm test just in case I switch to mocha later on one day um let's go ahead and build with these settings so there we go and it's starting my build now for context if I were to run npm install on my local MacBook Pro uh npm install and then run npm test with this project it takes about 45 seconds so let's see what semaphore does okay check that out I skipped ahead and 1 minute on the dot which if you've used continuous testing before one minute is really fast for it to set up a testing environment uh with no JS install the correct version do an npm install and run the test if it takes me 45 seconds on my machine to run that a minute is really really fast but prepare to have your mind blown because it actually gets better let's go ahead and change our repo and see this thing retest I'm going to go ahead and get this badge here for my read me that seems nice let's go ahead and add that so I now have this cool build status and let's add our read me and push that so and push is complete let's go back to S test oh it already noticed it and queed it and it already started running the build so that was pretty much instantaneous which is really nice and let's see how long it takes to build this time around I'll give you a hint it's a lot faster there you go 16 seconds I cut a couple seconds of blank space out there for you but most likely due to npm caching that they've done on their side this thing created an environment for my test to run it did npm install it ran the test in 16 seconds which is just incredibly fast continuous integration incredibly fast test cases Happening Now obviously my tests happen really fast I'm doing them in node.js noj JS is blazing fast for unit tests and even functional tests so I've got my act together with my project and semor has their act together it's a great combination tests are just flying through before we wrap things up let's go ahead and check out a pull request let's go back over to my repo you see there we are build status passed awesome let's go and make a new branch and pull request that uh new branch and let's go ahead and make some kind of change to something let's say I'll just change the read me again test we'll do the same thing get out read me we'll commit that and we'll get push so that's going up there there's my new Branch let's go ahead pull request this let's go create that pull request and we can see that semafor is now testing that okay semafor CI is running the build and we're going to get to see how long it takes for that to show up again to the poll request and it's going to happen really fast so there we go I cut out 8 seconds and the tests have passed so again 15 seconds later I can see that this pull request is good to go let's go ahead and merge it confirm that merge and we are done I can go back to master you can see that it says it's pending because it's running tests against the master Branch now and if I were to refresh then I will see this to be passed here any second there we are my tests have passed on Master again so I can see that the pr worked fine and master obviously worked fine so there you have it that is semi 4ci and an extremely fast nutshell it is a great platform and just darn fast um and a huge thanks to sem4 C I reached out and told them I'd be doing a video and they were willing to sponsor this as well which I was going to bring you guys this content regardless cuz I think they're a great platform but huge shout out of thanks uh to SEI for being willing to sponsor it as well hope this helped you out and have an excellent day

Original Description

SemaphoreCI is a great testing platform primarily because it's blazing fast. In just a few seconds, we'll get continuous testing up and running for our Javascript Project! SEMAPHORECI: https://semaphoreci.com/ THE CODE: https://github.com/willrstern/semtest THE BLOG POST: https://semaphoreci.com/community/tutorials/how-to-test-react-and-mobx-with-jest The #1 thing that I care about with continuous testing is SPEED. I want my tests to start running immediately and be completed very quickly. Enter SemaphoreCI. I'm not entirely sure how they do it, but they run and complete tests incredibly quickly. For this sample javascript app with React and MobX with Enzyme and Jest, it takes 45 seconds on my local mac to run npm install and jest. The first time I run tests on SemaphoreCI, the tests complete in 60seconds, which is incredible. Even more amazing is that the continuous integration tests complete 4 times as fast the second time...in 16 seconds! Continuous integration with SemaphoreCI means that pull requests are flagged as ready-to-merge much faster, which means your workflow is far less hindered. -~-~~-~~~-~~-~- Also watch: "Tailwind CSS - why CSS utility classes save so much time" https://www.youtube.com/watch?v=oU5ar0dmQEY -~-~~-~~~-~~-~-
Watch on YouTube ↗ (saves to browser)
Sign in to unlock AI tutor explanation · ⚡30

Playlist

Uploads from LearnCode.academy · LearnCode.academy · 0 of 60

← Previous Next →
1 Web Development Tutorial for Beginners (#1) - How to build webpages with HTML, CSS, Javascript
Web Development Tutorial for Beginners (#1) - How to build webpages with HTML, CSS, Javascript
LearnCode.academy
2 Web Development Tutorial for Beginners (#2) - Basic CSS - How to build a website with HTML & CSS
Web Development Tutorial for Beginners (#2) - Basic CSS - How to build a website with HTML & CSS
LearnCode.academy
3 How to create CSS Layouts - Web Development Tutorial for Beginners (#3) - with HTML & CSS
How to create CSS Layouts - Web Development Tutorial for Beginners (#3) - with HTML & CSS
LearnCode.academy
4 Bootstrap Tutorial For Beginners - Responsive Design with Bootstrap 3 - Responsive HTML, CSS
Bootstrap Tutorial For Beginners - Responsive Design with Bootstrap 3 - Responsive HTML, CSS
LearnCode.academy
5 Angularjs Tutorial for Beginners - learn Angular.js using UI-Router
Angularjs Tutorial for Beginners - learn Angular.js using UI-Router
LearnCode.academy
6 CSS Tutorial - Web Development Tutorial for Beginners (#5)
CSS Tutorial - Web Development Tutorial for Beginners (#5)
LearnCode.academy
7 Node.js tutorial for beginners - an introduction to Node.js with Express.js
Node.js tutorial for beginners - an introduction to Node.js with Express.js
LearnCode.academy
8 Github Tutorial For Beginners - Github Basics for Mac or Windows & Source Control Basics
Github Tutorial For Beginners - Github Basics for Mac or Windows & Source Control Basics
LearnCode.academy
9 Javascript Tutorial - Programming Tutorial for Beginners Pt 1
Javascript Tutorial - Programming Tutorial for Beginners Pt 1
LearnCode.academy
10 Javascript Tutorial - jQuery Tutorial for Beginners Pt 2
Javascript Tutorial - jQuery Tutorial for Beginners Pt 2
LearnCode.academy
11 AngularJS Directives Tutorial - Part 1 - Demystifying Angular Directives
AngularJS Directives Tutorial - Part 1 - Demystifying Angular Directives
LearnCode.academy
12 WATCH THIS IF YOU WANT TO BECOME A WEB DEVELOPER! - Web Development Career advice
WATCH THIS IF YOU WANT TO BECOME A WEB DEVELOPER! - Web Development Career advice
LearnCode.academy
13 YEOMAN TUTORIAL - Master Front-End Workflow with Yeoman, Grunt and Bower
YEOMAN TUTORIAL - Master Front-End Workflow with Yeoman, Grunt and Bower
LearnCode.academy
14 BOWER! - Streamline Web Workflow with Bower Package Manager
BOWER! - Streamline Web Workflow with Bower Package Manager
LearnCode.academy
15 Chrome DevTools for CSS - Better CSS Coding & CSS Debugging with Developer Tools
Chrome DevTools for CSS - Better CSS Coding & CSS Debugging with Developer Tools
LearnCode.academy
16 GITHUB ATOM - Why Atom.io will be your favorite Text Editor!
GITHUB ATOM - Why Atom.io will be your favorite Text Editor!
LearnCode.academy
17 GITHUB PULL REQUEST, Branching, Merging & Team Workflow
GITHUB PULL REQUEST, Branching, Merging & Team Workflow
LearnCode.academy
18 Pimp that Terminal - Add shortcuts and functions to your .bash_profile to simplify routine tasks
Pimp that Terminal - Add shortcuts and functions to your .bash_profile to simplify routine tasks
LearnCode.academy
19 jQuery Tutorial #3 - Writing Smarter, Better Code - jQuery Tutorial for Beginners
jQuery Tutorial #3 - Writing Smarter, Better Code - jQuery Tutorial for Beginners
LearnCode.academy
20 jQuery Tutorial #2 - Event Binding - jQuery Tutorial for Beginners
jQuery Tutorial #2 - Event Binding - jQuery Tutorial for Beginners
LearnCode.academy
21 jQuery Tutorial #1 - jQuery Tutorial for Beginners
jQuery Tutorial #1 - jQuery Tutorial for Beginners
LearnCode.academy
22 Node.js MongoDB Tutorial using Mongoose
Node.js MongoDB Tutorial using Mongoose
LearnCode.academy
23 Node.js tutorial for beginners 2014 - an introduction to Node.js with Express.js
Node.js tutorial for beginners 2014 - an introduction to Node.js with Express.js
LearnCode.academy
24 WEB DEVELOPMENT - SECRETS TO STARTING A CAREER in the Web Development Industry
WEB DEVELOPMENT - SECRETS TO STARTING A CAREER in the Web Development Industry
LearnCode.academy
25 jQuery Tutorial #4 - DOM Traversal with jQuery
jQuery Tutorial #4 - DOM Traversal with jQuery
LearnCode.academy
26 jQuery Tutorial #5 - Building a jQuery Tab Panel Widget
jQuery Tutorial #5 - Building a jQuery Tab Panel Widget
LearnCode.academy
27 jQuery Tutorial #6 - Building a jQuery Image Slider
jQuery Tutorial #6 - Building a jQuery Image Slider
LearnCode.academy
28 jQuery Ajax Tutorial #1 - Using AJAX & API's (jQuery Tutorial #7)
jQuery Ajax Tutorial #1 - Using AJAX & API's (jQuery Tutorial #7)
LearnCode.academy
29 jQuery Ajax Tutorial #2 - Posting data to backend (jQuery tutorial #8)
jQuery Ajax Tutorial #2 - Posting data to backend (jQuery tutorial #8)
LearnCode.academy
30 jQuery Ajax Tutorial #3 - Delegating Events & Mustache.js Templating (jQuery tutorial #9)
jQuery Ajax Tutorial #3 - Delegating Events & Mustache.js Templating (jQuery tutorial #9)
LearnCode.academy
31 jQuery Ajax Tutorial #4 - "Edit" modes & Better Mustache.js Templating (jQuery tutorial #9)
jQuery Ajax Tutorial #4 - "Edit" modes & Better Mustache.js Templating (jQuery tutorial #9)
LearnCode.academy
32 How to put your website online - how to FTP to a domain & upload files to a webhost
How to put your website online - how to FTP to a domain & upload files to a webhost
LearnCode.academy
33 Basic Terminal Usage - Cheat Sheet to make the command line EASY
Basic Terminal Usage - Cheat Sheet to make the command line EASY
LearnCode.academy
34 SSH Tutorial - Basic server administration with SSH
SSH Tutorial - Basic server administration with SSH
LearnCode.academy
35 Vagrant Tutorial - Running a VM For Your Local Development Environment
Vagrant Tutorial - Running a VM For Your Local Development Environment
LearnCode.academy
36 Sublime Text Favorite Packages and Workflow
Sublime Text Favorite Packages and Workflow
LearnCode.academy
37 What Makes Javascript Weird...and AWESOME - Pt 1
What Makes Javascript Weird...and AWESOME - Pt 1
LearnCode.academy
38 Javascript is Event-Driven - What makes Javascript Weird...and Awesome Pt 2
Javascript is Event-Driven - What makes Javascript Weird...and Awesome Pt 2
LearnCode.academy
39 Javascript Closures Tutorial - What makes Javascript Weird...and Awesome Pt 3
Javascript Closures Tutorial - What makes Javascript Weird...and Awesome Pt 3
LearnCode.academy
40 FREE REST API - Practice Developing Javascript AJAX Apps with this API
FREE REST API - Practice Developing Javascript AJAX Apps with this API
LearnCode.academy
41 Javascript Scope Tutorial - What Makes Javascript Weird...and Awesome Pt 4
Javascript Scope Tutorial - What Makes Javascript Weird...and Awesome Pt 4
LearnCode.academy
42 Javascript Context Tutorial - What makes Javascript Weird...and Awesome Pt5
Javascript Context Tutorial - What makes Javascript Weird...and Awesome Pt5
LearnCode.academy
43 Nginx Tutorial - Proxy to Express Application, Load Balancer, Static Cache Files
Nginx Tutorial - Proxy to Express Application, Load Balancer, Static Cache Files
LearnCode.academy
44 Live Reload Sublime, Chrome, Anything - Fast and easy with Live-Server
Live Reload Sublime, Chrome, Anything - Fast and easy with Live-Server
LearnCode.academy
45 Are you bad, good, better or best with Async JS? JS Tutorial: Callbacks, Promises, Generators
Are you bad, good, better or best with Async JS? JS Tutorial: Callbacks, Promises, Generators
LearnCode.academy
46 Javascript Generators - THEY CHANGE EVERYTHING - ES6 Generators Harmony Generators
Javascript Generators - THEY CHANGE EVERYTHING - ES6 Generators Harmony Generators
LearnCode.academy
47 Web Development Advice - Interview with Dev Tips
Web Development Advice - Interview with Dev Tips
LearnCode.academy
48 How the Internet Works for Developers - Pt 2 - Servers & Scaling
How the Internet Works for Developers - Pt 2 - Servers & Scaling
LearnCode.academy
49 How the Internet Works for Developers - Pt 1 - Overview & Frontend
How the Internet Works for Developers - Pt 1 - Overview & Frontend
LearnCode.academy
50 HAPROXY vs NGINX - 10,000 requests while killing servers
HAPROXY vs NGINX - 10,000 requests while killing servers
LearnCode.academy
51 Node.js Cluster - Boost Node App Performance & Stability with Clustering
Node.js Cluster - Boost Node App Performance & Stability with Clustering
LearnCode.academy
52 Web Dev Training with Treehouse
Web Dev Training with Treehouse
LearnCode.academy
53 What is Node.js Exactly? - a beginners introduction to Nodejs
What is Node.js Exactly? - a beginners introduction to Nodejs
LearnCode.academy
54 How to deploy node.js applications #1 - spin up a server
How to deploy node.js applications #1 - spin up a server
LearnCode.academy
55 Deploying node.js applications #2 - provision server & setup flightplan
Deploying node.js applications #2 - provision server & setup flightplan
LearnCode.academy
56 Deploying Node.js Applications - Deploy Node the right way - as an Upstart Service
Deploying Node.js Applications - Deploy Node the right way - as an Upstart Service
LearnCode.academy
57 Mobile Web Design - Coding Workflow For Mobile Websites
Mobile Web Design - Coding Workflow For Mobile Websites
LearnCode.academy
58 WHY YOU NEED A BUILD SYSTEM LIKE GRUNT, GULP, BRUNCH FOR YOUR WEBSITE
WHY YOU NEED A BUILD SYSTEM LIKE GRUNT, GULP, BRUNCH FOR YOUR WEBSITE
LearnCode.academy
59 GRUNT TUTORIAL - Grunt makes your web development better!
GRUNT TUTORIAL - Grunt makes your web development better!
LearnCode.academy
60 STOP USING FTP!  - How to Deploy with Flightplan over SSH
STOP USING FTP! - How to Deploy with Flightplan over SSH
LearnCode.academy

Related Reads

📰
Why SnapDOM Beats html2canvas for DOM-to-Image Capture
Learn why SnapDOM outperforms html2canvas for DOM-to-image capture and how to use it in your frontend projects
Dev.to · Juan Martin
📰
I built 42 landing page templates as single HTML files (no npm, no build step)
Learn how to create simple landing page templates as single HTML files without relying on npm or build steps, and why this approach matters for efficient web development
Dev.to · Segcam spa
📰
Part 7B — Section 2 — React Event Handling Explained: Forms, Event Object & User Input.
Learn React event handling for forms and user input to improve your frontend skills
Medium · JavaScript
📰
Stop Using window.resize for Everything: A Practical Guide to the ResizeObserver API
Learn to replace window.resize with the ResizeObserver API for more efficient and effective resize event handling
Medium · JavaScript
Up next
Elementor Angie Ai Plugin Tutorial
Quick Tips - Web Desiign & Ai Tools
Watch →