Outside-In Frontend Development/community

technoplato

@technoplato

Hey @CodingItWrong Im building a hobby project with the intent of laying a very solid architecture and am having a hard time wrapping my head around testing things like my repositories, data sources, services, use cases, etc and I was wondering if you had any experience or recommendations for where you’d look for examples or guidance. There’s lots of Uncle Bob type code but not many walkthroughs on writing useful tests for clean architecture. Thanks in advance for any suggestions.

Josh Justice

@CodingItWrong

@technoplato great question. I'm familiar with clean architecture, and it is supposed to make testing easier. But I don't know of any example code to point to. If you want to put some sample code up in a gist or repo, I'd be happy to share thoughts on testing it.

technoplato

@technoplato

Thats very generous of you thank you. At the moment, ive realized im going to need to create an abstract pattern (repository? usecase?) thats look at to see if ive already saved an entity to my database, and if not, fetch it from an external API (youtube, spotify, etc)

I can post the code, but im also still trying to learn about the best pattern for the above, as ive currently just performed that pattern once but i believe ill have to do that repeatedly. Talk soon!

Eric

@ericledonge

Hello @CodingItWrong, in the React exercise, by the end of the chapter 3 - Vertical Slice, my component unit tests are failing:
Could not find "store" in the context of "Connect(RestaurantList)". Either wrap the root component in a <Provider>, or pass a custom React context provider to <Provider> and the corresponding React context consumer to Connect(RestaurantList) in connect options.
Did I miss something in this chapter, please?
I more used to work with hooks and frameworks like Rematch, so I can't see easily the solution.

Josh Justice

@CodingItWrong

@ericledonge that error usually occurs when importing the default export into the test. Check to see if you're using the named export, in curlies:

import {RestaurantList} from '../RestaurantList';

The default export is connected to Redux so requires a provider. The named export isn't connected to Redux so should work in the test

Eric

@ericledonge

Whooo so reactive, Thanks a lot! I understand the point.

Jim Strother

@jstrother

I'm running into a new issue. I'm in chapter 6 - Writing Data - Unit Testing the Store. All of the unit tests to this point are passing, but the e2e test is still giving the same timeout error:

CypressError: Timed out retrying: cy.wait() timed out waiting 5000ms for the 1st request to the route: 'addRestaurant'. No request ever occurred.

Here's my repo for a look: https://github.com/jstrother/opinion-ate/tree/creating-a-restaurant

Josh Justice

@CodingItWrong

@jstrother thanks for the repo, I should be able to check it out in the morning

I'd recommend confirming (1) that the axios request is being reached and (2) that it's named "addRestaurant" in your cypress test

Jim Strother

@jstrother

I'm pretty confident that the axios request is being reached as the other e2e test is passing just fine. I also double-checked the "addRestaurant" spelling. I got tired of searching for a random typo in my code and copied yours straight over, put my API key in, and tried again. Still no luck. :(

Josh Justice

@CodingItWrong

OK, I ran your code locally. It looks like you've reached this point in the tutorial: https://outsidein.dev/vue/6-writing-data.html#creating-the-api-method

If you open the browser console in Cypress, you'll see the error "TypeError: t.createRestaurant is not a function" described in the tutorial. The tutorial describes where to go from there.

From a troubleshooting standpoint, note that the Axios request is not yet actually implemented in the code, and no network request appears in the Network tab of the browser tools.

@jstrother

I'll add some notes at that point in the tutorial to clarify that the symptom you'll see in Cypress is the timeout.

Jim Strother

@jstrother

Ok, thanks!

Also, thanks for this tutorial! Testing is something I've always struggled with, and I appreciate what you've got here.

Josh Justice

@CodingItWrong

You're welcome, I'm glad it's helpful!

Eric

@ericledonge

Hello @CodingItWrong, I've finished your wonderful tutorial. Thanks a lot for this highly valuable material!

Now, I'd like to learn more about clean architecture, how to separate business and ui logics with use cases/entities or maybe with business custom hooks. Do you have any advices to dive into those topics, please?

It's hard to find that kind of things for frontend.

Josh Justice

@CodingItWrong

@ericledonge you're right, I haven't been able to find much information on clean architectural style code for the frontend either. For Vue and React so far I've stuck closer to "standard" frontend architecture.

If anyone has done it, it's James Shore. He has a resource http://www.letscodejavascript.com/ that is somewhat dated but takes the approach you describe. If you ignore some of the older build tooling stuff, I'm sure there will be helpful architectural principles in there.

Bernard Amofah

@bamofah

hi restarting the tutorial (sort of lost tack of where I got up to) can this also be done using NextJs (wondering how much work it would take.)

ah another question... do you have any insight on using bitbucket-pipelines over github actions

Josh Justice

@CodingItWrong

@bamofah I haven't tried nextjs so I'm not sure. Your safest bet may be doing the tutorial in normal react, then afterward trying to apply the techniques to next and see what is or isn't similar

I haven't used bitbucket pipelines, but our use of CI is very simple here, so I'm sure there are tutorials out there for how to run jest and cypress on bitbucket that would be compatible with this approach

