小编Cor*_*buk的帖子

在 iOS Safari 上，当我创建一个 div 是一个 Flex 项目并使其成为一个 Flex 容器时，它的高度不会拉伸以匹配其内容。然而，如果它不是一个弹性容器，那么它的高度会拉伸以匹配它的内容。

详细说明 - 我正在使用 css flexbox 将页脚放置在页面底部。页面主体有两个 div - “maincontents”和“footer”。即使“maincontents”div 内容很少或没有内容，页脚仍将保留在窗口底部。而如果“maincontents”div内容较多，则可以根据需要将页脚下推。这个想法很容易在 Flexbox 中实现，方法是将页面主体设置为 Flex 容器，并将“maincontents”设置为“flex:1”，将“footer”设置为“flex:0”，这样“maincontents”就会占用所有可用空间，而“页脚”被推到窗口底部。它适用于所有现代浏览器，包括 iOS safari。

如果我也将“maincontents”本身设置为弹性框（使用display:flex），就会出现问题。在 iOS Safari 上，页脚现在始终位于窗口底部，即使 maincontents 有很多内容应该将页脚进一步向下推；相反，“maincontents”最终会在“footer”下方继续，而不是将其向下推。

我在 jsfiddle 上做了一个简单的模型。 https://jsfiddle.net/8xs1rocu/

如果您在 Windows 桌面上打开该小提琴，您会看到以下内容（chrome/ff/ie11）

如果您在 iPad 或 iPhone (Safari) 上打开它，您会看到以下内容。

请注意，在 iOS safari 上，页脚不会被内容向下推，而是内容最终会进入页脚下方。在桌面上的 Chrome/FF/IE11 上不会发生这种情况；在这些浏览器上，页脚由“maincontents”的内容向下推。

如果删除“display:flex”行，那么它也可以在 ios safari 上完美运行，就像在其他浏览器上一样。不过，我需要“display:flex”行，因为我会将其他内容放入“maincontents”中，这些内容需要使用 css flexbox 以某种方式布局。

直接将 jsfiddle 片段代码粘贴到此处：

html, body {
  height: 100%;
  display: flex;
  flex-direction: column;
}

.maincontents {
  flex: 1;
  display: flex; /* if …

I have a star rating component that currently has the following semantic. The SVG are just stars.

<div role='img' aria-label="6 out of 6 ratings">
  <svg role="presentation"></svg>
  <svg role="presentation"></svg>
  <svg role="presentation"></svg>
  <svg role="presentation"></svg>
  <svg role="presentation"></svg>
  <svg role="presentation"></svg>
</div>

I have used the role='img' aria role as I want to ideal treat this image as one image. I have then used the role='presentation' aria role on the SVG as I think the SVG's alone provide no extra information so want to remove …

我正在编写一个测试，测试我的应用程序中的操作。我在尝试拨打最后一个电话时遇到了麻烦。

const pushData = jest.fn(() => Promise.resolve());

test('anotherAsyncCall is fired to get more info', () => {
  const store = mockStore({});
  asynCallToGetData = jest.fn(() => Promise.resolve());

  const action = pushData();
  const dispatch = jest.fn();
  const anotherAsyncCall = jest.fn(() => Promise.resolve());

  const expectedActions = [{
    type: 'DATA_RECEIVED_SUCCESS'
  }];

  return store.dispatch(action).then(() => {
    expect(asynCallToGetData).toHaveBeenCalled();
    expect(store.getActions()).toMatch(expectedActions[0].type);
    expect(dispatch(anotherAsyncCall)).toHaveBeenCalled(); //This fails
  });
});

但运行测试后我收到的消息是

expect(jest.fn())[.not].toHaveBeenCalled()

jest.fn() value must be a mock function or spy.
  Received: undefined here