小编red*_*r13的帖子

我有一个简单的(迄今为止)ember-cli项目,现在只有一个带有FIXTURE数据的模型.我想模拟API的东西,无论是使用实际的JSON文件,还是使用http-mock,这是以前的ember-cli版本41的名称api-stub.

我对这一切都很陌生,所以我真的不知道如何找到人们能够api-stub工作的信息,并且看起来不像ember-cli上的任何文档都更新了http-mock信息.

我确实做了,ember generate http-mock project但我不确定从这里做什么.

这是我当前的app/router.js:

Router.map(function() {
  this.resource('projects', { path: '/' });
  this.resource('project', {path: '/project/:project_id'}, function(){
    this.resource('milestones');
    this.resource('team');
    this.resource('budget');
  });
});

所以我有一个模板用于我的所有项目,并希望深入到一个,这需要能够与嵌套路由相关联.我的理想就像GitHub API,你可以从用户向下钻取到repo,在repo上发布问题等等.

再说一次,我还在学习ember和ember-cli的方法,所以对"为什么"以及"如何"的解释都非常受欢迎.

我有一个favicon在我的索引模板上工作了一段时间,但没有任何其他模板,现在甚至我的索引模板都不会显示它.

我刚刚开发,所以我正在使用ember server.

的index.html
<link rel="icon" href="favicon.ico">

只是扔在我的图标周围,看它是否出现在任何地方,我现在在以下位置: app/ public/ public/assets

我认为这应该是非常简单的,特别是因为索引页面没有改变,只是将新的东西加载到它的出口,所以我无法弄清楚为什么它找不到我的favicon文件.

在运行时ember server,/根指向的实际位置是什么？

我不是在问什么是技术上可能的；我知道你可以

const a = [];
const b = {};
a.push['sup'];
b.test = 'earth';

我想知道的是let，const当涉及到要修改其内部结构的数组和对象时，是否有任何优先考虑的约定。如果您看到一个用 声明的对象const，您是否认为该对象的意图是使该对象不可变，并且您更愿意看到它let，或者，由于某些 linter（如 tslint）对此有问题，最好只是声明const并相信其他阅读代码的人都知道这并不意味着它是不可变的？

想要为网格创建一个节标题(而不是通过将其放在节上方来占据垂直空间),如下所示:

当然很容易让第一列跨越行grid-rows: 1 / span 3但是如果我转换文本并对齐/对齐它,则div不占用列的整个空间,因此设置背景/边框看起来不正确.

见试用笔

body {
  padding: 1em;
  font-family: sans-serif;
}

.my-grid {
  display: grid;
  grid-template-columns: 2rem 100px 10rem;
  background-color: #eee
}

.my-grid>* {
  border: 1px solid #ccc;
}

.section-title {
  grid-row: 1 / span 5;
  align-self: center;
  justify-self: center;
  transform: rotate(270deg);
  background-color: papayawhip;
  text-transform: uppercase;
}

input {
  border: 2px solid #000;
}

<div class="my-grid">
  <div class="section-title">Address</div>
  <div>Address 1</div>
  <input type="text">
  <div>Address 2</div>
  <input type="text">
  <div>City</div>
  <input type="text">
  <div>State</div>
  <input type="text">
  <div>Zip Code</div>
  <input …

最近，我观看了AssertJS会议上的一些演讲（强烈推荐），其中包括@kentcdodds“ 编写测试，数量不多，主要是集成”。我从事Angular项目已经一年多了，已经编写了一些单元测试，并且刚开始与Cypress一起玩，但是我仍然对集成测试以及在哪里划定界线感到沮丧。我真的很想和日复一日地做某事的专业人士交谈，但是我不知道我在哪里工作。由于我厌倦了无法弄清楚这一点，所以我想我只是想问问这里的世界，因为你们所有人都很棒。

因此，在Angular（或React或Vue等）中，您具有组件代码，然后具有HTML模板，通常它们以某种方式进行交互。组件代码中具有可以进行单元测试的功能，我可以接受的部分。

我还没想到的是，当您测试组件功能如何更改UI时，您将其称为集成测试吗？如果您正在测试这种事情，那么应该仅在E2E测试中完成吗？因为Angular / Jasmine（或Jest）可以让您执行这种操作，所以请参考UI：

const el = fixture.debugElement.queryAll(By.css('button'));
expect(el[0].nativeElement.textContent).toEqual('Submit')

但这是否意味着您应该？如果这样做，那么您是否不会在E2E测试中涵盖这一点？

关于与诸如服务之类的东西的集成，您进行集成有多远？如果您模拟实际的HTTP调用，并只是测试它是否将使用正确的函数进行调用，那么这是集成测试，还是单元测试？

综上所述，我凭直觉知道我需要进行哪些测试，才能确信事情能够按预期进行，我只是不确定如何辨别何时需要进行所有三种测试。

我知道这越来越长了，但这是我的示例应用程序：

hasNoProducts选择一个产品并从服务器返回数据后设置一个称为的属性（如果没有，则不设置）。如果hasNoProducts为true，则UI（通过* ngIf）显示“对不起”消息。如果为false，则其他选择可用。根据所选择的产品，这些选项会更改。

所以我知道我可以编写一个单元测试并模拟HTTP请求，以便测试hasNoProducts设置是否正确。但是然后，我想测试是否显示了该消息，或者是否显示了其他选项。如果有数据，请测试切换产品是否会更改随后将在屏幕上显示的其他列表中的数据。如果我使用Angular / Jasmine进行此操作，因为我正在“集成”组件和模板，这是否是集成测试？如果没有，那么什么是集成测试？

