小编Aso*_*ool的帖子

我正在使用木偶戏和开玩笑来进行一些前端测试.

我的测试看起来如下:

describe("Profile Tab Exists and Clickable: /settings/user", () => {
    test(`Assert that you can click the profile tab`, async () => {
      await page.waitForSelector(PROFILE.TAB);
      await page.click(PROFILE.TAB);
    }, 30000);
});

有时,当我运行测试时,一切都按预期工作.其他时候,我收到一个错误:

Timeout - Async callback was not invoked within the 5000ms timeout specified by jest.setTimeout.

      at node_modules/jest-jasmine2/build/queue_runner.js:68:21
      at Timeout.callback [as _onTimeout] (node_modules/jsdom/lib/jsdom/browser/Window.js:633:19)

这很奇怪,因为:

1. 我指定超时为30000

2. 我是否得到这个错误似乎非常随机

任何人都可以猜到为什么会这样吗？

我有一个非常简单的功能组件，如下所示：

import * as React from 'react';

export interface AuxProps  { 
    children: React.ReactNode
 }


const aux = (props: AuxProps) => props.children;

export default aux;

还有另一个组件：

import * as React from "react";

export interface LayoutProps  { 
   children: React.ReactNode
}

const layout = (props: LayoutProps) => (
    <Aux>
        <div>Toolbar, SideDrawer, Backdrop</div>
        <main>
            {props.children}
        </main>
    <Aux/>
);

export default layout;

我不断收到以下错误：

[ts] JSX元素类型'ReactNode'不是JSX元素的构造函数。类型'undefined'不能分配给'ElementClass'类型。[2605]

如何正确输入？

我正在使用木偶戏和开玩笑来测试前端的一些东西,而我有一个小问题 - 我认为有一些我缺少的概念.

test("Assert that when checkbox isn't checked, dropdown menu is visible", async () => {
    let checkbox = await page.$('input[ng-model="user.managed.timezone"]');
    console.log("Checking if checkbox checked");
    console.log("CHECKED: ", checkbox.checked);
  });

根据puppeteer docs,page.$运行document.querySelector.当我在浏览器上运行以下内容时,我得到了我想要的内容:

let m = document.querySelector('input[ng-model="user.managed.timezone"]') console.log(m.checked) // results in true or false

但是jest中的代码导致CHECKED:undefined

为什么会这样 - >我错过了什么概念？

我正在学习如何开发节点应用程序。这是一个人们可以发布城市周围发生的事件的应用程序。

我有一个 ejs 文件 new.ejs，它允许用户提交新事件。显然，有一个事件开始时间和结束时间。我想确保结束时间在开始时间之后，所以我简单地添加了一个脚本来执行此操作，如下所示：

          <!-- EVENT DATE AND TIME -->
          <div class=row>
              <!-- DATE -->
              <div class="form-group col-md-4">
                  <label for="date">Date *</label>
                  <input name="date" type="date" class="form-control" id="date"> 
              </div>
              <!--START TIME -->
              <div class="form-group col-md-4 ">
                  <label for="starttime">Start Time *</label>
                  <input name="starttime" type="text" class="form-control" id="starttime">
              </div>
              <!--END TIME -->
              <div class="form-group col-md-4 ">
                  <label for="endtime">End Time *</label>
                  <input name="endtime" type="text" class="form-control" id="endtime">
              </div>
              <script type="text/javascript">
                    $('#starttime').timepicker();
                    $('#endtime').timepicker({
                        'minTime': '12:00am',
                        'showDuration': true
                    });
                    $('#starttime').on('changeTime', function() {
                        $('#endtime').timepicker('option', 'minTime', $(this).val());
                    });
              </script>
          </div> …

我构建了一个大型应用程序，其中导航栏上的单个按钮打开一个模式。

我正在使用上下文 API 跟踪 modalOpen 状态。

因此，用户单击导航栏上的按钮。模态打开。Modal 有一个名为 QuoteCalculator 的容器。

报价计算器如下所示：

class QuoteCalculator extends React.Component {
    static contextType = ModalContext;
    // ...

    onSubmit = () => {
        // ...
        this.context.toggleModal();
        this.props.history.push('/quote');
        // ..
    };

    render() {
       //...
       return(<Question {...props} next={this.onSubmit} />;)
    }
}

export default withRouter(QuoteCalculator);

现在，一切都按预期进行。当用户提交时，我去正确的路线。我只是在控制台上看到以下警告

index.js:1446 警告：withRouter(QuoteCalculator)：函数组件不支持 contextType。

我很想忽略警告，但我认为这不是一个好主意。

我尝试使用重定向替代。所以像

