![CodingItWrong](/img/default-banner.jpg)
- Видео 76
- Просмотров 112 499
CodingItWrong
США
Добавлен 29 июн 2018
Videos about React, React Native, and Expo development, testing, and test-driven development (TDD), and other miscellaneous software development.
Josh is a developer, author, speaker, and trainer. Author of the book _Outside-In React Development: A TDD Primer_.
Josh is a developer, author, speaker, and trainer. Author of the book _Outside-In React Development: A TDD Primer_.
"Mac OS 8 Revealed" - Copland Concept Animations
A recording of the "videos" (Director animations) included on the CD-ROM that came with the book "Mac OS 8 Revealed". This refers to Copland, Apple's next-generation operating system that they were unable to ultimately release. The "Mac OS 8" we actually got was an extension of System 7, but many of the user interface elements shown in this video were incorporated into Mac OS 8 and 9.
Very little footage remains of Copland, so although this is only conceptual animations instead of what was actually built, it's an interesting snapshot of what Apple's intent was with Copland.
00:00 Figure 1.3: A Scalable User Interface
01:59 Figure 1.6: Personalized Workspaces
03:04 Figure 1.8: The Computer as ...
Very little footage remains of Copland, so although this is only conceptual animations instead of what was actually built, it's an interesting snapshot of what Apple's intent was with Copland.
00:00 Figure 1.3: A Scalable User Interface
01:59 Figure 1.6: Personalized Workspaces
03:04 Figure 1.8: The Computer as ...
Просмотров: 130
Видео
Marathon Infinity on VCF exhibit computers
Просмотров 123Месяц назад
Marathon Infinity on VCF exhibit computers
The contenders.
Просмотров 38Месяц назад
Copland, BeOS, and NeXTSTEP starting up at the same time at my exhibit at VCF Southeast 2024. Copland is running on a Power Macintosh 7500, BeOS on an 8500, and NeXTSTEP on a NeXTstation,
BeOS Book Demo App
Просмотров 669 месяцев назад
The BeOS Book demo app from R3. A 3D book has videos playing on each page as the pages turn in 3D. Not bad for a 120 MHz processor from 1995!
Copland D11E4 June Release - Boot and GXSlidemaster
Просмотров 759 месяцев назад
A brief walkthrough of a Power Macintosh 7500 running System 7.5.2 rebooting into Copland D11E4 June Release, and launching the GXSlidemaster application. Big thanks to this Copland walkthrough video for the tip that RAM should be 24 MB or below: ruclips.net/video/9VpTu5c8I_w/видео.html
Copland D11E4 June Release Boot Sequence
Просмотров 629 месяцев назад
No sound. Shows the sequence of a Power Macintosh 7500 running System 7.5.2 rebooting into Copland D11E4 June Release, and launching the GXSlidemaster application.
We got Be, baby!
Просмотров 7410 месяцев назад
First successful boot of BeOS R3 on a Power Macintosh 8500. To get the drive to be recognized as a boot drive, I could not use third-party Quantum drives that were not recognized by Macintosh System 7.5.2's Drive Setup; I had to use an Apple brand drive that 7.5.2 Drive Setup recognized.
Castlevania: Symphony of the Night as Maria on a Japanese Sega Saturn on a Twentieth Anniversary Mac
Просмотров 81910 месяцев назад
Maria is not playable in the original PlayStation version, but is playable on the Sega Saturn version, which was only released in Japan. I promise I'm a better SotN player than this video would suggest; I was holding the phone in one hand so only had one more hand to control Maria!
Installing Haiku on Apple silicon using UTM
Просмотров 362Год назад
Installing Haiku on Apple silicon using UTM
Trying Out a Working Apple Lisa at VCF SouthEast 2023
Просмотров 94Год назад
Trying Out a Working Apple Lisa at VCF SouthEast 2023
ByRole Queries in React Native Testing Library
Просмотров 534Год назад
ByRole Queries in React Native Testing Library
Adding Component Test Coverage with React Native Testing Library, part 2
Просмотров 1,2 тыс.Год назад
Adding Component Test Coverage with React Native Testing Library, part 2
Adding Component Test Coverage with React Native Testing Library
Просмотров 1,6 тыс.Год назад
Adding Component Test Coverage with React Native Testing Library
Getting Started with Outside-In React Development
Просмотров 8152 года назад
Getting Started with Outside-In React Development
Building for Mobile and Web with Expo, part 8: Route Params and Forms
Просмотров 5812 года назад
Building for Mobile and Web with Expo, part 8: Route Params and Forms
Building for Mobile and Web with Expo, part 7: Refreshing a List
Просмотров 3132 года назад
Building for Mobile and Web with Expo, part 7: Refreshing a List
Building for Mobile and Web with Expo, part 6: TDD and Refactoring
Просмотров 3262 года назад
Building for Mobile and Web with Expo, part 6: TDD and Refactoring
Building for Mobile and Web with Expo, part 5: Screen Tests
Просмотров 1,2 тыс.2 года назад
Building for Mobile and Web with Expo, part 5: Screen Tests
Building for Mobile and Web with Expo, part 4: Server Data
Просмотров 4882 года назад
Building for Mobile and Web with Expo, part 4: Server Data
Building for Mobile and Web with Expo, part 3: Sign In
Просмотров 1,1 тыс.2 года назад
Building for Mobile and Web with Expo, part 3: Sign In
Building for Mobile and Web with Expo, part 2: Dark, Links, Deployment
Просмотров 1,9 тыс.2 года назад
Building for Mobile and Web with Expo, part 2: Dark, Links, Deployment
Building for Mobile and Web with Expo, part 1: App Chrome
Просмотров 8 тыс.2 года назад
Building for Mobile and Web with Expo, part 1: App Chrome
TDDing a React Native responsive design library
Просмотров 6062 года назад
TDDing a React Native responsive design library
Introducing a New Live Stream Series: React Native for Web
Просмотров 5692 года назад
Introducing a New Live Stream Series: React Native for Web
JavaScript Test-Driven Development - Roman Numerals and Incremental Development part 2
Просмотров 2613 года назад
JavaScript Test-Driven Development - Roman Numerals and Incremental Development part 2
Hi, what is your configuration? I can't get nock to work in react native
Thank you this was very useful :)
I higly recommend that you DONT use Detox for e2e testing. The documentation is crap and setup Detox in your project is a nightmare.
Promo*SM
I managed to finish the serious, It was eye opening and great to follow. learned about cypress, RTL and Jest. Thank you sir.
To verify that the code is tested by your tests you need to do Mutation testing. There have existed some for js over the years, one that still seem to be around is Stryker Mutator. I haven't tried it recently (in years), so the jest runner might actually work now.
Great video and lots of info. Thanks!
Typical apple products slow and overpriced scams.. at least this era they wasn't made to fail and are repairable.. but was still slow and overpriced ewaist
What would you do if you have a monorepo setup and one person/team is working on a virtual slice in the sence of frontend & backend whilst the backend is also part of the feature(so the functionaly is not yet present). Would you Then also mock out the backend response with cy.intercept? Or maybe even start coding from the backend and then go with the frontend? Im thinking that it would more sence not to mock out the Backend as in the case of a Acceptance Test. The Acceptance Criterias/Rules would most likely not be passed without the Backend implementation connected
Thank you🔥🔥🔥
You a rock🔥🔥🔥👍🏼👍🏼👍🏼👍🏼👍🏼👍🏼
I had a Performa 630 with the optional AV TV tuner card with remote. It was cool. I had a 8500 that I used in the Dorms as a second monitor. so I played on the Playstation and they played on the N64 on TV. Also Love Castlevania SotN. Currently replaying on the Sega Saturn as well. also I am sure you know there is a full screen option there in bottom right corner. That is a special anniversary mac on top of it. So much nostalgia in one video for me.
Dang, that sound track is going hard! Did you mod the Mac to accept the Saturn video, or was that just a feature it had?
Capture devices and software existed even back then
Time to replace it with a usb type C :D lol jk
Great work. I am going to suggest using Gherkin/cucumber and switching from Cypress to Playwright.. Also, maybe change the implementation to funcitonal aproach class..less and state, etc using hooks? Just a suggestion.
Thanks for the videos. What is the state of Expo (SDK 49) for creating large applications (same code for both Web and Mobile) that are composed of many different "mini-apps", each team having their release cycle, but for the end user, the app or web application looks like a single and consistent experience.? Please
I liked the video and learned a lot
Thanks for sharing your knowledge! Please, are you aware of any large and real life EXPO app that runs on Mobile (iOS and Android) AND on WEB (Mobile and Desktop) using the same source code? Although it seems that this IS possible with Expo, I am not sure that there is any complex app/web that use same source code. Cheers
That's a good question; I'm not aware of any large real-life apps that run Expo including web. You should ask the Expo folks! If you find an answer, I would love to hear it if you'd be willing to share.
Hi Josh: I'd like to know if you can recommend some discord server invite for React Native Testing Library. Thank you in advance
I have a Discord server with a React Native testing channel; there are a number of folks in there who talk about RNTL. discord.gg/jVXCxZPF6f Callstack, the maintainers of RNTL, also have a Discord with a channel for the library: discord.gg/bPK6U2wRdh
Edit: Just reinstalled expo-cli with yarn globally at 6.3.0 from 6.1.3, and now I can follow the Jessup script. I almost think that when I did npx expo install it used the latest version of expo, but I needed to upgrade yarn's version. Previously I was able to start a new expo project using NodeJS 19 by downloading the firehose-expo-main directory and running "yarn install", and then removing dependencies I didn't need. However, I also tried creating a project by following the Jessup script, but when I ran "yarn create expo-app projectName -t blank", yarn said no, because "the engine "node" is incompatible with this module. Expected version "> = 12 < = 16". Got "19.3.0"". I was wondering, do you know why "yarn install" works to install the node_module dependencies of the downloaded firehose-expo-main project, yet, when I try to create a new expo project from scratch, yarn suddenly cares about the version of NodeJS installed? For now I'm just going to operate from the downloaded project, but it seems kind of strange that yarn lets me do "yarn install" when I have NodeJS 19, yet I cannot create a new project from scratch.
can I still use this turtorial or it is outdated?
I'm posting this 1/23/2023 in case others are having trouble with the installation: I installed Expo-Web with the following: npx create-expo-app MyAppName -t expo-template-blank-typescript npx expo install react-dom react-native-web @expo/webpack-config But for some reason, you must start Expo-Web with [node_options=--openssl-legacy-provider expo start --web] instead of [expo start --web]. I don't remember exactly why this is, but I think it is some dependency is stuck on webpack 4 and cannot use wepback 5 for openssl, there was some github thread that I don't have infront of me rn. Additionally, version 2.12.0 of react-native-animated does not work with drawer, it gives a different error: Uncaught Error: Module parse failed: Unexpected token (4:9) File was processed with these loaders: * ../../../AppData/Local/Yarn/Data/global/node_modules/babel-loader/lib/index.js You may need an additional loader to handle the result of these loaders. | export * from "./reanimated1"; | export * from "./reanimated2"; > export * as default from "./Animated"; So I installed [npm install --save-exact react-native-reanimated@2.3.1] and [npm install --save-exact @react-navigation/drawer@6.3.1] (the versions this video ends up going with) and that worked.
excellent video - I never realized that Exercism is a great place to practice TDD though I have been there before. Great step-by-step explanation...Thank you so much...
How install the nativeup
This is awesome 👍
Great content, Man. After watching your video, I created an Expo app, but the app always start to expo app home screen, instead of my app home screen. I have to click the link to the dev server, and then my app start. Then I tried to build a custom development expo app, but it's the same to start to expo home screen, rather than my own. is it because of development mode I have to start my app from expo home?
Yes, it sounds like this is because of development mode. The "Distributing your app" docs have info on how to do a build for submission to the stores, and that build doesn't have the Expo home screen: docs.expo.dev/distribution/introduction/ You can use that build for internal testing, not just going live to users. That's the approach I follow for my Expo apps.
Thanks Josh, I found this really useful! I especially liked your response to 'implementation details testing'. How can I test a backend-agnostic frontend without specifically testing what data it's sending to the server?! Blanket statements like the one in msw and RTL docs aren't always very helpful
Man, how do you test onFocus for text input on RN using RTL?
@@CodingItWrong Unfortunatey that’s not working for me :/
Hey! Thank you so much for putting this comparison. I'd like to elaborate on some points from the video but in no way I'm going to defend MSW or anything :) Just sharing my insights, hope it's helpful. Regarding matching a request based on its body: although it's not in the request matching section, you can absolutely do it. The philosophy behind MSW is that you write handlers that represent your server logic. Just as you declare server handlers, you start from a path and you have a resolver function to deal with other details. MSW works in the same way: you capture your request based on its method and path, and in the resolver, you can provide *additional* matching details: rest.post('/todos', async (req, res, ctx) => { const requestJson = await req.json() if (requestJson.something === 'otherThing') { // mock the response } // pass it through }) I understand it may feel verbose but that's another thing to mention: MSW is really meant as a description of your network layer. I can't say I like how mocking is a part of your testing tooling as opposed to being its own thing. Because, as it turns out if it's its own thing it can be reused between tools, shared across environments, and stand for a much broader term than simple request stub. Also, I often encourage people to create their own matchers to suit their needs. I've tested numerous apps of different sizes and never did I need to mock a request based on what body it was sending. I don't imply that's not a thing but rather saying that not everyone needs this exact way of matching, and so implementing it yourself is both straightforward and transparent. Okay, request assertions. You provide a valuable point that referring to it as "implementation detail testing" may feel like shaming. I may need to phrase that statement better because that's not the intention behind it. I intend to guard people against writing inefficient tests, and you won't believe how often people test a request URL, or its body when they can omit that assertion and keep the very same value in their test (if not make it better!). It's not about shaming but rather guiding people to do intention-driven testing. And the intention behind any request is to get the response and handle that response in some way. In 99% of the cases, the response is handled in the UI in some way. So asserting *that* makes for a much better best test, imo. Also, if you dispatch an invalid request, your application's logic won't handle it correctly, there won't be the expected response, and it won't be reflected in the UI. Response-driven assertions stand solid and there are very few examples when they don't. So this felt like a great default to encourage people to do, and thus the rhetorics around request assertions may feel a bit defensive. By the way, you can still assert requests with MSW by catching a request and asserting its properties. It's fully supported, just not encouraged ;) Also, I'm really glad you're using the tool that suits you. Nock is a fantastic one and I've learned a lot by reading its source. I dislike how library authors just force their creations on everyone. In the end, we need libraries to achieve our goals, and if a certain library already does so efficiently, I see no reason to change that. Once again, thank you for the video!
Thanks for sharing all this info! It was helpful to me and I hope it's helpful to any other viewers too. > MSW is really meant as a description of your network layer. I can't say I like how mocking is a part of your testing tooling as opposed to being its own thing. Because, as it turns out if it's its own thing it can be reused between tools, shared across environments, and stand for a much broader term than simple request stub. That totally makes sense. I think there are some tradeoffs there in terms of mocking *specifically* for one test case vs setting up a general mocking setup. You can see a similar tradeoff of the "factories vs fixtures" question when it comes to test data. So either way could be useful for different cases. Incidentally, on my current client project we are looking at setting up Mock Service Worker within Storybook 👍 > I intend to guard people against writing inefficient tests, and you won't believe how often people test a request URL, or its body when they can omit that assertion Yes, totally. The explanation I heard that helped me understand all this is from Sandi Metz in this talk: ruclips.net/video/URSWYvyc42M/видео.html - She distinguishes between "queries" (just retrieve data) and "commands" (modify data) and says that asserting on outgoing queries is an over-specification: it adds costs but not benefits. Because if you're asserting on the results of the query's return value already, you get no additional benefit. I recommend that talk to anyone wanting to learn more about mocking in testing in general
Thanks a lot for these amazing streams! One question, when we use nock, we are using localhost:3000, does it matter? What if I don't have my backend running on localhost:3000?
really like your style
Great
Thank for your sharing session,sir. TDD using RN is pretty rare good source. Waiting for new more tutorials.
Awsome👍
(still watching so don't know if it will solved) perhaps you are using an older version of react navigation since you can't find it in the docs (V6)? I found it useful to use the useNavigation() instead of passing it as props in all places. Then I have mocked it out in my jest setup so I can import a spy/mock to assert on when needed in my tests
I've tried doing it like this in the test, but it failed: const navigation = { canGoBack: jest.fn().mockReturnValue(true), goBack: jest.fn(), }; // Mock the required imports jest.doMock('@react-navigation/native', () => ({ useNavigation: jest.fn().mockReturnValue(navigation), })); const { findByTestId } = render(<Header />); const iconWrapper = await findByTestId('IconWrapper'); // Simulate click on the back button fireEvent.press(iconWrapper); // Assert that the navigation.goBack function is called await waitFor(() => { expect(navigation.goBack).toHaveBeenCalled(); }); And this code in the component: const navigation = useNavigation(); onPress={() => { console.log('onPressCalled'); if (navigation.canGoBack()) { console.log('entered'); navigation.goBack(); } }} But it never passes the if statement and canGoBack returns false, even though it should return true because of mock
If using a getBy* you don't need an expect, but you do when queryBy*. In RLT (not RNTL) the advantage of just using getBy* is that it automatically does a .debug() when it fails. (If doing async code I recall you tipped me to use findBy* 😊)
The fact that you do not prepare for these videos, and I see you think and go through trial and error is really helpful
Hey man, great content, every day I'm watching your videos and learning about TDD. I'm very grateful for people like you that shares a amazing knowledge for the community in this way. Thank you for your videos, and greetings from Brazil.
What I like about this video is that I can see you fail, look at the docs, and then try again until you succeed which is really helpful
I enjoyed your talk very much in react native eu, and I really want to start implementing tdd in my react native career. I am looking forward to your videos
so one of the things that bother me is that you said something along the lines of I want to keep my component dumb so Im not gonna wrap it with Redux, on the other hand, your props are based around the usage of redux. So if you wanted to use something like react-query that component would technically be useless unless you want to keep it very dumb and put all the logic in its parent, but even then you would have to change things to that component. What are your thoughts on that?
Thank you so much for inviting us on this coding adventure and sharing your experience and learnings. I really appreciate it 🤗
Hi Josh, this series (and your other ones) is amazing so thank you so much. Would love to see a TDD approach with backend API integration from the start and how to go about this with Detox/RNTL. Thanks again!
You're welcome! I'm planning something like you're describing here, but in the meantime the closest I have is outsidein.dev which is for React web. But the same approach applies to RN/RNTL/Detox
Find many gold nuggets in your content - thank you very much for sharing
Great content! Thank you so much!
I'm currently exploring react-query and think it's a good middle ground between component state and global context state since it act as a cached. Making the list update after marking it as read would simple be to invalidate the previous query for the list (then it will refetch it).
Thank you for this video! Very inspiring!
Tip: I find it useful to prefix the imports I mock out with “mock”. Example would be mockAuthenticationHttpClient