|
Jimlit posted:Do you have an example of how your events are set up? There are a million ways to screw yourself over with GTM / dataLayer stuff. code:
That references a Tag typed to GA that triggers an action I expect to see in GA. On form submission inconsistency, we have a redirect on submission and I'm guessing the datalayer change is failing to fire before that kicks in, so I was maybe going to use session storage and trigger the data layer on the thank you page.
|
# ? May 25, 2021 21:42 |
|
|
# ? Jun 10, 2024 13:28 |
|
React testing question- I have a <ChildComponent /> which makes an async call, and a <ParentComponent /> which relies on that child. In my tests on the ParentComponent, I want to mock the async call made by that child component. How should I do this? My current attempt is a MirageJS server, but that's failing for some absurd reason. I added debugging logs to the async call in the child component; it fires "Now calling API", and the Mirage server properly logs "Now calling API in Mirage server", but the secondary logs in the fetch().then() handler aren't firing. Maddening. The other thing I tried was doing `jest.fn().mockResolvedValue()` in ParentComponent.test.js, but that seems to have failed to replace the API call in the child component. The other thing I'm considering is adding an actual mock implementation, but I haven't done that yet. Any further suggestions or directions to go in troubleshooting this would be appreciated.
|
# ? May 26, 2021 04:11 |
|
darthbob88 posted:React testing question- I have a <ChildComponent /> which makes an async call, and a <ParentComponent /> which relies on that child. In my tests on the ParentComponent, I want to mock the async call made by that child component. How should I do this? jest.spyOn doesn't work for you? code:
|
# ? May 26, 2021 12:53 |
|
If someone asked that at work, I’d say “post your code” because there’s not enough detail to tell what you are doing wrong.
|
# ? May 26, 2021 13:06 |
|
smackfu posted:If someone asked that at work, I’d say “post your code” because there’s not enough detail to tell what you are doing wrong. Same and I'd wonder why a parent component needs to know what is going on in its child. I'd just mock the child component completely, since you aren't testing the child. And then I would continue wondering why a parent component needs to know what is going on it its child.
|
# ? May 26, 2021 14:20 |
|
Lumpy posted:Same and I'd wonder why a parent component needs to know what is going on in its child.
|
# ? May 26, 2021 16:01 |
|
VagueRant posted:Am a simpleton, so not too sure what info I can provide here, but I intially used the following for phone number events: Your guess for the form submit is right. The solution would be to write a custom submit function that fires after datalayer push completes. The same might be true for the tel links, but I would just keep the solution you have in GTM since you really are only sending one event. Jimlit fucked around with this message at 17:39 on May 26, 2021 |
# ? May 26, 2021 17:28 |
|
If you are using Flow (you aren’t), you might be interested in this post where they admit they are only building it for internal Facebook at this point and you can take it or leave it. https://medium.com/flow-type/clarity-on-flows-direction-and-open-source-engagement-e721a4eb4d8b
|
# ? May 26, 2021 17:56 |
|
I completely forgot about Flow
|
# ? May 26, 2021 18:14 |
|
prom candy posted:I completely forgot about Flow everyone did
|
# ? May 26, 2021 18:15 |
|
Lumpy posted:Same and I'd wonder why a parent component needs to know what is going on in its child. smackfu posted:If someone asked that at work, I’d say “post your code” because there’s not enough detail to tell what you are doing wrong. code:
code:
Another stupid solution I just noticed: The sole purpose of that API call is to populate a field in the Redux store that component uses. I can just skip the API call and populate that field in the mock store with mockResults as part of setting up the test.
|
# ? May 26, 2021 18:43 |
|
darthbob88 posted:Another stupid solution I just noticed: The sole purpose of that API call is to populate a field in the Redux store that component uses. I can just skip the API call and populate that field in the mock store with mockResults as part of setting up the test. This is the answer but.... darthbob88 posted:And then in ParentComponent.test.js, I have this attempt to mock that makeAPICall both with Jest's in-built mocking and with a Mirage server. All makeAPICall = jest.fn().mockResolvedValue(mockResults); is doing is making a variable named that a jest mock function, in the scope of the test. To actually mock it so that the child component gets the mock, you have to mock the module it lives in.
|
# ? May 26, 2021 19:26 |
|
You can also use libraries like nock to mock the actual web request behind the scenes
|
# ? May 26, 2021 19:41 |
|
dupersaurus posted:All makeAPICall = jest.fn().mockResolvedValue(mockResults); is doing is making a variable named that a jest mock function, in the scope of the test. To actually mock it so that the child component gets the mock, you have to mock the module it lives in. It doesn't really have a module; it's just a bare export in Services.js like code:
code:
|
# ? May 26, 2021 21:15 |
|
darthbob88 posted:It doesn't really have a module; it's just a bare export in Services.js like Anything exported is part of a module. Your example there doesn't work because you're setting the return value of the Services module as a singular mock function, but you want to mock the individual members. Someone might have a better way, but in a situation like that I do this: code:
1) You might not need the __esModule: true, I'm unclear about when exactly you need to use it 2) jest.mock gets called before anything else, so if you want to use the mockResults object you have to do something hacky like assign it to global scope 3) If you don't want to mock every member of the module, add to the top of the object ...jest.requireActual("module path name"), and then add the mocks after that
|
# ? May 26, 2021 21:35 |
|
dupersaurus posted:Anything exported is part of a module. Your example there doesn't work because you're setting the return value of the Services module as a singular mock function, but you want to mock the individual members. 2. Yeah, it's going as a const at the top of the test file. 3. I probably will need to mock everything in that module, but as long as I have a method that works for the one API call I can do the same for the others.
|
# ? May 27, 2021 00:28 |
|
So I am spitballin' on a new thing, and need some suggestions. I need to write a backend, and I have written many, but never one quite like this, so I am seeking good ideas. The site is basically a daily question. Answers are binary, but with a short (< 100 chars) comment. Upon answering you get taken to a feed of other ppl's answers. So the basics of this are easy. The part I am struggling with, having never done it before, is the feed. I want it to be so that if you are on the page, you are watching other ppl's answers display in real-time. New answers come in at the top, pushing older answers down the page. And I guess I'll do some sort of infinite scroll thing if you want to scroll thru all the answers. So I plan on storing the previous 5 days' worth of questions/answers, but nothing beyond that. The days will just rotate out as they pass the 5 day old mark. So what are my options here? I am perfectly fine writing a quick n dirty backend in Hapi or Express or something similar, I'm just wondering how to handle the feed thing. Should I look into something like PubNub (or better yet - a free alternative?) Should I just setup something to poll on the frontend to check for new messages every 10 seconds or something? Also not averse to trying completely new things - so yeah - suggest things at me.
|
# ? Jun 1, 2021 16:05 |
|
if you want it to be *really* real time maybe websockets?
|
# ? Jun 1, 2021 16:06 |
|
yeah I'm running something similar to that in many places, using websockets and postgres database triggers, backend in golang
|
# ? Jun 1, 2021 16:37 |
|
frogbs posted:So i'm an old that's probably 10 years behind when it comes to modern web development. I have an idea for a little project that i'm inclined to just build using HTML, CSS and Javascript, but thought maybe there's a reason to use it as an excuse to check out some more modern frameworks/workflows. There's so many places to start it's a little daunting, but maybe someone could recommend something? So i've actually got this up and running as a prototype. I decided to focus on learning a few things at once, so right now it's Hugo with Netlify CMS, deployed on Netlify, and Tailwind for styling. I think i'm going to tackle using React or Vue later, for now it's just some simple JS handling the sorting stuff. The biggest stumbling block has actually been Tailwind. I feel like i'm doing this wrong? Is it bad to have a class list like this for a simple button? I'm getting a headache looking at my templates: code:
frogbs fucked around with this message at 01:24 on Jun 3, 2021 |
# ? Jun 3, 2021 01:13 |
|
When you get into React/Vue you'll just have a <Button /> component and you'll only need to look at those classes when you're making changes to your button component.
|
# ? Jun 3, 2021 02:23 |
|
frogbs posted:So i've actually got this up and running as a prototype. I decided to focus on learning a few things at once, so right now it's Hugo with Netlify CMS, deployed on Netlify, and Tailwind for styling. I think i'm going to tackle using React or Vue later, for now it's just some simple JS handling the sorting stuff. If you're gonna do that list of classes for every button, then pluck it out and create a class in your css file using @apply with all those classes.
|
# ? Jun 3, 2021 13:53 |
|
prom candy posted:When you get into React/Vue you'll just have a <Button /> component and you'll only need to look at those classes when you're making changes to your button component. Yeah you can't really do much about the quantity of classes, but you can at least extract them out into your own components. I think if I was doing a really small basic app with pure JS (i.e., no React/Vue) I wouldn't use Tailwind, I would prefer something like Bootstrap or Bulma for sure.
|
# ? Jun 3, 2021 15:24 |
|
Anyone have a recommendation for courses in React/Redux/performant JS/frontend/??? My boss wants to spend up to around $1000 on training but I haven't found anything popular that's more than the cost of a few books. Money is no object and I don't know how to leverage that
|
# ? Jun 4, 2021 05:41 |
|
Analytic Engine posted:Anyone have a recommendation for courses in React/Redux/performant JS/frontend/??? My boss wants to spend up to around $1000 on training but I haven't found anything popular that's more than the cost of a few books. Money is no object and I don't know how to leverage that He wants to spend $1000 to teach someone frontend from the ground up instead of just hiring somebody? This is oozing dumb rear end small business boss energy.
|
# ? Jun 4, 2021 12:26 |
|
Maybe the Kent C Dodds course? $600. I generally consider him to be a smart guy about React stuff. https://epicreact.dev
|
# ? Jun 4, 2021 12:36 |
|
Analytic Engine posted:Anyone have a recommendation for courses in React/Redux/performant JS/frontend/??? My boss wants to spend up to around $1000 on training but I haven't found anything popular that's more than the cost of a few books. Money is no object and I don't know how to leverage that freecodecamp, You Don't Know JS and documentation for libraries
|
# ? Jun 4, 2021 13:25 |
|
I learned React on Udemy. Forget which course exactly but it was one of the popular ones. It also taught Redux (though I have since removed Redux from my stack because it made everything way too complicated and I hated it). You can usually find Udemy courses for sale for under $20 (normal price $100+). There are also general frontend courses but I get the sense these are broad and not very deep.
|
# ? Jun 4, 2021 17:18 |
|
marumaru posted:freecodecamp, You Don't Know JS and documentation for libraries Freecodecamp and mdn for me
|
# ? Jun 4, 2021 17:29 |
|
Jimlit posted:He wants to spend $1000 to teach someone frontend from the ground up instead of just hiring somebody? This is oozing dumb rear end small business boss energy. I already know frontend and am mediocre at React, it's more about reaching an expert level in something
|
# ? Jun 4, 2021 17:51 |
|
Analytic Engine posted:I already know frontend and am mediocre at React, it's more about reaching an expert level in something in that case, go with this if you absolutely need to burn the budget. smackfu posted:Maybe the Kent C Dodds course? $600. I generally consider him to be a smart guy about React stuff. Otherwise he would be better off getting a business account with udemy for all his employees. Honestly though, no online course is going to give you the level of expertise that plugging holes in your own lovely react app will. If he has a project in mind I'd say take the time you would dedicate to online training and just use it to get started on that.
|
# ? Jun 4, 2021 18:25 |
|
Analytic Engine posted:I already know frontend and am mediocre at React, it's more about reaching an expert level in something I've found that classes can take you from no knowledge to basic understanding of a new language/framework faster than solo learning, but you can't reach expert level anything by taking classes - if you've worked with react for a year on the job on your own and shipped something using it, it's unlikely that taking any kind of react class will teach you much.
|
# ? Jun 4, 2021 18:46 |
|
Queen Victorian posted:I (though I have since removed Redux from my stack because it made everything way too complicated and I hated it). If you ever need redux again it absolutely whips when you use redux-toolkit. They eliminated pretty much all my complaints with it.
|
# ? Jun 5, 2021 04:08 |
|
Anyone got any recommended resources for learning Typescript? I've worked with it a little, got the basic theory, syntax and practice but get totally lost in the docs and youtube tuts when it comes to telling apart interfaces and enums and which parts I should actually be using for what.
|
# ? Jun 6, 2021 13:29 |
|
VagueRant posted:Anyone got any recommended resources for learning Typescript? Might not be the best method but after I learned the basic syntax I just started using it and then googling stuff or posting here when I ran into "how do I..." type questions.
|
# ? Jun 6, 2021 21:38 |
|
https://basarat.gitbook.io/typescript/ I like this. It covers JS stuff too
|
# ? Jun 6, 2021 22:55 |
|
prom candy posted:Might not be the best method but after I learned the basic syntax I just started using it and then googling stuff or posting here when I ran into "how do I..." type questions. Yeah, I'm still new to TS but I very quickly got diminishing returns from the online courses I watched once I had the basics down. Too many of them are structured like a dry run through the docs and don't meaningfully demonstrate how you'd integrate TS into a normal rear end project.
|
# ? Jun 7, 2021 02:34 |
|
fsif posted:Yeah, I'm still new to TS but I very quickly got diminishing returns from the online courses I watched once I had the basics down. Too many of them are structured like a dry run through the docs and don't meaningfully demonstrate how you'd integrate TS into a normal rear end project. It's kind of deceptively simple. Just type your inputs, and try to rely on implicit typing for outputs and variables until you can't. When you run into a more difficult situation google it or ask some internet nerds. And if something takes more than 45 minutes just use any
|
# ? Jun 7, 2021 03:23 |
|
haha the guy the maintains the user styles archive (https://uso.kkx.one/) rewrote the site in Svelte and TypeScript. And it's pretty dang nice looking too. Makes me want to try it out
|
# ? Jun 8, 2021 21:58 |
|
|
# ? Jun 10, 2024 13:28 |
|
What is the standard way to test a front end app hosted at https://localhost that needs to call a production API and get around CORS? All online resources point to "just disable cors" and I could allow access from any origin to my backend, but I'd rather not. I'm leaning towards having a test and prod environment for the backend, and allowing localhost:* in the test env only, but then there's no way for the front end dev to test their code against the production backend before deploying.
|
# ? Jun 9, 2021 14:18 |