QuoteCalculator looks as follows:

    class QuoteCalculator extends React.Component {
        static contextType = ModalContext;
        // ...

        onSubmit = () => {
            // ...
            this.context.toggleModal();
            this.setState({done: true});
            // ..
        }; …

我一直在搜索 inet 试图找到任何定义如何处理流星和反应路由器 4 中的身份验证的地方。

基本上，我希望某些路由仅对经过身份验证的用户可用。有没有关于它的文档？

阿塞尔

我正在使用passport.js进行身份验证,并尝试设置本地策略.但是,每当我运行我的代码时,我都会收到一条错误,说它localStrategy不是构造函数.

代码:

// config/passport.js

// load all the things we need
var localStrategy   = require('passport-local');

// load up the user model
var User            = require('../app/models/user');

// expose this function to our app using module.exports
module.exports = function(passport) {

// =========================================================================
// passport session setup ==================================================
// =========================================================================
// required for persistent login sessions
// passport needs ability to serialize and unserialize users out of session

// used to serialize the user for the …

我正在尝试弄清楚如何对 Outlook 加载项进行单点登录身份验证。我有我的清单文件，但每当我尝试上传它时，我都会收到以下错误：

无法安装此应用。清单文件不符合架构定义。元素“OfficeApp”命名空间“ http://schemas.microsoft.com/office/appforoffice/1.1 ”在命名空间“无效子元素“VersionOverrides” http://schemas.microsoft.com/office/mailappversionoverrides/1.1 ” . 预期的可能元素列表：命名空间“ http://schemas.microsoft.com/office/mailappversionoverrides ”中的“VersionOverrides”以及命名空间“ http://www.w3.org/2000/09/xmldsig# ”中的任何元素'... 命名空间 ' http://schemas.microsoft.com/office/appforoffice/1.1 ' 中的元素 'OfficeApp ' 具有无效的子元素 'VersionOverrides'http://schemas.microsoft.com/office/mailappversionoverrides/1.1 '。预期的可能元素列表：命名空间“ http://schemas.microsoft.com/office/mailappversionoverrides ”中的“VersionOverrides”以及命名空间“ http://www.w3.org/2000/09/xmldsig# ”中的任何元素'。

这是我的清单文件：

 <?xml version="1.0" encoding="UTF-8"?>
<OfficeApp
          xmlns="http://schemas.microsoft.com/office/appforoffice/1.1"
          xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
          xmlns:bt="http://schemas.microsoft.com/office/officeappbasictypes/1.0"
          xmlns:mailappor="http://schemas.microsoft.com/office/mailappversionoverrides/1.0"
          xsi:type="MailApp">

  <!-- Begin Basic Settings: Add-in metadata, used for all versions of Office unless override provided. -->

  <!-- IMPORTANT! Id must be unique for your add-in, if you reuse this manifest ensure that you change this id to a new GUID. --> …

这个问题与 StackOverflow 上被问过很多次的问题相关。

基本上，当你做类似的事情时

@Component({
  selector: 'my-app',
  template: `<div>I'm {{message}} </div>`,
})
export class App {
  message:string = 'loading :(';

  ngAfterViewInit() {
    this.updateMessage();
  }

  updateMessage(){
    this.message = 'all done loading :)'
  }
}

您收到一条错误消息“表达式在检查后已更改”。收到此错误的原因已在这篇文章中进行了解释： Expression ___ haschange after it was Check

我的问题是，为什么以下内容有效？

@Component({
  selector: 'my-app',
  template: `<div>I'm {{message}} </div>`,
})
export class App {
  message:string = 'loading :(';

  ngAfterContentChecked() {
    this.updateMessage();
  }

  updateMessage(){
    this.message = 'all done loading :)'
  }
}

为什么这不返回错误，并且实际上返回正确的结果？为什么 ngAfterViewChecked 有效，而 ngAfterViewInit 无效？

解释得像我5岁一样。

我有以下代码:

private extractInitials(fullname: string): string {
    const initials = fullname
        .replace(/[^a-zA-Z- ]/g, '')
        .match(/\b\w/g)
        .join('')
        .toUpperCase();
    return initials.substring(0, 2);
}

我收到了一个错误

[ts] Object is possibly 'null'. [2531]

所以我试过了 if fullname { const initials .... return ... } else return '';

原来打字稿正在抱怨这个家伙

fullname.replace(/[^a-zA-Z- ]/g, '')

这是有道理的,因为这可能最终成为一个空字符串

所以我做了

const t = fullname.replace(/[^a-zA-Z- ]/g, '')
if(t) { /* do the rest */ } else return ''

它仍然给了我对象可能是null错误.我知道不是.我该如何解决？