Where communities thrive


  • Join over 1.5M+ people
  • Join over 100K+ communities
  • Free without limits
  • Create your own community
People
Activity
    Josh Justice
    @CodingItWrong
    Thanks @atinybeardedman, I'll see if I can replicate that error and confirm the fix, then add it in
    Josh Justice
    @CodingItWrong
    @atinybeardedman could you post your repo in the state where it's giving the error somewhere public to help me replicate it locally?
    Jim Strother
    @jstrother
    I am in Chapter 3 in the "Stepping Down to a Unit Test" section and the final refactor is giving me fits. Before I made and used the findByTestId function, all tests were passing. After that function, it's telling me TypeError: Cannot read property 'text' of undefined. Here is the repo, if somebody has a chance to take a look at the code: https://github.com/jstrother/opinion-ate/tree/list-restaurants
    Thanks in advance!
    Josh Justice
    @CodingItWrong
    @jstrother OK, I checked it out. What's going on is that your findByTestId() function isn't returning a value. If you add a return keyword in front of it, it passes: return wrapper.findAll…". The example in the code doesn't have curly braces around the function, so it's the "expression" form of an arrow function that automatically returns the value without the "return" keyword
    Jim Strother
    @jstrother
    @CodingItWrong oh geez. I can't believe i did that. I feel like such a goof. 🤦‍♂️
    Thanks for the assist.
    Josh Justice
    @CodingItWrong
    @jstrother no worries, i'm 99% sure i've done that on client work in the last week =]
    Josh Justice
    @CodingItWrong
    @atinybeardedman ignore my previous request; i got caught back up in the code and am getting the v-alert error now; fixing
    Josh Justice
    @CodingItWrong
    Screen Shot 2021-05-06 at 8.28.37 AM.png
    Screen Shot 2021-05-06 at 8.28.55 AM.png
    @atinybeardedman alright, docs updated, see above. i'm going to run through the rest of the vue tutorial to ensure there aren't any other errors related to this that need to be fixed. thanks again for raising the issue!
    Sean Dickinson
    @atinybeardedman
    @CodingItWrong awesome, thanks for the quick response. Sorry I didn't see your message earlier about posting my repo
    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.
    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.