One of the best resources on Nuxt & testing out there. I am over half way through video one and am very curious if we are going to get to TDD or not at this point. So far the topic has been DDT, or development driven testing. It is so easy to create tests that align with our implementation rather than having our goals packaged in tests, and then generate the code that matches our goals because we have tests to validate that objective.
I don’t think I’ll be doing that for this project, but I will jot it down for an upcoming video. But essentially for database stuff I would include a validation library like Zod or Joi and write classes for the models with a lot more unit tests to see that the incoming data is correct and expect errors to be thrown if not. I would also mock the database calls in unit tests but in integration tests do the actual calls and clean up after each test. Thanks for the suggestion!
The repo is on Github with the finished code for the next video (recording already, hopefully releasing by Saturday!). You can check out the components usage there. There's so much to cover for the next video I am wondering if I shouldn't make more than 2 parts. Otherwise I may rush over things like building out the UI. What do you think?
Thanks for the tutorial when following along, I'm getting an error on the line "this.items.push(todo);" error is "Property 'items' does not exist on type '{ add(partialTodo: TodoAdd)
Hey Artur! Thanks man, I was just as blown away when I prototyped before the video. The tech really just makes it too easy. Props to THOSE devs 💪 glad it helped though!
I think one test case would fail where findIndex returns -1 maybe? which doesn't exist in the items array. Although we are gonna pass the id, in case anyone calls the update store method directly then it would be an issue.
@@KaizenCodes No worries I am totally new to unit testing and Vue in general. But I have a strong background in AngularJS. Vue is just modern Angularjs for me xD.
Hello Kaizen, I'm having problems with vitest and vue/test-utils i want to test a simple component using vue/test-utils but vitest show an error "useRuntimeConfig is not defined", do you know how can I set autoimports of nuxt 3 with vitest? thanks bro
Hello! Ah yes I've had this issue too. It's quite annoying with autoImports :/ The only workaround I had so far was to create a .js file and do e.g. global.useRuntimeConfig = () => ... (basically mock it) and put it in Vitests globalSetup option array... it's quite dirty though and have enquired with the Nuxt team on best practice here, but no suggestions. I guess we'll have to wait for www.npmjs.com/package/@nuxt/test-utils to become stable and finished..
For some imports though you can be explicit in the component and do import xxx from '#imports'.. Then in vitest configuration you could use the 'resolve' setting, something like: { resolve: { "#imports": "./.nuxt/..." } } or something in that direction. (not tested).
Hey Danillo, I made a bit of a blunder here early in Nuxt3. Since then I've found out that we should use `useState` instead of ref to define local state variables in the setup function. E.g. const newTodo = useState('newTodo', () => ''); Relative paths I think the best is just to use the `~~/your-src/file.ts`, where ~~ is the root of the project. Hope this helps. I'll be making a more in-depth Nuxt video again with better usage of conventionals.
Hey Dude, thanks for a top-tier content. Please, consider to make a video about fetching data from some API and store with pinia in a nuxt 3 app as well, thanks in advance.
useState is great! You can basically just create your own ‘store’ in the composables folder. I will explore this and make a video about the difference and use cases. Pinia adds a lot of cool functionality like hooking into changes and getting snapshots. But if an app is simple a simple useState will do just fine I think. This video is a very overthought todo app 😂 just to explore what’s possible. The next one is even more overengineered.
2 роки тому
Thank you very much for your reply. I'm looking forward to your videos in the future with Vue/Nuxt and cool features around its/their ecosystem.
@ I have plenty planned out! Currently just busy with git add && git commit -m “feat: adds wife to Kaizen class” 😂 so after the honeymoon I’ll start releasing :) look forward to your comments and questions.
It’s coming! See the latest community post on my channel. Adding a database with tests, user authentication and more! I’m not 100% sure about a release date, but if you want to you can subscribe not to miss it ☺️
Finished code is on Github at: github.com/Eckhardt-D/nuxt3-todo and you can check it deployed live at nuxt3-todo.vercel.app
One of the best resources on Nuxt & testing out there. I am over half way through video one and am very curious if we are going to get to TDD or not at this point. So far the topic has been DDT, or development driven testing. It is so easy to create tests that align with our implementation rather than having our goals packaged in tests, and then generate the code that matches our goals because we have tests to validate that objective.
You’re right. Not true TDD. Thanks for pointing it out - I should have been more accurate
Thank you for this, I learned a lot.
I’d love to see you add tests where you use an API/db for storage as well.
I don’t think I’ll be doing that for this project, but I will jot it down for an upcoming video. But essentially for database stuff I would include a validation library like Zod or Joi and write classes for the models with a lot more unit tests to see that the incoming data is correct and expect errors to be thrown if not. I would also mock the database calls in unit tests but in integration tests do the actual calls and clean up after each test. Thanks for the suggestion!
Can't wait next part. Would be awesome to see deep components nesting (for what ever reason, just for testing practice) with multiple interconnections
The repo is on Github with the finished code for the next video (recording already, hopefully releasing by Saturday!). You can check out the components usage there. There's so much to cover for the next video I am wondering if I shouldn't make more than 2 parts. Otherwise I may rush over things like building out the UI. What do you think?
Awesome content. Just finished Part 1. Tomorrow will continue with Part 2.
Great tutorial! Learned allot. but could you explain 18:13 nitro externals. where I can read more in docks
Thanks for this, I've learnt lots, and enjoy your teaching style.
Thanks for the tutorial when following along, I'm getting an error on the line "this.items.push(todo);"
error is "Property 'items' does not exist on type '{ add(partialTodo: TodoAdd)
Hey dude, what an amazing video! Learned a lot about testing! Thanks 😁
Hey Artur! Thanks man, I was just as blown away when I prototyped before the video. The tech really just makes it too easy. Props to THOSE devs 💪 glad it helped though!
thank you for your tutorial. But I still face the error of getActive pinia on production env. can you have me to make one about this.
Sorry, but I cannot help if I don't have context / able to reproduce your error. A repo may help?
This was a really informative and useful video on TDD alone.
10:40 - that empty array is still a Todo array
awesome video, I was looking for one like this for a while... by the way what is your theme?
Thanks, glad it was decent :D And the theme I use is 'Apollo Midnight' with the 'JetBrains Mono' font ✨
@@KaizenCodes thank you! I'm watching part 2 hahaha
Great content, awaiting part 2. thanks
This was great. Learned a lot
I think one test case would fail where findIndex returns -1 maybe? which doesn't exist in the items array.
Although we are gonna pass the id, in case anyone calls the update store method directly then it would be an issue.
Good call! I'm the worst test writer 🤣🤣
@@KaizenCodes No worries I am totally new to unit testing and Vue in general. But I have a strong background in AngularJS. Vue is just modern Angularjs for me xD.
Thank you for the tutorial, it's great! Will be there a part 2? :)
Why you add uuid in nitro?
Sorry, I don't understand and translate
Thanks for this amazing video.... Do you have any resources for getting started on testing in vuejs?
Hello Kaizen, I'm having problems with vitest and vue/test-utils i want to test a simple component using vue/test-utils but vitest show an error "useRuntimeConfig is not defined", do you know how can I set autoimports of nuxt 3 with vitest? thanks bro
Hello! Ah yes I've had this issue too. It's quite annoying with autoImports :/ The only workaround I had so far was to create a .js file and do e.g. global.useRuntimeConfig = () => ... (basically mock it) and put it in Vitests globalSetup option array... it's quite dirty though and have enquired with the Nuxt team on best practice here, but no suggestions. I guess we'll have to wait for www.npmjs.com/package/@nuxt/test-utils to become stable and finished..
For some imports though you can be explicit in the component and do import xxx from '#imports'.. Then in vitest configuration you could use the 'resolve' setting, something like:
{
resolve: {
"#imports": "./.nuxt/..."
}
}
or something in that direction. (not tested).
@@KaizenCodes Thanks for your answer Kaizen
Nice tutorial! how do i fix the problem with auto-import? typescript showing error on "ref" auto-mport and relative paths. help me =x
Hey Danillo, I made a bit of a blunder here early in Nuxt3. Since then I've found out that we should use `useState` instead of ref to define local state variables in the setup function. E.g.
const newTodo = useState('newTodo', () => '');
Relative paths I think the best is just to use the `~~/your-src/file.ts`, where ~~ is the root of the project. Hope this helps. I'll be making a more in-depth Nuxt video again with better usage of conventionals.
Also Nuxt3 has a CLI tool called nuxi, if you run `npx nuxi prepare` it will generate the necessary types and stuff for you.
Do you know what your avatar means？
Hey Dude, thanks for a top-tier content. Please, consider to make a video about fetching data from some API and store with pinia in a nuxt 3 app as well, thanks in advance.
How is useState Composable compared to Pinia?
useState is great! You can basically just create your own ‘store’ in the composables folder. I will explore this and make a video about the difference and use cases. Pinia adds a lot of cool functionality like hooking into changes and getting snapshots. But if an app is simple a simple useState will do just fine I think. This video is a very overthought todo app 😂 just to explore what’s possible. The next one is even more overengineered.
Thank you very much for your reply. I'm looking forward to your videos in the future with Vue/Nuxt and cool features around its/their ecosystem.
@ I have plenty planned out! Currently just busy with git add && git commit -m “feat: adds wife to Kaizen class” 😂 so after the honeymoon I’ll start releasing :) look forward to your comments and questions.
Oh wow, Congratulations!
Please add the part 2! thanks...
How about part 2 ??
It’s coming! See the latest community post on my channel. Adding a database with tests, user authentication and more! I’m not 100% sure about a release date, but if you want to you can subscribe not to miss it ☺️
@@KaizenCodes OK .
Thanks for the quality content.
🙏🏾
nuxt 3 ..more series please..
Great video, thank you
Nuxt 3 + firebase please
nice video thanks
cool)
why expect(store.items).toStrictEqual([]) is true ?
as [] === [] // false
The assertion library does a bit more than '===', you can read more about it here vitest.dev/api/#tostrictequal
Great video. Thanks.