小编Roo*_*ode的帖子

如何div.c使用下面的flexbox与右端对齐？

+--------------+ |A B C | +--------------+

尽管规则align-self: flex-end;似乎将盒子对齐到底部flex-direction: row;

+--------------+ |A B | | C | +--------------+

CSS:

.container {
  border: 2px solid;
  height: 500px;
  display: flex;
  flex-direction: row; 
}
.box {
  border: 1px solid;
  height: 200px;
  width: 50px;
}
.a {
  background-color: red;
  align-self: flex-start;
}
.b {
  background-color: cyan;
  align-self: flex-start
}
.c {
 background-color: green;
 align-self: flex-end;
} 

HTML:

<div class="container">
  <div class="box a">
  </div>
  <div class="box b">
  </div>
  <div class="box …

Jest 预计预期Cell财产价值为[Function anonymous]。

正确的语法是什么？

() => {}似乎[Function Cell]因此测试失败。

const expected =
      [{ Cell: () => {}, Header: '', accessor: () => {}, disableSortBy: true, id: 18, width: 50 }];

expect(result).toBe(expected);

安慰：

 $ jest test

----
    - Expected  - 1
    + Received  + 1

    @@ -1,8 +1,8 @@
      Array [
        Object {
    -     "Cell": [Function Cell],
    +     "Cell": [Function anonymous],
          "Header": "",
          "accessor": [Function accessor],
          "disableSortBy": true,
          "id": 18,
          "width": 50,

尝试在欧洲文化中将数字格式化为两位小数格式.这样逗号就是小数分隔符和空格千位分隔符.

在示例中,213245应格式化为213 245,00

我怎样才能做到这一点？

213245.toFixed(2).toLocaleString(); 

给出213245.00但它应该是213 245,00

然而

213245.toLocaleString()

给出213 245

小提琴下面:

var out, input;
input = 213245;

// TEST 1
out = input.toFixed(2);   
console.log(out); // 213245.00
out = out.toLocaleString();
console.log(out); // 213245.00

// TEST 2
out = input.toLocaleString();
console.log(out); // 213 245

https://jsfiddle.net/rootnode/8p2vad8u/7/

如何正确设置 ModuleFederationreact-router-dom以便我可以

• Router和定义的路线Host应用程序中定义的路线
• 并且远程Header应用程序具有<Link>指向主机中定义的路由的组件？

但是，下面的设置失败，出现以下错误：

index.js:15 Uncaught Error: useHref() may be used only in the context of a <Router> component.

设置：

托管 mfe 应用程序，本地主机：3001

...
import { BrowserRouter } from 'react-router-dom'

const Header = lazy(() => import("header/Header"))

const Host = () => {
  return (
    <BrowserRouter>
       <React.Suspense fallback="Loading Header...">
         <Header />
       </React.Suspense>
       <Switch>
         <Route path="/input">
           <InputFormView />
         </Route>
         <Route path="/">
            <ListView />
         </Route>
       </Switch>       
    </BrowserRouter>)
}

...

主机的webpack.config.js

...

plugins: [ …

我创建了自己的 npm 包（使用 nwb 创建），其中使用了样式组件。在我的消费应用程序中，我还使用了样式组件。

问题是。通过 npm install. 但是，当npm link进入其他一些 react-router 路由时使用以下错误消息：

Error: Trying to insert a new style tag, but the given Node is unmounted!

* Are you using a custom target that isn't mounted?
* Does your document not have a valid head element?
* Have you accidentally removed a style tag manually?

在我的 npm 包中，我将样式组件设置为对等依赖项和 devDependency，如下所示：

...
"peerDependencies": {
  "react": "16.x",
  "styled-components": "^3.4.4"
},
"devDependencies": {
  "karma-junit-reporter": "^1.2.0",
  "nwb": "0.23.x",
  "react": "^16.4.2",
  "react-dom": …

我用于@testing-library/react测试 UI 组件。无法让笑话模拟工作。

它似乎无法模拟导出函数的实现getDomElement，但会调用实际的实现。

Table.test.js 的实现

describe('Table', () => {
  jest.mock('../../../../commonHelpers/getDomElement.js', () => {});

  it('it renders columns', () => {
    render(
      <ThemeProvider>
        <Table
          columns={columns}
          data={data}         
        />
      </ThemeProvider>,
    );
  })
})

Table.js 的实现

import React, { useEffect } from 'react';
import PropTypes from 'prop-types';

import {
  useTable,
  useSortBy,
  useBlockLayout,
  useResizeColumns,
  usePagination,
} from 'react-table';

import { TableStyled as Table, TableContainer } from './styled';
import Pagination from './Pagination';
import Head from './Head';
import Body from './Body';
import TableContext …

目标是以access token编程方式从 MSAL 获取 Cypress e2e 测试。我们使用 V2.0 API。

根据这个我首先需要得到authorization code：https : //docs.microsoft.com/en-us/azure/active-directory/develop/v2-oauth2-auth-code-flow#request-an-authorization-code

获取access token https://docs.microsoft.com/en-us/azure/active-directory/develop/v2-oauth2-auth-code-flow#request-an-access-token

所以为了得到authorization code我需要做这个请求

// GET
// Line breaks for legibility only

https://login.microsoftonline.com/{tenant}/oauth2/v2.0/authorize?
client_id=6731de76-14a6-49ae-97bc-6eba6914391e
&response_type=code
&redirect_uri=http%3A%2F%2Flocalhost%2Fmyapp%2F
&response_mode=query
&scope=openid%20offline_access%20https%3A%2F%2Fgraph.microsoft.com%2Fmail.read
&state=12345
&code_challenge=YTFjNjI1OWYzMzA3MTI4ZDY2Njg5M2RkNmVjNDE5YmEyZGRhOGYyM2IzNjdmZWFhMTQ1ODg3NDcxY2Nl
&code_challenge_method=S256

但这会返回，text/html因此我需要手动登录才能获取代码。

有没有办法以编程方式获得authorization code？

$ acpi

Battery 0: Charging, 18%, 01:37:09 until charged

如何在没有百分比字符的情况下 grep 电池电量值 (18)？

这应该可以，但我得到一个空结果：

acpi | grep -e '(?<=, )(.*)(?=%)'

我需要更改 中箭头的样式react-select。components我了解到这可以通过使用下面的代码示例中的 prop来完成。

DropdownIndicator然而，如果打开菜单，出现的道具似乎不会提供任何信息。我需要使用该信息来根据菜单是打开还是关闭来更改箭头样式。

我怎样才能得到这些信息？

import ReactSelect, { components } from 'react-select';

...

const DropdownIndicator = (props) => {  
  const { isFocused } = props;
  
  // Which prop tells if the menu is open? Certainly isFocused is not the correct one.
  const caretClass = isFocused ? 'caret-up' : 'caret-down';

  return (
    <components.DropdownIndicator {...props}>
      <div className={`${caretClass}`} />
    </components.DropdownIndicator>
  );
};

return (<ReactSelect
 components={{ DropdownIndicator }}
 placeholder={placeholder}
 value={value}
 onBlur={onBlur}
 name={name}
 ...
/>)

我想测试的功能是createCarAndDrive()哪个使用Car模块。我想模拟Car模块中的一个函数，以便不调用其实际函数，而是调用模拟函数。

因此，该Car函数返回两个函数gas()和brake()。Car使用工厂函数模式来实现。所以这两个函数被包装起来Car并且在被调用之前不会被公开Car。

是否可以以某种方式模拟brake()要返回的函数false？

这是实现。

// Car.js
function Car({ name, model }) {
  function gas(speed) {
    return `${name} ${model} goes forward at a speed of ${speed}km/h`;
  }
  function brake() {
    return true;
  }

  return {
    gas,
    brake,
  };
}

// driver.js
function createCarAndDrive() {
  const car = Car({ name: 'Fiat', model: 'Punto' });
  car.gas(123);
  return car.brake();
}

// driver.test.js …