Outside-In Frontend Development/community

Bernard Amofah

@bamofah

i think i found the issue. the instructions didn't state that one needs to have the app running first before running cypress

Josh Justice

@CodingItWrong

@bamofah Ah, sorry about that. I've written down a todo to go through the book and add explicit reminders to make sure the app is running.

So hopefully that'll help prevent that for folks in the future.

Abraham Brookes

@AbrahamBrookes

hey I'm running through the edge cases vue exercise here and getting a weird error coming from the vuetify v-alert component.

As soon as I add the type property to the v-alert component I get a slew of red compilation errors in my console and a bunch of my tests start failing - the most prominent error being TypeError: Cannot read property 'component' of undefined

which looks like it is originating from the call to the vue-test-utils@mount function

I'm thinking this is a vuetify error in particular:

Abraham Brookes

@AbrahamBrookes

I have just pushed a PR to my repo if anyone wants to have a look: AbrahamBrookes/outsidein-dev-opinion-ate#4

the app is compiling ok and showing the v-alert component:

I think the v-alert component doesn't like the tests local vue instance or smth?

Abraham Brookes

@AbrahamBrookes

if I simply remove that prop the tests run as expected, but my component is obviously not working properly

wrapper is undefined because the v-alert error is causing the call to mount to fail, resulting in my let wrapper variable to never be assigned to

excellent guide btw, the page on setting up the environment with CI and netlify alone is easily the best setup guide for the full pipeline I have ever seen - have shared it with my colleagues and they are all quite impressed

Abraham Brookes

@AbrahamBrookes

I was on vuetify 2.4.0, just upgraded to 2.4.5, same error

Abraham Brookes

@AbrahamBrookes

I'm dropping the v-alert component in favour of a div for now since I'm pretty sure that error is out of scope and I don't want to get distracted!

Abraham Brookes

@AbrahamBrookes

Abraham Brookes

@AbrahamBrookes

hey with this section: https://outsidein.dev/vue/6-writing-data.html#validation-error it seems like you're going back on what you've said earlier wrt leaving the text content itself up to the implementation

seems like that should be a toExist() instead?

also what's with that trailing comma? seems like that should throw a syntax error

and that v-alert component is still chucking wobblies - here's the full error stack I've just got

Abraham Brookes

