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

Question

有没有办法为了设计和测试目的单独加载一个角度组件？我正在尝试为一个相当复杂的 Angular 应用程序重新设计一些组件（它是在 angular2-rc 中开始的，虽然它已经更新，但它仍然遵循一些糟糕的设计模式 - 主要是由于之前没有经验的开发人员在不合理的紧迫期限内完成的工作，不必要说我们现在正在内部开发这个）。这使得访问某些嵌套组件变得困难。

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

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

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

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

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

我错过了什么吗？还是仅仅创建一个简单的模拟测试应用程序并将开发中的组件放到那里以便快速轻松地访问？

更新

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

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

感谢那些帮助粘贴文档链接的人（是的，我已阅读）解释如何对组件进行单元测试并简要描述如何根据代码（应用的类、属性、样式）测试某些渲染条件ETC）。不幸的是，我在那里找不到测试，例如：

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

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

Answer 1

我认为很难像您在编辑中描述的那样对视觉特征进行单元测试。我从来没有为 react 应用程序这样做过，通常你构建一个组件并担心它的外观，部分担心它的布局，它的父级也处理它的部分布局，因为布局可以在不同的页面上有所不同但组件本身在视觉上仍然应该是相同的。此外，如果您不想不断刷新页面，您可以使用 chrome 开发工具来更新 css 并查看它的外观，然后当您选择喜欢的内容时，将其应用到您的实际代码中

Answer 2

组件只是类。他们可以这样进行测试。

更多

• https://angular.io/guide/testing#component-test-basics