html - 如何在不运行整个应用程序的情况下设计/测试Angular组件？

为了设计和测试目的，是否有任何方法可以单独加载角度组件？我正在尝试为一个相当复杂的角度应用程序重新设计一些组件（它是从angular2-rc启动的，尽管已进行了更新，但它仍遵循一些不良的设计模式-主要是由于以前经验不足的开发人员在不合理的紧迫期限内完成的工作，这是不必要的说我们现在正在内部开发）。这使得很难访问某些嵌套组件。

目前，我用于设计和测试组件的工作流程如下：

运行后端应用程序（由于进行身份验证检查等-该应用程序是完全私有的，因此需要有效的登录名才能访问任何内容）
运行有角度的应用程序（ng serve将处理此问题，并且显然会在更改时自动重新加载）
登录到应用
导航回相关页面（由于登录重定向使我离开了我所在的页面）
在页面上填写所需的数据，以使我的新组件在正常使用情况下可以显示
设计/测试/测试我的新组件，进行必要的更改
if (!done) { goto 2; } else { return; }

这对于设计单个组件来说似乎太过分了。必须有更好的方法直接为设计和测试目的直接加载我的组件。理想情况下，我希望我的工作流程类似于以下内容：

直接加载角度组件，而不必运行整个应用程序（最好是模拟任何必要的输入，服务等的方式）
设计和测试组件以确保所需的布局，样式，功能，用户体验等-根据需要进行任何更改
if (!done) { goto 1; } else { goto 4; }
将组件集成到应用中

我正在寻找的可能吗？当然，我不是第一个遇到这个问题的人-UI框架是第一个想到的，因为它们是如何提供通用组件库的，可在任何需要的地方使用。

我想念什么吗？还是唯一的方法就是创建一个简单的模拟测试应用程序，然后将开发中的组件放在那里以便快速，轻松地访问？

更新

为澄清起见，我特别尝试从一个主要是视觉/渲染的角度快速迭代地设计此组件。我需要确保跨浏览器的一致性，在不同屏幕分辨率下的响应能力，元素不会错误重叠或渲染到屏幕外，颜色/字体/大小/位置适合组件的上下文（例如<h3>太大和看起来不合适，让我们尝试<h4>来看看它的外观），等等。在该组件中有需要显示的嵌套组件。

我故意用html和css标记了问题-不是因为这些是组件使用的语言，而是因为这些是我要测试的组件的各个方面。

感谢那些有益地粘贴了文档链接（我已经读过）的人，他们解释了如何对组件进行单元测试，并简要描述了如何根据代码（应用的类，属性，样式）测试某些渲染条件等等）。不幸的是，我无法找到一些测试，例如：

expect(myComponent).toDisplayIdenticallyAcross(browser.Chrome, browser.Firefox, browser.Edge, browser.Safari);
expect(myLabel.color).toContrastWellWith(myComponent.backgroundColor);
expect(myNestedComponent).toRenderEntirelyOnScreenWithoutOverlapping(true);

这是预料之中的，因为这些是比较主观的东西，实际上只能通过查看它们并根据需要进行一些细微调整来进行测试。我只是想找到一种更简单的方法，而不必重新加载整个应用程序至少3次，只是为了看看我的标题向左，居中还是向右对齐看起来更好。

如何在不运行整个应用程序的情况下设计/测试Angular组件？

更新

2 个答案:

更多