@AbrahamBrookes

 FAIL  tests/unit/components/CreateRestaurant.spec.js
  ● Console

    console.error node_modules/vue/dist/vue.runtime.common.dev.js:621
      [Vue warn]: Error in render: "TypeError: Cannot read property 'component' of undefined"

      found in

      ---> <VIcon>
             <VAlert>
               <Anonymous>
                 <Root>
    console.error node_modules/vue/dist/vue.runtime.common.dev.js:1884
      TypeError: Cannot read property 'component' of undefined
          at remapInternalIcon (C:\Users\kjabd\Projects\outsidein.dev\opinion-ate\node_modules\vuetify\dist\webpack:\Vuetify\src\util\helpers.ts:225:39)
          at VueComponent.getIcon (C:\Users\kjabd\Projects\outsidein.dev\opinion-ate\node_modules\vuetify\dist\webpack:\Vuetify\src\components\VIcon\VIcon.ts:72:31)
          at Proxy.render (C:\Users\kjabd\Projects\outsidein.dev\opinion-ate\node_modules\vuetify\dist\webpack:\Vuetify\src\components\VIcon\VIcon.ts:217:23)
          at VueComponent.Vue._render (C:\Users\kjabd\Projects\outsidein.dev\opinion-ate\node_modules\vue\dist\vue.runtime.common.dev.js:3538:22)
          at VueComponent.updateComponent (C:\Users\kjabd\Projects\outsidein.dev\opinion-ate\node_modules\vue\dist\vue.runtime.common.dev.js:4054:21)
          at Watcher.get (C:\Users\kjabd\Projects\outsidein.dev\opinion-ate\node_modules\vue\dist\vue.runtime.common.dev.js:4465:25)
          at new Watcher (C:\Users\kjabd\Projects\outsidein.dev\opinion-ate\node_modules\vue\dist\vue.runtime.common.dev.js:4454:12)
          at mountComponent (C:\Users\kjabd\Projects\outsidein.dev\opinion-ate\node_modules\vue\dist\vue.runtime.common.dev.js:4061:3)
          at VueComponent.Object.<anonymous>.Vue.$mount (C:\Users\kjabd\Projects\outsidein.dev\opinion-ate\node_modules\vue\dist\vue.runtime.common.dev.js:8392:10)
          at init (C:\Users\kjabd\Projects\outsidein.dev\opinion-ate\node_modules\vue\dist\vue.runtime.common.dev.js:3112:13)
          at createComponent (C:\Users\kjabd\Projects\outsidein.dev\opinion-ate\node_modules\vue\dist\vue.runtime.common.dev.js:5958:9)
          at createElm (C:\Users\kjabd\Projects\outsidein.dev\opinion-ate\node_modules\vue\dist\vue.runtime.common.dev.js:5905:9)
          at createChildren (C:\Users\kjabd\Projects\outsidein.dev\opinion-ate\node_modules\vue\dist\vue.runtime.common.dev.js:6033:9)
          at createElm (C:\Users\kjabd\Projects\outsidein.dev\opinion-ate\node_modules\vue\dist\vue.runtime.common.dev.js:5934:9)
          at createChildren (C:\Users\kjabd\Projects\outsidein.dev\opinion-ate\node_modules\vue\dist\vue.runtime.common.dev.js:6033:9)
          at createElm (C:\Users\kjabd\Projects\outsidein.dev\opinion-ate\node_modules\vue\dist\vue.runtime.common.dev.js:5934:9)
          at VueComponent.patch [as __patch__] (C:\Users\kjabd\Projects\outsidein.dev\opinion-ate\node_modules\vue\dist\vue.runtime.common.dev.js:6455:7)
          at VueComponent.Vue._update (C:\Users\kjabd\Projects\outsidein.dev\opinion-ate\node_modules\vue\dist\vue.runtime.common.dev.js:3933:19)
          at VueComponent.updateComponent (C:\Users\kjabd\Projects\outsidein.dev\opinion-ate\node_modules\vue\dist\vue.runtime.common.dev.js:4054:10)
          at Watcher.get (C:\Users\kjabd\Projects\outsidein.dev\opinion-ate\node_modules\vue\dist\vue.runtime.common.dev.js:4465:25)
          at new Watcher (C:\Users\kjabd\Projects\outsidein.dev\opinion-ate\node_modules\vue\dist\vue.runtime.common.dev.js:4454:12)
          at mountComponent (C:\Users\kjabd\Projects\outsidein.dev\opinion-ate\node_modules\vue\dist\vue.runtime.common.dev.js:4061:3)
          at VueComponent.Object.<anonymous>.Vue.$mount (C:\Users\kjabd\Projects\outsidein.dev\opinion-ate\node_modules\vue\dist\vue.runtime.common.dev.js:8392:10)
          at init (C:\Users\kjabd\Projects\outsidein.dev\opinion-ate\node_modules\vue\dist\vue.runtime.common.dev.js:3112:13)
          at createComponent (C:\Users\kjabd\Projects\outsidein.dev\opinion-ate\node_modules\vue\dist\vue.runtime.common.dev.js:5958:9)
          at createElm (C:\Users\kjabd\Projects\outsidein.dev\opinion-ate\node

oh I've been truncated

full error log: https://pastebin.com/kkyGFpgF

Abraham Brookes

@AbrahamBrookes

is it just me or are you clicking this button twice?

hah nvm I kept reading

might be good to explain after that block exactly why you clicked the button twice (although I figured out it was because the mock promise methods queue the resolve/rejects as opposed to called them in order)

Abraham Brookes

@AbrahamBrookes

is there a way to do this without adding another dependency? Seems like something jest would handle oob

Abraham Brookes

@AbrahamBrookes

would you instead remove the beforeEach call and instead run the two tests one after the other, returning the promise from the it block? I guess that would go against "test one thing at a time"

Abraham Brookes

@AbrahamBrookes

I finished the vue exercise! Thanks so much for your hard work putting this guide together I never would have wrapped my head around TDD without it - now I'm super excited about TDDing all the things!

https://outside-in-opinion-ate.netlify.app/

Tom

@tom751

I am getting this error when pressing "Create API key" on https://outside-in-dev-api.herokuapp.com/ error: no pg_hba.conf entry for host "54.92.193.117", user "cfpzjueszqwoid", database "dcqn7u1s2958ca", SSL off

Safei Ashraf

@Safei-Ashraf

Hello, I had an issue with setting up CI during the course, the issue was addressed on the cypress repo, and they advised updating the github actions version, I resolved the issue on my end already and made a tiny PR to resolve it in the main repo as well, including a screenshot of the error and issue link on cypress repo. might need to update the course content with it as well : ) Thanks for the course man! am 100% enjoying it 😎
PR CodingItWrong/opinion-ate-react#12

Safei Ashraf

@Safei-Ashraf

anyone got the same error when trying to generate an API key from the heroku link?

Daniel Koch

@dkprog

I'm getting Error: self signed certificate

Josh Justice

@CodingItWrong

@dkprog sorry about that; I'm in the progress of fixing the previously-reported api key errors. Hopefully will have the fix up within an hour. I'll post updates here

Josh Justice

@CodingItWrong

@dkprog @Safei-Ashraf @tom751 Sorry for the API errors; I think they should be fixed now. I had to replace the backend with a different technology. I tried testing directly to it and it all seems to be working as before. In the next day or two I'll test it out against the actual React/Vue codebases, but if you run into any errors, please let me know here.

I also want to apologize to everyone for not responding here. I messed up my notification settings so I wasn't hearing about messages. I should get them correctly now.

Daniel Koch

@dkprog

@CodingItWrong Thank you very much!

Josh Justice

@CodingItWrong

@Safei-Ashraf github actions version now updated on the site; thanks again for letting me know

elov

@elov:matrix.org

[m]

Hi! I'm having an issue with the react TDD, I receive a CORS error when axios makes the request from my localhost:3000, I've tried adding allow origin header and still the same, how can I Solve this? great explanaition of TDD!!

Josh Justice

@CodingItWrong

Hi, sorry about that. I change the API recently. I should be able to look at getting that corrected tonight.

Josh Justice

@CodingItWrong

@elov:matrix.org OK, I was able to reproduce the error. I got a fix in and it is working for me now. Please retry and if it still gives you issues, let me know

3 replies

Where communities thrive

People

Repo info

Activity