我可以继续提出问题，但我会停在那里，希望有人能读到这里并有所了解。再说一次，我读了无数的文章，看了无数的视频并完成了教程，但是每次我坐下来申请一个真实的项目时，我都会陷入这样的事情，并且我想超越这个！提前致谢。

I did my first development in a Win7 machine, then switched to a Mac when I got that, which was great due to the speed of building with ember server running. I've been keeping everything in a Git repo. Everything works fine running ember server from my Mac.

Now, when I do a fresh clone from the repo on my Win7 computer, then do npm install and bower install (both of which complete fine), when I run ember server next, …

这几天来一直是个烦人的问题.当我开始尝试为我的Ember应用程序编写验收测试时,当我使用该visit()函数时,URL在浏览器的地址栏中被更改,因此当我更改一些代码并且liveReload发生时,它会导航我的测试页面到我告诉它在测试中访问的任何页面.

要进行故障排除,我ember new是一个新的应用程序,创建了一个/ home路由和模板,并为它创建了验收测试,它传递正常,而不更改地址栏中的URL.我已经比较了代码tests/helpers,它是相同的,原样tests/index.html.

我没有得到答案就搜遍了所有人.这对我来说很难进行测试,但这样的问题只是切线,但非常恼人.如果有人知道为什么会这样,我会非常感谢你的解决方案.

举个例子,这是我的一个验收测试.它通过了,但URL实际上发生了变化:

import Ember from 'ember';
import { module, test } from 'qunit';
import startApp from 'star/tests/helpers/start-app';

var application;

module('Acceptance: AddMilestone', {
  beforeEach: function() {
    application = startApp();
  },

  afterEach: function() {
    Ember.run(application, 'destroy');
  }
});

test('Adding milestones', function(assert) 
  visit('/projects/1234567/details');

  andThen(function() {
    assert.equal(currentPath(), 'project.details');
  });
});

背景故事：昨天我需要将我的应用程序从 Angular 5.2.9 更新到 6，所以我想“为什么不在我这样做的时候升级到 7”。所以当然这花了一整天的时间，并且需要对很多文件进行大量更改（主要是因为 Rxjs），但无论如何，到一天结束时，我能够做到ng serve并且编译时没有错误！

但是当我开始localhost:4200运行该应用程序时，它在“正在加载...”时停止，并在 DevTools 控制台中显示以下消息：

core.js:14016 Uncaught (in promise) Error: In this configuration Angular requires Zone.js
    at new NgZone (core.js:14016)
    at getNgZone (core.js:14701)
    at PlatformRef.push../node_modules/@angular/core/fesm5/core.js.PlatformRef.bootstrapModuleFactory (core.js:14599)
    at core.js:14643

我试图确保我所有的包裹都是最新的。npm install给出了一些关于 fsevents 的错误，但是zone是最新的。

所以我现在不知所措。我不知道错误消息真正想告诉我什么，或者它是否合法。我做了ng new并检查了生成的文件，那里没有“zone.js setup”代码，所以我没有错过类似的东西。我觉得我离更新工作如此之近，但当然，如果应用程序无法运行，那就不好了！谷歌搜索此错误消息并没有发现任何有用的信息（无论如何对我来说）。

作为Ember.js和ember-cli的新手,我无法理解使我的应用程序工作所需的内容.

我的应用程序的逻辑层次结构如下:

Projects
|___Project
    |___Details
    |___Team Members
    |___Budget
        |___Planned
        |___Actual

目前,这是我的router.js:

  this.resource('projects');
  this.resource('project', { path: 'projects/:project_id' }, function() {
    this.route('details');
    this.route('team');
    this.route('milestones');
    this.resource('budget', function(){
      this.route('project-budget', { path: 'project'});
      this.route('resource-budget', {path: 'team'});
    });
  });

我遇到的问题是放置文件的位置.直到预算下两个嵌套路由的点,我的文件夹结构看起来像我的层次结构,但由于资源重置命名空间,现在为了使其工作,我必须将我的预算模板,路由和控制器拉回到顶部等级(使用项目的东西),这看起来很混乱,并且在稍后尝试维护此事时会引起令人头疼的问题.

我做错了吗？

这看起来像是普通的主/详细用例,但Vue文档中的示例没有这方面的例子.我有一个邮件文件夹页面(路由/:mailbox_id),按日期,主题等显示电子邮件表,我想要一个嵌套路由(/:message_id),当用户点击一行时显示电子邮件的文本.

我能够在Ember(重新创建这个)中执行此操作,因为Ember创建了一个JavaScript onClick函数来处理路由,并允许您设置HTML元素进行渲染,然后您只需将任何对象传递给子路径.

但我是Vue.js的新手,我一直在浏览文档,但不能理解如何完成同样的事情.我无法弄清楚如何创建一个自定义链接组件,或如何使用内置的Vue <router-link>组件(因为我需要它<tr>而不是<a>)来转到子路由,并传递内容给它的消息,以便它可以显示.

如果有帮助,这里有一些代码:

路由器

export default new Router({
  routes: [
    {
      path: '/:id',
      name: 'mailbox',
      component: Mailbox,
      props: true,
      children: [
        {
          path: 'mail/:id',
          name: 'mail',
          component: Mail,
          props: true
        }
      ]
    }
  ]
})

组件:Mailbox.vue

<template>
  <div>
    <table>
      <tr>
        <th>Date</th>
        <th>Subject</th>
        <th>From</th>
        <th>To</th>
      </tr>
      <Mail-List-Item v-for="message in messages" :key="message.id" v-bind:message="message"/>
    </table>
    <router-view></router-view>
  </div>
</template>

<script>
  import MailListItem from './Mail-List-Item'

  export default {
    components: { 'Mail-List-Item': …