小编Max*_*vis的帖子

我被困在img.onload事件测试中。我知道这是一个异步操作，它应该被嘲笑，但我仍然无法弄清楚如何解决这个问题。我也见过几个类似的案例，但它们与这个不同。

以前访问过：

• 怎么用Jest测试img.onerror
• 如何使用 Jest 测试 asnyc 代码（或使用 jsdom 测试“image.onload”）
• 如何在 redux 操作（或操作中分配的其他回调）的上下文中使用 jest 测试 `image.onload`

测试代码：

  function funcToTest(img, callback) {
    const img = new Image()
    img.src = img

    img.onload = () => {
      callback(true) // should return callback with true on finish
    }

    img.onerror = (e) => {
      callback(false) // should return callback with false on error
      console.log(e) 
    }
  }

  funcToTest()

测试环境：

describe('tet it', () => {
  it('test', done => {
    const callback = status => { …

我无法弄清楚为什么我tslint甚至想在最后一行的末尾看到尾随的逗号objects？例如,如何ignore为对象的最后一行设置规则？谢谢.

例:

  props = {
    prop1: 21, // good
    prop2: 2, // good
    prop3: false // error: [tslint] Missing trailing comma (trailing-comma)

  }

trailing-comma我的规则tsconfig.json:

"trailing-comma": [true, {
  "singleline": "never",
  "multiline": {
    "objects": "always",
    "arrays": "always",
    "functions": "never",
    "typeLiterals": "ignore"
  }
}]

我在使用 TypeScript 时遇到错误shouldComponentUpdate：

类型 'Hello' 中的属性 'shouldComponentUpdate' 不能分配给基类型中的相同属性Component<IProps, any, any>。

在组件中：

import React, { Component } from 'react'

class Hello extends Component<IProps, any> {
  shouldComponentUpdate(nextProps: IProps) { // error here
    console.log(nextProps, 'nextProps')
  }

  ....// some code
}

有人可以解释一下我做错了什么吗？

我遇到了一个问题，Notification.requestPermission我的处理程序不会触发ServiceWorker。

有趣的是，如果尝试从浏览器控制台使用Notification.requestPermission它，它工作正常，并且我在 Chrome 浏览器窗口顶部看到了通知请求。

经过：Notification.requestPermission().then(res => console.log(res))。但在从文件执行期间同样会引发错误ServiceWorker，例如：

未捕获的类型错误：self.Notification.requestPermission 不是函数

那么，有人可能知道出了什么问题吗？我已经在 SoW 上看到过这些帖子：

1. Webkit 通知 requestPermission 函数不起作用

2. 桌面通知不允许在 Chrome 上运行

但他们并没有解决我的问题......

我push使用通知的代码的软件部分：

  self.addEventListener('push', function(event) {
    console.log(self.Notification, Notification.requestPermission)
    self.Notification.requestPermission().then(res => console.log(res))

    if (Notification.permission === 'denied') {
      console.log('Permission wasn\'t granted. Allow a retry.');
     return;
    }

    if (Notification.permission === 'default') {
      console.log('The permission request was dismissed.');
      return;
    }

    console.log('The permission request is granted!');

    try {
      event.waitUntil(
        self.registration.showNotification(event && event.data && event.data.text() || …

我有一个一般任务 - 将所有项目放在progressIcon___2kE1o其容器的右边界内。由于某些原因它不起作用...

<div class="progressIcon___2kE1o" style="
    padding: 0;
    margin: 0;
    width: 240px;
    display: flex;
    flex-direction: column;
    /* align-items: stretch; */
    justify-content: flex-end;
">
  <div class="svgIconWrap___asD4K" style="
    padding: 0;
    margin: 0;
    display: flex;
"><svg xmlns="http://www.w3.org/2000/svg" class="default___3oPC0 " filter="" fill="url(#crimes)" stroke="black" stroke-width="0" width="37px" height="26px" viewBox="0 0 37 26"><linearGradient id="crimes" gradientTransform="" x1="22" y1="25.5" x2="22" y2="10.5" gradientUnits="userSpaceOnUse"><stop offset="0" stop-color="#dda80b"></stop><stop offset="1" stop-color="#ffdc73"></stop></linearGradient><path class="figure" d="M20.5,25.5V19.25a4.5,4.5,0,1,1,3,0V25.5Z"></path><path class="contour" d="M22,11a4,4,0,0,1,1,7.88V25H21V18.88A4,4,0,0,1,22,11m0-1a5,5,0,0,0-2,9.59V26h4V19.59A5,5,0,0,0,22,10Z" style="fill: white;"></path><path class="figure" d="M8.5,25.5v-9a1,1,0,0,0-2,0v9h-2v-9a1,1,0,0,0-2,0v9H.5V9.75L4.83,6.5H6.17L10.5,9.75V25.5Z"></path><path class="contour" d="M6,7l4,3v1H1V10L5,7H6m4,5V25H9V16.5a1.5,1.5,0,0,0-3,0V25H5V16.5a1.5,1.5,0,0,0-3,0V25H1V12h9M6.33,6H4.67l-.27.2-4,3L0,9.5V26H3V16.5a.5.5,0,0,1,1,0V26H7V16.5a.5.5,0,0,1,1,0V26h3V9.5l-.4-.3-4-3L6.33,6Z" style="fill: white;"></path><path class="figure" d="M10.5,25.5V.5h8v25Zm6-5v-3h-4v3Z"></path><path class="contour" d="M18,1V25H11V1h7M16,16h1V2H16V16m-2,0h1V2H14V16m-2,0h1V2H12V16m0,5h5V17H12v4M19,0H10V26h9V0ZM13,18h3v2H13V18Z" style="fill: white;"></path><path class="figure" d="M24.5,25.5V16.29a5.5,5.5,0,1,1,3,0V25.5Z"></path><path class="contour" …

当我尝试在 npm 上发布我的包而不通过身份验证令牌登录时，发生了一些奇怪的事情。

我已经export NPM_TOKEN="..."在我的~/.bash_profile和~/.bash_aliases文件中设置了变量。

另外，我还npm config set '//registry.npmjs.org/:_authToken' "${NPM_TOKEN}"从 CLI 设置了命令。

尽管如此，每次我想发布我的包时，我都会收到一个错误：

npm ERR! 401 Unauthorized - PUT https://registry.npmjs.org/ics - You must be logged in to publish packages.

也许有人知道如何通过 npm auth tokens 发布包？好吧，如果我通过用户名和密码登录，一切都会顺利。顺便说一句，如果我想通过身份验证令牌发布某些包，我不需要登录，对吧？这就是当今大多数 CI/CD 的工作方式。

NPM 令牌有效。在“阅读和发布”模式下生成并在几分钟前在本地设置。

提前致谢。

根据W3C关于HTML语义写作的规则 - 我们应该如何编写button带有下降元素的元素,我没有意识到它是不是坏了？

在这方面,像这样:

<button>
 <div>
   <span>'hi'</span>
 </div>
</button>

或者只有这个:

<button>'hi'</button>

当我开始编译时，总是会出现堆栈错误。表示我initialState的位置store已损坏或其他人。此外，如果我仅从中切断initialStateprop ，我的应用程序就可以正常编译store，但这不是一个好的解决方案。

我也承认它.js在应用程序的文件版本上正常工作。好像redux在TypeScript上有一些问题。

错误：

TS2345：类型为'{titleSwitch：string; }”不能分配给“ DeepPartial”类型的参数。属性“ titleSwitch”与索引签名不兼容。类型“字符串”不可分配给类型“ DeepPartial”。

我的部分代码：

import { createStore } from 'redux'
import reducer from './reducers'

const initialState = {
  titleSwitch: false
}

const store = () => {
  return createStore(
    reducer,
    initialState // TS Error
  )
}

经过测试：

"redux": "^4.0.0",
"typescript": "^3.1.1",
"webpack": "^4.16.5"

有人可以帮助解决打字稿错误：

Property 'srcset' does not exist on type 'DetailedHTMLProps<ImgHTMLAttributes<HTMLImageElement>, HTMLImageElement>'.

我无法弄清楚出了什么问题。我也试过这个解决方案，但没有结果：

declare global {
  namespace JSX {
      interface IntrinsicElements {
        srcset: React.DetailedHTMLProps<ImgHTMLAttributes<HTMLImageElement>, HTMLImageElement>
      }
  }
}

我无法弄清楚为什么我img的picture标签内部不想显示？有任何想法吗？

谢谢!

<picture data-qa-node="picture" data-qa-file="AppBlocksCarousel">
        <source srcset="http://diylogodesigns.com/blog/wp-content/uploads/2016/04/google-logo-icon-PNG-Transparent-Background.webp 1x, http://diylogodesigns.com/blog/wp-content/uploads/2016/04/google-logo-icon-PNG-Transparent-Background.webp 2x, http://diylogodesigns.com/blog/wp-content/uploads/2016/04/google-logo-icon-PNG-Transparent-Background.webp 3x" type="image/webp" data-qa-node="source"
        data-qa-file="AppBlocksCarousel">
            <img src="http://diylogodesigns.com/blog/wp-content/uploads/2016/04/google-logo-icon-PNG-Transparent-Background.png" srcset="http://diylogodesigns.com/blog/wp-content/uploads/2016/04/google-logo-icon-PNG-Transparent-Background.png 2x, http://diylogodesigns.com/blog/wp-content/uploads/2016/04/google-logo-icon-PNG-Transparent-Background.png 3x" alt="Google"
            class="AppBlocksCarousel__image_2gZ2B" data-qa-node="img" data-qa-file="AppBlocksCarousel">
    </picture>

所以,我有一个简单的代码部分,我需要处理一个对象数组,并知道数组中availability.prop1的某个对象是否等于true并返回true它,或者如果等于false,则返回false.这是一个非常简单的案例,我知道,但由于某些原因,我无法弄清楚我的堕落在哪里......

我对输出的期望是什么isSomeProp1EqualToTrue = true,因为数组中的第二个对象data具有正值prop1(true)

const data = [
 {prop1: false, {prop2: 'someValue'},
 {prop1: true, {prop2: 'someValue'},
 {prop1: false, {prop2: 'someValue'}
]

const isSomeProp1EqualToTrue = data.forEach(availability => {
  if (availability.prop1 === true) {
    return true
  }

  return false
})

// expected: isSomeProp1EqualToTrue = true (that's what I nedd)
// current: isSomeProp1EqualToTrue = undefined (wrong)