These are the code quality checks we do in our production system

Поділитися
Вставка
  • Опубліковано 13 бер 2024
  • My Products
    📖 ProjectPlannerAI: projectplannerai.com
    🤖 IconGeneratorAI: icongeneratorai.com
    📝 ThumbnailCritique: thumbnailcritique.com
    Useful Links
    💬 Discord: / discord
    🔔 Newsletter: newsletter.webdevcody.com/
    📁 GitHub: github.com/webdevcody
    📺 Twitch: / webdevcody
    🤖 Website: webdevcody.com
    🐦 Twitter: / webdevcody

КОМЕНТАРІ • 85

  • @abdulazeez.98
    @abdulazeez.98 2 місяці тому +109

    I really like these production-related videos. We rarely get to see this on youtube.

    • @jurajzec
      @jurajzec 2 місяці тому +1

      Same here. I keep coming back to Cody's channel for this kind of content. Just great stuff.

  • @Distortie
    @Distortie 2 місяці тому +2

    grats on 200k ! nice insight into production checks always been curious

  • @tiagosutter8821
    @tiagosutter8821 2 місяці тому +3

    Great stuff, good to see what tests and checks a production codebase can have, thanks

  • @eranxbe
    @eranxbe 2 місяці тому

    Great video!
    I would be glad to see some content on how you create/use mocks

  • @marinajordan8939
    @marinajordan8939 2 місяці тому +1

    This was really interesting. I just happened to start working on my teams CI/CD pipeline the other day. thanks!!!

  • @mavericknsk
    @mavericknsk 2 місяці тому +1

    These kind of video's are gems, more production-related content!

  • @randomforest_dev
    @randomforest_dev 2 місяці тому

    Great video as always! Would be nice if you also share how you guys do code reviews at work on another video.

  • @user-tt3bc7yk8r
    @user-tt3bc7yk8r 2 місяці тому +20

    What I'm looking now and can't find it, is a good explanation, how to add tests to existing react project, where to start, which test it should be?
    If you'll think it`s a good Idea for future videos it will be great :D

    • @SkyLee91
      @SkyLee91 2 місяці тому +2

      yes agree. Need more video to show how to build the all integration test!

    • @yt-sh
      @yt-sh 2 місяці тому

      search for react testing library and jest

  • @_Apex
    @_Apex 2 місяці тому

    This is amazing! Could you cover in another video or reveal how you chunkified your unit tests into separate workers/jobs? I am trying to do something similar, but in Jenkins. Cheers!

  • @0xtz_
    @0xtz_ 2 місяці тому

    I have sonarcube locally and the sonarlint I try to fix the max 😂 and I skip ton, and I like those type of videos man keep going 👏👏

  • @strmchsr1537
    @strmchsr1537 2 місяці тому

    This is very useful / interesting!

  • @bhavyajain638
    @bhavyajain638 2 місяці тому +2

    I'm in 3rd year of my uni, and i am a fullstack developer. I am creating my own SaaS (almost ready, waiting for payment gateway access). It's a React app, Nodejs backend and electronjs for a desktop application.
    The think is, i have not written any tests or documentation. I do plan to write the documentation, but i have almost no clue about testing. It's a fairly complex application, mostly crud operations...
    I have it all in my mind, and as i am solo developer, i left writing documentation. But midway i realized its a mistake. It'll take me probably a week to write the documentation, but i just don't have time and energy for it.

    • @valgardviggo8209
      @valgardviggo8209 2 місяці тому +2

      Don't worry about that! Just deploy your product and check if people want to pay you for that. If yes, then invest more time in testing and docs. Good luck! ✌️

  • @robwatson826
    @robwatson826 2 місяці тому

    That is a heck of a lot of production actions! We have 2 at my work - lint and test 😅

    • @WebDevCody
      @WebDevCody  2 місяці тому

      that's better than zero which is a majority of these buggy software projects

  • @rahultech77
    @rahultech77 2 місяці тому

    How do you spin up these different dependencies on the PR?
    Additionally don't the build step of your image add an additional delay?

  • @AZisk
    @AZisk 2 місяці тому

    Good stuff! Wondering why you wouldn’t do some of these things at the commit stage, using Husky or something similar.

    • @WebDevCody
      @WebDevCody  2 місяці тому +1

      we do use husky for run some checks, such as eslint, stylelint, etc, anything more complex usually requires more time which we would rather pay compute for than to have devs waiting around letting their cpu fans turn into rocket engines

  • @jaymondal7775
    @jaymondal7775 2 місяці тому

    Hello @WebDevCody, Please explain how to set up those tests.
    Your videos are really interesting , youtube is filled with big and small projects (some of them is really good ) but it is rare somebody talks about production grade codes and stuffs like that.

  • @jakedobler9116
    @jakedobler9116 2 місяці тому

    How do you properly write/ run tests in a container? I recently did something similar but when I ran the container in a GitHub workflow, it would run forever I had to set a timeout. The build would then show it failed :/ but tests would pass in the log :(

  • @ma-ui8zz
    @ma-ui8zz 2 місяці тому

    Thanks a lot for Sharing first-hand/real-world production knowledge. Do these GitHub actions need to run in a specific order or can they just run randomly?

    • @WebDevCody
      @WebDevCody  2 місяці тому

      They all run concurrently

  • @karthiknadimpally891
    @karthiknadimpally891 2 місяці тому

    That was areally helpful video! I was wondering how you were bale to start mock services like s3 on the client integration tests. Thanks for the amazing content!

    • @WebDevCody
      @WebDevCody  2 місяці тому

      There are a couple of third party packages, such as s3rver, which act as an s3 bucket endpoint where you can store and read files. Same with dynamo.

    • @karthiknadimpally891
      @karthiknadimpally891 2 місяці тому

      @@WebDevCody i am curious about your thoughts on a service like localstack and whether you would use something like that

  • @SeibertSwirl
    @SeibertSwirl 2 місяці тому +3

    Good job babe!

  • @rand0mtv660
    @rand0mtv660 2 місяці тому +2

    I would actually love to see how some UI unit and integration tests look like in this codebase, but some more complex example. Like how you actually approach tests. Do you mock everything, do you test with real code etc. I realized you mentioned mocks, but those were for 3rd party services you don't control. I'm curious about code that you own.
    Would also love to see some of those custom actions and how they work.

    • @WebDevCody
      @WebDevCody  2 місяці тому

      Honestly, after the experiences I’ve had with mocking, I’d avoid it. By mocking, I mean if you are doing jest.mock or jest.spy. If something needs mocks to test, it sounds like you should just write an integration test to verify it all works together.
      When I said mocks in this video I meant like a locally running dynamodb service, and a locally running s3 server, locally running es server. So they’re not the real thing we use in prod, but very close.
      We also don’t test ui components. E2E cypress or playwright covers the ui well enough and isn’t brittle than testing implementation details. Testing is one of those things I’ve been doing for 10 years and I still don’t know the best approach. I think each feature needs to be looked to determine what level of testing would suffice to verify the feature. Approaching testing with dogma or strict rules just creates unnecessary tests.

    • @rand0mtv660
      @rand0mtv660 2 місяці тому

      @@WebDevCody "If something needs mocks to test, it sounds like you should just write an integration test to verify it all works together" -- that's my opinion as well. If something breaks because of a change in a dependency it has, I want to know it breaks. I think mocking creates a false sense of security in tests because you can actually break things, but tests will say everything is ok just because you created false implementations of everything around it.
      Although I do agree with mocking things out of your control. Things you mentioned such as s3, dynamodb etc.
      Regarding code coverage, do you use Cypress for that as well? I know it has some ways to output code coverage and since you said you aim for a really high code coverage I don't see how you could achieve that if you don't test your UI in some way.

    • @WebDevCody
      @WebDevCody  2 місяці тому

      @@rand0mtv660 oh we only care about coverage over business logic and entities. We don’t run coverage on cypress. I’m also in the mentality of coverage reports should just help you find where you have testing gaps and not as a gate keeping tool.

    • @rand0mtv660
      @rand0mtv660 2 місяці тому

      @@WebDevCody Ohhhh I see. Thanks for the details

  • @mettle_x
    @mettle_x 2 місяці тому

    Cody, you're creating so much value with your content that I have to say this next time: "Wake up, babe! A new video from Cody just dropped."

  • @JurrAFC
    @JurrAFC 2 місяці тому

    Hey thanks for sharing, do you think it will be more efficient to run lint, typescript and units at first to simply fail fast ?

    • @WebDevCody
      @WebDevCody  2 місяці тому

      yes, we run linters on changed files using husky, unit tests would take too long to run everything

  • @TFDusk
    @TFDusk 2 місяці тому

    This reminds me of the setup I did at my previous job because I was sick of seeing slow tests. Did you guys set up any caching for the container images being used for these runs or is this the typical run for a cold start?
    I'm assuming the cypress suite has a lot of internal dependencies that make that project difficult to break out since that seems to be the bottleneck at the moment.

    • @WebDevCody
      @WebDevCody  2 місяці тому

      I think we cache node modules in GitHub actions, but it doesn’t help too much

    • @Phantom-pu1xn
      @Phantom-pu1xn 2 місяці тому

      In, my company we cache the node_modules in s3 and the github action downloads the zipped node_modules from s3 . It resulted in so much time saving, because when we cache node_moduels in github actions only, the cache is not shared between different branches.

  • @Lexaire
    @Lexaire 2 місяці тому +6

    I have never seen a pipeline even one tenth this size. How long does the whole thing take to run?

    • @WebDevCody
      @WebDevCody  2 місяці тому +6

      The run time is in the video next to each task. The longest one was 13 minutes, the average is maybe 4-5 minutes. All of these tasks run concurrently, so the PR goes to passing in about 13 minutes.

    • @Lexaire
      @Lexaire 2 місяці тому +1

      @@WebDevCody 13 minutes isn't that bad. That's a lot of stuff, but your team seems to have a good handle on it all!

    • @Alex-vo2ew
      @Alex-vo2ew 2 місяці тому

      This is a pretty small pipeline compared to what you see in scaled enterprise apps. One of our services has a PR pipeline that takes over 2 hours to run.

  • @mycode0
    @mycode0 2 місяці тому

    That's gold

  • @thestefandjokic
    @thestefandjokic 2 місяці тому +1

    PDF generation is such a common requirement by big clients, but I've never written tests for them. Could you make a video about how you test that based on those popular libraries?

    • @WebDevCody
      @WebDevCody  2 місяці тому +3

      If I find time, but we just generate the pdfs using puppeteer from html templates generated from jsx and css. Then we take screenshots of each page of the pdf and save those as the expected images. Then on new code changes the tests regenerate the same pdf images against our expected, do a % difference by pixel values, then fail if they cross a threshold.

  • @averagepickleballplayer
    @averagepickleballplayer 2 місяці тому

    Are you able to integration test in RSC?

  • @Oceanus169
    @Oceanus169 2 місяці тому

    what does E2E Cypress Smoketests do? The number of tests are different?

    • @Lexaire
      @Lexaire 2 місяці тому

      It probably just makes sure the site loads at all with Cypress, hence smoketest.

    • @WebDevCody
      @WebDevCody  2 місяці тому

      I explained in the video. The smoketests run on the deploying UI hosted on the AWS environment and if they all pass, we do an automated color switch so that users get to the new (and verified) deployment.

  • @madimetja-M
    @madimetja-M 2 місяці тому +1

    How would set an integration type testing in github or gitlab setup?.

    • @Lexaire
      @Lexaire 2 місяці тому +1

      You can have the runner spin up Docker containers of other services and databases and connect to those. That's how I've done it and seen it done.

    • @WebDevCody
      @WebDevCody  2 місяці тому +1

      exactly, we spin up containers for the database, etc, then run your ui or api and run your tests

  • @domemvs
    @domemvs 2 місяці тому

    very insightful, but also scary, tbh.

  • @abdirahmann
    @abdirahmann 2 місяці тому +5

    what does you company work on?, finance?? This is crazy but if its generating money which it is, then its ok but wild

  • @dandogamer
    @dandogamer 2 місяці тому

    Could the order of some of these operations be optimised? For instance check the linting and TS errors first, then check unit tests lastly check the integration and smoke tests. That way your CI can fail faster and not spend as much money? Also things like linting and TS errors could be caught by pre-commit hooks or even you could seperate your CI/CD to do some minimal check on PR then more expensive testing when you wish to merge into main??
    This is a very impressive pipeline and I'll have to get my team to look into pa11y !!

    • @WebDevCody
      @WebDevCody  2 місяці тому +1

      we run some of those checks in husky pre-commit, but you have to remember, if you run a set of tests before running the rest, you've essentially made your feedback loop longer. Sure, getting them to "fail fast" is nice, but often it's the integration tests that actually test the real system and fail when doing major code changes, so having to wait 6 minutes for the "pointless test" to finish before any integration tests kick off is actually more devs just waiting around for their integration tests to run.
      additionally, if the project budget is high enough to support 10+ devs working full time, spending a couple hundred on ci/cd costs isn't a big issue IMO if it keeps a dev from needing to spend a few days fixing a bug we accidentally shipped.

    • @dandogamer
      @dandogamer 2 місяці тому

      @@WebDevCody that's a fair point, I couldnt see unit tests taking more than a couple of minutes tho but js is slow aha

    • @WebDevCody
      @WebDevCody  2 місяці тому

      @@dandogamer I think our code needs some refactoring because the unit tests take a while. Jest is slow, add on top typescript which needs to be transpiled, then we also have a god module we import basically everywhere which kills performance. Bad design choices made 5 years ago but we learn the consequences now as we added more and more tests

  • @ScottQuested-zj9kk
    @ScottQuested-zj9kk 2 місяці тому

    How long does that take to run? Impressive

    • @WebDevCody
      @WebDevCody  2 місяці тому +1

      13 min is the longest worker, average check is maybe 5-10 minutes

  • @user-lb8to5yr6r
    @user-lb8to5yr6r 2 місяці тому

    Have you noticed any slowdown in development time due to the need to write a lot of tests alongside the actual features (and the need to rewrite tests once requirements change)?

    • @WebDevCody
      @WebDevCody  2 місяці тому

      Tests slow down development up front but speed you up as the project grows because they help prevent bugs

    • @vinayindoria
      @vinayindoria 2 місяці тому

      @@WebDevCody My question is around the same concept.. although I think tests are important .. can you give an example using a small feature about the time estimates you give as a developer taking into account unit tests, e2e.. I know it all depends on the developer's skill level but still what can be a good estimate for a specific feature keeping account of testing..
      Do you follow Agile development?
      how long is your sprint?
      what is the avg ticket count completed per sprint?

  • @KevinOfSteel
    @KevinOfSteel 2 місяці тому

    That is a proper checklist ahah. Maybe couple of more actions to check that the world still exists and you should be confident you can deploy safely.

  • @ErnaSolbergXXX
    @ErnaSolbergXXX 2 місяці тому

    Should add some extra tests to make sure the developers drink water and go to bath room

  • @no_goo
    @no_goo 2 місяці тому

    Wtf this is several hours of actions. How many are yall able to run in parallel

  • @eshw23
    @eshw23 2 місяці тому

    None of my code would every get pushed to prod if Im not allowed to use "any"😀😀

  • @ArchitecTJ37
    @ArchitecTJ37 2 місяці тому

    First!!

  • @katanaut
    @katanaut 2 місяці тому +1

    Seems bit an overkill

    • @WebDevCody
      @WebDevCody  2 місяці тому

      how many tests does your project write?

    • @katanaut
      @katanaut 2 місяці тому

      Back-end has almost 80-90% unit/integration test coverage, which is fine I guess, although I’m not a proponent of full coverage.
      Front-end primarily relies on e2e tests. 90% time writing unit tests for fe components is waste of time, imo.

    • @WebDevCody
      @WebDevCody  2 місяці тому

      @@katanaut that sounds reasonable. So do you run pa11y or axe for accessibility? What about linters? We don’t unit test any of our react components, just the presentation logic used by the frontend.

  • @user-tb4ig7qh9b
    @user-tb4ig7qh9b 2 місяці тому +1

    Sorry but i think your ci/cd very slow and run a lot of things

    • @WebDevCody
      @WebDevCody  2 місяці тому +1

      what does your pipeline test?

    • @user-tb4ig7qh9b
      @user-tb4ig7qh9b 2 місяці тому

      @@WebDevCody
      I am just maintain backend so i will run less small things and a language have a better tool builtin, so i run static code checks and testing just that

    • @user-tb4ig7qh9b
      @user-tb4ig7qh9b 2 місяці тому

      @@WebDevCody but consider it just backend

    • @user-tb4ig7qh9b
      @user-tb4ig7qh9b 2 місяці тому

      @@WebDevCody feature testing and unit tests and most of functionality is real time

  • @brunosilva-ed4pz
    @brunosilva-ed4pz 2 місяці тому

    man... i really envy this level of company... i only worked in 2 companies so far and both don't have any tests or ci/cd pipeline 😅 things just keep breaking every day and we just keep "fixing" them, so we dont have time to stop and write tests, even more so in my new job where we are only 3 devs in a 20 years old company that have a bunch of huge clients 🥲🥲🥲🥲🥲🥲🥲🥲🥲🥲

    • @WebDevCody
      @WebDevCody  2 місяці тому +1

      this is the exact reason why we write tests. It’s a lot of extra work but it saves you time and money in the long run, at least that’s the idea. I’m sorry to hear about your suffering