Posts

How to add push notifications to React Web app with Firebase

https://www.freecodecamp.org/news/how-to-add-push-notifications-to-a-web-app-with-firebase-528a702e13e1/
ReactDOM.render( <ThemeProvidertheme={theme}> {/* CssBaseline kickstart an elegant, consistent, and simple baseline to build upon. */} <CssBaseline/> <AppContextProvider> <App/> </AppContextProvider> </ThemeProvider>, document.querySelector('#root') )
initializeFirebase()



push-notification.ts importfirebasefrom'firebase'
exportconstinitializeFirebase = () => { if ('serviceWorker'innavigator) { navigator.serviceWorker .register('./firebase-messaging-sw.js') .then(function (registration) { console.log('Registration successful, scope is:', registration.scope) }) .catch(function (err) { console.log('Service worker registration failed, error:', err) }) } }
exportconstaskForPermissioToReceiveNotifications = async () => { try { constmessaging = firebase.messaging() awaitmessaging.requestPermission…

codegen for front end - react+graphQl

https://hasura.io/learn/graphql/typescript-react-apollo/codegen/
fix: anonymous query for codegen - getCurrentAccount
package.json: "codegen": "graphql-codegen --config codegen.js" codegen.js module.exports = { schema: [ { 'http://localhost:4000/graphql': { headers: { Authorization:'Bearer ' + process.env.AUTH_TOKEN, }, }, }, ], documents: ['./src/**/*.tsx', './src/**/*.ts'], overwrite:true, generates: { './src/generated/graphql.tsx': { plugins: [ 'typescript', 'typescript-operations', 'typescript-react-apollo', ], config: { skipTypename:false, withHooks:true, withHOC:false, withComponent:false, }, }, './graphql.schema.json': { plugins: ['introspection'], }, }, }
install: yarn add @graphql-codegen/cli @graphql-codegen/introspection @graphql-codegen/typescript @graphql-codegen/typescript-operations @graphql-codegen/typescript

MOCK STRIPE

https://github.com/stripe/react-stripe-js/blob/master/src/components/Elements.tsxexportconstmockElement = () => ({ mount:jest.fn(), destroy:jest.fn(), on:jest.fn(), update:jest.fn(), })
exportconstmockElements = () => { constelements = {} return { create:jest.fn(type=> { returnmockElement() }), getElement:jest.fn(type=> { returnmockElement }), } }
exportconstmockStripe = () => ({ elements:jest.fn(() =>mockElements()), createToken:jest.fn(), createSource:jest.fn(), createPaymentMethod:jest.fn(), confirmCardPayment:jest.fn(() => { return { paymentIntent: { id:'test', status:'succeeded' } } }), confirmCardSetup:jest.fn(), paymentRequest:jest.fn(), _registerWrapper:jest.fn(), })
import*asstripeMocksfrom'./stripe-mocks'
constrenderComponent = () => { conststripe = stripeMocks.mockStripe()
returnrender( <MockedProvidermocks={mocks}addTypename={false}> <CartProvider> <Elementsstripe={stripe}> <Payment listingId={listingId} currentPackage={currentPac…

how to do integration test - react app - Cypress (e to e)

Many integration tests. No snapshot tests. Few unit tests. Few e to e tests.
Integration tests should mock as little as possibleMount/render is typically used for integration testing and shallow is used for unit testing.shallow rendering only renders the single component we are testing. It does not render child components. This allows us to test our component in isolation. unit vs integration vs end to end unit testing: testing an isolated part of your app, usually done in combination with shallow rendering. example: a component renders with the default props. integration testing: testing if different parts work or integrate with each other. Usually done with mounting or rendering a component. example: test if a child component can update context state in a parent. e to e testing: Stands for end to end. Usually a multi step test combining multiple unit and integration tests into one big test. Usually very little is mocked or stubbed. Tests are done in a simulated browser, there may or may …

react test with apollo

react:https://testing-library.com/docs/react-testing-library/setup=======with apollo:Note: As of React Apollo 3, all testing utilities can now be found in their own @apollo/react-testing package.
npm install @apollo/react-testinghttps://www.apollographql.com/docs/react/api/react-testing/========Watch "Fix the "not wrapped in act(...)" warning" on egghead.iohttps://kentcdodds.com/blog/fix-the-not-wrapped-in-act-warning

A closure is a persistent local variable scope

Languages which support closure (such as JavaScript, Swift, and Ruby) will allow you to keep a reference to a scope (including its parent scopes), even after the block in which those variables were declared has finished executing, provided you keep a reference to that block or function somewhere.

outer =function(){var a =1;var inner =function(){ console.log(a);

functional programming - clojure - immutable -

padestal.io
https://clojure.org/index
Atoms, Reducers, Agents/ActionsImmutable Data and React
https://www.youtube.com/watch?v=I7IdS-PbEgI&feature=youtu.bepersistent data structure