04 2020 档案

摘要:If you have a component that makes HTTP requests, you’ll probably want to mock those out for UI unit and integration tests. Let’s see how to use jest’ 阅读全文
posted @ 2020-04-30 19:24 Zhentiw 阅读(297) 评论(0) 推荐(0) 编辑
摘要:While not all of accessibility testing of a web application can be automated, much of it can be and quite easily using axe-core and jest-axe. Let’s se 阅读全文
posted @ 2020-04-30 19:09 Zhentiw 阅读(244) 评论(0) 推荐(0) 编辑
摘要:You can use 'rerender' for a component when its props changed. Then if you wnat to check the alert message has gone when we rerender, you need to use 阅读全文
posted @ 2020-04-30 18:57 Zhentiw 阅读(194) 评论(0) 推荐(0) 编辑
摘要:The User Event module is part of the Testing Library family of tools and lets you fire events on DOM nodes that more closely resemble the way your use 阅读全文
posted @ 2020-04-30 18:45 Zhentiw 阅读(148) 评论(0) 推荐(0) 编辑
摘要:The fireEvent utility in React Testing Library supports all the events that you regularly use in the web (change, click, etc.). Let’s see how we can t 阅读全文
posted @ 2020-04-30 18:00 Zhentiw 阅读(396) 评论(1) 推荐(0) 编辑
摘要:While you’re writing your tests it can be helpful to see what the DOM looks like. You can do this with React Testing Library’s debug function which wi 阅读全文
posted @ 2020-04-30 17:50 Zhentiw 阅读(182) 评论(0) 推荐(0) 编辑
摘要:Component: import React from 'react' function FavoriteNumber({ min = 1, max = 9 }) { const [number, setNumber] = React.useState(0) const [numberEntere 阅读全文
posted @ 2020-04-30 17:47 Zhentiw 阅读(176) 评论(0) 推荐(0) 编辑
摘要:We can use 'jest.spyOn', similr to 'spyOn' in Jasmine. jest.spyOn(utils, 'getWinner') We get 'getWinner' as a method. Jest has mockImplementation: // 阅读全文
posted @ 2020-04-30 15:01 Zhentiw 阅读(211) 评论(0) 推荐(0) 编辑
摘要:import { SET_STATUS, FETCH_FULFILLED, FETCH_FAILED, RESET, } from '../actions/beerActions' import lensProp from 'ramda/es/lensProp' import set from 'r 阅读全文
posted @ 2020-04-30 02:00 Zhentiw 阅读(142) 评论(0) 推荐(0) 编辑
摘要:Epic: import { ofType } from 'redux-observable' import { of, concat, merge, fromEvent, race, forkJoin } from 'rxjs' const buildAPI = (apiBase, perPage 阅读全文
posted @ 2020-04-30 01:57 Zhentiw 阅读(401) 评论(0) 推荐(0) 编辑
摘要:Let's say we are using 'React.lazy()' to lazy load some Router: const Home = React.lazy(() => import('./screens/home')) const User = React.lazy(() => 阅读全文
posted @ 2020-04-30 00:27 Zhentiw 阅读(340) 评论(0) 推荐(0) 编辑
摘要:Our <Query /> component is a render prop based component that the <User /> component uses. But because it doesn't render anything, we can actually jus 阅读全文
posted @ 2020-04-30 00:15 Zhentiw 阅读(222) 评论(0) 推荐(0) 编辑
摘要:When you smart component need to handle server request, it would be good to make sure it won't send multi same request to the backend. For example a s 阅读全文
posted @ 2020-04-29 21:46 Zhentiw 阅读(406) 评论(0) 推荐(0) 编辑
摘要:in angular.json: "configurations": { "production": { "index": { "input": "src/index.prod.html", "output": "index.html" }, "fileReplacements": [ { "rep 阅读全文
posted @ 2020-04-29 19:26 Zhentiw 阅读(212) 评论(0) 推荐(0) 编辑
摘要:subscribeOn() { // Changes source execution // only used once of(1).pipe( subscribeOn(async) ) .subscribe({ next: x => console.log(x), complete: () => 阅读全文
posted @ 2020-04-28 03:00 Zhentiw 阅读(183) 评论(0) 推荐(0) 编辑
摘要:Macro: refer to webapis, setTimeout, setInterval Micro: refer to Promise based api Execution order Sync Task > Micro Task > Macro Task Example: const 阅读全文
posted @ 2020-04-27 18:10 Zhentiw 阅读(139) 评论(0) 推荐(0) 编辑
摘要:import {defer, animationFrames, fromEvent} from 'rxjs' import { animationFrame } from 'rxjs/internal/scheduler/animationFrame' import {endWith, map, t 阅读全文
posted @ 2020-04-27 01:28 Zhentiw 阅读(286) 评论(0) 推荐(0) 编辑
摘要:For example, we have following code: import { of, defer} from 'rxjs'; class Foo { private num = 123 onum = of(this.num); updateNum(val) { this.num = v 阅读全文
posted @ 2020-04-27 00:52 Zhentiw 阅读(336) 评论(0) 推荐(0) 编辑
摘要:Dynamiclly create DOM element based on the value: function PokemonCollection({ as: As = 'ul', renderItem }) { return ( <As>{initialCollection.read().r 阅读全文
posted @ 2020-04-26 02:29 Zhentiw 阅读(198) 评论(0) 推荐(0) 编辑
摘要:// Setup // const _ = R; const {formatMoney} = accounting; // Example Data const CARS = [ {name: "Ferrari FF", horsepower: 660, dollar_value: 700000, 阅读全文
posted @ 2020-04-26 02:06 Zhentiw 阅读(187) 评论(0) 推荐(0) 编辑
摘要:For example, we have a list of 'li', for each of them we want to attach event listener to it Bad approach: const app = document.getElementById('app'); 阅读全文
posted @ 2020-04-25 20:48 Zhentiw 阅读(156) 评论(0) 推荐(0) 编辑
摘要:const app = document.getElementById('app'); app.innerHTML = ` <h1>JavaScript DOM</h1> <form> <label> Sign-up Email <input type="email"> </label> <labe 阅读全文
posted @ 2020-04-25 20:35 Zhentiw 阅读(316) 评论(0) 推荐(0) 编辑
摘要:const app = document.getElementById('app'); app.innerHTML = ` <h1>JavaScript DOM</h1> <div class="one"> <div class="two"> <button type="button" class= 阅读全文
posted @ 2020-04-25 20:30 Zhentiw 阅读(272) 评论(0) 推荐(0) 编辑
摘要:tail is a customization prop for SuspenseList. It works in tandem with revealOrder and has three options: undefined, collapsed, and hidden. These opti 阅读全文
posted @ 2020-04-24 03:14 Zhentiw 阅读(132) 评论(0) 推荐(0) 编辑
摘要:Suspense can have an unfriendly learning curve.Components with suspended content need a component boundary.Resource reads can't happen in the same com 阅读全文
posted @ 2020-04-24 03:07 Zhentiw 阅读(162) 评论(0) 推荐(0) 编辑
摘要:The useDeferredValue Hook gives us a way to hold onto a previous resource values while waiting for a new one. This is a more hands-on alternative to t 阅读全文
posted @ 2020-04-24 02:57 Zhentiw 阅读(165) 评论(0) 推荐(0) 编辑
摘要:button.addEventListener( 'dblclick', () => { console.log('Double-click!'); }, { once: true } ); https://developer.mozilla.org/en-US/docs/Web/API/Event 阅读全文
posted @ 2020-04-24 02:49 Zhentiw 阅读(215) 评论(0) 推荐(0) 编辑
摘要:In this lesson, we create a custom hook that wraps the useContext hook and returns its value, as well as more useful error messaging if a context prov 阅读全文
posted @ 2020-04-22 15:26 Zhentiw 阅读(204) 评论(0) 推荐(0) 编辑
摘要:In this lesson, we'll take simple HTML and create a stripe with a full-width background color and centered content. We'll do all of this without addin 阅读全文
posted @ 2020-04-21 02:44 Zhentiw 阅读(130) 评论(0) 推荐(0) 编辑
摘要:Eager delay spinners are not a good user experience.They can make a snappy user interface feel slower. We want delay spinners to appear only after a p 阅读全文
posted @ 2020-04-20 01:19 Zhentiw 阅读(178) 评论(0) 推荐(0) 编辑
摘要:For example we have multi API calls for one single page. this.course$ = this.coursesService.loadCourseById(courseId) this.essons$ = this.coursesServic 阅读全文
posted @ 2020-04-19 00:42 Zhentiw 阅读(600) 评论(0) 推荐(0) 编辑
摘要:Before: import React from "react"; // 1. Change this static import to a dynamic import, wrapped in React.lazy import PokemonDetail from "./pokemon-det 阅读全文
posted @ 2020-04-17 17:52 Zhentiw 阅读(161) 评论(0) 推荐(0) 编辑
摘要:When dynamic changes occur to content on a page they are usually visually apparent to users who can see the page but may not be made apparent to users 阅读全文
posted @ 2020-04-15 14:32 Zhentiw 阅读(97) 评论(0) 推荐(0) 编辑
摘要:Images must have text alternatives that describe the information or function represented by them so they can be read and understood by those using scr 阅读全文
posted @ 2020-04-15 02:03 Zhentiw 阅读(113) 评论(0) 推荐(0) 编辑
摘要:Big or non decimal numbers are sometimes hard to read inside code. Numeric separators are now part of the javascript specification and allow us to mak 阅读全文
posted @ 2020-04-15 01:57 Zhentiw 阅读(379) 评论(0) 推荐(0) 编辑
摘要:We will create a Promise wrapper, that can be used instead of normal promises, to track different tasks that we need to show the spinner for. export c 阅读全文
posted @ 2020-04-11 00:35 Zhentiw 阅读(123) 评论(0) 推荐(0) 编辑
摘要:While we’ve made sure to expose our spinner service using simple, external APIs, most of the time, it will be called in the same way, from observables 阅读全文
posted @ 2020-04-10 23:07 Zhentiw 阅读(107) 评论(0) 推荐(0) 编辑
摘要:After another pat on the back from our manager, we get a notification that a new task has been assigned to us: “While most users find it useful, some 阅读全文
posted @ 2020-04-10 22:54 Zhentiw 阅读(379) 评论(0) 推荐(0) 编辑
摘要:Two very important features of the Observable primitive is that they can be activated by subscribing to them and disposed off when we are not interest 阅读全文
posted @ 2020-04-08 16:02 Zhentiw 阅读(119) 评论(0) 推荐(0) 编辑
摘要:pairwise() will remember the last emit value. const src = interval(1000) .pipe( pairwise(), scan((acc, [prev, curr]) => { console.log(prev, curr) retu 阅读全文
posted @ 2020-04-08 15:44 Zhentiw 阅读(211) 评论(0) 推荐(0) 编辑
摘要:When implementing the store partten, we need to be careful about mutation. class DataStore { private lessons: Lesson[] = []; private lessonsSubject = 阅读全文
posted @ 2020-04-05 01:18 Zhentiw 阅读(144) 评论(0) 推荐(0) 编辑
摘要:The cool thing about Next.js API routes is that we can directly consume the API endpoints from pages. SWR is a nice tool for handling data loading sta 阅读全文
posted @ 2020-04-03 03:06 Zhentiw 阅读(460) 评论(0) 推荐(0) 编辑
摘要:Labeling inputs, elements, and widgets add context and clarity for assistive technology such as screen readers. Beyond adding accessible labels to ele 阅读全文
posted @ 2020-04-02 03:10 Zhentiw 阅读(174) 评论(0) 推荐(0) 编辑
摘要:Labeling inputs, elements, and widgets add context and clarity for assistive technology such as screen readers. When there are already one or more oth 阅读全文
posted @ 2020-04-02 03:02 Zhentiw 阅读(128) 评论(0) 推荐(0) 编辑
摘要:Unfortunately, sometimes a server request fails and we need to display a helpful error message to the user. In this lesson we’ll handle a promise reje 阅读全文
posted @ 2020-04-01 02:31 Zhentiw 阅读(200) 评论(0) 推荐(0) 编辑

点击右上角即可分享
微信分享提示