Bernard Amofah

@bamofah

@CodingItWrong i think that is fair. Will crack on. with it. Thanks again for the great tutorial.

Josh Justice

@CodingItWrong

@bamofah you're welcome!

Ray Jasson

@rayjasson98

Thanks for the tutorial! It's really helpful for a beginner in TDD.

Josh Justice

@CodingItWrong

🎉

Minhaj-ul-abidin

@Minhaj-ul-abidin

Thanks for the tutorial. Loved how you go into detail with the why and when of the steps.

Josh Justice

@CodingItWrong

@Minhaj-ul-abidin that's great to hear! I feel like testing unavoidably involves judgment calls, so it's especially important to understand the "why" so you can make those calls for your situation

Devjyoti Ghosh

@DevTGhosh_twitter

@CodingItWrong thanks for the great resource. I am going through the exercise and spent 2 hrs trying to get cypress to work on my machine. The issue was I was running WSL2 and cypress has its own gui which WSL doesn't permit normally. This stackoverflow issue solved it for me maybe you can add a small note in the tutorial for users like me. Cheers I am looking forward to going through the rest of the exercise.

Josh Justice

@CodingItWrong

Thanks @DevTGhosh_twitter, I'm sorry that challenge happened for you. That seems worth it for me to reference in a note, yes 👍

Devjyoti Ghosh

@DevTGhosh_twitter

Great. Created a GitHub issue on cypress for other people to find it. Hopefully won't be needed after Windows starts supporting WSL2 GUI by the end of the year.

Mohammed Ammar

@moh1434

Hi guys, i made a fork to make the vuejs version work with typescript and vuex-module-decorators. I will be happy if someone used it or make it better. You can see it HERE

Josh Justice

@CodingItWrong

Very cool @moh1434! I haven't used TS myself but I'm glad someone has tried it out on this exercise! Did you do the exercise from the start with TS, or add TS in at the end?

1 reply

morcth

@morcth

Thank you for creating the Outside In tutorial Josh... much appreciated

Wondering if I did something wrong that the Cypress version for vue-cli is still 3.8.3 when they are out with 9.10 at this point. I tried upgrading but it seemed that 3.8.3 was also still downloaded so was getting some warnings about duplicate folders because 2 versions were installed.

Josh Justice

@CodingItWrong

Last time I checked it seemed that Vue-CLI is still on cypress version 3, yes

it looks like they are not looking to update cypress until vue cli version 5: vuejs/vue-cli#6064

it's something that's decreased my confidence in their ability to keep vue-cli up-to-date

morcth

@morcth

I hear that

I had seen this a while back: vuejs/vue-cli#5703

Didn't read it through though.. they say that it will be updated for v5 and a temp fix is there now but you have to do a few things to only have one version due to 3.8.3 dependencies. If I would have just read it all through, this would have saved me a bit of time.

Josh Justice

@CodingItWrong

i would think that you can also just install cypress totally independently of vue-cli, and then that might be simpler. that's the way i have the react project set up. another option to consider (i might switch the book to that someday)

morcth

@morcth

And not choose e2e when creating the project? That would do it. That in your face Upgrade or whatever it says when first opening up cypress did send me down a hole when going through your tut

morcth

@morcth

I'm still having a problem wrapping my head around some aspects TDD and thinking through tests as a whole. You might be able to help me out with this one. I successfully got a vue app working on netlify using AWS Amplify as the user management and Auth. Even wrote a e2e test first checking that the login form loaded up.

I'm just not sure on how to test routes that need an authenticated user. Is it as simple as just setting a variable like isAuthenticated to true when spinning up the tests or do I need to look into how Amplify is logging in users and what it's returning and mock it? I may just drop Amplify and use FastAPI or Django as they have test clients... a little easier for me to learn... but I feel like I'm just not understanding some things with testing as a whole here.

morcth

@morcth

Actually.. reading this over, the backend shouldn't matter. It will just set a variable I think. I gotta find a tdd tut that goes over routes that need auth

Josh Justice

@CodingItWrong

@morcth TDDing auth in a frontend app is a great question. In my personal apps I tend to not TDD the auth part, since it's so boilerplate—I just write maybe one auth test afterward to confirm it works. Setting aside the TDD part, when it comes to just testing auth, if you're taking the approach I take in the book where the frontend is tested in isolation from the backend, you want to think about just what happens in the frontend in isolation. If you're using an Amplify library on the frontend, that gets tricky as you don't usually have to work with the frontend/backend handoff. The approach you described makes sense. I just pulled up the Cypress docs and they have several pages on testing strategies for auth for other services; maybe the general approach they recommend will give you ideas. Here's the first page of several: https://docs.cypress.io/guides/testing-strategies/auth0-authentication#Auth0-Application-Setup

morcth

@morcth

Thank you Josh! This was great info. It shows how to run e2e when authenticating with AWS Cognito.. which is what Amplify uses under the hood. I'm sure I can also use the information here to help figure out how to mock login for unit tests as well. Thanks!

Josh Justice

@CodingItWrong

Oh nice, that worked out better than I guessed!

Where communities thrive

People

Repo info

Activity