小编Nuz*_*zob的帖子

Jest + puppeteer 最佳架构实践

我刚刚进入了 puppeteer 和 jest 的测试世界,我想知道在文件夹架构和逻辑方面的最佳实践是什么。

我以前从未做过测试,我认为我对不同的原则和概念以及它们如何组合在一起有点迷失。

我学会了基于页面对象模型进行测试,因此我为每个页面以及每个模块(或组件)都有类。例如,在我的应用程序中,标题或登录模式是组件。

然后我每个页面或每个组件都有一个测试文件。(例如landingPage.tests.js文件,它使用文件中LandingPage类的模型LandingPage.js

这是一个具体的例子:我有不同的登录案例,我想测试它们。例如,我想测试与“普通”用户的连接,该过程只是登录然后输入密码。然后,我需要与已激活 2FA 的用户或使用 SSO 的公司的用户进行测试。

我首先考虑将我的不同测试放在authentication.tests.js不同的describe块中,认为它每次都会打开一个新标签,但它没有......我在隐身模式下使用 puppeteer 来确保每个标签都是一个独立的会话。


所以我的问题是:

  • 哪里是做这些测试套件的最佳地点?

  • 我是否应该拥有“描述”页面的测试文件(例如,按钮必须存在,此类文本必须在此处等)并且还有“场景类型”测试文件(对用户的一组上下文操作,例如对于我不同的登录情况)?

这是authentication.tests.js,我想测试我所有不同的登录方式:

import HeaderComponent from "../../../pages/components/HeaderComponent";
import AuthenticationComponent from "../../../pages/components/AuthenticationComponent";
import LandingPage from "../../../pages/landing/LandingPage";

import {
    JEST_TIMEOUT,
    CREDENTIALS
} from "../../../config";


describe('Component:Authentication', () => {
    let headerComponent;
    let authenticationComponent;
    let landingPage;

    beforeAll(async () => {
        jest.setTimeout(JEST_TIMEOUT);
        headerComponent = new HeaderComponent;
        authenticationComponent = new AuthenticationComponent;
        landingPage = new LandingPage;
    });


    describe('Normal login ', …
Run Code Online (Sandbox Code Playgroud)

testing pageobjects jestjs puppeteer jest-puppeteer

8
推荐指数
1
解决办法
865
查看次数

无法减少 ng-repeat 中的观察者数量

出于性能目的,我想从我的 ng-repeat 中删除双重数据绑定(因此,关联的观察者)。

它加载了 30 个项目,这些数据一旦加载就是静态的,因此不需要双重数据绑定。

问题是,无论我如何操作,该页面上的观察者数量都保持不变。

让我们说:


<div ng-repeat='stuff in stuffs'>
   // nothing in here
</div>
Run Code Online (Sandbox Code Playgroud)

观察者数量为211(该页面上还有其他绑定,不仅是 ng-repeat)


<div ng-repeat='stuff in ::stuffs'>
   // nothing in here
</div>
Run Code Online (Sandbox Code Playgroud)

观察者数量仍然是211(如果我理解正确的话应该是210),但是等等:


<div ng-repeat='stuff in ::stuffs'>
    {{stuff.id}}
</div>
Run Code Online (Sandbox Code Playgroud)

观察者数量现在是241(好吧,211 观察者 + 30 个东西 * 1 观察者 = 241 观察者)


<div ng-repeat='stuff in ::stuffs'>
    {{::stuff.id}}
</div>
Run Code Online (Sandbox Code Playgroud)

关注人数还是241!!!:: 不应该删除关联的观察者吗??


<div ng-repeat='stuff in ::stuffs'>
    {{stuff.id}}  {{stuff.name}}  {{stuff.desc}}
</div>
Run Code Online (Sandbox Code Playgroud)

还是241 ...


这些例子真的是在我的应用程序中制作的,所以这些数字也是真实的。

真正的 ng-repeat 比这里的示例复杂得多,我的页面上有大约 1500 …

performance angularjs angularjs-ng-repeat

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

将视频Blob保存到文件系统电子/节点js

在我的电子应用程序中,用户可以使用MediaRecorder API从网络摄像头录制视频。

当用户点击“停止录制”按钮时,我得到了录制的视频的斑点。

我想做的就是将这个Blob转换为真实的webm视频,并将其写入用户的文件系统中,例如:

fs.writeFile(localdir + '\\video.webm', videoBlob); // does not work
Run Code Online (Sandbox Code Playgroud)

下面的示例非常适合我从网络摄像头获取的base64图像快照,但是我无法使其与我获取的视频blob一起使用。

谢谢赐教!

javascript video node.js electron

4
推荐指数
3
解决办法
5683
查看次数

Google 文档查看器不适用于 Amazon s3 签名的 url

由于 google doc viewer api,我尝试在 iframe 内显示存储在 S3 存储桶中的 .doc 文件。

我已经做了一些研究并发现了这个,我试图在这里应用:

var encodedUrl = encodeURIComponent("http://myAPI.com/1d293950-67b2-11e7-8530-318c83fb9802/example.docx?X-Amz-Algorithm=AWS4-HMAC-SHA256%26X-Amz-Credential=GNRO0BLDYAJP1FU7ALIS%2F20170717%2Fus-east-1%2Fs3%2Faws4_request%26X-Amz-Date=20170717T145429Z%26X-Amz-Expires=600%26X-Amz-SignedHeaders=host%26X-Amz-Signature=ee556c5c92427bb38265507218a701660936bc2774ecc919648bb2d780a2619f");

$scope.selectedSource = $sce.trustAsResourceUrl(
   "http://docs.google.com/gview?url=" + encodedUrl + "&embedded=true"
);
Run Code Online (Sandbox Code Playgroud)

iframe 看起来像:

<iframe ng-src="{{selectedSource}}" frameborder="no" style="width:100%;height:100%"></iframe>
Run Code Online (Sandbox Code Playgroud)

但是我仍然从 iframe 内的查看器中收到“无预览可用”,知道为什么吗?

我指定签名的 url(未编码)在我将其粘贴到浏览器中时有效,因此我拥有所需的所有权限。

javascript iframe google-api amazon-s3 angularjs

4
推荐指数
1
解决办法
2352
查看次数