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

问题描述

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

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

运行后端应用程序（由于身份验证检查等 - 该应用程序是完全私有的，因此需要有效登录才能访问任何内容）
运行 Angular 应用程序（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);

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

标签： htmlcssangulartypescript

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

问题描述

更新

解决方案

更多的

推荐阅读