小编cmw*_*all的帖子

如何使用Enzyme等待Mocha中的React组件的完整渲染?

我有一个Parent呈现Child组件的组件.该Child组件首先呈现独特的道具等"名称",然后将父组件呈现共同道具如"类型"和注入那些道具到Child使用分量React.Children.map.

我的问题是Enzyme无法检测到Section组件渲染的常见道具,因此我无法有效地测试是否添加了常见的道具.

考试:

      const wrapper = shallow(
        <Parent title="Test Parent">
          <div>
            <Child
              name="FirstChild"
            />
          </div>
        </Parent>
      )
//      console.log(wrapper.find(Child).node.props) <- returns only "name" in the object
      expect(wrapper.find(Child)).to.have.prop("commonPropOne")
      expect(wrapper.find(Child)).to.have.prop("commonPropTwo")
      expect(wrapper.find(Child)).to.have.prop("commonPropThree")
Run Code Online (Sandbox Code Playgroud)

注入常​​见道具的代码:

const Parent = (props) => (
  <div
    className="group"
    title={props.title}
  >
    { React.Children.map(props.children, child => applyCommonProps(props, child)) }
  </div>
)
Run Code Online (Sandbox Code Playgroud)

javascript mocha.js chai reactjs enzyme

9
推荐指数
1
解决办法
6047
查看次数

React Component等待渲染所需的道具

我在父组件内声明一个组件.我想在一个文件中建立特定的道具,然后在父组件中,我希望能够同时为子组件建立其他道具(因为它们是大多数共享属性).

我的问题是子组件尝试渲染并失败,因为最初没有建立所需的prop类型.

有没有办法告诉子组件等待渲染所需的道具?

在ParentComponent渲染函数中,我调用另一个函数来运行React.Children.map()并将props附加到ChildComponent.

渲染子组件的(粗略)部分:

<ParentComponent>
    <ChildComponent
        attribute="test_attribute"
        label="Child Component"
        type="number"
        width={3}
    />
</ParentComponent>
Run Code Online (Sandbox Code Playgroud)

javascript reactjs

7
推荐指数
1
解决办法
1万
查看次数

在渲染之前反映DOM offsetHeight

我需要能够通过其offsetHeight定位React DOM元素.

问题是我无法收集尚未创建的元素的offsetHeight(因此高度不能作为参数传递给渲染函数)而且我也无法计算渲染函数内部的高度,如上所述在React DOM refs docs中:

永远不要访问任何组件的render方法中的refs - 或者任何组件的render方法甚至在调用堆栈中的任何位置运行.

DOM元素应相对于单击的图标进行渲染以显示它.

组件树:

|— FormInputGroup
  |— Label
    |— TooltipIcon
  |— Tooltip
  |— Input
Run Code Online (Sandbox Code Playgroud)

工具提示图标的渲染功能:

const TooltipIcon = ({ attribute, setCurrentTooltip }) => (
  <Icon
    name="tooltip"
    style={{
      position: "relative",
      top: "1px",
      marginLeft: "10px",
      "cursor": "pointer",
    }}
    onClick={() => setCurrentTooltip(attribute)}
  />
)
Run Code Online (Sandbox Code Playgroud)

渲染功能:

const Tooltip = ({ title, content, setCurrentTooltip }) => (
  <div className="popover"
    style={{
//      top: "-"+ ReactDOM.findDOMNode(this).offsetHeight +"px",
    }}
  >
    <h3 className="popover-title">{title}</h3>
    <div className="popover-close-button"
      onClick={() => setCurrentTooltip(null)}
    />
    <div className="popover-content">{content}</div>
  </div> …
Run Code Online (Sandbox Code Playgroud)

javascript css reactjs

6
推荐指数
1
解决办法
5642
查看次数

使用 RSpec 测试 DeserializationError

我有一份正在排队的工作。有时,与该作业关联的记录会在作业运行之前被销毁。

为了解决ActiveJob::DeserializationError作业执行期间引发的任何问题,我在作业中添加了以下内容:

rescue_from(ActiveJob::DeserializationError) do |exception|
  exception.original_exception == ActiveRecord::RecordNotFound
end
Run Code Online (Sandbox Code Playgroud)

我想对此进行测试,以便我可以验证没有ActiveJob::DeserializationError当作业运行时记录已被销毁时不会引发任何问题。

为了开始测试,我删除了上述函数,并决定确保我可以测试是否ActiveJob::DeserializationError确实被抛出。其规范是:

it "raises DeserializationError when a record is destroyed before perform" do
  record = create(:record)

  record.destroy

  expect{ RecordDeletionJob.perform_later(record) }.to raise_error(ActiveJob::DeserializationError)
end
Run Code Online (Sandbox Code Playgroud)

令我惊讶的是,该规范失败了,因为没有提出任何问题。这是不正确的。如果没有该rescue_from方法,它应该引发一个ActiveJob::DeserializationError.

我认为问题是记录没有被重新加载,但我不知道如何在记录销毁后重新加载记录以及如何测试之后的情况ActiveJob::DeserializationError。

如何测试ActiveJob::DeserializationError作业运行时记录不存在的情况下不抛出?

ruby rspec ruby-on-rails

5
推荐指数
1
解决办法
350
查看次数

WebGL GLSL 片段着色器不适用于 iOS

我正在使用此处的 Classic Perlin Noise (vec3) 函数。

当我在我的 MacBook 上渲染这个着色器时,着色器运行良好,并将噪声显示为我期望的颜色。

当我在 iPhone 上渲染这个着色器时,画布是全黑的。

这段代码有什么问题会导致cnoise函数总是返回 0 吗?或者是否有一些功能不适用于 Metal?

这是完整的着色器:

#ifdef GL_ES
precision mediump float;
#endif

uniform vec2 u_resolution;
uniform float u_time;

vec4 permute(vec4 x){return mod(((x*34.0)+1.0)*x, 289.0);}
vec4 taylorInvSqrt(vec4 r){return 1.79284291400159 - 0.85373472095314 * r;}
vec3 fade(vec3 t) {return t*t*t*(t*(t*6.0-15.0)+10.0);}

float cnoise(vec3 P){
  vec3 Pi0 = floor(P); // Integer part for indexing
  vec3 Pi1 = Pi0 + vec3(1.0); // Integer part + 1
  Pi0 = mod(Pi0, 289.0);
  Pi1 = …
Run Code Online (Sandbox Code Playgroud)

javascript glsl webgl ios

3
推荐指数
1
解决办法
1227
查看次数

标签 统计

javascript ×4

reactjs ×3

chai ×1

css ×1

enzyme ×1

glsl ×1

ios ×1

mocha.js ×1

rspec ×1

ruby ×1

ruby-on-rails ×1

webgl ×1