小编tks*_*kss的帖子

处理弹性盒和收缩到内容宽度的容器

如何将容器保持在我指定的宽度,以便它不会\xe2\x80\x99t 收缩到其弹性项目的宽度?

\n\n

我注意到有效地取出类 \xe2\x80\x9cflex-center\xe2\x80\x9d 使容器保持其宽度,但元素不居中

\n\n

\xe2\x80\x94 我设法通过删除 \xe2\x80\x9cflex-center\xe2\x80\x9d 来解决此问题,将 \xe2\x80\x9c.subscribe\xe2\x80\x9d 的显示更改为阻止并使用自动边距居中,但是有没有办法可以将所有这些元素保留在 Flex 中?

\n\n

示例:\n https://jsfiddle.net/krv9z0co/6/

\n\n

\r\n
\r\n
.flex-center {\r\n  display: flex;\r\n  justify-content: center;\r\n}\r\n\r\n.container {\r\n  max-width: 600px;\r\n  padding-left: 20px;\r\n  padding-right: 20px;\r\n}\r\n\r\n.subscribe {\r\n  display: flex;\r\n  flex-direction: column;\r\n}\r\n\r\n.s__text {\r\n  text-align: center;\r\n}\r\n\r\n.subscribe__input,\r\n.subscribe__button {\r\n  width: 200px\r\n}
Run Code Online (Sandbox Code Playgroud)\r\n
<section class="flex-center">\r\n  <div class="subscribe container">\r\n    <div class="sub__head">\r\n      <h3 class="s__text">Subscribe</h3>\r\n      <p class="s__text">Be the first to know about the new templates.</p>\r\n    </div>\r\n    <div class="sub__move">\r\n      <input type="text" class="subscribe__input sub__block" placeholder="Your Email">\r\n      <input type="submit" value="SUBSCRIBE" class="subscribe__button">\r\n    </div>\r\n  </div>\r\n</section> …
Run Code Online (Sandbox Code Playgroud)

html css flexbox

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

使用 Jest、AudioContext 进行测试和模拟

我在尝试对使用 AudioContext 的类进行一些测试时遇到了很多麻烦。我相信我的很多挫败感源于对模拟函数以及可能的测试执行方式没有很好的理解。

我正在尝试测试一个采用 AudioContext 的类,但是在运行测试时我不断收到此错误:

使用 TypeScript 文件时: TypeError: (window.AudioContext || window.webkitAudioContext) is not a constructor
此错误发生在 app.ts 文件中。当我运行测试时,它是否必须解决或执行它的所有依赖项?

使用 JavaScript 文件时,测试文件中会出现此错误:ReferenceError: AudioContext is not defined

现在,我假设我必须制作一个模拟 AudioContext。我什至如何了解 AudioContext 上的所有方法以开始手动模拟它?

这是我的工作表的简化版本。我将提供两者的 TS 和 JS 版本:

打字稿文件版本:

// app.ts
import Sampler from './Sampler';
const audioContext: AudioContext = new (window.AudioContext || window.webkitAudioContext)();
const sampler: Sampler = new Sampler(audioContext);


// Sampler.ts
export default class Sampler{
    private audioContext: AudioContext;

    constructor(audioContext: AudioContext){
        this.audioContext = audioContext;      
    }
 }
Run Code Online (Sandbox Code Playgroud)

JS 文件版本:

// app.js
const Sampler …
Run Code Online (Sandbox Code Playgroud)

javascript testing unit-testing typescript jestjs

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

标签 统计

css ×1

flexbox ×1

html ×1

javascript ×1

jestjs ×1

testing ×1

typescript ×1

unit-testing ×1