{"id":3014,"date":"2023-10-28T14:24:31","date_gmt":"2023-10-28T05:24:31","guid":{"rendered":"https:\/\/edu.ujhb.org\/?p=3014"},"modified":"2023-10-28T14:24:32","modified_gmt":"2023-10-28T05:24:32","slug":"angular%e5%bc%80%e5%8f%91%e6%b5%8b%e8%af%95%e6%95%99%e7%a8%8b","status":"publish","type":"post","link":"https:\/\/edu.ujhb.org\/?p=3014","title":{"rendered":"Angular\u5f00\u53d1\u6d4b\u8bd5\u6559\u7a0b"},"content":{"rendered":"\n<h1 class=\"wp-block-heading\">Angular\u524d\u7aef\u5f00\u53d1\u6d4b\u8bd5\u6559\u7a0b\u5927\u7eb2<\/h1>\n\n\n\n<h2 class=\"wp-block-heading\">\u7b2c\u4e00\u7ae0\uff1a\u6d4b\u8bd5\u7684\u91cd\u8981\u6027<\/h2>\n\n\n\n<ol class=\"wp-block-list\">\n<li>\u4e3a\u4ec0\u4e48\u9700\u8981\u6d4b\u8bd5<\/li>\n\n\n\n<li>\u6d4b\u8bd5\u7684\u79cd\u7c7b<\/li>\n\n\n\n<li>\u6d4b\u8bd5\u5728Angular\u4e2d\u7684\u89d2\u8272<\/li>\n<\/ol>\n\n\n\n<h2 class=\"wp-block-heading\">\u7b2c\u4e8c\u7ae0\uff1a\u6d4b\u8bd5\u73af\u5883\u7684\u8bbe\u7f6e<\/h2>\n\n\n\n<ol class=\"wp-block-list\">\n<li>Node.js\u548cnpm\u7684\u5b89\u88c5<\/li>\n\n\n\n<li>Karma\u548cJasmine\u7684\u5b89\u88c5<\/li>\n\n\n\n<li>\u914d\u7f6e\u6d4b\u8bd5\u73af\u5883<\/li>\n<\/ol>\n\n\n\n<h2 class=\"wp-block-heading\">\u7b2c\u4e09\u7ae0\uff1a\u5355\u5143\u6d4b\u8bd5\u57fa\u7840<\/h2>\n\n\n\n<ol class=\"wp-block-list\">\n<li>\u4ec0\u4e48\u662f\u5355\u5143\u6d4b\u8bd5<\/li>\n\n\n\n<li>\u5982\u4f55\u7f16\u5199\u4e00\u4e2a\u7b80\u5355\u7684\u5355\u5143\u6d4b\u8bd5<\/li>\n\n\n\n<li>\u4f7f\u7528Jasmine\u8fdb\u884c\u5355\u5143\u6d4b\u8bd5<\/li>\n\n\n\n<li>\u4f7f\u7528Karma\u8fd0\u884c\u6d4b\u8bd5<\/li>\n<\/ol>\n\n\n\n<h2 class=\"wp-block-heading\">\u7b2c\u56db\u7ae0\uff1a\u6d4b\u8bd5Angular\u7ec4\u4ef6<\/h2>\n\n\n\n<ol class=\"wp-block-list\">\n<li>\u7ec4\u4ef6\u7684\u751f\u547d\u5468\u671f\u548c\u6d4b\u8bd5<\/li>\n\n\n\n<li>\u6d4b\u8bd5\u6a21\u677f<\/li>\n\n\n\n<li>\u6d4b\u8bd5\u8f93\u5165\u548c\u8f93\u51fa<\/li>\n\n\n\n<li>\u6d4b\u8bd5\u4f9d\u8d56\u6ce8\u5165<\/li>\n<\/ol>\n\n\n\n<h2 class=\"wp-block-heading\">\u7b2c\u4e94\u7ae0\uff1a\u670d\u52a1\u548cHTTP\u6d4b\u8bd5<\/h2>\n\n\n\n<ol class=\"wp-block-list\">\n<li>\u670d\u52a1\u6d4b\u8bd5\u57fa\u7840<\/li>\n\n\n\n<li>\u4f7f\u7528Mock\u8fdb\u884c\u670d\u52a1\u6d4b\u8bd5<\/li>\n\n\n\n<li>HTTP\u8bf7\u6c42\u6d4b\u8bd5<\/li>\n<\/ol>\n\n\n\n<h2 class=\"wp-block-heading\">\u7b2c\u516d\u7ae0\uff1a\u7aef\u5230\u7aef\uff08E2E\uff09\u6d4b\u8bd5<\/h2>\n\n\n\n<ol class=\"wp-block-list\">\n<li>\u4ec0\u4e48\u662fE2E\u6d4b\u8bd5<\/li>\n\n\n\n<li>\u4f7f\u7528Protractor\u8fdb\u884cE2E\u6d4b\u8bd5<\/li>\n\n\n\n<li>\u9875\u9762\u5143\u7d20\u7684\u5b9a\u4f4d\u548c\u64cd\u4f5c<\/li>\n<\/ol>\n\n\n\n<h2 class=\"wp-block-heading\">\u7b2c\u4e03\u7ae0\uff1a\u6d4b\u8bd5\u8986\u76d6\u7387\u548c\u62a5\u544a<\/h2>\n\n\n\n<ol class=\"wp-block-list\">\n<li>\u751f\u6210\u6d4b\u8bd5\u8986\u76d6\u7387\u62a5\u544a<\/li>\n\n\n\n<li>\u89e3\u8bfb\u6d4b\u8bd5\u8986\u76d6\u7387\u62a5\u544a<\/li>\n\n\n\n<li>\u63d0\u9ad8\u6d4b\u8bd5\u8986\u76d6\u7387<\/li>\n<\/ol>\n\n\n\n<h2 class=\"wp-block-heading\">\u7b2c\u516b\u7ae0\uff1a\u6301\u7eed\u96c6\u6210\u4e0e\u6d4b\u8bd5<\/h2>\n\n\n\n<ol class=\"wp-block-list\">\n<li>\u4ec0\u4e48\u662f\u6301\u7eed\u96c6\u6210<\/li>\n\n\n\n<li>\u4f7f\u7528Travis CI\u8fdb\u884c\u81ea\u52a8\u5316\u6d4b\u8bd5<\/li>\n\n\n\n<li>\u5176\u4ed6\u6301\u7eed\u96c6\u6210\u5de5\u5177<\/li>\n<\/ol>\n\n\n\n<h2 class=\"wp-block-heading\">\u7b2c\u4e5d\u7ae0\uff1a\u9ad8\u7ea7\u6d4b\u8bd5\u6280\u672f<\/h2>\n\n\n\n<ol class=\"wp-block-list\">\n<li>\u4f7f\u7528Spy\u8fdb\u884c\u51fd\u6570\u8c03\u7528\u68c0\u67e5<\/li>\n\n\n\n<li>\u5f02\u6b65\u6d4b\u8bd5<\/li>\n\n\n\n<li>\u6027\u80fd\u6d4b\u8bd5<\/li>\n<\/ol>\n\n\n\n<h2 class=\"wp-block-heading\">\u7b2c\u5341\u7ae0\uff1a\u603b\u7ed3\u548c\u8fdb\u4e00\u6b65\u5b66\u4e60<\/h2>\n\n\n\n<ol class=\"wp-block-list\">\n<li>\u672c\u6559\u7a0b\u603b\u7ed3<\/li>\n\n\n\n<li>\u8fdb\u4e00\u6b65\u7684\u5b66\u4e60\u8d44\u6e90<\/li>\n<\/ol>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<p>\u8fd9\u662f\u672c\u6559\u7a0b\u7684\u5927\u7eb2\uff0c\u63a5\u4e0b\u6765\u6211\u5c06\u9010\u7ae0\u9010\u8282\u5730\u8fdb\u884c\u8be6\u7ec6\u89e3\u91ca\u3002\u6bcf\u6b21\u56de\u7b54\u5c06\u53ea\u8be6\u7ec6\u89e3\u91ca\u4e00\u4e2a\u5c0f\u8282\u7684\u5185\u5bb9\u3002\u8bf7\u786e\u8ba4\u5927\u7eb2\u662f\u5426\u7b26\u5408\u60a8\u7684\u9700\u6c42\uff0c\u7136\u540e\u6211\u4eec\u53ef\u4ee5\u5f00\u59cb\u3002<\/p>\n\n\n\n<figure class=\"wp-block-image\"><img decoding=\"async\" src=\"https:\/\/lh3.googleusercontent.com\/a\/ACg8ocLh4B_kew_Ugyfq9egjobpny7AWdKDF1KOH64Elebx0ZhM=s96-c\" alt=\"User\"\/><\/figure>\n\n\n\n<p>\u8bf7\u7ee7\u7eedChatGPT<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">\u7b2c\u4e00\u7ae0\uff1a\u6d4b\u8bd5\u7684\u91cd\u8981\u6027<\/h2>\n\n\n\n<h3 class=\"wp-block-heading\">1.1 \u4e3a\u4ec0\u4e48\u9700\u8981\u6d4b\u8bd5<\/h3>\n\n\n\n<h4 class=\"wp-block-heading\">\u63cf\u8ff0<\/h4>\n\n\n\n<p>\u5728\u8f6f\u4ef6\u5f00\u53d1\u4e2d\uff0c\u6d4b\u8bd5\u662f\u4e00\u4e2a\u4e0d\u53ef\u6216\u7f3a\u7684\u73af\u8282\u3002\u5b83\u4e0d\u4ec5\u80fd\u786e\u4fdd\u4ee3\u7801\u7684\u8d28\u91cf\uff0c\u8fd8\u80fd\u5728\u65e9\u671f\u53d1\u73b0\u548c\u4fee\u590d\u9519\u8bef\uff0c\u4ece\u800c\u8282\u7701\u5f00\u53d1\u65f6\u95f4\u548c\u6210\u672c\u3002\u7279\u522b\u662f\u5728\u524d\u7aef\u5f00\u53d1\u4e2d\uff0c\u7531\u4e8e\u7528\u6237\u4ea4\u4e92\u7684\u590d\u6742\u6027\uff0c\u6d4b\u8bd5\u7684\u91cd\u8981\u6027\u66f4\u52a0\u7a81\u51fa\u3002\u5728Angular\u524d\u7aef\u5f00\u53d1\u4e2d\uff0c\u6d4b\u8bd5\u53ef\u4ee5\u5e2e\u52a9\u6211\u4eec\u786e\u4fdd\u7ec4\u4ef6\u3001\u670d\u52a1\u548c\u6574\u4e2a\u5e94\u7528\u7684\u7a33\u5b9a\u6027\u548c\u53ef\u9760\u6027\u3002<\/p>\n\n\n\n<h4 class=\"wp-block-heading\">\u4ee3\u7801\u793a\u4f8b<\/h4>\n\n\n\n<p>\u7531\u4e8e\u8fd9\u4e00\u5c0f\u8282\u4e3b\u8981\u662f\u4ecb\u7ecd\u6027\u8d28\u7684\uff0c\u6ca1\u6709\u7279\u5b9a\u7684\u4ee3\u7801\u793a\u4f8b\u3002<\/p>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<p>\u8fd9\u662f\u7b2c\u4e00\u7ae0\u7b2c\u4e00\u5c0f\u8282\u7684\u5185\u5bb9\u3002\u5982\u679c\u60a8\u89c9\u5f97\u8fd9\u6837\u7684\u683c\u5f0f\u548c\u5185\u5bb9\u7b26\u5408\u60a8\u7684\u9700\u6c42\uff0c\u6211\u5c06\u7ee7\u7eed\u8fdb\u884c\u4e0b\u4e00\u5c0f\u8282\u7684\u8be6\u7ec6\u89e3\u91ca\u3002\u8bf7\u60a8\u786e\u8ba4\u3002<\/p>\n\n\n\n<figure class=\"wp-block-image\"><img decoding=\"async\" src=\"https:\/\/lh3.googleusercontent.com\/a\/ACg8ocLh4B_kew_Ugyfq9egjobpny7AWdKDF1KOH64Elebx0ZhM=s96-c\" alt=\"User\"\/><\/figure>\n\n\n\n<p>\u8bf7\u7ee7\u7eedChatGPT<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">\u7b2c\u4e00\u7ae0\uff1a\u6d4b\u8bd5\u7684\u91cd\u8981\u6027<\/h2>\n\n\n\n<h3 class=\"wp-block-heading\">1.2 \u6d4b\u8bd5\u7684\u79cd\u7c7b<\/h3>\n\n\n\n<h4 class=\"wp-block-heading\">\u63cf\u8ff0<\/h4>\n\n\n\n<p>\u5728\u8f6f\u4ef6\u6d4b\u8bd5\u4e2d\uff0c\u6709\u591a\u79cd\u4e0d\u540c\u7c7b\u578b\u7684\u6d4b\u8bd5\uff0c\u6bcf\u79cd\u90fd\u6709\u5176\u7279\u5b9a\u7684\u7528\u9014\u548c\u573a\u666f\u3002\u4e3b\u8981\u7684\u6d4b\u8bd5\u7c7b\u578b\u5305\u62ec\uff1a<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>\u5355\u5143\u6d4b\u8bd5\uff08Unit Testing\uff09<\/strong>: \u9488\u5bf9\u5355\u4e2a\u7ec4\u4ef6\u6216\u51fd\u6570\u7684\u6d4b\u8bd5\uff0c\u4e3b\u8981\u7528\u4e8e\u9a8c\u8bc1\u5355\u4e2a\u6a21\u5757\u7684\u6b63\u786e\u6027\u3002<\/li>\n\n\n\n<li><strong>\u96c6\u6210\u6d4b\u8bd5\uff08Integration Testing\uff09<\/strong>: \u6d4b\u8bd5\u591a\u4e2a\u7ec4\u4ef6\u6216\u6a21\u5757\u5982\u4f55\u534f\u540c\u5de5\u4f5c\u3002<\/li>\n\n\n\n<li><strong>\u7aef\u5230\u7aef\u6d4b\u8bd5\uff08E2E Testing\uff09<\/strong>: \u6a21\u62df\u7528\u6237\u884c\u4e3a\u6765\u6d4b\u8bd5\u6574\u4e2a\u5e94\u7528\u7684\u6d41\u7a0b\u3002<\/li>\n\n\n\n<li><strong>\u6027\u80fd\u6d4b\u8bd5\uff08Performance Testing\uff09<\/strong>: \u6d4b\u8bd5\u8f6f\u4ef6\u5728\u9ad8\u8d1f\u8f7d\u6216\u5927\u6570\u636e\u91cf\u4e0b\u7684\u6027\u80fd\u3002<\/li>\n\n\n\n<li><strong>\u56de\u5f52\u6d4b\u8bd5\uff08Regression Testing\uff09<\/strong>: \u5728\u6bcf\u6b21\u4ee3\u7801\u66f4\u6539\u540e\u8fd0\u884c\u7684\u6d4b\u8bd5\uff0c\u4ee5\u786e\u4fdd\u65b0\u7684\u66f4\u6539\u6ca1\u6709\u7834\u574f\u73b0\u6709\u529f\u80fd\u3002<\/li>\n<\/ul>\n\n\n\n<p>\u4e86\u89e3\u8fd9\u4e9b\u6d4b\u8bd5\u7c7b\u578b\u6709\u52a9\u4e8e\u60a8\u9009\u62e9\u6700\u9002\u5408\u9879\u76ee\u9700\u6c42\u7684\u6d4b\u8bd5\u7b56\u7565\u3002<\/p>\n\n\n\n<h4 class=\"wp-block-heading\">\u4ee3\u7801\u793a\u4f8b<\/h4>\n\n\n\n<p>\u7531\u4e8e\u8fd9\u4e00\u5c0f\u8282\u4e3b\u8981\u662f\u4ecb\u7ecd\u6027\u8d28\u7684\uff0c\u6ca1\u6709\u7279\u5b9a\u7684\u4ee3\u7801\u793a\u4f8b\u3002<\/p>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<p>\u8fd9\u662f\u7b2c\u4e00\u7ae0\u7b2c\u4e8c\u5c0f\u8282\u7684\u5185\u5bb9\u3002\u5982\u679c\u60a8\u6709\u4efb\u4f55\u95ee\u9898\u6216\u9700\u8981\u8fdb\u4e00\u6b65\u7684\u6f84\u6e05\uff0c\u8bf7\u968f\u65f6\u544a\u8bc9\u6211\u3002\u5426\u5219\uff0c\u6211\u5c06\u7ee7\u7eed\u8fdb\u884c\u4e0b\u4e00\u5c0f\u8282\u7684\u8be6\u7ec6\u89e3\u91ca\u3002\u8bf7\u60a8\u786e\u8ba4\u3002<\/p>\n\n\n\n<figure class=\"wp-block-image\"><img decoding=\"async\" src=\"https:\/\/lh3.googleusercontent.com\/a\/ACg8ocLh4B_kew_Ugyfq9egjobpny7AWdKDF1KOH64Elebx0ZhM=s96-c\" alt=\"User\"\/><\/figure>\n\n\n\n<p>\u8bf7\u7ee7\u7eedChatGPT<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">\u7b2c\u4e00\u7ae0\uff1a\u6d4b\u8bd5\u7684\u91cd\u8981\u6027<\/h2>\n\n\n\n<h3 class=\"wp-block-heading\">1.3 \u6d4b\u8bd5\u5728Angular\u4e2d\u7684\u89d2\u8272<\/h3>\n\n\n\n<h4 class=\"wp-block-heading\">\u63cf\u8ff0<\/h4>\n\n\n\n<p>\u5728Angular\u524d\u7aef\u5f00\u53d1\u4e2d\uff0c\u6d4b\u8bd5\u626e\u6f14\u7740\u81f3\u5173\u91cd\u8981\u7684\u89d2\u8272\u3002Angular\u6846\u67b6\u672c\u8eab\u5c31\u662f\u8bbe\u8ba1\u6210\u6613\u4e8e\u6d4b\u8bd5\u7684\uff0c\u63d0\u4f9b\u4e86\u4e00\u7cfb\u5217\u5de5\u5177\u548c\u5e93\uff08\u5982Jasmine\u3001Karma\u548cProtractor\uff09\u6765\u652f\u6301\u5404\u79cd\u7c7b\u578b\u7684\u6d4b\u8bd5\u3002\u8fd9\u4e9b\u5de5\u5177\u53ef\u4ee5\u5e2e\u52a9\u5f00\u53d1\u8005\u8f7b\u677e\u5730\u7f16\u5199\u548c\u6267\u884c\u5355\u5143\u6d4b\u8bd5\u3001\u96c6\u6210\u6d4b\u8bd5\u548c\u7aef\u5230\u7aef\u6d4b\u8bd5\u3002<\/p>\n\n\n\n<p>\u6d4b\u8bd5\u5728Angular\u4e2d\u4e3b\u8981\u6709\u4ee5\u4e0b\u51e0\u4e2a\u4f5c\u7528\uff1a<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>\u786e\u4fdd\u4ee3\u7801\u8d28\u91cf<\/strong>: \u901a\u8fc7\u6d4b\u8bd5\uff0c\u60a8\u53ef\u4ee5\u786e\u4fdd\u4ee3\u7801\u7684\u529f\u80fd\u6027\u3001\u53ef\u9760\u6027\u548c\u6027\u80fd\u3002<\/li>\n\n\n\n<li><strong>\u5feb\u901f\u53d1\u73b0\u548c\u4fee\u590d\u9519\u8bef<\/strong>: \u6d4b\u8bd5\u53ef\u4ee5\u5728\u65e9\u671f\u9636\u6bb5\u5c31\u53d1\u73b0\u95ee\u9898\uff0c\u4ece\u800c\u51cf\u5c11\u540e\u671f\u4fee\u590d\u7684\u6210\u672c\u548c\u65f6\u95f4\u3002<\/li>\n\n\n\n<li><strong>\u7b80\u5316\u8c03\u8bd5<\/strong>: \u5f53\u51fa\u73b0\u95ee\u9898\u65f6\uff0c\u6709\u4e86\u6d4b\u8bd5\uff0c\u60a8\u53ef\u4ee5\u66f4\u5bb9\u6613\u5730\u5b9a\u4f4d\u95ee\u9898\u6240\u5728\u3002<\/li>\n\n\n\n<li><strong>\u4fc3\u8fdb\u56e2\u961f\u534f\u4f5c<\/strong>: \u6d4b\u8bd5\u4ee3\u7801\u4f5c\u4e3a\u6587\u6863\u7684\u4e00\u79cd\uff0c\u53ef\u4ee5\u5e2e\u52a9\u56e2\u961f\u6210\u5458\u4e86\u89e3\u4ee3\u7801\u7684\u529f\u80fd\u548c\u9650\u5236\u3002<\/li>\n<\/ul>\n\n\n\n<h4 class=\"wp-block-heading\">\u4ee3\u7801\u793a\u4f8b<\/h4>\n\n\n\n<p>\u7531\u4e8e\u8fd9\u4e00\u5c0f\u8282\u4e3b\u8981\u662f\u4ecb\u7ecd\u6027\u8d28\u7684\uff0c\u6ca1\u6709\u7279\u5b9a\u7684\u4ee3\u7801\u793a\u4f8b\u3002<\/p>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<p>\u8fd9\u662f\u7b2c\u4e00\u7ae0\u7b2c\u4e09\u5c0f\u8282\u7684\u5185\u5bb9\u3002\u5982\u679c\u60a8\u6709\u4efb\u4f55\u95ee\u9898\u6216\u9700\u8981\u8fdb\u4e00\u6b65\u7684\u6f84\u6e05\uff0c\u8bf7\u968f\u65f6\u544a\u8bc9\u6211\u3002\u5426\u5219\uff0c\u6211\u5c06\u7ee7\u7eed\u8fdb\u884c\u4e0b\u4e00\u7ae0\u7b2c\u4e00\u5c0f\u8282\u7684\u8be6\u7ec6\u89e3\u91ca\u3002\u8bf7\u60a8\u786e\u8ba4\u3002<\/p>\n\n\n\n<figure class=\"wp-block-image\"><img decoding=\"async\" src=\"https:\/\/lh3.googleusercontent.com\/a\/ACg8ocLh4B_kew_Ugyfq9egjobpny7AWdKDF1KOH64Elebx0ZhM=s96-c\" alt=\"User\"\/><\/figure>\n\n\n\n<p>\u8bf7\u7ee7\u7eedChatGPT<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">\u7b2c\u4e8c\u7ae0\uff1a\u6d4b\u8bd5\u73af\u5883\u7684\u8bbe\u7f6e<\/h2>\n\n\n\n<h3 class=\"wp-block-heading\">2.1 Node.js\u548cnpm\u7684\u5b89\u88c5<\/h3>\n\n\n\n<h4 class=\"wp-block-heading\">\u63cf\u8ff0<\/h4>\n\n\n\n<p>\u5728\u5f00\u59cbAngular\u6d4b\u8bd5\u4e4b\u524d\uff0c\u60a8\u9700\u8981\u786e\u4fdd\u5df2\u7ecf\u5b89\u88c5\u4e86Node.js\u548cnpm\uff08Node Package Manager\uff09\u3002Node.js\u662f\u4e00\u4e2aJavaScript\u8fd0\u884c\u65f6\u73af\u5883\uff0c\u800cnpm\u662f\u4e00\u4e2a\u7528\u4e8e\u7ba1\u7406Node.js\u5305\u7684\u5de5\u5177\u3002\u8fd9\u4e24\u8005\u662f\u8fdb\u884cAngular\u5f00\u53d1\u548c\u6d4b\u8bd5\u7684\u57fa\u7840\u3002<\/p>\n\n\n\n<p>\u5b89\u88c5Node.js\u548cnpm\u901a\u5e38\u662f\u4e00\u4e2a\u7b80\u5355\u7684\u8fc7\u7a0b\uff0c\u53ef\u4ee5\u4ece\u5176\u5b98\u65b9\u7f51\u7ad9\u4e0b\u8f7d\u5b89\u88c5\u7a0b\u5e8f\u6216\u4f7f\u7528\u5305\u7ba1\u7406\u5668\u8fdb\u884c\u5b89\u88c5\u3002<\/p>\n\n\n\n<h4 class=\"wp-block-heading\">\u4ee3\u7801\u793a\u4f8b<\/h4>\n\n\n\n<p>\u5728Windows\u6216Mac\u4e0a\uff0c\u60a8\u53ef\u4ee5\u4ece<a href=\"https:\/\/nodejs.org\/\">Node.js\u5b98\u65b9\u7f51\u7ad9<\/a>\u4e0b\u8f7d\u5b89\u88c5\u7a0b\u5e8f\u5e76\u6309\u7167\u63d0\u793a\u8fdb\u884c\u5b89\u88c5\u3002<\/p>\n\n\n\n<p>\u5728Linux\u4e0a\uff0c\u60a8\u53ef\u4ee5\u4f7f\u7528\u5305\u7ba1\u7406\u5668\u8fdb\u884c\u5b89\u88c5\u3002\u4ee5Ubuntu\u4e3a\u4f8b\uff1a<\/p>\n\n\n\n<p>bashCopy code<\/p>\n\n\n\n<p><code>sudo apt update sudo apt install nodejs npm<\/code><\/p>\n\n\n\n<p>\u5b89\u88c5\u5b8c\u6210\u540e\uff0c\u60a8\u53ef\u4ee5\u4f7f\u7528\u4ee5\u4e0b\u547d\u4ee4\u6765\u9a8c\u8bc1\u5b89\u88c5\uff1a<\/p>\n\n\n\n<p>bashCopy code<\/p>\n\n\n\n<p><code>node -v # \u67e5\u770bNode.js\u7248\u672c npm -v # \u67e5\u770bnpm\u7248\u672c<\/code><\/p>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<p>\u8fd9\u662f\u7b2c\u4e8c\u7ae0\u7b2c\u4e00\u5c0f\u8282\u7684\u5185\u5bb9\u3002\u5982\u679c\u60a8\u6709\u4efb\u4f55\u95ee\u9898\u6216\u9700\u8981\u8fdb\u4e00\u6b65\u7684\u6f84\u6e05\uff0c\u8bf7\u968f\u65f6\u544a\u8bc9\u6211\u3002\u5426\u5219\uff0c\u6211\u5c06\u7ee7\u7eed\u8fdb\u884c\u4e0b\u4e00\u5c0f\u8282\u7684\u8be6\u7ec6\u89e3\u91ca\u3002\u8bf7\u60a8\u786e\u8ba4\u3002<\/p>\n\n\n\n<figure class=\"wp-block-image\"><img decoding=\"async\" src=\"https:\/\/lh3.googleusercontent.com\/a\/ACg8ocLh4B_kew_Ugyfq9egjobpny7AWdKDF1KOH64Elebx0ZhM=s96-c\" alt=\"User\"\/><\/figure>\n\n\n\n<p>\u8bf7\u7ee7\u7eedChatGPT<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">\u7b2c\u4e8c\u7ae0\uff1a\u6d4b\u8bd5\u73af\u5883\u7684\u8bbe\u7f6e<\/h2>\n\n\n\n<h3 class=\"wp-block-heading\">2.2 Karma\u548cJasmine\u7684\u5b89\u88c5<\/h3>\n\n\n\n<h4 class=\"wp-block-heading\">\u63cf\u8ff0<\/h4>\n\n\n\n<p>\u5728\u8bbe\u7f6e\u597dNode.js\u548cnpm\u4e4b\u540e\uff0c\u63a5\u4e0b\u6765\u6211\u4eec\u9700\u8981\u5b89\u88c5Karma\u548cJasmine\u3002Karma\u662f\u4e00\u4e2a\u6d4b\u8bd5\u8fd0\u884c\u5668\uff0c\u5b83\u53ef\u4ee5\u81ea\u52a8\u5316\u5730\u8fd0\u884c\u60a8\u7684\u6d4b\u8bd5\u5e76\u62a5\u544a\u7ed3\u679c\u3002Jasmine\u5219\u662f\u4e00\u4e2a\u6d41\u884c\u7684JavaScript\u6d4b\u8bd5\u6846\u67b6\uff0c\u7528\u4e8e\u7f16\u5199\u6d4b\u8bd5\u7528\u4f8b\u3002<\/p>\n\n\n\n<p>\u8fd9\u4e24\u4e2a\u5de5\u5177\u901a\u5e38\u4e00\u8d77\u4f7f\u7528\uff0c\u4ee5\u63d0\u4f9b\u4e00\u4e2a\u5b8c\u6574\u7684\u524d\u7aef\u6d4b\u8bd5\u89e3\u51b3\u65b9\u6848\u3002\u5728Angular\u9879\u76ee\u4e2d\uff0c\u5b83\u4eec\u901a\u5e38\u4f5c\u4e3a\u5f00\u53d1\u4f9d\u8d56\uff08devDependencies\uff09\u8fdb\u884c\u5b89\u88c5\u3002<\/p>\n\n\n\n<h4 class=\"wp-block-heading\">\u4ee3\u7801\u793a\u4f8b<\/h4>\n\n\n\n<p>\u9996\u5148\uff0c\u786e\u4fdd\u60a8\u5df2\u7ecf\u5728\u9879\u76ee\u76ee\u5f55\u4e2d\u521d\u59cb\u5316\u4e86\u4e00\u4e2anpm\u9879\u76ee\u3002\u5982\u679c\u8fd8\u6ca1\u6709\uff0c\u53ef\u4ee5\u4f7f\u7528\u4ee5\u4e0b\u547d\u4ee4\u8fdb\u884c\u521d\u59cb\u5316\uff1a<\/p>\n\n\n\n<p>bashCopy code<\/p>\n\n\n\n<p><code>npm init -y<\/code><\/p>\n\n\n\n<p>\u7136\u540e\uff0c\u4f7f\u7528npm\u547d\u4ee4\u5b89\u88c5Karma\u548cJasmine\uff1a<\/p>\n\n\n\n<p>bashCopy code<\/p>\n\n\n\n<p><code>npm install --save-dev karma jasmine karma-jasmine karma-chrome-launcher<\/code><\/p>\n\n\n\n<p>\u8fd9\u5c06\u4f1a\u628aKarma\u548cJasmine\u4ee5\u53ca\u5176\u4ed6\u76f8\u5173\u4f9d\u8d56\u5b89\u88c5\u5230\u60a8\u7684\u9879\u76ee\u4e2d\u3002<\/p>\n\n\n\n<p>\u6700\u540e\uff0c\u521d\u59cb\u5316Karma\u914d\u7f6e\u6587\u4ef6\uff1a<\/p>\n\n\n\n<p>bashCopy code<\/p>\n\n\n\n<p><code>npx karma init<\/code><\/p>\n\n\n\n<p>\u6309\u7167\u63d0\u793a\u8fdb\u884c\u8bbe\u7f6e\uff0c\u8fd9\u6837\u60a8\u5c31\u5b8c\u6210\u4e86Karma\u548cJasmine\u7684\u5b89\u88c5\u548c\u914d\u7f6e\u3002<\/p>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<p>\u8fd9\u662f\u7b2c\u4e8c\u7ae0\u7b2c\u4e8c\u5c0f\u8282\u7684\u5185\u5bb9\u3002\u5982\u679c\u60a8\u6709\u4efb\u4f55\u95ee\u9898\u6216\u9700\u8981\u8fdb\u4e00\u6b65\u7684\u6f84\u6e05\uff0c\u8bf7\u968f\u65f6\u544a\u8bc9\u6211\u3002\u5426\u5219\uff0c\u6211\u5c06\u7ee7\u7eed\u8fdb\u884c\u4e0b\u4e00\u5c0f\u8282\u7684\u8be6\u7ec6\u89e3\u91ca\u3002\u8bf7\u60a8\u786e\u8ba4\u3002<\/p>\n\n\n\n<figure class=\"wp-block-image\"><img decoding=\"async\" src=\"https:\/\/lh3.googleusercontent.com\/a\/ACg8ocLh4B_kew_Ugyfq9egjobpny7AWdKDF1KOH64Elebx0ZhM=s96-c\" alt=\"User\"\/><\/figure>\n\n\n\n<p>\u8bf7\u7ee7\u7eedChatGPT<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">\u7b2c\u4e8c\u7ae0\uff1a\u6d4b\u8bd5\u73af\u5883\u7684\u8bbe\u7f6e<\/h2>\n\n\n\n<h3 class=\"wp-block-heading\">2.3 \u914d\u7f6e\u6d4b\u8bd5\u73af\u5883<\/h3>\n\n\n\n<h4 class=\"wp-block-heading\">\u63cf\u8ff0<\/h4>\n\n\n\n<p>\u5b89\u88c5\u5b8cKarma\u548cJasmine\u540e\uff0c\u4e0b\u4e00\u6b65\u662f\u914d\u7f6e\u6d4b\u8bd5\u73af\u5883\u3002\u8fd9\u901a\u5e38\u6d89\u53ca\u5230\u7f16\u8f91<code>karma.conf.js<\/code>\u6587\u4ef6\uff0c\u8be5\u6587\u4ef6\u5728\u8fd0\u884c<code>npx karma init<\/code>\u65f6\u4f1a\u88ab\u521b\u5efa\u3002\u5728\u8fd9\u4e2a\u914d\u7f6e\u6587\u4ef6\u4e2d\uff0c\u60a8\u53ef\u4ee5\u8bbe\u7f6e\u6d4b\u8bd5\u6846\u67b6\u3001\u542f\u52a8\u7684\u6d4f\u89c8\u5668\u3001\u6d4b\u8bd5\u6587\u4ef6\u7684\u4f4d\u7f6e\u7b49\u3002<\/p>\n\n\n\n<p>\u914d\u7f6e\u6b63\u786e\u7684\u6d4b\u8bd5\u73af\u5883\u662f\u8fdb\u884c\u6709\u6548\u6d4b\u8bd5\u7684\u5173\u952e\u3002\u60a8\u53ef\u4ee5\u6839\u636e\u9879\u76ee\u7684\u5177\u4f53\u9700\u6c42\u6765\u5b9a\u5236\u8fd9\u4e9b\u8bbe\u7f6e\u3002<\/p>\n\n\n\n<h4 class=\"wp-block-heading\">\u4ee3\u7801\u793a\u4f8b<\/h4>\n\n\n\n<p>\u4e0b\u9762\u662f\u4e00\u4e2a\u7b80\u5355\u7684<code>karma.conf.js<\/code>\u914d\u7f6e\u6587\u4ef6\u793a\u4f8b\uff1a<\/p>\n\n\n\n<p>javascriptCopy code<\/p>\n\n\n\n<p><code>module.exports = function(config) { config.set({ frameworks: ['jasmine'], \/\/ \u4f7f\u7528Jasmine\u4f5c\u4e3a\u6d4b\u8bd5\u6846\u67b6 browsers: ['Chrome'], \/\/ \u4f7f\u7528Chrome\u6d4f\u89c8\u5668\u8fd0\u884c\u6d4b\u8bd5 files: [ 'src\/**\/*.spec.js' \/\/ \u6307\u5b9a\u6d4b\u8bd5\u6587\u4ef6\u7684\u4f4d\u7f6e ], reporters: ['progress'], \/\/ \u4f7f\u7528\u8fdb\u5ea6\u62a5\u544a port: 9876, \/\/ \u8bbe\u7f6e\u7aef\u53e3\u53f7 colors: true, \/\/ \u5728\u63a7\u5236\u53f0\u8f93\u51fa\u5f69\u8272\u65e5\u5fd7 autoWatch: true, \/\/ \u81ea\u52a8\u76d1\u89c6\u6587\u4ef6\u53d8\u5316\u5e76\u91cd\u65b0\u8fd0\u884c\u6d4b\u8bd5 singleRun: false, \/\/ \u662f\u5426\u53ea\u8fd0\u884c\u4e00\u6b21\u6d4b\u8bd5 }); };<\/code><\/p>\n\n\n\n<p>\u4fdd\u5b58\u8fd9\u4e2a\u6587\u4ef6\u540e\uff0c\u60a8\u53ef\u4ee5\u8fd0\u884c<code>npx karma start<\/code>\u6765\u542f\u52a8Karma\u6d4b\u8bd5\u8fd0\u884c\u5668\u3002<\/p>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<p>\u8fd9\u662f\u7b2c\u4e8c\u7ae0\u7b2c\u4e09\u5c0f\u8282\u7684\u5185\u5bb9\u3002\u5982\u679c\u60a8\u6709\u4efb\u4f55\u95ee\u9898\u6216\u9700\u8981\u8fdb\u4e00\u6b65\u7684\u6f84\u6e05\uff0c\u8bf7\u968f\u65f6\u544a\u8bc9\u6211\u3002\u5426\u5219\uff0c\u6211\u5c06\u7ee7\u7eed\u8fdb\u884c\u4e0b\u4e00\u7ae0\u7b2c\u4e00\u5c0f\u8282\u7684\u8be6\u7ec6\u89e3\u91ca\u3002\u8bf7\u60a8\u786e\u8ba4\u3002<\/p>\n\n\n\n<figure class=\"wp-block-image\"><img decoding=\"async\" src=\"https:\/\/lh3.googleusercontent.com\/a\/ACg8ocLh4B_kew_Ugyfq9egjobpny7AWdKDF1KOH64Elebx0ZhM=s96-c\" alt=\"User\"\/><\/figure>\n\n\n\n<p>\u8bf7\u7ee7\u7eedChatGPT<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">\u7b2c\u4e09\u7ae0\uff1a\u5355\u5143\u6d4b\u8bd5\u57fa\u7840<\/h2>\n\n\n\n<h3 class=\"wp-block-heading\">3.1 \u4ec0\u4e48\u662f\u5355\u5143\u6d4b\u8bd5<\/h3>\n\n\n\n<h4 class=\"wp-block-heading\">\u63cf\u8ff0<\/h4>\n\n\n\n<p>\u5355\u5143\u6d4b\u8bd5\u662f\u8f6f\u4ef6\u6d4b\u8bd5\u7684\u4e00\u79cd\u7c7b\u578b\uff0c\u4e3b\u8981\u7528\u4e8e\u9a8c\u8bc1\u5355\u4e2a\u7ec4\u4ef6\u6216\u51fd\u6570\u7684\u6b63\u786e\u6027\u3002\u5728Angular\u4e2d\uff0c\u8fd9\u901a\u5e38\u610f\u5473\u7740\u6d4b\u8bd5\u5355\u4e2a\u7ec4\u4ef6\u3001\u670d\u52a1\u6216\u7ba1\u9053\u7b49\u3002\u5355\u5143\u6d4b\u8bd5\u7684\u76ee\u7684\u662f\u786e\u4fdd\u4ee3\u7801\u7684\u6bcf\u4e2a\u5c0f\u90e8\u5206\u90fd\u6309\u9884\u671f\u5de5\u4f5c\u3002<\/p>\n\n\n\n<p>\u5355\u5143\u6d4b\u8bd5\u901a\u5e38\u662f\u81ea\u52a8\u5316\u7684\uff0c\u53ef\u4ee5\u5feb\u901f\u5730\u8fd0\u884c\uff0c\u56e0\u6b64\u975e\u5e38\u9002\u5408\u96c6\u6210\u5230\u6301\u7eed\u96c6\u6210\uff08CI\uff09\u6d41\u7a0b\u4e2d\u3002\u5b83\u4eec\u4e5f\u662f\u6d4b\u8bd5\u91d1\u5b57\u5854\u7684\u57fa\u7840\uff0c\u5e94\u8be5\u662f\u6700\u591a\u548c\u6700\u9891\u7e41\u6267\u884c\u7684\u6d4b\u8bd5\u7c7b\u578b\u3002<\/p>\n\n\n\n<h4 class=\"wp-block-heading\">\u4ee3\u7801\u793a\u4f8b<\/h4>\n\n\n\n<p>\u5728Angular\u9879\u76ee\u4e2d\uff0c\u5355\u5143\u6d4b\u8bd5\u901a\u5e38\u5b58\u653e\u5728\u4e0e\u8981\u6d4b\u8bd5\u7684\u4ee3\u7801\u76f8\u540c\u7684\u76ee\u5f55\u4e2d\uff0c\u5e76\u4ee5<code>.spec.ts<\/code>\u4e3a\u540e\u7f00\u3002\u4e0b\u9762\u662f\u4e00\u4e2a\u7b80\u5355\u7684\u5355\u5143\u6d4b\u8bd5\u793a\u4f8b\uff0c\u7528\u4e8e\u6d4b\u8bd5\u4e00\u4e2a\u8fd4\u56de\u4e24\u6570\u4e4b\u548c\u7684\u51fd\u6570\uff1a<\/p>\n\n\n\n<p>typescriptCopy code<\/p>\n\n\n\n<p><code>\/\/ adder.ts export function add(a: number, b: number): number { return a + b; } \/\/ adder.spec.ts import { add } from '.\/adder'; describe('adder', () =&gt; { it('should return the sum of two numbers', () =&gt; { expect(add(1, 2)).toEqual(3); expect(add(-1, 1)).toEqual(0); }); });<\/code><\/p>\n\n\n\n<p>\u5728\u8fd9\u4e2a\u793a\u4f8b\u4e2d\uff0c\u6211\u4eec\u4f7f\u7528Jasmine\u7684<code>describe<\/code>\u548c<code>it<\/code>\u51fd\u6570\u6765\u7ec4\u7ec7\u6d4b\u8bd5\uff0c\u4ee5\u53ca<code>expect<\/code>\u51fd\u6570\u6765\u8fdb\u884c\u65ad\u8a00\u3002<\/p>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<p>\u8fd9\u662f\u7b2c\u4e09\u7ae0\u7b2c\u4e00\u5c0f\u8282\u7684\u5185\u5bb9\u3002\u5982\u679c\u60a8\u6709\u4efb\u4f55\u95ee\u9898\u6216\u9700\u8981\u8fdb\u4e00\u6b65\u7684\u6f84\u6e05\uff0c\u8bf7\u968f\u65f6\u544a\u8bc9\u6211\u3002\u5426\u5219\uff0c\u6211\u5c06\u7ee7\u7eed\u8fdb\u884c\u4e0b\u4e00\u5c0f\u8282\u7684\u8be6\u7ec6\u89e3\u91ca\u3002\u8bf7\u60a8\u786e\u8ba4\u3002<\/p>\n\n\n\n<figure class=\"wp-block-image\"><img decoding=\"async\" src=\"https:\/\/lh3.googleusercontent.com\/a\/ACg8ocLh4B_kew_Ugyfq9egjobpny7AWdKDF1KOH64Elebx0ZhM=s96-c\" alt=\"User\"\/><\/figure>\n\n\n\n<p>\u8bf7\u7ee7\u7eedChatGPT<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">\u7b2c\u4e09\u7ae0\uff1a\u5355\u5143\u6d4b\u8bd5\u57fa\u7840<\/h2>\n\n\n\n<h3 class=\"wp-block-heading\">3.2 \u5982\u4f55\u7f16\u5199\u4e00\u4e2a\u7b80\u5355\u7684\u5355\u5143\u6d4b\u8bd5<\/h3>\n\n\n\n<h4 class=\"wp-block-heading\">\u63cf\u8ff0<\/h4>\n\n\n\n<p>\u7f16\u5199\u5355\u5143\u6d4b\u8bd5\u901a\u5e38\u6d89\u53ca\u51e0\u4e2a\u57fa\u672c\u6b65\u9aa4\uff1a\u51c6\u5907\u6d4b\u8bd5\u6570\u636e\uff08Arrange\uff09\u3001\u6267\u884c\u8981\u6d4b\u8bd5\u7684\u64cd\u4f5c\uff08Act\uff09\u548c\u9a8c\u8bc1\u7ed3\u679c\uff08Assert\uff09\u3002\u8fd9\u901a\u5e38\u88ab\u79f0\u4e3aAAA\u6a21\u5f0f\u3002\u5728Angular\u4e2d\uff0c\u60a8\u901a\u5e38\u4f1a\u4f7f\u7528Jasmine\u6d4b\u8bd5\u6846\u67b6\u6765\u7f16\u5199\u6d4b\u8bd5\u7528\u4f8b\uff0c\u5b83\u63d0\u4f9b\u4e86\u4e00\u7cfb\u5217\u7528\u4e8e\u7ec4\u7ec7\u6d4b\u8bd5\u548c\u8fdb\u884c\u65ad\u8a00\u7684API\u3002<\/p>\n\n\n\n<h4 class=\"wp-block-heading\">\u4ee3\u7801\u793a\u4f8b<\/h4>\n\n\n\n<p>\u4e0b\u9762\u662f\u4e00\u4e2a\u7b80\u5355\u7684Angular\u5355\u5143\u6d4b\u8bd5\u793a\u4f8b\uff0c\u7528\u4e8e\u6d4b\u8bd5\u4e00\u4e2a\u8ba1\u7b97\u5668\u7ec4\u4ef6\u7684<code>add<\/code>\u65b9\u6cd5\u3002<\/p>\n\n\n\n<p>\u9996\u5148\uff0c\u8fd9\u662f\u8ba1\u7b97\u5668\u7ec4\u4ef6\u7684\u4ee3\u7801\uff08<code>calculator.component.ts<\/code>\uff09\uff1a<\/p>\n\n\n\n<p>typescriptCopy code<\/p>\n\n\n\n<p><code>\/\/ calculator.component.ts import { Component } from '@angular\/core'; @Component({ selector: 'app-calculator', template: '&lt;div&gt;&lt;\/div&gt;', }) export class CalculatorComponent { add(a: number, b: number): number { return a + b; } }<\/code><\/p>\n\n\n\n<p>\u63a5\u4e0b\u6765\uff0c\u8fd9\u662f\u5bf9\u5e94\u7684\u5355\u5143\u6d4b\u8bd5\u4ee3\u7801\uff08<code>calculator.component.spec.ts<\/code>\uff09\uff1a<\/p>\n\n\n\n<p>typescriptCopy code<\/p>\n\n\n\n<p><code>\/\/ calculator.component.spec.ts import { CalculatorComponent } from '.\/calculator.component'; describe('CalculatorComponent', () =&gt; { let component: CalculatorComponent; beforeEach(() =&gt; { component = new CalculatorComponent(); }); it('should add two numbers correctly', () =&gt; { \/\/ Arrange const a = 1; const b = 2; const expectedResult = 3; \/\/ Act const result = component.add(a, b); \/\/ Assert expect(result).toEqual(expectedResult); }); });<\/code><\/p>\n\n\n\n<p>\u5728\u8fd9\u4e2a\u793a\u4f8b\u4e2d\uff0c\u6211\u4eec\u9996\u5148\u5728<code>beforeEach<\/code>\u94a9\u5b50\u4e2d\u5b9e\u4f8b\u5316<code>CalculatorComponent<\/code>\u3002\u7136\u540e\uff0c\u6211\u4eec\u7f16\u5199\u4e00\u4e2a\u6d4b\u8bd5\u7528\u4f8b\u6765\u68c0\u67e5<code>add<\/code>\u65b9\u6cd5\u3002\u6211\u4eec\u51c6\u5907\u4e86\u6d4b\u8bd5\u6570\u636e\uff08<code>a<\/code>\u548c<code>b<\/code>\uff09\uff0c\u6267\u884c\u4e86<code>add<\/code>\u65b9\u6cd5\uff0c\u5e76\u4f7f\u7528Jasmine\u7684<code>expect<\/code>\u548c<code>toEqual<\/code>\u6765\u9a8c\u8bc1\u7ed3\u679c\u3002<\/p>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<p>\u8fd9\u662f\u7b2c\u4e09\u7ae0\u7b2c\u4e8c\u5c0f\u8282\u7684\u5185\u5bb9\u3002\u5982\u679c\u60a8\u6709\u4efb\u4f55\u95ee\u9898\u6216\u9700\u8981\u8fdb\u4e00\u6b65\u7684\u6f84\u6e05\uff0c\u8bf7\u968f\u65f6\u544a\u8bc9\u6211\u3002\u5426\u5219\uff0c\u6211\u5c06\u7ee7\u7eed\u8fdb\u884c\u4e0b\u4e00\u5c0f\u8282\u7684\u8be6\u7ec6\u89e3\u91ca\u3002\u8bf7\u60a8\u786e\u8ba4\u3002<\/p>\n\n\n\n<figure class=\"wp-block-image\"><img decoding=\"async\" src=\"https:\/\/lh3.googleusercontent.com\/a\/ACg8ocLh4B_kew_Ugyfq9egjobpny7AWdKDF1KOH64Elebx0ZhM=s96-c\" alt=\"User\"\/><\/figure>\n\n\n\n<p>\u8bf7\u7ee7\u7eedChatGPT<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">\u7b2c\u4e09\u7ae0\uff1a\u5355\u5143\u6d4b\u8bd5\u57fa\u7840<\/h2>\n\n\n\n<h3 class=\"wp-block-heading\">3.3 \u4f7f\u7528Jasmine\u8fdb\u884c\u5355\u5143\u6d4b\u8bd5<\/h3>\n\n\n\n<h4 class=\"wp-block-heading\">\u63cf\u8ff0<\/h4>\n\n\n\n<p>Jasmine\u662f\u4e00\u4e2a\u6d41\u884c\u7684JavaScript\u6d4b\u8bd5\u6846\u67b6\uff0c\u5e7f\u6cdb\u7528\u4e8e\u524d\u7aef\u548cNode.js\u9879\u76ee\u3002\u5b83\u63d0\u4f9b\u4e86\u4e00\u7cfb\u5217\u4e30\u5bcc\u7684API\u548c\u5de5\u5177\uff0c\u7528\u4e8e\u7f16\u5199\u63cf\u8ff0\u6027\u7684\u6d4b\u8bd5\u7528\u4f8b\u3002\u5728Angular\u9879\u76ee\u4e2d\uff0cJasmine\u901a\u5e38\u662f\u9ed8\u8ba4\u7684\u6d4b\u8bd5\u6846\u67b6\u3002<\/p>\n\n\n\n<p>Jasmine\u7684\u4e3b\u8981\u7279\u70b9\u5305\u62ec\uff1a<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>\u63cf\u8ff0\u6027\u8bed\u6cd5<\/strong>: \u4f7f\u7528<code>describe<\/code>\u548c<code>it<\/code>\u51fd\u6570\u6765\u6e05\u6670\u5730\u63cf\u8ff0\u6d4b\u8bd5\u7528\u4f8b\u3002<\/li>\n\n\n\n<li><strong>\u4e30\u5bcc\u7684\u65ad\u8a00\u5e93<\/strong>: \u63d0\u4f9b\u4e86\u591a\u79cd<code>expect<\/code>\u51fd\u6570\u7528\u4e8e\u4e0d\u540c\u7c7b\u578b\u7684\u65ad\u8a00\u3002<\/li>\n\n\n\n<li><strong>\u94a9\u5b50\u51fd\u6570<\/strong>: \u5982<code>beforeEach<\/code>\u3001<code>afterEach<\/code>\u7b49\uff0c\u7528\u4e8e\u6d4b\u8bd5\u524d\u7684\u51c6\u5907\u548c\u6d4b\u8bd5\u540e\u7684\u6e05\u7406\u3002<\/li>\n<\/ul>\n\n\n\n<h4 class=\"wp-block-heading\">\u4ee3\u7801\u793a\u4f8b<\/h4>\n\n\n\n<p>\u4e0b\u9762\u662f\u4e00\u4e2a\u4f7f\u7528Jasmine\u8fdb\u884c\u5355\u5143\u6d4b\u8bd5\u7684\u7b80\u5355\u793a\u4f8b\u3002\u8fd9\u4e2a\u6d4b\u8bd5\u7528\u4f8b\u7528\u4e8e\u9a8c\u8bc1\u4e00\u4e2a<code>Person<\/code>\u7c7b\u7684<code>getFullName<\/code>\u65b9\u6cd5\u3002<\/p>\n\n\n\n<p>\u9996\u5148\uff0c\u8fd9\u662f<code>Person<\/code>\u7c7b\u7684\u4ee3\u7801\uff08<code>person.ts<\/code>\uff09\uff1a<\/p>\n\n\n\n<p>typescriptCopy code<\/p>\n\n\n\n<p><code>\/\/ person.ts export class Person { constructor(public firstName: string, public lastName: string) {} getFullName(): string { return `${this.firstName} ${this.lastName}`; } }<\/code><\/p>\n\n\n\n<p>\u63a5\u4e0b\u6765\uff0c\u8fd9\u662f\u5bf9\u5e94\u7684\u5355\u5143\u6d4b\u8bd5\u4ee3\u7801\uff08<code>person.spec.ts<\/code>\uff09\uff1a<\/p>\n\n\n\n<p>typescriptCopy code<\/p>\n\n\n\n<p><code>\/\/ person.spec.ts import { Person } from '.\/person'; describe('Person', () =&gt; { let person: Person; beforeEach(() =&gt; { person = new Person('John', 'Doe'); }); it('should return full name', () =&gt; { const result = person.getFullName(); expect(result).toEqual('John Doe'); }); });<\/code><\/p>\n\n\n\n<p>\u5728\u8fd9\u4e2a\u793a\u4f8b\u4e2d\uff0c\u6211\u4eec\u4f7f\u7528\u4e86Jasmine\u7684<code>describe<\/code>\u51fd\u6570\u6765\u7ec4\u7ec7\u6d4b\u8bd5\uff0c\u5e76\u4f7f\u7528<code>it<\/code>\u51fd\u6570\u6765\u5b9a\u4e49\u5355\u4e2a\u6d4b\u8bd5\u7528\u4f8b\u3002\u6211\u4eec\u8fd8\u4f7f\u7528\u4e86<code>beforeEach<\/code>\u94a9\u5b50\u6765\u5728\u6bcf\u4e2a\u6d4b\u8bd5\u7528\u4f8b\u8fd0\u884c\u4e4b\u524d\u521d\u59cb\u5316<code>Person<\/code>\u5bf9\u8c61\u3002\u6700\u540e\uff0c\u6211\u4eec\u4f7f\u7528<code>expect<\/code>\u548c<code>toEqual<\/code>\u8fdb\u884c\u65ad\u8a00\u3002<\/p>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<p>\u8fd9\u662f\u7b2c\u4e09\u7ae0\u7b2c\u4e09\u5c0f\u8282\u7684\u5185\u5bb9\u3002\u5982\u679c\u60a8\u6709\u4efb\u4f55\u95ee\u9898\u6216\u9700\u8981\u8fdb\u4e00\u6b65\u7684\u6f84\u6e05\uff0c\u8bf7\u968f\u65f6\u544a\u8bc9\u6211\u3002\u5426\u5219\uff0c\u6211\u5c06\u7ee7\u7eed\u8fdb\u884c\u4e0b\u4e00\u5c0f\u8282\u7684\u8be6\u7ec6\u89e3\u91ca\u3002\u8bf7\u60a8\u786e\u8ba4\u3002<\/p>\n\n\n\n<figure class=\"wp-block-image\"><img decoding=\"async\" src=\"https:\/\/lh3.googleusercontent.com\/a\/ACg8ocLh4B_kew_Ugyfq9egjobpny7AWdKDF1KOH64Elebx0ZhM=s96-c\" alt=\"User\"\/><\/figure>\n\n\n\n<p>\u8bf7\u7ee7\u7eedChatGPT<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">\u7b2c\u4e09\u7ae0\uff1a\u5355\u5143\u6d4b\u8bd5\u57fa\u7840<\/h2>\n\n\n\n<h3 class=\"wp-block-heading\">3.4 \u4f7f\u7528Karma\u8fd0\u884c\u6d4b\u8bd5<\/h3>\n\n\n\n<h4 class=\"wp-block-heading\">\u63cf\u8ff0<\/h4>\n\n\n\n<p>Karma\u662f\u4e00\u4e2a\u6d4b\u8bd5\u8fd0\u884c\u5668\uff0c\u7528\u4e8e\u5728\u6d4f\u89c8\u5668\u73af\u5883\u4e2d\u8fd0\u884cJavaScript\u6d4b\u8bd5\u3002\u5b83\u4e0eJasmine\u914d\u5408\u5f97\u975e\u5e38\u597d\uff0c\u901a\u5e38\u7528\u4e8e\u8fd0\u884cAngular\u7684\u5355\u5143\u6d4b\u8bd5\u3002Karma\u63d0\u4f9b\u4e86\u4e00\u4e2a\u547d\u4ee4\u884c\u754c\u9762\uff0c\u7528\u4e8e\u542f\u52a8\u6d4b\u8bd5\u3001\u663e\u793a\u6d4b\u8bd5\u7ed3\u679c\uff0c\u5e76\u76d1\u89c6\u6587\u4ef6\u66f4\u6539\u4ee5\u81ea\u52a8\u91cd\u65b0\u8fd0\u884c\u6d4b\u8bd5\u3002<\/p>\n\n\n\n<p>\u4f7f\u7528Karma\u7684\u597d\u5904\u5305\u62ec\uff1a<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>\u591a\u6d4f\u89c8\u5668\u652f\u6301<\/strong>: \u53ef\u4ee5\u5728\u591a\u79cd\u6d4f\u89c8\u5668\u4e2d\u8fd0\u884c\u6d4b\u8bd5\uff0c\u4ee5\u786e\u4fdd\u4ee3\u7801\u7684\u517c\u5bb9\u6027\u3002<\/li>\n\n\n\n<li><strong>\u5b9e\u65f6\u53cd\u9988<\/strong>: Karma\u4f1a\u81ea\u52a8\u68c0\u6d4b\u6587\u4ef6\u66f4\u6539\u5e76\u91cd\u65b0\u8fd0\u884c\u76f8\u5173\u6d4b\u8bd5\u3002<\/li>\n\n\n\n<li><strong>\u96c6\u6210\u53cb\u597d<\/strong>: \u5bb9\u6613\u4e0e\u6301\u7eed\u96c6\u6210\uff08CI\uff09\u5de5\u5177\u96c6\u6210\uff0c\u5982Travis CI\u3001Jenkins\u7b49\u3002<\/li>\n<\/ul>\n\n\n\n<h4 class=\"wp-block-heading\">\u4ee3\u7801\u793a\u4f8b<\/h4>\n\n\n\n<p>\u8981\u4f7f\u7528Karma\u8fd0\u884c\u6d4b\u8bd5\uff0c\u60a8\u9700\u8981\u4e00\u4e2aKarma\u914d\u7f6e\u6587\u4ef6\uff08\u901a\u5e38\u662f<code>karma.conf.js<\/code>\uff09\uff0c\u8be5\u6587\u4ef6\u5b9a\u4e49\u4e86\u5982\u4f55\u8fd0\u884c\u6d4b\u8bd5\u3002\u5982\u679c\u60a8\u5df2\u7ecf\u6309\u7167\u7b2c\u4e8c\u7ae0\u7684\u6307\u5bfc\u8fdb\u884c\u4e86\u8bbe\u7f6e\uff0c\u90a3\u4e48\u60a8\u5e94\u8be5\u5df2\u7ecf\u6709\u4e86\u8fd9\u4e2a\u6587\u4ef6\u3002<\/p>\n\n\n\n<p>\u5728\u9879\u76ee\u7684\u6839\u76ee\u5f55\u4e0b\uff0c\u8fd0\u884c\u4ee5\u4e0b\u547d\u4ee4\u4ee5\u542f\u52a8Karma\uff1a<\/p>\n\n\n\n<p>bashCopy code<\/p>\n\n\n\n<p><code>npx karma start<\/code><\/p>\n\n\n\n<p>\u8fd9\u5c06\u542f\u52a8Karma\uff0c\u5e76\u81ea\u52a8\u6253\u5f00\u9ed8\u8ba4\u7684\u6d4f\u89c8\u5668\u6765\u8fd0\u884c\u6d4b\u8bd5\u3002\u6d4b\u8bd5\u7ed3\u679c\u5c06\u5728\u547d\u4ee4\u884c\u4e2d\u663e\u793a\u3002<\/p>\n\n\n\n<p>\u5982\u679c\u60a8\u60f3\u5728\u5355\u4e00\u8fd0\u884c\u4e2d\u6267\u884c\u6240\u6709\u6d4b\u8bd5\u5e76\u9000\u51fa\uff0c\u53ef\u4ee5\u4f7f\u7528\uff1a<\/p>\n\n\n\n<p>bashCopy code<\/p>\n\n\n\n<p><code>npx karma start --single-run<\/code><\/p>\n\n\n\n<p>\u8fd9\u5728\u6301\u7eed\u96c6\u6210\u73af\u5883\u4e2d\u7279\u522b\u6709\u7528\u3002<\/p>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<p>\u8fd9\u662f\u7b2c\u4e09\u7ae0\u7b2c\u56db\u5c0f\u8282\u7684\u5185\u5bb9\u3002\u5982\u679c\u60a8\u6709\u4efb\u4f55\u95ee\u9898\u6216\u9700\u8981\u8fdb\u4e00\u6b65\u7684\u6f84\u6e05\uff0c\u8bf7\u968f\u65f6\u544a\u8bc9\u6211\u3002\u5426\u5219\uff0c\u6211\u5c06\u7ee7\u7eed\u8fdb\u884c\u4e0b\u4e00\u7ae0\u7b2c\u4e00\u5c0f\u8282\u7684\u8be6\u7ec6\u89e3\u91ca\u3002\u8bf7\u60a8\u786e\u8ba4\u3002<\/p>\n\n\n\n<figure class=\"wp-block-image\"><img decoding=\"async\" src=\"https:\/\/lh3.googleusercontent.com\/a\/ACg8ocLh4B_kew_Ugyfq9egjobpny7AWdKDF1KOH64Elebx0ZhM=s96-c\" alt=\"User\"\/><\/figure>\n\n\n\n<p>\u8bf7\u7ee7\u7eedChatGPT<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">\u7b2c\u56db\u7ae0\uff1a\u6d4b\u8bd5Angular\u7ec4\u4ef6<\/h2>\n\n\n\n<h3 class=\"wp-block-heading\">4.1 \u7ec4\u4ef6\u7684\u751f\u547d\u5468\u671f\u548c\u6d4b\u8bd5<\/h3>\n\n\n\n<h4 class=\"wp-block-heading\">\u63cf\u8ff0<\/h4>\n\n\n\n<p>\u5728Angular\u4e2d\uff0c\u7ec4\u4ef6\u6709\u5176\u81ea\u5df1\u7684\u751f\u547d\u5468\u671f\uff0c\u7531\u4e00\u7cfb\u5217\u751f\u547d\u5468\u671f\u94a9\u5b50\u51fd\u6570\u7ec4\u6210\uff0c\u5982<code>ngOnInit<\/code>\u3001<code>ngOnChanges<\/code>\u7b49\u3002\u5f53\u6d4b\u8bd5\u7ec4\u4ef6\u65f6\uff0c\u4e86\u89e3\u8fd9\u4e9b\u751f\u547d\u5468\u671f\u94a9\u5b50\u5982\u4f55\u5de5\u4f5c\u662f\u975e\u5e38\u91cd\u8981\u7684\uff0c\u56e0\u4e3a\u5b83\u4eec\u7ecf\u5e38\u5305\u542b\u521d\u59cb\u5316\u903b\u8f91\u6216\u526f\u4f5c\u7528\u3002<\/p>\n\n\n\n<p>\u5728\u6d4b\u8bd5\u4e2d\uff0c\u60a8\u53ef\u80fd\u9700\u8981\u6a21\u62df\u8fd9\u4e9b\u751f\u547d\u5468\u671f\u94a9\u5b50\u7684\u8c03\u7528\uff0c\u6216\u8005\u68c0\u67e5\u5b83\u4eec\u662f\u5426\u5df2\u7ecf\u6309\u9884\u671f\u88ab\u8c03\u7528\u3002<\/p>\n\n\n\n<h4 class=\"wp-block-heading\">\u4ee3\u7801\u793a\u4f8b<\/h4>\n\n\n\n<p>\u5047\u8bbe\u6211\u4eec\u6709\u4e00\u4e2a\u7b80\u5355\u7684<code>UserProfileComponent<\/code>\uff0c\u5b83\u5728<code>ngOnInit<\/code>\u94a9\u5b50\u4e2d\u4ece\u670d\u52a1\u4e2d\u83b7\u53d6\u7528\u6237\u6570\u636e\u3002<\/p>\n\n\n\n<p>typescriptCopy code<\/p>\n\n\n\n<p><code>\/\/ user-profile.component.ts import { Component, OnInit } from '@angular\/core'; import { UserService } from '.\/user.service'; @Component({ selector: 'app-user-profile', template: '&lt;div&gt;{{ user.name }}&lt;\/div&gt;', }) export class UserProfileComponent implements OnInit { user: any; constructor(private userService: UserService) {} ngOnInit() { this.user = this.userService.getUser(); } }<\/code><\/p>\n\n\n\n<p>\u5bf9\u5e94\u7684\u6d4b\u8bd5\u4ee3\u7801\u53ef\u80fd\u5982\u4e0b\uff1a<\/p>\n\n\n\n<p>typescriptCopy code<\/p>\n\n\n\n<p><code>\/\/ user-profile.component.spec.ts import { UserProfileComponent } from '.\/user-profile.component'; import { UserService } from '.\/user.service'; describe('UserProfileComponent', () =&gt; { let component: UserProfileComponent; let userService: UserService; beforeEach(() =&gt; { userService = new UserService(); component = new UserProfileComponent(userService); }); it('should fetch user data on ngOnInit', () =&gt; { const user = { name: 'John' }; spyOn(userService, 'getUser').and.returnValue(user); component.ngOnInit(); expect(component.user).toBe(user); }); });<\/code><\/p>\n\n\n\n<p>\u5728\u8fd9\u4e2a\u6d4b\u8bd5\u4e2d\uff0c\u6211\u4eec\u4f7f\u7528Jasmine\u7684<code>spyOn<\/code>\u65b9\u6cd5\u6765\u6a21\u62df<code>UserService<\/code>\u7684<code>getUser<\/code>\u65b9\u6cd5\uff0c\u5e76\u68c0\u67e5\u662f\u5426\u5728<code>ngOnInit<\/code>\u4e2d\u6b63\u786e\u5730\u83b7\u53d6\u4e86\u7528\u6237\u6570\u636e\u3002<\/p>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<p>\u8fd9\u662f\u7b2c\u56db\u7ae0\u7b2c\u4e00\u5c0f\u8282\u7684\u5185\u5bb9\u3002\u5982\u679c\u60a8\u6709\u4efb\u4f55\u95ee\u9898\u6216\u9700\u8981\u8fdb\u4e00\u6b65\u7684\u6f84\u6e05\uff0c\u8bf7\u968f\u65f6\u544a\u8bc9\u6211\u3002\u5426\u5219\uff0c\u6211\u5c06\u7ee7\u7eed\u8fdb\u884c\u4e0b\u4e00\u5c0f\u8282\u7684\u8be6\u7ec6\u89e3\u91ca\u3002\u8bf7\u60a8\u786e\u8ba4\u3002<\/p>\n\n\n\n<figure class=\"wp-block-image\"><img decoding=\"async\" src=\"https:\/\/lh3.googleusercontent.com\/a\/ACg8ocLh4B_kew_Ugyfq9egjobpny7AWdKDF1KOH64Elebx0ZhM=s96-c\" alt=\"User\"\/><\/figure>\n\n\n\n<p>\u8bf7\u7ee7\u7eedChatGPT<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">\u7b2c\u56db\u7ae0\uff1a\u6d4b\u8bd5Angular\u7ec4\u4ef6<\/h2>\n\n\n\n<h3 class=\"wp-block-heading\">4.2 \u6d4b\u8bd5\u6a21\u677f<\/h3>\n\n\n\n<h4 class=\"wp-block-heading\">\u63cf\u8ff0<\/h4>\n\n\n\n<p>\u9664\u4e86\u7ec4\u4ef6\u7c7b\u7684\u903b\u8f91\u4e4b\u5916\uff0cAngular\u7ec4\u4ef6\u8fd8\u5305\u62ec\u4e0e\u4e4b\u5173\u8054\u7684\u6a21\u677f\u3002\u8fd9\u4e9b\u6a21\u677f\u901a\u5e38\u5305\u542b\u6570\u636e\u7ed1\u5b9a\u3001\u4e8b\u4ef6\u7ed1\u5b9a\u548c\u6307\u4ee4\u7b49\u3002\u6d4b\u8bd5\u6a21\u677f\u901a\u5e38\u6d89\u53ca\u5230\u68c0\u67e5DOM\u5143\u7d20\u662f\u5426\u6b63\u786e\u5730\u53cd\u6620\u4e86\u7ec4\u4ef6\u7684\u72b6\u6001\u3002<\/p>\n\n\n\n<p>\u4e3a\u4e86\u6d4b\u8bd5\u6a21\u677f\uff0c\u60a8\u901a\u5e38\u9700\u8981\u4f7f\u7528Angular\u7684\u6d4b\u8bd5\u5de5\u5177\uff0c\u5982<code>TestBed<\/code>\uff0c\u6765\u521b\u5efa\u7ec4\u4ef6\u5e76\u4e0e\u5176\u6a21\u677f\u8fdb\u884c\u4ea4\u4e92\u3002<\/p>\n\n\n\n<h4 class=\"wp-block-heading\">\u4ee3\u7801\u793a\u4f8b<\/h4>\n\n\n\n<p>\u5047\u8bbe\u6211\u4eec\u6709\u4e00\u4e2a\u7b80\u5355\u7684<code>CounterComponent<\/code>\uff0c\u5b83\u6709\u4e00\u4e2a\u6309\u94ae\u548c\u4e00\u4e2a\u663e\u793a\u8ba1\u6570\u7684\u6807\u7b7e\u3002<\/p>\n\n\n\n<p>typescriptCopy code<\/p>\n\n\n\n<p><code>\/\/ counter.component.ts import { Component } from '@angular\/core'; @Component({ selector: 'app-counter', template: ` &lt;button (click)=\"increment()\"&gt;Increment&lt;\/button&gt; &lt;p&gt;{{ count }}&lt;\/p&gt; `, }) export class CounterComponent { count = 0; increment() { this.count++; } }<\/code><\/p>\n\n\n\n<p>\u5bf9\u5e94\u7684\u6d4b\u8bd5\u4ee3\u7801\u53ef\u80fd\u5982\u4e0b\uff1a<\/p>\n\n\n\n<p>typescriptCopy code<\/p>\n\n\n\n<p><code>\/\/ counter.component.spec.ts import { ComponentFixture, TestBed } from '@angular\/core\/testing'; import { CounterComponent } from '.\/counter.component'; describe('CounterComponent', () =&gt; { let component: CounterComponent; let fixture: ComponentFixture&lt;CounterComponent&gt;; beforeEach(() =&gt; { TestBed.configureTestingModule({ declarations: [CounterComponent], }); fixture = TestBed.createComponent(CounterComponent); component = fixture.componentInstance; }); it('should increment count when the button is clicked', () =&gt; { fixture.detectChanges(); \/\/ \u521d\u59cb\u5316\u7ec4\u4ef6\u548c\u6a21\u677f const compiled = fixture.nativeElement; const button = compiled.querySelector('button'); const p = compiled.querySelector('p'); expect(p.textContent).toContain('0'); button.click(); fixture.detectChanges(); \/\/ \u66f4\u65b0\u6a21\u677f expect(p.textContent).toContain('1'); }); });<\/code><\/p>\n\n\n\n<p>\u5728\u8fd9\u4e2a\u6d4b\u8bd5\u4e2d\uff0c\u6211\u4eec\u4f7f\u7528<code>TestBed<\/code>\u6765\u521b\u5efa<code>CounterComponent<\/code>\u7684\u5b9e\u4f8b\uff0c\u5e76\u901a\u8fc7<code>fixture.nativeElement<\/code>\u6765\u8bbf\u95ee\u5176DOM\u5143\u7d20\u3002\u7136\u540e\uff0c\u6211\u4eec\u6a21\u62df\u70b9\u51fb\u6309\u94ae\u5e76\u68c0\u67e5\u8ba1\u6570\u662f\u5426\u6b63\u786e\u5730\u66f4\u65b0\u5728\u6a21\u677f\u4e2d\u3002<\/p>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<p>\u8fd9\u662f\u7b2c\u56db\u7ae0\u7b2c\u4e8c\u5c0f\u8282\u7684\u5185\u5bb9\u3002\u5982\u679c\u60a8\u6709\u4efb\u4f55\u95ee\u9898\u6216\u9700\u8981\u8fdb\u4e00\u6b65\u7684\u6f84\u6e05\uff0c\u8bf7\u968f\u65f6\u544a\u8bc9\u6211\u3002\u5426\u5219\uff0c\u6211\u5c06\u7ee7\u7eed\u8fdb\u884c\u4e0b\u4e00\u5c0f\u8282\u7684\u8be6\u7ec6\u89e3\u91ca\u3002\u8bf7\u60a8\u786e\u8ba4\u3002<\/p>\n\n\n\n<figure class=\"wp-block-image\"><img decoding=\"async\" src=\"https:\/\/lh3.googleusercontent.com\/a\/ACg8ocLh4B_kew_Ugyfq9egjobpny7AWdKDF1KOH64Elebx0ZhM=s96-c\" alt=\"User\"\/><\/figure>\n\n\n\n<p>\u8bf7\u7ee7\u7eedChatGPT<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">\u7b2c\u56db\u7ae0\uff1a\u6d4b\u8bd5Angular\u7ec4\u4ef6<\/h2>\n\n\n\n<h3 class=\"wp-block-heading\">4.3 \u6d4b\u8bd5\u8f93\u5165\u548c\u8f93\u51fa\u5c5e\u6027<\/h3>\n\n\n\n<h4 class=\"wp-block-heading\">\u63cf\u8ff0<\/h4>\n\n\n\n<p>\u5728Angular\u7ec4\u4ef6\u4e2d\uff0c\u8f93\u5165\uff08<code>@Input<\/code>\uff09\u548c\u8f93\u51fa\uff08<code>@Output<\/code>\uff09\u5c5e\u6027\u662f\u7ec4\u4ef6\u95f4\u901a\u4fe1\u7684\u5e38\u7528\u65b9\u5f0f\u3002\u8f93\u5165\u5c5e\u6027\u7528\u4e8e\u4ece\u7236\u7ec4\u4ef6\u5411\u5b50\u7ec4\u4ef6\u4f20\u9012\u6570\u636e\uff0c\u800c\u8f93\u51fa\u5c5e\u6027\u5219\u7528\u4e8e\u4ece\u5b50\u7ec4\u4ef6\u5411\u7236\u7ec4\u4ef6\u53d1\u9001\u4e8b\u4ef6\u3002<\/p>\n\n\n\n<p>\u6d4b\u8bd5\u8fd9\u4e9b\u5c5e\u6027\u901a\u5e38\u6d89\u53ca\u5230\u8bbe\u7f6e\u8f93\u5165\u5c5e\u6027\u7684\u503c\u5e76\u68c0\u67e5\u7ec4\u4ef6\u7684\u72b6\u6001\uff0c\u6216\u8005\u76d1\u542c\u8f93\u51fa\u5c5e\u6027\u7684\u4e8b\u4ef6\u5e76\u9a8c\u8bc1\u662f\u5426\u6b63\u786e\u89e6\u53d1\u3002<\/p>\n\n\n\n<h4 class=\"wp-block-heading\">\u4ee3\u7801\u793a\u4f8b<\/h4>\n\n\n\n<p>\u5047\u8bbe\u6211\u4eec\u6709\u4e00\u4e2a<code>TodoItemComponent<\/code>\uff0c\u5b83\u63a5\u53d7\u4e00\u4e2a<code>todo<\/code>\u5bf9\u8c61\u4f5c\u4e3a\u8f93\u5165\uff0c\u5e76\u5f53\u5b8c\u6210\u4efb\u52a1\u65f6\u89e6\u53d1\u4e00\u4e2a<code>completed<\/code>\u4e8b\u4ef6\u3002<\/p>\n\n\n\n<p>typescriptCopy code<\/p>\n\n\n\n<p><code>\/\/ todo-item.component.ts import { Component, Input, Output, EventEmitter } from '@angular\/core'; @Component({ selector: 'app-todo-item', template: ` &lt;div&gt; &lt;span&gt;{{ todo.title }}&lt;\/span&gt; &lt;button (click)=\"completeTodo()\"&gt;Complete&lt;\/button&gt; &lt;\/div&gt; `, }) export class TodoItemComponent { @Input() todo: { title: string, completed: boolean }; @Output() completed = new EventEmitter&lt;void&gt;(); completeTodo() { this.todo.completed = true; this.completed.emit(); } }<\/code><\/p>\n\n\n\n<p>\u5bf9\u5e94\u7684\u6d4b\u8bd5\u4ee3\u7801\u53ef\u80fd\u5982\u4e0b\uff1a<\/p>\n\n\n\n<p>typescriptCopy code<\/p>\n\n\n\n<p><code>\/\/ todo-item.component.spec.ts import { TodoItemComponent } from '.\/todo-item.component'; describe('TodoItemComponent', () =&gt; { let component: TodoItemComponent; beforeEach(() =&gt; { component = new TodoItemComponent(); }); it('should mark todo as completed and emit completed event', () =&gt; { const todo = { title: 'Test Todo', completed: false }; component.todo = todo; let emitted = false; component.completed.subscribe(() =&gt; { emitted = true; }); component.completeTodo(); expect(todo.completed).toBe(true); expect(emitted).toBe(true); }); });<\/code><\/p>\n\n\n\n<p>\u5728\u8fd9\u4e2a\u6d4b\u8bd5\u4e2d\uff0c\u6211\u4eec\u8bbe\u7f6e\u4e86<code>todo<\/code>\u8f93\u5165\u5c5e\u6027\uff0c\u5e76\u8ba2\u9605\u4e86<code>completed<\/code>\u8f93\u51fa\u5c5e\u6027\u3002\u7136\u540e\uff0c\u6211\u4eec\u8c03\u7528<code>completeTodo<\/code>\u65b9\u6cd5\uff0c\u5e76\u68c0\u67e5<code>todo<\/code>\u5bf9\u8c61\u7684\u72b6\u6001\u548c<code>completed<\/code>\u4e8b\u4ef6\u662f\u5426\u6b63\u786e\u89e6\u53d1\u3002<\/p>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<p>\u8fd9\u662f\u7b2c\u56db\u7ae0\u7b2c\u4e09\u5c0f\u8282\u7684\u5185\u5bb9\u3002\u5982\u679c\u60a8\u6709\u4efb\u4f55\u95ee\u9898\u6216\u9700\u8981\u8fdb\u4e00\u6b65\u7684\u6f84\u6e05\uff0c\u8bf7\u968f\u65f6\u544a\u8bc9\u6211\u3002\u5426\u5219\uff0c\u6211\u5c06\u7ee7\u7eed\u8fdb\u884c\u4e0b\u4e00\u5c0f\u8282\u7684\u8be6\u7ec6\u89e3\u91ca\u3002\u8bf7\u60a8\u786e\u8ba4\u3002<\/p>\n\n\n\n<figure class=\"wp-block-image\"><img decoding=\"async\" src=\"https:\/\/lh3.googleusercontent.com\/a\/ACg8ocLh4B_kew_Ugyfq9egjobpny7AWdKDF1KOH64Elebx0ZhM=s96-c\" alt=\"User\"\/><\/figure>\n\n\n\n<p>\u8bf7\u7ee7\u7eedChatGPT<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">\u7b2c\u56db\u7ae0\uff1a\u6d4b\u8bd5Angular\u7ec4\u4ef6<\/h2>\n\n\n\n<h3 class=\"wp-block-heading\">4.4 \u6d4b\u8bd5\u4f9d\u8d56\u670d\u52a1<\/h3>\n\n\n\n<h4 class=\"wp-block-heading\">\u63cf\u8ff0<\/h4>\n\n\n\n<p>\u5728Angular\u5e94\u7528\u4e2d\uff0c\u7ec4\u4ef6\u901a\u5e38\u4f9d\u8d56\u4e8e\u4e00\u4e9b\u670d\u52a1\u6765\u6267\u884c\u7279\u5b9a\u7684\u4efb\u52a1\uff0c\u5982\u6570\u636e\u83b7\u53d6\u3001\u72b6\u6001\u7ba1\u7406\u7b49\u3002\u5f53\u6d4b\u8bd5\u8fd9\u4e9b\u7ec4\u4ef6\u65f6\uff0c\u5904\u7406\u8fd9\u4e9b\u4f9d\u8d56\u662f\u4e00\u4e2a\u91cd\u8981\u7684\u8003\u8651\u56e0\u7d20\u3002<\/p>\n\n\n\n<p>\u60a8\u53ef\u4ee5\u9009\u62e9\u4f7f\u7528\u771f\u5b9e\u7684\u670d\u52a1\u8fdb\u884c\u6d4b\u8bd5\uff0c\u4f46\u8fd9\u901a\u5e38\u4f1a\u4f7f\u6d4b\u8bd5\u53d8\u5f97\u590d\u6742\u5e76\u589e\u52a0\u8fd0\u884c\u65f6\u95f4\u3002\u66f4\u5e38\u89c1\u7684\u505a\u6cd5\u662f\u4f7f\u7528\u6a21\u62df\uff08Mock\uff09\u6216\u5b58\u6839\uff08Stub\uff09\u6765\u4ee3\u66ff\u771f\u5b9e\u7684\u670d\u52a1\u3002<\/p>\n\n\n\n<h4 class=\"wp-block-heading\">\u4ee3\u7801\u793a\u4f8b<\/h4>\n\n\n\n<p>\u5047\u8bbe\u6211\u4eec\u6709\u4e00\u4e2a<code>UserListComponent<\/code>\uff0c\u5b83\u4f9d\u8d56\u4e8e\u4e00\u4e2a<code>UserService<\/code>\u6765\u83b7\u53d6\u7528\u6237\u5217\u8868\u3002<\/p>\n\n\n\n<p>typescriptCopy code<\/p>\n\n\n\n<p><code>\/\/ user-list.component.ts import { Component, OnInit } from '@angular\/core'; import { UserService } from '.\/user.service'; @Component({ selector: 'app-user-list', template: '&lt;ul&gt;&lt;li *ngFor=\"let user of users\"&gt;{{ user.name }}&lt;\/li&gt;&lt;\/ul&gt;', }) export class UserListComponent implements OnInit { users: any[]; constructor(private userService: UserService) {} ngOnInit() { this.users = this.userService.getUsers(); } }<\/code><\/p>\n\n\n\n<p>\u5bf9\u5e94\u7684\u6d4b\u8bd5\u4ee3\u7801\u53ef\u80fd\u5982\u4e0b\uff1a<\/p>\n\n\n\n<p>typescriptCopy code<\/p>\n\n\n\n<p><code>\/\/ user-list.component.spec.ts import { UserListComponent } from '.\/user-list.component'; import { UserService } from '.\/user.service'; describe('UserListComponent', () =&gt; { let component: UserListComponent; let userServiceStub: Partial&lt;UserService&gt;; beforeEach(() =&gt; { \/\/ Create a stub for the UserService userServiceStub = { getUsers: () =&gt; [{ name: 'John' }, { name: 'Jane' }], }; component = new UserListComponent(userServiceStub as UserService); }); it('should fetch user list on ngOnInit', () =&gt; { component.ngOnInit(); expect(component.users.length).toBe(2); expect(component.users[0].name).toBe('John'); expect(component.users[1].name).toBe('Jane'); }); });<\/code><\/p>\n\n\n\n<p>\u5728\u8fd9\u4e2a\u6d4b\u8bd5\u4e2d\uff0c\u6211\u4eec\u521b\u5efa\u4e86\u4e00\u4e2a<code>UserService<\/code>\u7684\u5b58\u6839\uff0c\u5e76\u7528\u5b83\u6765\u521d\u59cb\u5316<code>UserListComponent<\/code>\u3002\u7136\u540e\uff0c\u6211\u4eec\u8c03\u7528<code>ngOnInit<\/code>\u65b9\u6cd5\uff0c\u5e76\u68c0\u67e5<code>users<\/code>\u6570\u7ec4\u662f\u5426\u6b63\u786e\u5730\u88ab\u586b\u5145\u3002<\/p>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<p>\u8fd9\u662f\u7b2c\u56db\u7ae0\u7b2c\u56db\u5c0f\u8282\u7684\u5185\u5bb9\u3002\u5982\u679c\u60a8\u6709\u4efb\u4f55\u95ee\u9898\u6216\u9700\u8981\u8fdb\u4e00\u6b65\u7684\u6f84\u6e05\uff0c\u8bf7\u968f\u65f6\u544a\u8bc9\u6211\u3002\u5426\u5219\uff0c\u6211\u5c06\u7ee7\u7eed\u8fdb\u884c\u4e0b\u4e00\u7ae0\u7b2c\u4e00\u5c0f\u8282\u7684\u8be6\u7ec6\u89e3\u91ca\u3002\u8bf7\u60a8\u786e\u8ba4\u3002<\/p>\n\n\n\n<figure class=\"wp-block-image\"><img decoding=\"async\" src=\"https:\/\/lh3.googleusercontent.com\/a\/ACg8ocLh4B_kew_Ugyfq9egjobpny7AWdKDF1KOH64Elebx0ZhM=s96-c\" alt=\"User\"\/><\/figure>\n\n\n\n<p>\u8bf7\u7ee7\u7eedChatGPT<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">\u7b2c\u4e94\u7ae0\uff1a\u6d4b\u8bd5Angular\u6307\u4ee4\u548c\u7ba1\u9053<\/h2>\n\n\n\n<h3 class=\"wp-block-heading\">5.1 \u6d4b\u8bd5\u81ea\u5b9a\u4e49\u6307\u4ee4<\/h3>\n\n\n\n<h4 class=\"wp-block-heading\">\u63cf\u8ff0<\/h4>\n\n\n\n<p>\u5728Angular\u4e2d\uff0c\u6307\u4ee4\u662f\u7528\u4e8e\u64cd\u4f5cDOM\u5143\u7d20\u6216\u7ec4\u4ef6\u7684\u884c\u4e3a\u7684\u4e00\u79cd\u65b9\u5f0f\u3002\u4e0e\u7ec4\u4ef6\u4e0d\u540c\uff0c\u6307\u4ee4\u6ca1\u6709\u81ea\u5df1\u7684\u6a21\u677f\u548c\u89c6\u56fe\uff0c\u4f46\u5b83\u4eec\u901a\u5e38\u6709\u4e0eDOM\u4ea4\u4e92\u7684\u903b\u8f91\u3002\u56e0\u6b64\uff0c\u6d4b\u8bd5\u81ea\u5b9a\u4e49\u6307\u4ee4\u901a\u5e38\u6d89\u53ca\u5230\u9a8c\u8bc1\u5b83\u4eec\u662f\u5426\u6b63\u786e\u5730\u64cd\u4f5c\u4e86DOM\u3002<\/p>\n\n\n\n<p>\u4e0e\u7ec4\u4ef6\u6d4b\u8bd5\u7c7b\u4f3c\uff0c\u60a8\u4e5f\u53ef\u4ee5\u4f7f\u7528Angular\u7684<code>TestBed<\/code>\u6765\u6d4b\u8bd5\u6307\u4ee4\u3002<\/p>\n\n\n\n<h4 class=\"wp-block-heading\">\u4ee3\u7801\u793a\u4f8b<\/h4>\n\n\n\n<p>\u5047\u8bbe\u6211\u4eec\u6709\u4e00\u4e2a\u7b80\u5355\u7684<code>HighlightDirective<\/code>\uff0c\u7528\u4e8e\u6539\u53d8\u5143\u7d20\u7684\u80cc\u666f\u8272\u3002<\/p>\n\n\n\n<p>typescriptCopy code<\/p>\n\n\n\n<p><code>\/\/ highlight.directive.ts import { Directive, ElementRef, Input, OnInit } from '@angular\/core'; @Directive({ selector: '[appHighlight]' }) export class HighlightDirective implements OnInit { @Input() appHighlight: string; constructor(private el: ElementRef) {} ngOnInit() { this.el.nativeElement.style.backgroundColor = this.appHighlight; } }<\/code><\/p>\n\n\n\n<p>\u5bf9\u5e94\u7684\u6d4b\u8bd5\u4ee3\u7801\u53ef\u80fd\u5982\u4e0b\uff1a<\/p>\n\n\n\n<p>typescriptCopy code<\/p>\n\n\n\n<p><code>\/\/ highlight.directive.spec.ts import { ComponentFixture, TestBed } from '@angular\/core\/testing'; import { HighlightDirective } from '.\/highlight.directive'; import { Component } from '@angular\/core'; @Component({ template: `&lt;div [appHighlight]=\"'yellow'\"&gt;&lt;\/div&gt;` }) class TestComponent {} describe('HighlightDirective', () =&gt; { let fixture: ComponentFixture&lt;TestComponent&gt;; let div: HTMLElement; beforeEach(() =&gt; { TestBed.configureTestingModule({ declarations: [HighlightDirective, TestComponent] }); fixture = TestBed.createComponent(TestComponent); div = fixture.nativeElement.querySelector('div'); }); it('should change background color', () =&gt; { fixture.detectChanges(); expect(div.style.backgroundColor).toBe('yellow'); }); });<\/code><\/p>\n\n\n\n<p>\u5728\u8fd9\u4e2a\u6d4b\u8bd5\u4e2d\uff0c\u6211\u4eec\u521b\u5efa\u4e86\u4e00\u4e2a\u6d4b\u8bd5\u7ec4\u4ef6<code>TestComponent<\/code>\uff0c\u7528\u4e8e\u627f\u8f7d<code>HighlightDirective<\/code>\u3002\u7136\u540e\uff0c\u6211\u4eec\u4f7f\u7528<code>TestBed<\/code>\u6765\u521b\u5efa\u8fd9\u4e2a\u7ec4\u4ef6\uff0c\u5e76\u901a\u8fc7<code>fixture.nativeElement<\/code>\u6765\u8bbf\u95ee\u5176DOM\u5143\u7d20\u3002\u6700\u540e\uff0c\u6211\u4eec\u9a8c\u8bc1\u6307\u4ee4\u662f\u5426\u6b63\u786e\u5730\u6539\u53d8\u4e86\u5143\u7d20\u7684\u80cc\u666f\u8272\u3002<\/p>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<p>\u8fd9\u662f\u7b2c\u4e94\u7ae0\u7b2c\u4e00\u5c0f\u8282\u7684\u5185\u5bb9\u3002\u5982\u679c\u60a8\u6709\u4efb\u4f55\u95ee\u9898\u6216\u9700\u8981\u8fdb\u4e00\u6b65\u7684\u6f84\u6e05\uff0c\u8bf7\u968f\u65f6\u544a\u8bc9\u6211\u3002\u5426\u5219\uff0c\u6211\u5c06\u7ee7\u7eed\u8fdb\u884c\u4e0b\u4e00\u5c0f\u8282\u7684\u8be6\u7ec6\u89e3\u91ca\u3002\u8bf7\u60a8\u786e\u8ba4\u3002<\/p>\n\n\n\n<figure class=\"wp-block-image\"><img decoding=\"async\" src=\"https:\/\/lh3.googleusercontent.com\/a\/ACg8ocLh4B_kew_Ugyfq9egjobpny7AWdKDF1KOH64Elebx0ZhM=s96-c\" alt=\"User\"\/><\/figure>\n\n\n\n<p>\u8bf7\u7ee7\u7eedChatGPT<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">\u7b2c\u4e94\u7ae0\uff1a\u6d4b\u8bd5Angular\u6307\u4ee4\u548c\u7ba1\u9053<\/h2>\n\n\n\n<h3 class=\"wp-block-heading\">5.2 \u6d4b\u8bd5\u81ea\u5b9a\u4e49\u7ba1\u9053<\/h3>\n\n\n\n<h4 class=\"wp-block-heading\">\u63cf\u8ff0<\/h4>\n\n\n\n<p>\u7ba1\u9053\u662fAngular\u4e2d\u7528\u4e8e\u8f6c\u6362\u6570\u636e\u7684\u4e00\u79cd\u7279\u6b8a\u7c7b\u578b\u7684\u7c7b\u3002\u4e0e\u6307\u4ee4\u548c\u7ec4\u4ef6\u4e0d\u540c\uff0c\u7ba1\u9053\u901a\u5e38\u6ca1\u6709\u4e0eDOM\u6216\u7ec4\u4ef6\u72b6\u6001\u4ea4\u4e92\u7684\u903b\u8f91\uff0c\u56e0\u6b64\u5b83\u4eec\u901a\u5e38\u66f4\u5bb9\u6613\u6d4b\u8bd5\u3002<\/p>\n\n\n\n<p>\u6d4b\u8bd5\u81ea\u5b9a\u4e49\u7ba1\u9053\u901a\u5e38\u6d89\u53ca\u5230\u521b\u5efa\u7ba1\u9053\u7684\u5b9e\u4f8b\uff0c\u5e76\u76f4\u63a5\u8c03\u7528\u5176<code>transform<\/code>\u65b9\u6cd5\uff0c\u7136\u540e\u9a8c\u8bc1\u8f93\u51fa\u662f\u5426\u7b26\u5408\u9884\u671f\u3002<\/p>\n\n\n\n<h4 class=\"wp-block-heading\">\u4ee3\u7801\u793a\u4f8b<\/h4>\n\n\n\n<p>\u5047\u8bbe\u6211\u4eec\u6709\u4e00\u4e2a\u7b80\u5355\u7684<code>ReversePipe<\/code>\uff0c\u7528\u4e8e\u53cd\u8f6c\u5b57\u7b26\u4e32\u3002<\/p>\n\n\n\n<p>typescriptCopy code<\/p>\n\n\n\n<p><code>\/\/ reverse.pipe.ts import { Pipe, PipeTransform } from '@angular\/core'; @Pipe({ name: 'reverse' }) export class ReversePipe implements PipeTransform { transform(value: string): string { return value.split('').reverse().join(''); } }<\/code><\/p>\n\n\n\n<p>\u5bf9\u5e94\u7684\u6d4b\u8bd5\u4ee3\u7801\u53ef\u80fd\u5982\u4e0b\uff1a<\/p>\n\n\n\n<p>typescriptCopy code<\/p>\n\n\n\n<p><code>\/\/ reverse.pipe.spec.ts import { ReversePipe } from '.\/reverse.pipe'; describe('ReversePipe', () =&gt; { let pipe: ReversePipe; beforeEach(() =&gt; { pipe = new ReversePipe(); }); it('should reverse the string', () =&gt; { const result = pipe.transform('hello'); expect(result).toBe('olleh'); }); it('should return an empty string if input is empty', () =&gt; { const result = pipe.transform(''); expect(result).toBe(''); }); });<\/code><\/p>\n\n\n\n<p>\u5728\u8fd9\u4e2a\u6d4b\u8bd5\u4e2d\uff0c\u6211\u4eec\u9996\u5148\u521b\u5efa\u4e86<code>ReversePipe<\/code>\u7684\u4e00\u4e2a\u5b9e\u4f8b\u3002\u7136\u540e\uff0c\u6211\u4eec\u76f4\u63a5\u8c03\u7528\u5176<code>transform<\/code>\u65b9\u6cd5\uff0c\u5e76\u4f7f\u7528Jasmine\u7684<code>expect<\/code>\u51fd\u6570\u6765\u9a8c\u8bc1\u8f93\u51fa\u3002<\/p>\n\n\n\n<p>\u8fd9\u79cd\u6d4b\u8bd5\u65b9\u5f0f\u975e\u5e38\u76f4\u63a5\u548c\u7b80\u5355\uff0c\u56e0\u4e3a\u6211\u4eec\u4e0d\u9700\u8981\u8bbe\u7f6e\u4efb\u4f55DOM\u73af\u5883\u6216Angular\u6d4b\u8bd5\u5e8a\u3002<\/p>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<p>\u8fd9\u662f\u7b2c\u4e94\u7ae0\u7b2c\u4e8c\u5c0f\u8282\u7684\u5185\u5bb9\u3002\u5982\u679c\u60a8\u6709\u4efb\u4f55\u95ee\u9898\u6216\u9700\u8981\u8fdb\u4e00\u6b65\u7684\u6f84\u6e05\uff0c\u8bf7\u968f\u65f6\u544a\u8bc9\u6211\u3002\u5426\u5219\uff0c\u6211\u5c06\u7ee7\u7eed\u8fdb\u884c\u4e0b\u4e00\u7ae0\u7b2c\u4e00\u5c0f\u8282\u7684\u8be6\u7ec6\u89e3\u91ca\u3002\u8bf7\u60a8\u786e\u8ba4\u3002<\/p>\n\n\n\n<figure class=\"wp-block-image\"><img decoding=\"async\" src=\"https:\/\/lh3.googleusercontent.com\/a\/ACg8ocLh4B_kew_Ugyfq9egjobpny7AWdKDF1KOH64Elebx0ZhM=s96-c\" alt=\"User\"\/><\/figure>\n\n\n\n<p>\u8bf7\u7ee7\u7eedChatGPT<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">\u7b2c\u516d\u7ae0\uff1a\u7aef\u5230\u7aef\uff08E2E\uff09\u6d4b\u8bd5<\/h2>\n\n\n\n<h3 class=\"wp-block-heading\">6.1 \u4ec0\u4e48\u662f\u7aef\u5230\u7aef\u6d4b\u8bd5<\/h3>\n\n\n\n<h4 class=\"wp-block-heading\">\u63cf\u8ff0<\/h4>\n\n\n\n<p>\u7aef\u5230\u7aef\uff08E2E\uff09\u6d4b\u8bd5\u662f\u4e00\u79cd\u6d4b\u8bd5\u65b9\u6cd5\uff0c\u7528\u4e8e\u9a8c\u8bc1\u6574\u4e2a\u5e94\u7528\u7a0b\u5e8f\u5728\u5b8c\u6574\u4e1a\u52a1\u6d41\u7a0b\u4e2d\u7684\u884c\u4e3a\u3002\u4e0e\u5355\u5143\u6d4b\u8bd5\u548c\u96c6\u6210\u6d4b\u8bd5\u4e0d\u540c\uff0cE2E\u6d4b\u8bd5\u901a\u5e38\u6d89\u53ca\u591a\u4e2a\u7ec4\u4ef6\u3001\u670d\u52a1\u548c\u751a\u81f3\u5916\u90e8\u4f9d\u8d56\uff0c\u4ee5\u6a21\u62df\u771f\u5b9e\u7528\u6237\u573a\u666f\u3002<\/p>\n\n\n\n<p>\u5728Angular\u4e2d\uff0cProtractor\u662f\u4e00\u4e2a\u5e38\u7528\u7684E2E\u6d4b\u8bd5\u6846\u67b6\u3002\u5b83\u4f7f\u7528WebDriver\u6765\u63a7\u5236\u6d4f\u89c8\u5668\uff0c\u6a21\u62df\u7528\u6237\u4e0e\u5e94\u7528\u7684\u4ea4\u4e92\u3002<\/p>\n\n\n\n<h4 class=\"wp-block-heading\">\u4ee3\u7801\u793a\u4f8b<\/h4>\n\n\n\n<p>\u5047\u8bbe\u6211\u4eec\u6709\u4e00\u4e2a\u7b80\u5355\u7684\u767b\u5f55\u9875\u9762\uff0c\u7528\u6237\u9700\u8981\u8f93\u5165\u7528\u6237\u540d\u548c\u5bc6\u7801\u3002\u6211\u4eec\u53ef\u4ee5\u4f7f\u7528Protractor\u6765\u7f16\u5199\u4e00\u4e2aE2E\u6d4b\u8bd5\uff0c\u4ee5\u786e\u4fdd\u767b\u5f55\u529f\u80fd\u6b63\u5e38\u5de5\u4f5c\u3002<\/p>\n\n\n\n<p>\u9996\u5148\uff0c\u8fd9\u662fProtractor\u7684\u914d\u7f6e\u6587\u4ef6\uff08\u901a\u5e38\u662f<code>protractor.conf.js<\/code>\uff09\uff1a<\/p>\n\n\n\n<p>javascriptCopy code<\/p>\n\n\n\n<p><code>\/\/ protractor.conf.js exports.config = { framework: 'jasmine', seleniumAddress: 'http:\/\/localhost:4444\/wd\/hub', specs: ['e2e\/*.spec.ts'] };<\/code><\/p>\n\n\n\n<p>\u63a5\u4e0b\u6765\uff0c\u8fd9\u662f\u5bf9\u5e94\u7684E2E\u6d4b\u8bd5\u4ee3\u7801\uff1a<\/p>\n\n\n\n<p>typescriptCopy code<\/p>\n\n\n\n<p><code>\/\/ e2e\/login.spec.ts import { browser, element, by } from 'protractor'; describe('Login Page', () =&gt; { it('should login with valid credentials', () =&gt; { \/\/ Navigate to login page browser.get('\/login'); \/\/ Find input fields and button const usernameInput = element(by.id('username')); const passwordInput = element(by.id('password')); const loginButton = element(by.id('login-button')); \/\/ Input username and password usernameInput.sendKeys('testuser'); passwordInput.sendKeys('testpass'); \/\/ Click login button loginButton.click(); \/\/ Verify login successful expect(browser.getCurrentUrl()).toContain('\/dashboard'); }); });<\/code><\/p>\n\n\n\n<p>\u5728\u8fd9\u4e2a\u6d4b\u8bd5\u4e2d\uff0c\u6211\u4eec\u4f7f\u7528Protractor\u7684API\u6765\u6a21\u62df\u7528\u6237\u6253\u5f00\u767b\u5f55\u9875\u9762\u3001\u8f93\u5165\u7528\u6237\u540d\u548c\u5bc6\u7801\uff0c\u7136\u540e\u70b9\u51fb\u767b\u5f55\u6309\u94ae\u3002\u6700\u540e\uff0c\u6211\u4eec\u9a8c\u8bc1\u662f\u5426\u6210\u529f\u8df3\u8f6c\u5230\u4eea\u8868\u677f\u9875\u9762\u3002<\/p>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<p>\u8fd9\u662f\u7b2c\u516d\u7ae0\u7b2c\u4e00\u5c0f\u8282\u7684\u5185\u5bb9\u3002\u5982\u679c\u60a8\u6709\u4efb\u4f55\u95ee\u9898\u6216\u9700\u8981\u8fdb\u4e00\u6b65\u7684\u6f84\u6e05\uff0c\u8bf7\u968f\u65f6\u544a\u8bc9\u6211\u3002\u5426\u5219\uff0c\u6211\u5c06\u7ee7\u7eed\u8fdb\u884c\u4e0b\u4e00\u5c0f\u8282\u7684\u8be6\u7ec6\u89e3\u91ca\u3002\u8bf7\u60a8\u786e\u8ba4\u3002<\/p>\n\n\n\n<figure class=\"wp-block-image\"><img decoding=\"async\" src=\"https:\/\/lh3.googleusercontent.com\/a\/ACg8ocLh4B_kew_Ugyfq9egjobpny7AWdKDF1KOH64Elebx0ZhM=s96-c\" alt=\"User\"\/><\/figure>\n\n\n\n<p>\u8bf7\u7ee7\u7eedChatGPT<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">\u7b2c\u516d\u7ae0\uff1a\u7aef\u5230\u7aef\uff08E2E\uff09\u6d4b\u8bd5<\/h2>\n\n\n\n<h3 class=\"wp-block-heading\">6.2 \u4f7f\u7528Page Objects\u7b80\u5316E2E\u6d4b\u8bd5<\/h3>\n\n\n\n<h4 class=\"wp-block-heading\">\u63cf\u8ff0<\/h4>\n\n\n\n<p>Page Objects\u662f\u4e00\u79cd\u8bbe\u8ba1\u6a21\u5f0f\uff0c\u7528\u4e8e\u7b80\u5316\u548c\u7ec4\u7ec7E2E\u6d4b\u8bd5\u4ee3\u7801\u3002\u5728\u8fd9\u79cd\u6a21\u5f0f\u4e2d\uff0c\u6bcf\u4e2a\u9875\u9762\u6216\u9875\u9762\u7684\u4e00\u90e8\u5206\u90fd\u7531\u4e00\u4e2a\u5355\u72ec\u7684\u5bf9\u8c61\uff08Page Object\uff09\u8868\u793a\u3002\u8fd9\u4e2a\u5bf9\u8c61\u5c01\u88c5\u4e86\u4e0e\u9875\u9762\u4ea4\u4e92\u7684\u6240\u6709\u903b\u8f91\uff0c\u4f7f\u6d4b\u8bd5\u4ee3\u7801\u66f4\u6613\u4e8e\u7ef4\u62a4\u548c\u9605\u8bfb\u3002<\/p>\n\n\n\n<p>\u4f7f\u7528Page Objects\u7684\u597d\u5904\u5305\u62ec\uff1a<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>\u4ee3\u7801\u91cd\u7528<\/strong>: \u53ef\u4ee5\u5728\u591a\u4e2a\u6d4b\u8bd5\u4e2d\u91cd\u7528\u76f8\u540c\u7684Page Object\u3002<\/li>\n\n\n\n<li><strong>\u6613\u4e8e\u7ef4\u62a4<\/strong>: \u5f53\u9875\u9762\u7ed3\u6784\u6539\u53d8\u65f6\uff0c\u53ea\u9700\u66f4\u65b0\u76f8\u5e94\u7684Page Object\uff0c\u800c\u4e0d\u662f\u6bcf\u4e2a\u5355\u72ec\u7684\u6d4b\u8bd5\u3002<\/li>\n\n\n\n<li><strong>\u63d0\u9ad8\u53ef\u8bfb\u6027<\/strong>: \u4f7f\u7528Page Objects\u4f7f\u6d4b\u8bd5\u4ee3\u7801\u66f4\u63a5\u8fd1\u4e8e\u9886\u57df\u7279\u5b9a\u8bed\u8a00\uff08DSL\uff09\uff0c\u66f4\u6613\u4e8e\u7406\u89e3\u3002<\/li>\n<\/ul>\n\n\n\n<h4 class=\"wp-block-heading\">\u4ee3\u7801\u793a\u4f8b<\/h4>\n\n\n\n<p>\u7ee7\u7eed\u4e0a\u4e00\u5c0f\u8282\u7684\u767b\u5f55\u9875\u9762\u793a\u4f8b\uff0c\u6211\u4eec\u53ef\u4ee5\u521b\u5efa\u4e00\u4e2a<code>LoginPage<\/code>\u7684Page Object\u3002<\/p>\n\n\n\n<p>\u9996\u5148\uff0c\u8fd9\u662f<code>LoginPage<\/code>\u7684\u4ee3\u7801\uff1a<\/p>\n\n\n\n<p>typescriptCopy code<\/p>\n\n\n\n<p><code>\/\/ e2e\/page-objects\/login.page.ts import { browser, element, by } from 'protractor'; export class LoginPage { navigateTo() { return browser.get('\/login'); } getUsernameInput() { return element(by.id('username')); } getPasswordInput() { return element(by.id('password')); } getLoginButton() { return element(by.id('login-button')); } }<\/code><\/p>\n\n\n\n<p>\u7136\u540e\uff0c\u6211\u4eec\u53ef\u4ee5\u5728\u6d4b\u8bd5\u4e2d\u4f7f\u7528\u8fd9\u4e2aPage Object\uff1a<\/p>\n\n\n\n<p>typescriptCopy code<\/p>\n\n\n\n<p><code>\/\/ e2e\/login.spec.ts import { LoginPage } from '.\/page-objects\/login.page'; describe('Login Page', () =&gt; { const loginPage = new LoginPage(); it('should login with valid credentials', () =&gt; { \/\/ Navigate to login page loginPage.navigateTo(); \/\/ Input username and password loginPage.getUsernameInput().sendKeys('testuser'); loginPage.getPasswordInput().sendKeys('testpass'); \/\/ Click login button loginPage.getLoginButton().click(); \/\/ Verify login successful expect(browser.getCurrentUrl()).toContain('\/dashboard'); }); });<\/code><\/p>\n\n\n\n<p>\u901a\u8fc7\u4f7f\u7528Page Object\uff0c\u6211\u4eec\u7684\u6d4b\u8bd5\u4ee3\u7801\u53d8\u5f97\u66f4\u52a0\u6e05\u6670\u548c\u6613\u4e8e\u7ef4\u62a4\u3002<\/p>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<p>\u8fd9\u662f\u7b2c\u516d\u7ae0\u7b2c\u4e8c\u5c0f\u8282\u7684\u5185\u5bb9\u3002\u5982\u679c\u60a8\u6709\u4efb\u4f55\u95ee\u9898\u6216\u9700\u8981\u8fdb\u4e00\u6b65\u7684\u6f84\u6e05\uff0c\u8bf7\u968f\u65f6\u544a\u8bc9\u6211\u3002\u5426\u5219\uff0c\u6211\u5c06\u7ee7\u7eed\u8fdb\u884c\u4e0b\u4e00\u7ae0\u7684\u603b\u7ed3\u3002\u8bf7\u60a8\u786e\u8ba4\u3002<\/p>\n\n\n\n<figure class=\"wp-block-image\"><img decoding=\"async\" src=\"https:\/\/lh3.googleusercontent.com\/a\/ACg8ocLh4B_kew_Ugyfq9egjobpny7AWdKDF1KOH64Elebx0ZhM=s96-c\" alt=\"User\"\/><\/figure>\n\n\n\n<p>\u8bf7\u7ee7\u7eedChatGPT<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">\u6559\u7a0b\u603b\u7ed3<\/h2>\n\n\n\n<p>\u5728\u672c\u6559\u7a0b\u4e2d\uff0c\u6211\u4eec\u8be6\u7ec6\u4ecb\u7ecd\u4e86\u5982\u4f55\u8fdb\u884cAngular\u524d\u7aef\u5f00\u53d1\u7684\u6d4b\u8bd5\u3002\u6211\u4eec\u4ece\u5355\u5143\u6d4b\u8bd5\u7684\u57fa\u7840\u77e5\u8bc6\u5f00\u59cb\uff0c\u63a2\u8ba8\u4e86\u5982\u4f55\u4f7f\u7528Jasmine\u548cKarma\u8fdb\u884c\u6d4b\u8bd5\u3002\u7136\u540e\uff0c\u6211\u4eec\u6df1\u5165\u4e86\u89e3\u4e86\u5982\u4f55\u6d4b\u8bd5Angular\u7684\u5404\u4e2a\u90e8\u5206\uff0c\u5305\u62ec\u7ec4\u4ef6\u3001\u6307\u4ee4\u548c\u7ba1\u9053\u3002<\/p>\n\n\n\n<p>\u6211\u4eec\u8fd8\u4ecb\u7ecd\u4e86\u7aef\u5230\u7aef\uff08E2E\uff09\u6d4b\u8bd5\u7684\u6982\u5ff5\uff0c\u5e76\u5c55\u793a\u4e86\u5982\u4f55\u4f7f\u7528Protractor\u8fdb\u884cE2E\u6d4b\u8bd5\u3002\u6700\u540e\uff0c\u6211\u4eec\u8ba8\u8bba\u4e86\u4f7f\u7528Page Objects\u6765\u7b80\u5316\u548c\u7ec4\u7ec7E2E\u6d4b\u8bd5\u4ee3\u7801\u3002<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">\u8fdb\u4e00\u6b65\u5b66\u4e60\u7684\u53c2\u8003\u8d44\u6599<\/h3>\n\n\n\n<ol class=\"wp-block-list\">\n<li><a href=\"https:\/\/angular.io\/guide\/testing\">Angular Testing Guide<\/a> &#8211; \u5b98\u65b9\u6587\u6863\uff0c\u63d0\u4f9b\u4e86\u5168\u9762\u800c\u8be6\u7ec6\u7684\u6d4b\u8bd5\u6307\u5357\u3002<\/li>\n\n\n\n<li><a href=\"https:\/\/jasmine.github.io\/\">Jasmine Documentation<\/a> &#8211; Jasmine\u7684\u5b98\u65b9\u6587\u6863\uff0c\u5305\u62ecAPI\u548c\u6700\u4f73\u5b9e\u8df5\u3002<\/li>\n\n\n\n<li><a href=\"https:\/\/www.protractortest.org\/#\/tutorial\">Protractor Tutorial<\/a> &#8211; Protractor\u7684\u5b98\u65b9\u6559\u7a0b\uff0c\u9002\u7528\u4e8e\u521d\u5b66\u8005\u3002<\/li>\n\n\n\n<li><a href=\"https:\/\/www.manning.com\/books\/testing-angular-applications\">Testing Angular Applications<\/a> &#8211; \u4e00\u672c\u4e13\u95e8\u8bb2\u8ff0Angular\u6d4b\u8bd5\u7684\u4e66\u7c4d\u3002<\/li>\n\n\n\n<li><a href=\"https:\/\/www.udemy.com\/course\/end-to-end-testing-with-protractor-and-angular\/\">End-to-End Testing with Protractor and Angular<\/a> &#8211; \u4e00\u4e2aUdemy\u8bfe\u7a0b\uff0c\u4e13\u95e8\u9488\u5bf9Protractor\u548cAngular\u7684E2E\u6d4b\u8bd5\u3002<\/li>\n<\/ol>\n\n\n\n<p>\u5e0c\u671b\u8fd9\u4e2a\u6559\u7a0b\u80fd\u5e2e\u52a9\u60a8\u66f4\u597d\u5730\u7406\u89e3Angular\u524d\u7aef\u5f00\u53d1\u7684\u6d4b\u8bd5\u65b9\u6cd5\u548c\u6700\u4f73\u5b9e\u8df5\u3002\u5982\u679c\u60a8\u6709\u4efb\u4f55\u95ee\u9898\u6216\u9700\u8981\u8fdb\u4e00\u6b65\u7684\u6f84\u6e05\uff0c\u8bf7\u968f\u65f6\u8054\u7cfb\u6211\u3002\u8c22\u8c22\uff01<\/p>\n\n\n\n<figure class=\"wp-block-image\"><img decoding=\"async\" src=\"https:\/\/lh3.googleusercontent.com\/a\/ACg8ocLh4B_kew_Ugyfq9egjobpny7AWdKDF1KOH64Elebx0ZhM=s96-c\" alt=\"User\"\/><\/figure>\n\n\n\n<p>\u8bf7\u8be6\u7ec6\u89e3\u91ca\u7b2c\u516d\u7ae0\uff1a\u7aef\u5230\u7aef\uff08E2E\uff09\u6d4b\u8bd5\u7684\u9875\u9762\u5143\u7d20\u7684\u5b9a\u4f4d\u548c\u64cd\u4f5cChatGPT<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">\u7b2c\u516d\u7ae0\uff1a\u7aef\u5230\u7aef\uff08E2E\uff09\u6d4b\u8bd5<\/h2>\n\n\n\n<h3 class=\"wp-block-heading\">6.3 \u9875\u9762\u5143\u7d20\u7684\u5b9a\u4f4d\u548c\u64cd\u4f5c<\/h3>\n\n\n\n<h4 class=\"wp-block-heading\">\u63cf\u8ff0<\/h4>\n\n\n\n<p>\u5728\u7aef\u5230\u7aef\uff08E2E\uff09\u6d4b\u8bd5\u4e2d\uff0c\u9875\u9762\u5143\u7d20\u7684\u5b9a\u4f4d\u548c\u64cd\u4f5c\u662f\u975e\u5e38\u5173\u952e\u7684\u6b65\u9aa4\u3002\u6b63\u786e\u5730\u5b9a\u4f4d\u9875\u9762\u5143\u7d20\u5e76\u4e0e\u4e4b\u4ea4\u4e92\u662f\u786e\u4fdd\u6d4b\u8bd5\u51c6\u786e\u6027\u7684\u524d\u63d0\u3002Protractor\u63d0\u4f9b\u4e86\u591a\u79cd\u65b9\u5f0f\u6765\u5b9a\u4f4d\u548c\u64cd\u4f5c\u9875\u9762\u5143\u7d20\u3002<\/p>\n\n\n\n<h4 class=\"wp-block-heading\">\u5b9a\u4f4d\u9875\u9762\u5143\u7d20<\/h4>\n\n\n\n<p>Protractor\u63d0\u4f9b\u4e86\u591a\u79cd\u5b9a\u4f4d\u7b56\u7565\uff0c\u5305\u62ec\u4f46\u4e0d\u9650\u4e8e\uff1a<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>\u901a\u8fc7ID\u5b9a\u4f4d<\/strong>: <code>element(by.id('some-id'))<\/code><\/li>\n\n\n\n<li><strong>\u901a\u8fc7CSS\u9009\u62e9\u5668\u5b9a\u4f4d<\/strong>: <code>element(by.css('.some-class'))<\/code><\/li>\n\n\n\n<li><strong>\u901a\u8fc7\u6807\u7b7e\u540d\u5b9a\u4f4d<\/strong>: <code>element(by.tagName('tag-name'))<\/code><\/li>\n\n\n\n<li><strong>\u901a\u8fc7\u6a21\u578b\u5b9a\u4f4d\uff08Angular\u7279\u6709\uff09<\/strong>: <code>element(by.model('someModel'))<\/code><\/li>\n\n\n\n<li><strong>\u901a\u8fc7\u7ed1\u5b9a\u5b9a\u4f4d\uff08Angular\u7279\u6709\uff09<\/strong>: <code>element(by.binding('someBinding'))<\/code><\/li>\n<\/ul>\n\n\n\n<h4 class=\"wp-block-heading\">\u64cd\u4f5c\u9875\u9762\u5143\u7d20<\/h4>\n\n\n\n<p>\u4e00\u65e6\u5b9a\u4f4d\u5230\u5143\u7d20\uff0c\u60a8\u53ef\u4ee5\u8fdb\u884c\u5404\u79cd\u64cd\u4f5c\uff0c\u4f8b\u5982\uff1a<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>\u70b9\u51fb<\/strong>: <code>element.click()<\/code><\/li>\n\n\n\n<li><strong>\u8f93\u5165\u6587\u672c<\/strong>: <code>element.sendKeys('some text')<\/code><\/li>\n\n\n\n<li><strong>\u83b7\u53d6\u6587\u672c<\/strong>: <code>element.getText()<\/code><\/li>\n\n\n\n<li><strong>\u68c0\u67e5\u5c5e\u6027<\/strong>: <code>element.getAttribute('some-attribute')<\/code><\/li>\n<\/ul>\n\n\n\n<h4 class=\"wp-block-heading\">\u4ee3\u7801\u793a\u4f8b<\/h4>\n\n\n\n<p>\u4ee5\u4e0b\u662f\u4e00\u4e2a\u4f7f\u7528\u4e0d\u540c\u5b9a\u4f4d\u7b56\u7565\u548c\u64cd\u4f5c\u7684\u793a\u4f8b\uff1a<\/p>\n\n\n\n<p>typescriptCopy code<\/p>\n\n\n\n<p><code>\/\/ e2e\/sample.spec.ts import { browser, element, by } from 'protractor'; describe('Sample E2E Test', () =&gt; { it('should perform various operations', () =&gt; { \/\/ Navigate to the page browser.get('\/sample'); \/\/ Locate elements by different strategies const buttonById = element(by.id('myButton')); const divByCss = element(by.css('.myDiv')); const inputByModel = element(by.model('myModel')); \/\/ Perform operations buttonById.click(); \/\/ Click the button inputByModel.sendKeys('Hello, world!'); \/\/ Input text into a model divByCss.getText().then(text =&gt; { \/\/ Get text from a div console.log(`Div text is: ${text}`); }); }); });<\/code><\/p>\n\n\n\n<p>\u5728\u8fd9\u4e2a\u793a\u4f8b\u4e2d\uff0c\u6211\u4eec\u9996\u5148\u5bfc\u822a\u5230<code>\/sample<\/code>\u9875\u9762\u3002\u7136\u540e\uff0c\u6211\u4eec\u4f7f\u7528\u4e0d\u540c\u7684\u5b9a\u4f4d\u7b56\u7565\u627e\u5230\u9875\u9762\u4e0a\u7684\u5143\u7d20\uff0c\u5e76\u8fdb\u884c\u70b9\u51fb\u3001\u8f93\u5165\u548c\u83b7\u53d6\u6587\u672c\u7b49\u64cd\u4f5c\u3002<\/p>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<p>\u8fd9\u662f\u7b2c\u516d\u7ae0\u7684\u4e00\u4e2a\u989d\u5916\u5c0f\u8282\uff0c\u4e13\u95e8\u8bb2\u89e3\u9875\u9762\u5143\u7d20\u7684\u5b9a\u4f4d\u548c\u64cd\u4f5c\u3002\u5982\u679c\u60a8\u6709\u4efb\u4f55\u95ee\u9898\u6216\u9700\u8981\u8fdb\u4e00\u6b65\u7684\u6f84\u6e05\uff0c\u8bf7\u968f\u65f6\u544a\u8bc9\u6211\u3002<\/p>\n\n\n\n<figure class=\"wp-block-image\"><img decoding=\"async\" src=\"https:\/\/lh3.googleusercontent.com\/a\/ACg8ocLh4B_kew_Ugyfq9egjobpny7AWdKDF1KOH64Elebx0ZhM=s96-c\" alt=\"User\"\/><\/figure>\n\n\n\n<p>\u8bf7\u8be6\u7ec6\u89e3\u91ca\u7b2c\u4e94\u7ae0\uff1a\u670d\u52a1\u548cHTTP\u6d4b\u8bd5\u7684\u670d\u52a1\u6d4b\u8bd5\u57fa\u7840ChatGPT<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">\u7b2c\u4e94\u7ae0\uff1a\u670d\u52a1\u548cHTTP\u6d4b\u8bd5<\/h2>\n\n\n\n<h3 class=\"wp-block-heading\">5.1 \u670d\u52a1\u6d4b\u8bd5\u57fa\u7840<\/h3>\n\n\n\n<h4 class=\"wp-block-heading\">\u63cf\u8ff0<\/h4>\n\n\n\n<p>\u5728Angular\u5e94\u7528\u4e2d\uff0c\u670d\u52a1\uff08Services\uff09\u662f\u7528\u4e8e\u5c01\u88c5\u4e1a\u52a1\u903b\u8f91\u3001\u6570\u636e\u8bbf\u95ee\u6216\u5176\u4ed6\u53ef\u91cd\u7528\u529f\u80fd\u7684\u7c7b\u3002\u7531\u4e8e\u670d\u52a1\u5728\u6574\u4e2a\u5e94\u7528\u4e2d\u626e\u6f14\u7740\u91cd\u8981\u7684\u89d2\u8272\uff0c\u56e0\u6b64\u5bf9\u5b83\u4eec\u8fdb\u884c\u6d4b\u8bd5\u662f\u81f3\u5173\u91cd\u8981\u7684\u3002<\/p>\n\n\n\n<p>\u670d\u52a1\u6d4b\u8bd5\u901a\u5e38\u5206\u4e3a\u4e24\u7c7b\uff1a<\/p>\n\n\n\n<ol class=\"wp-block-list\">\n<li><strong>\u5355\u5143\u6d4b\u8bd5<\/strong>: \u8fd9\u79cd\u6d4b\u8bd5\u4ec5\u5173\u6ce8\u670d\u52a1\u672c\u8eab\u7684\u529f\u80fd\uff0c\u4e0d\u6d89\u53ca\u4efb\u4f55\u5916\u90e8\u4f9d\u8d56\u3002\u8fd9\u901a\u5e38\u901a\u8fc7\u4f9d\u8d56\u6ce8\u5165\uff08DI\uff09\u548c\u6a21\u62df\uff08Mocking\uff09\u6765\u5b9e\u73b0\u3002<\/li>\n\n\n\n<li><strong>\u96c6\u6210\u6d4b\u8bd5<\/strong>: \u8fd9\u79cd\u6d4b\u8bd5\u6d89\u53ca\u670d\u52a1\u4e0e\u5176\u4f9d\u8d56\uff08\u5982HTTP\u5ba2\u6237\u7aef\u3001\u6570\u636e\u5e93\u7b49\uff09\u4e4b\u95f4\u7684\u4ea4\u4e92\u3002\u8fd9\u901a\u5e38\u9700\u8981\u4e00\u4e2a\u771f\u5b9e\u6216\u6a21\u62df\u7684\u5916\u90e8\u73af\u5883\u3002<\/li>\n<\/ol>\n\n\n\n<h4 class=\"wp-block-heading\">\u4ee3\u7801\u793a\u4f8b<\/h4>\n\n\n\n<h5 class=\"wp-block-heading\">\u5355\u5143\u6d4b\u8bd5<\/h5>\n\n\n\n<p>\u5047\u8bbe\u6211\u4eec\u6709\u4e00\u4e2a\u7b80\u5355\u7684<code>CalculatorService<\/code>\uff0c\u63d0\u4f9b\u52a0\u6cd5\u548c\u51cf\u6cd5\u529f\u80fd\u3002<\/p>\n\n\n\n<p>typescriptCopy code<\/p>\n\n\n\n<p><code>\/\/ calculator.service.ts export class CalculatorService { add(a: number, b: number): number { return a + b; } subtract(a: number, b: number): number { return a - b; } }<\/code><\/p>\n\n\n\n<p>\u5bf9\u5e94\u7684\u5355\u5143\u6d4b\u8bd5\u4ee3\u7801\u53ef\u80fd\u5982\u4e0b\uff1a<\/p>\n\n\n\n<p>typescriptCopy code<\/p>\n\n\n\n<p><code>\/\/ calculator.service.spec.ts import { CalculatorService } from '.\/calculator.service'; describe('CalculatorService', () =&gt; { let service: CalculatorService; beforeEach(() =&gt; { service = new CalculatorService(); }); it('should add two numbers', () =&gt; { const result = service.add(2, 3); expect(result).toBe(5); }); it('should subtract two numbers', () =&gt; { const result = service.subtract(5, 3); expect(result).toBe(2); }); });<\/code><\/p>\n\n\n\n<h5 class=\"wp-block-heading\">\u96c6\u6210\u6d4b\u8bd5<\/h5>\n\n\n\n<p>\u5047\u8bbe\u6211\u4eec\u6709\u4e00\u4e2a<code>UserService<\/code>\uff0c\u5b83\u4f9d\u8d56\u4e8e\u4e00\u4e2aHTTP\u5ba2\u6237\u7aef\u6765\u83b7\u53d6\u7528\u6237\u6570\u636e\u3002<\/p>\n\n\n\n<p>typescriptCopy code<\/p>\n\n\n\n<p><code>\/\/ user.service.ts import { HttpClient } from '@angular\/common\/http'; export class UserService { constructor(private http: HttpClient) {} getUsers() { return this.http.get('\/api\/users'); } }<\/code><\/p>\n\n\n\n<p>\u5bf9\u5e94\u7684\u96c6\u6210\u6d4b\u8bd5\u4ee3\u7801\u53ef\u80fd\u5982\u4e0b\uff1a<\/p>\n\n\n\n<p>typescriptCopy code<\/p>\n\n\n\n<p><code>\/\/ user.service.spec.ts import { TestBed } from '@angular\/core\/testing'; import { HttpClientTestingModule, HttpTestingController } from '@angular\/common\/http\/testing'; import { UserService } from '.\/user.service'; describe('UserService', () =&gt; { let service: UserService; let httpMock: HttpTestingController; beforeEach(() =&gt; { TestBed.configureTestingModule({ imports: [HttpClientTestingModule], providers: [UserService] }); service = TestBed.inject(UserService); httpMock = TestBed.inject(HttpTestingController); }); it('should fetch users', () =&gt; { const mockUsers = [{ name: 'John' }, { name: 'Jane' }]; service.getUsers().subscribe(users =&gt; { expect(users).toEqual(mockUsers); }); const req = httpMock.expectOne('\/api\/users'); req.flush(mockUsers); }); });<\/code><\/p>\n\n\n\n<p>\u5728\u8fd9\u4e2a\u6d4b\u8bd5\u4e2d\uff0c\u6211\u4eec\u4f7f\u7528Angular\u7684<code>HttpClientTestingModule<\/code>\u548c<code>HttpTestingController<\/code>\u6765\u6a21\u62dfHTTP\u8bf7\u6c42\u548c\u54cd\u5e94\u3002<\/p>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<p>\u8fd9\u662f\u7b2c\u4e94\u7ae0\u7b2c\u4e00\u5c0f\u8282\u7684\u5185\u5bb9\uff0c\u4e13\u95e8\u8bb2\u89e3\u670d\u52a1\u6d4b\u8bd5\u7684\u57fa\u7840\u77e5\u8bc6\u3002\u5982\u679c\u60a8\u6709\u4efb\u4f55\u95ee\u9898\u6216\u9700\u8981\u8fdb\u4e00\u6b65\u7684\u6f84\u6e05\uff0c\u8bf7\u968f\u65f6\u544a\u8bc9\u6211\u3002<\/p>\n\n\n\n<figure class=\"wp-block-image\"><img decoding=\"async\" src=\"https:\/\/lh3.googleusercontent.com\/a\/ACg8ocLh4B_kew_Ugyfq9egjobpny7AWdKDF1KOH64Elebx0ZhM=s96-c\" alt=\"User\"\/><\/figure>\n\n\n\n<p>\u8bf7\u8be6\u7ec6\u89e3\u91ca\u7b2c\u4e94\u7ae0\uff1a\u670d\u52a1\u548cHTTP\u6d4b\u8bd5\u7684\u4f7f\u7528Mock\u8fdb\u884c\u670d\u52a1\u6d4b\u8bd5ChatGPT<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">\u7b2c\u4e94\u7ae0\uff1a\u670d\u52a1\u548cHTTP\u6d4b\u8bd5<\/h2>\n\n\n\n<h3 class=\"wp-block-heading\">5.2 \u4f7f\u7528Mock\u8fdb\u884c\u670d\u52a1\u6d4b\u8bd5<\/h3>\n\n\n\n<h4 class=\"wp-block-heading\">\u63cf\u8ff0<\/h4>\n\n\n\n<p>\u5728\u670d\u52a1\u6d4b\u8bd5\u4e2d\uff0c\u6a21\u62df\uff08Mocking\uff09\u662f\u4e00\u79cd\u5e38\u7528\u7684\u6280\u672f\uff0c\u7528\u4e8e\u9694\u79bb\u88ab\u6d4b\u8bd5\u7684\u670d\u52a1\u548c\u5176\u4f9d\u8d56\u3002\u901a\u8fc7\u4f7f\u7528\u6a21\u62df\u5bf9\u8c61\u6765\u4ee3\u66ff\u771f\u5b9e\u7684\u4f9d\u8d56\uff0c\u60a8\u53ef\u4ee5\u66f4\u5bb9\u6613\u5730\u63a7\u5236\u6d4b\u8bd5\u73af\u5883\uff0c\u5e76\u4e13\u6ce8\u4e8e\u6d4b\u8bd5\u670d\u52a1\u672c\u8eab\u7684\u903b\u8f91\u3002<\/p>\n\n\n\n<p>\u6a21\u62df\u901a\u5e38\u7528\u4e8e\u4ee5\u4e0b\u51e0\u79cd\u573a\u666f\uff1a<\/p>\n\n\n\n<ol class=\"wp-block-list\">\n<li><strong>\u6a21\u62dfHTTP\u8bf7\u6c42<\/strong>: \u5f53\u670d\u52a1\u4f9d\u8d56\u4e8e\u5916\u90e8API\u65f6\uff0c\u60a8\u53ef\u4ee5\u4f7f\u7528\u6a21\u62dfHTTP\u5ba2\u6237\u7aef\u6765\u6a21\u62df\u8bf7\u6c42\u548c\u54cd\u5e94\u3002<\/li>\n\n\n\n<li><strong>\u6a21\u62df\u4f9d\u8d56\u670d\u52a1<\/strong>: \u5982\u679c\u670d\u52a1\u4f9d\u8d56\u4e8e\u5176\u4ed6\u670d\u52a1\uff0c\u60a8\u53ef\u4ee5\u521b\u5efa\u8fd9\u4e9b\u670d\u52a1\u7684\u6a21\u62df\u7248\u672c\u3002<\/li>\n\n\n\n<li><strong>\u6a21\u62df\u6570\u636e\u5e93\u64cd\u4f5c<\/strong>: \u5f53\u670d\u52a1\u9700\u8981\u4e0e\u6570\u636e\u5e93\u4ea4\u4e92\u65f6\uff0c\u60a8\u53ef\u4ee5\u6a21\u62df\u6570\u636e\u5e93\u64cd\u4f5c\u3002<\/li>\n<\/ol>\n\n\n\n<h4 class=\"wp-block-heading\">\u4ee3\u7801\u793a\u4f8b<\/h4>\n\n\n\n<h5 class=\"wp-block-heading\">\u6a21\u62dfHTTP\u8bf7\u6c42<\/h5>\n\n\n\n<p>Angular\u63d0\u4f9b\u4e86<code>HttpClientTestingModule<\/code>\u548c<code>HttpTestingController<\/code>\uff0c\u7528\u4e8e\u6a21\u62dfHTTP\u8bf7\u6c42\u3002<\/p>\n\n\n\n<p>typescriptCopy code<\/p>\n\n\n\n<p><code>\/\/ user.service.spec.ts import { TestBed } from '@angular\/core\/testing'; import { HttpClientTestingModule, HttpTestingController } from '@angular\/common\/http\/testing'; import { UserService } from '.\/user.service'; describe('UserService with Mock Http', () =&gt; { let service: UserService; let httpMock: HttpTestingController; beforeEach(() =&gt; { TestBed.configureTestingModule({ imports: [HttpClientTestingModule], providers: [UserService] }); service = TestBed.inject(UserService); httpMock = TestBed.inject(HttpTestingController); }); it('should fetch users', () =&gt; { const mockUsers = [{ name: 'John' }, { name: 'Jane' }]; service.getUsers().subscribe(users =&gt; { expect(users).toEqual(mockUsers); }); const req = httpMock.expectOne('\/api\/users'); req.flush(mockUsers); }); });<\/code><\/p>\n\n\n\n<h5 class=\"wp-block-heading\">\u6a21\u62df\u4f9d\u8d56\u670d\u52a1<\/h5>\n\n\n\n<p>\u5047\u8bbe<code>OrderService<\/code>\u4f9d\u8d56\u4e8e\u4e00\u4e2a<code>PaymentService<\/code>\uff0c\u6211\u4eec\u53ef\u4ee5\u521b\u5efa\u4e00\u4e2a\u6a21\u62df\u7684<code>PaymentService<\/code>\u3002<\/p>\n\n\n\n<p>typescriptCopy code<\/p>\n\n\n\n<p><code>\/\/ Mock PaymentService const mockPaymentService = { processPayment: jasmine.createSpy('processPayment').and.returnValue(true) }; \/\/ order.service.spec.ts import { OrderService } from '.\/order.service'; describe('OrderService with Mock Service', () =&gt; { let service: OrderService; beforeEach(() =&gt; { service = new OrderService(mockPaymentService); }); it('should complete the order if payment is successful', () =&gt; { const result = service.completeOrder(100); expect(result).toBe(true); expect(mockPaymentService.processPayment).toHaveBeenCalledWith(100); }); });<\/code><\/p>\n\n\n\n<p>\u5728\u8fd9\u4e2a\u4f8b\u5b50\u4e2d\uff0c\u6211\u4eec\u4f7f\u7528Jasmine\u7684<code>createSpy<\/code>\u65b9\u6cd5\u6765\u521b\u5efa\u4e00\u4e2a\u6a21\u62df\u7684<code>processPayment<\/code>\u65b9\u6cd5\uff0c\u5e76\u8bbe\u7f6e\u5176\u8fd4\u56de\u503c\u4e3a<code>true<\/code>\u3002<\/p>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<p>\u8fd9\u662f\u7b2c\u4e94\u7ae0\u7b2c\u4e8c\u5c0f\u8282\u7684\u5185\u5bb9\uff0c\u4e13\u95e8\u8bb2\u89e3\u5982\u4f55\u4f7f\u7528\u6a21\u62df\u8fdb\u884c\u670d\u52a1\u6d4b\u8bd5\u3002\u5982\u679c\u60a8\u6709\u4efb\u4f55\u95ee\u9898\u6216\u9700\u8981\u8fdb\u4e00\u6b65\u7684\u6f84\u6e05\uff0c\u8bf7\u968f\u65f6\u544a\u8bc9\u6211\u3002<\/p>\n\n\n\n<figure class=\"wp-block-image\"><img decoding=\"async\" src=\"https:\/\/lh3.googleusercontent.com\/a\/ACg8ocLh4B_kew_Ugyfq9egjobpny7AWdKDF1KOH64Elebx0ZhM=s96-c\" alt=\"User\"\/><\/figure>\n\n\n\n<p>\u8bf7\u8be6\u7ec6\u89e3\u91ca\u7b2c\u4e94\u7ae0\uff1a\u670d\u52a1\u548cHTTP\u6d4b\u8bd5\u7684HTTP\u8bf7\u6c42\u6d4b\u8bd5ChatGPT<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">\u7b2c\u4e94\u7ae0\uff1a\u670d\u52a1\u548cHTTP\u6d4b\u8bd5<\/h2>\n\n\n\n<h3 class=\"wp-block-heading\">5.3 HTTP\u8bf7\u6c42\u6d4b\u8bd5<\/h3>\n\n\n\n<h4 class=\"wp-block-heading\">\u63cf\u8ff0<\/h4>\n\n\n\n<p>\u5728\u8bb8\u591aAngular\u5e94\u7528\u4e2d\uff0c\u670d\u52a1\u901a\u5e38\u9700\u8981\u901a\u8fc7HTTP\u8bf7\u6c42\u4e0e\u540e\u7aefAPI\u8fdb\u884c\u4ea4\u4e92\u3002\u56e0\u6b64\uff0c\u6d4b\u8bd5\u8fd9\u4e9bHTTP\u8bf7\u6c42\u4ee5\u786e\u4fdd\u5b83\u4eec\u7684\u6b63\u786e\u6027\u548c\u53ef\u9760\u6027\u662f\u975e\u5e38\u91cd\u8981\u7684\u3002Angular\u63d0\u4f9b\u4e86\u4e00\u5957\u5de5\u5177\uff0c\u7279\u522b\u662f<code>HttpClientTestingModule<\/code>\u548c<code>HttpTestingController<\/code>\uff0c\u7528\u4e8e\u6a21\u62df\u548c\u6d4b\u8bd5HTTP\u8bf7\u6c42\u3002<\/p>\n\n\n\n<h4 class=\"wp-block-heading\">\u4ee3\u7801\u793a\u4f8b<\/h4>\n\n\n\n<h5 class=\"wp-block-heading\">\u4f7f\u7528<code>HttpClientTestingModule<\/code>\u548c<code>HttpTestingController<\/code><\/h5>\n\n\n\n<p>\u5047\u8bbe\u6211\u4eec\u6709\u4e00\u4e2a<code>TodoService<\/code>\uff0c\u5b83\u6709\u4e00\u4e2a\u65b9\u6cd5<code>getTodos<\/code>\uff0c\u7528\u4e8e\u4ece\u540e\u7aefAPI\u83b7\u53d6\u5f85\u529e\u4e8b\u9879\u5217\u8868\u3002<\/p>\n\n\n\n<p>typescriptCopy code<\/p>\n\n\n\n<p><code>\/\/ todo.service.ts import { HttpClient } from '@angular\/common\/http'; import { Injectable } from '@angular\/core'; @Injectable({ providedIn: 'root' }) export class TodoService { constructor(private http: HttpClient) {} getTodos() { return this.http.get('\/api\/todos'); } }<\/code><\/p>\n\n\n\n<p>\u6d4b\u8bd5\u4ee3\u7801\u5982\u4e0b\uff1a<\/p>\n\n\n\n<p>typescriptCopy code<\/p>\n\n\n\n<p><code>\/\/ todo.service.spec.ts import { TestBed } from '@angular\/core\/testing'; import { HttpClientTestingModule, HttpTestingController } from '@angular\/common\/http\/testing'; import { TodoService } from '.\/todo.service'; describe('TodoService', () =&gt; { let service: TodoService; let httpMock: HttpTestingController; beforeEach(() =&gt; { TestBed.configureTestingModule({ imports: [HttpClientTestingModule], providers: [TodoService] }); service = TestBed.inject(TodoService); httpMock = TestBed.inject(HttpTestingController); }); it('should fetch todos', () =&gt; { const mockTodos = [ { id: 1, title: 'Buy groceries' }, { id: 2, title: 'Clean the house' } ]; service.getTodos().subscribe(todos =&gt; { expect(todos).toEqual(mockTodos); }); const req = httpMock.expectOne('\/api\/todos'); expect(req.request.method).toBe('GET'); req.flush(mockTodos); }); afterEach(() =&gt; { httpMock.verify(); }); });<\/code><\/p>\n\n\n\n<p>\u5728\u8fd9\u4e2a\u6d4b\u8bd5\u4e2d\uff0c\u6211\u4eec\u9996\u5148\u5bfc\u5165\u4e86<code>HttpClientTestingModule<\/code>\u548c<code>HttpTestingController<\/code>\uff0c\u5e76\u5728<code>beforeEach<\/code>\u94a9\u5b50\u4e2d\u8fdb\u884c\u4e86\u521d\u59cb\u5316\u3002<\/p>\n\n\n\n<p>\u7136\u540e\uff0c\u5728\u6d4b\u8bd5\u7528\u4f8b\u4e2d\uff0c\u6211\u4eec\u8ba2\u9605\u4e86<code>getTodos<\/code>\u65b9\u6cd5\u8fd4\u56de\u7684Observable\uff0c\u5e76\u4f7f\u7528<code>expect<\/code>\u51fd\u6570\u6765\u9a8c\u8bc1\u8fd4\u56de\u7684\u6570\u636e\u3002<\/p>\n\n\n\n<p>\u6700\u540e\uff0c\u6211\u4eec\u4f7f\u7528<code>HttpTestingController<\/code>\u7684<code>expectOne<\/code>\u65b9\u6cd5\u6765\u6355\u83b7\u53d1\u51fa\u7684HTTP\u8bf7\u6c42\uff0c\u5e76\u4f7f\u7528<code>flush<\/code>\u65b9\u6cd5\u6765\u6a21\u62df\u4e00\u4e2a\u54cd\u5e94\u3002<\/p>\n\n\n\n<p><code>afterEach<\/code>\u94a9\u5b50\u4e2d\u7684<code>httpMock.verify()<\/code>\u786e\u4fdd\u6ca1\u6709\u672a\u5904\u7406\u7684HTTP\u8bf7\u6c42\u3002<\/p>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<p>\u8fd9\u662f\u7b2c\u4e94\u7ae0\u7b2c\u4e09\u5c0f\u8282\u7684\u5185\u5bb9\uff0c\u4e13\u95e8\u8bb2\u89e3HTTP\u8bf7\u6c42\u7684\u6d4b\u8bd5\u3002\u5982\u679c\u60a8\u6709\u4efb\u4f55\u95ee\u9898\u6216\u9700\u8981\u8fdb\u4e00\u6b65\u7684\u6f84\u6e05\uff0c\u8bf7\u968f\u65f6\u544a\u8bc9\u6211\u3002<\/p>\n\n\n\n<figure class=\"wp-block-image\"><img decoding=\"async\" src=\"https:\/\/lh3.googleusercontent.com\/a\/ACg8ocLh4B_kew_Ugyfq9egjobpny7AWdKDF1KOH64Elebx0ZhM=s96-c\" alt=\"User\"\/><\/figure>\n\n\n\n<p>\u8bf7\u8be6\u7ec6\u89e3\u91ca\u7b2c\u4e03\u7ae0\uff1a\u6d4b\u8bd5\u8986\u76d6\u7387\u548c\u62a5\u544a\u7684\u751f\u6210\u6d4b\u8bd5\u8986\u76d6\u7387\u62a5\u544aChatGPT<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">\u7b2c\u4e03\u7ae0\uff1a\u6d4b\u8bd5\u8986\u76d6\u7387\u548c\u62a5\u544a<\/h2>\n\n\n\n<h3 class=\"wp-block-heading\">7.1 \u751f\u6210\u6d4b\u8bd5\u8986\u76d6\u7387\u62a5\u544a<\/h3>\n\n\n\n<h4 class=\"wp-block-heading\">\u63cf\u8ff0<\/h4>\n\n\n\n<p>\u6d4b\u8bd5\u8986\u76d6\u7387\u662f\u4e00\u4e2a\u91cd\u8981\u7684\u6307\u6807\uff0c\u7528\u4e8e\u8861\u91cf\u4ee3\u7801\u6709\u591a\u5c11\u88ab\u6d4b\u8bd5\u8986\u76d6\u3002\u5b83\u53ef\u4ee5\u5e2e\u52a9\u60a8\u8bc6\u522b\u4ee3\u7801\u4e2d\u672a\u88ab\u6d4b\u8bd5\u7684\u533a\u57df\uff0c\u4ece\u800c\u6539\u8fdb\u6d4b\u8bd5\u8d28\u91cf\u3002\u5728Angular\u9879\u76ee\u4e2d\uff0c\u60a8\u53ef\u4ee5\u4f7f\u7528Karma\u7684\u8986\u76d6\u7387\u63d2\u4ef6\uff08\u901a\u5e38\u662f<code>karma-coverage<\/code>\uff09\u6765\u751f\u6210\u8986\u76d6\u7387\u62a5\u544a\u3002<\/p>\n\n\n\n<p>\u8986\u76d6\u7387\u62a5\u544a\u901a\u5e38\u5305\u62ec\u4ee5\u4e0b\u51e0\u4e2a\u65b9\u9762\uff1a<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>\u884c\u8986\u76d6\u7387<\/strong>: \u88ab\u6d4b\u8bd5\u8986\u76d6\u7684\u4ee3\u7801\u884c\u6570\u4e0e\u603b\u4ee3\u7801\u884c\u6570\u7684\u6bd4\u4f8b\u3002<\/li>\n\n\n\n<li><strong>\u5206\u652f\u8986\u76d6\u7387<\/strong>: \u88ab\u6d4b\u8bd5\u8986\u76d6\u7684\u4ee3\u7801\u5206\u652f\uff08\u5982<code>if<\/code>\u548c<code>else<\/code>\uff09\u4e0e\u603b\u5206\u652f\u6570\u7684\u6bd4\u4f8b\u3002<\/li>\n\n\n\n<li><strong>\u51fd\u6570\u8986\u76d6\u7387<\/strong>: \u88ab\u6d4b\u8bd5\u8986\u76d6\u7684\u51fd\u6570\u4e0e\u603b\u51fd\u6570\u6570\u7684\u6bd4\u4f8b\u3002<\/li>\n<\/ul>\n\n\n\n<h4 class=\"wp-block-heading\">\u4ee3\u7801\u793a\u4f8b<\/h4>\n\n\n\n<h5 class=\"wp-block-heading\">\u914d\u7f6eKarma<\/h5>\n\n\n\n<p>\u8981\u751f\u6210\u8986\u76d6\u7387\u62a5\u544a\uff0c\u60a8\u9700\u8981\u5728Karma\u914d\u7f6e\u6587\u4ef6\uff08\u901a\u5e38\u662f<code>karma.conf.js<\/code>\uff09\u4e2d\u6dfb\u52a0\u4e00\u4e9b\u8bbe\u7f6e\u3002<\/p>\n\n\n\n<p>javascriptCopy code<\/p>\n\n\n\n<p><code>\/\/ karma.conf.js module.exports = function(config) { config.set({ \/\/ ...other settings reporters: ['progress', 'coverage'], coverageReporter: { dir: '.\/coverage\/', reporters: [ { type: 'html', subdir: 'report-html' }, { type: 'lcov', subdir: 'report-lcov' } ] } }); };<\/code><\/p>\n\n\n\n<p>\u5728\u8fd9\u4e2a\u914d\u7f6e\u4e2d\uff0c\u6211\u4eec\u6dfb\u52a0\u4e86<code>coverage<\/code>\u5230<code>reporters<\/code>\u6570\u7ec4\uff0c\u5e76\u8bbe\u7f6e\u4e86<code>coverageReporter<\/code>\u9009\u9879\u3002\u8fd9\u5c06\u751f\u6210\u4e24\u79cd\u7c7b\u578b\u7684\u8986\u76d6\u7387\u62a5\u544a\uff1aHTML\u548cLCOV\u3002<\/p>\n\n\n\n<h5 class=\"wp-block-heading\">\u8fd0\u884c\u6d4b\u8bd5<\/h5>\n\n\n\n<p>\u8981\u751f\u6210\u8986\u76d6\u7387\u62a5\u544a\uff0c\u60a8\u901a\u5e38\u9700\u8981\u8fd0\u884c\u4ee5\u4e0b\u547d\u4ee4\uff1a<\/p>\n\n\n\n<p>bashCopy code<\/p>\n\n\n\n<p><code>ng test --code-coverage<\/code><\/p>\n\n\n\n<p>\u8fd9\u5c06\u8fd0\u884c\u6240\u6709\u6d4b\u8bd5\uff0c\u5e76\u5728<code>.\/coverage\/<\/code>\u76ee\u5f55\u4e0b\u751f\u6210\u8986\u76d6\u7387\u62a5\u544a\u3002<\/p>\n\n\n\n<h5 class=\"wp-block-heading\">\u67e5\u770b\u62a5\u544a<\/h5>\n\n\n\n<p>\u4e00\u65e6\u751f\u6210\u4e86\u8986\u76d6\u7387\u62a5\u544a\uff0c\u60a8\u53ef\u4ee5\u6253\u5f00<code>.\/coverage\/report-html\/index.html<\/code>\u6587\u4ef6\u5728\u6d4f\u89c8\u5668\u4e2d\u67e5\u770b\u8be6\u7ec6\u7684\u62a5\u544a\u3002<\/p>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<p>\u8fd9\u662f\u7b2c\u4e03\u7ae0\u7b2c\u4e00\u5c0f\u8282\u7684\u5185\u5bb9\uff0c\u4e13\u95e8\u8bb2\u89e3\u5982\u4f55\u751f\u6210\u6d4b\u8bd5\u8986\u76d6\u7387\u62a5\u544a\u3002\u5982\u679c\u60a8\u6709\u4efb\u4f55\u95ee\u9898\u6216\u9700\u8981\u8fdb\u4e00\u6b65\u7684\u6f84\u6e05\uff0c\u8bf7\u968f\u65f6\u544a\u8bc9\u6211\u3002<\/p>\n\n\n\n<figure class=\"wp-block-image\"><img decoding=\"async\" src=\"https:\/\/lh3.googleusercontent.com\/a\/ACg8ocLh4B_kew_Ugyfq9egjobpny7AWdKDF1KOH64Elebx0ZhM=s96-c\" alt=\"User\"\/><\/figure>\n\n\n\n<p>\u8bf7\u8be6\u7ec6\u89e3\u91ca\u7b2c\u4e03\u7ae0\uff1a\u6d4b\u8bd5\u8986\u76d6\u7387\u548c\u62a5\u544a\u7684\u89e3\u8bfb\u6d4b\u8bd5\u8986\u76d6\u7387\u62a5\u544aChatGPT<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">\u7b2c\u4e03\u7ae0\uff1a\u6d4b\u8bd5\u8986\u76d6\u7387\u548c\u62a5\u544a<\/h2>\n\n\n\n<h3 class=\"wp-block-heading\">7.2 \u89e3\u8bfb\u6d4b\u8bd5\u8986\u76d6\u7387\u62a5\u544a<\/h3>\n\n\n\n<h4 class=\"wp-block-heading\">\u63cf\u8ff0<\/h4>\n\n\n\n<p>\u751f\u6210\u6d4b\u8bd5\u8986\u76d6\u7387\u62a5\u544a\u540e\uff0c\u4e0b\u4e00\u6b65\u662f\u7406\u89e3\u548c\u89e3\u8bfb\u8fd9\u4e9b\u62a5\u544a\u3002\u6d4b\u8bd5\u8986\u76d6\u7387\u62a5\u544a\u901a\u5e38\u63d0\u4f9b\u4e86\u591a\u79cd\u6307\u6807\uff0c\u5305\u62ec\u884c\u8986\u76d6\u7387\u3001\u51fd\u6570\u8986\u76d6\u7387\u548c\u5206\u652f\u8986\u76d6\u7387\u7b49\u3002\u8fd9\u4e9b\u6307\u6807\u6709\u52a9\u4e8e\u60a8\u4e86\u89e3\u54ea\u4e9b\u4ee3\u7801\u5df2\u7ecf\u88ab\u6d4b\u8bd5\u8986\u76d6\uff0c\u4ee5\u53ca\u54ea\u4e9b\u533a\u57df\u53ef\u80fd\u9700\u8981\u66f4\u591a\u7684\u5173\u6ce8\u3002<\/p>\n\n\n\n<h4 class=\"wp-block-heading\">\u5982\u4f55\u89e3\u8bfb\u62a5\u544a<\/h4>\n\n\n\n<ol class=\"wp-block-list\">\n<li><strong>\u884c\u8986\u76d6\u7387\uff08Line Coverage\uff09<\/strong>: \u8fd9\u4e2a\u6307\u6807\u663e\u793a\u4e86\u6e90\u4ee3\u7801\u4e2d\u6709\u591a\u5c11\u884c\u88ab\u6d4b\u8bd5\u8986\u76d6\u3002\u5982\u679c\u67d0\u4e00\u884c\u4ee3\u7801\u6ca1\u6709\u88ab\u4efb\u4f55\u6d4b\u8bd5\u7528\u4f8b\u89e6\u53ca\uff0c\u90a3\u4e48\u60a8\u53ef\u80fd\u9700\u8981\u8003\u8651\u6dfb\u52a0\u66f4\u591a\u7684\u6d4b\u8bd5\u3002<\/li>\n\n\n\n<li><strong>\u51fd\u6570\u8986\u76d6\u7387\uff08Function Coverage\uff09<\/strong>: \u8fd9\u4e2a\u6307\u6807\u663e\u793a\u4e86\u6709\u591a\u5c11\u4e2a\u51fd\u6570\u6216\u65b9\u6cd5\u88ab\u8c03\u7528\u3002\u5982\u679c\u67d0\u4e2a\u51fd\u6570\u6ca1\u6709\u88ab\u8c03\u7528\uff0c\u8fd9\u53ef\u80fd\u610f\u5473\u7740\u8be5\u51fd\u6570\u7684\u529f\u80fd\u6ca1\u6709\u88ab\u5145\u5206\u6d4b\u8bd5\u3002<\/li>\n\n\n\n<li><strong>\u5206\u652f\u8986\u76d6\u7387\uff08Branch Coverage\uff09<\/strong>: \u8fd9\u4e2a\u6307\u6807\u5173\u6ce8<code>if<\/code>\u3001<code>else<\/code>\u548c<code>switch<\/code>\u7b49\u63a7\u5236\u7ed3\u6784\u3002\u5982\u679c\u67d0\u4e2a\u5206\u652f\u6ca1\u6709\u88ab\u6d4b\u8bd5\u8986\u76d6\uff0c\u60a8\u5e94\u8be5\u8003\u8651\u6dfb\u52a0\u9488\u5bf9\u8be5\u5206\u652f\u7684\u6d4b\u8bd5\u3002<\/li>\n\n\n\n<li><strong>\u6587\u4ef6\u7ea7\u522b\u7684\u8986\u76d6\u7387<\/strong>: \u62a5\u544a\u901a\u5e38\u4f1a\u5217\u51fa\u6bcf\u4e2a\u6587\u4ef6\u7684\u8986\u76d6\u7387\uff0c\u8fd9\u6709\u52a9\u4e8e\u60a8\u4e86\u89e3\u54ea\u4e9b\u6587\u4ef6\u6216\u6a21\u5757\u53ef\u80fd\u9700\u8981\u66f4\u591a\u7684\u6d4b\u8bd5\u3002<\/li>\n<\/ol>\n\n\n\n<h4 class=\"wp-block-heading\">\u793a\u4f8b<\/h4>\n\n\n\n<p>\u5047\u8bbe\u60a8\u6709\u4ee5\u4e0b\u7684\u8986\u76d6\u7387\u62a5\u544a\u6458\u8981\uff1a<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>\u884c\u8986\u76d6\u7387\uff1a85%<\/li>\n\n\n\n<li>\u51fd\u6570\u8986\u76d6\u7387\uff1a80%<\/li>\n\n\n\n<li>\u5206\u652f\u8986\u76d6\u7387\uff1a75%<\/li>\n<\/ul>\n\n\n\n<p>\u5728\u8fd9\u79cd\u60c5\u51b5\u4e0b\uff1a<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>\u884c\u8986\u76d6\u7387\u76f8\u5bf9\u8f83\u9ad8\uff0c\u4f46\u4ecd\u670915%\u7684\u4ee3\u7801\u6ca1\u6709\u88ab\u8986\u76d6\u3002\u60a8\u5e94\u8be5\u67e5\u770b\u54ea\u4e9b\u5177\u4f53\u884c\u6ca1\u6709\u88ab\u8986\u76d6\uff0c\u5e76\u8003\u8651\u6dfb\u52a0\u66f4\u591a\u6d4b\u8bd5\u3002<\/li>\n\n\n\n<li>\u51fd\u6570\u548c\u5206\u652f\u8986\u76d6\u7387\u7a0d\u4f4e\uff0c\u8fd9\u610f\u5473\u7740\u6709\u4e00\u4e9b\u51fd\u6570\u548c\u903b\u8f91\u5206\u652f\u6ca1\u6709\u88ab\u6d4b\u8bd5\u3002\u60a8\u5e94\u8be5\u4e13\u6ce8\u4e8e\u8fd9\u4e9b\u533a\u57df\uff0c\u4ee5\u63d0\u9ad8\u8986\u76d6\u7387\u3002<\/li>\n<\/ul>\n\n\n\n<h4 class=\"wp-block-heading\">\u6ce8\u610f\u4e8b\u9879<\/h4>\n\n\n\n<ul class=\"wp-block-list\">\n<li>\u9ad8\u8986\u76d6\u7387\u5e76\u4e0d\u4e00\u5b9a\u610f\u5473\u7740\u4ee3\u7801\u8d28\u91cf\u9ad8\u6216\u6ca1\u6709bug\uff0c\u4f46\u5b83\u53ef\u4ee5\u4f5c\u4e3a\u4ee3\u7801\u8d28\u91cf\u7684\u4e00\u4e2a\u53c2\u8003\u6307\u6807\u3002<\/li>\n\n\n\n<li>\u8ffd\u6c42100%\u7684\u8986\u76d6\u7387\u901a\u5e38\u662f\u4e0d\u73b0\u5b9e\u7684\uff0c\u91cd\u8981\u7684\u662f\u627e\u5230\u4e00\u4e2a\u5408\u9002\u7684\u8986\u76d6\u7387\u76ee\u6807\uff0c\u5e76\u4e13\u6ce8\u4e8e\u5173\u952e\u529f\u80fd\u548c\u903b\u8f91\u7684\u6d4b\u8bd5\u3002<\/li>\n<\/ul>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<p>\u8fd9\u662f\u7b2c\u4e03\u7ae0\u7b2c\u4e8c\u5c0f\u8282\u7684\u5185\u5bb9\uff0c\u4e13\u95e8\u8bb2\u89e3\u5982\u4f55\u89e3\u8bfb\u6d4b\u8bd5\u8986\u76d6\u7387\u62a5\u544a\u3002\u5982\u679c\u60a8\u6709\u4efb\u4f55\u95ee\u9898\u6216\u9700\u8981\u8fdb\u4e00\u6b65\u7684\u6f84\u6e05\uff0c\u8bf7\u968f\u65f6\u544a\u8bc9\u6211\u3002<\/p>\n\n\n\n<figure class=\"wp-block-image\"><img decoding=\"async\" src=\"https:\/\/lh3.googleusercontent.com\/a\/ACg8ocLh4B_kew_Ugyfq9egjobpny7AWdKDF1KOH64Elebx0ZhM=s96-c\" alt=\"User\"\/><\/figure>\n\n\n\n<p>\u8bf7\u8be6\u7ec6\u89e3\u91ca\u7b2c\u4e03\u7ae0\uff1a\u6d4b\u8bd5\u8986\u76d6\u7387\u548c\u62a5\u544a\u7684\u63d0\u9ad8\u6d4b\u8bd5\u8986\u76d6\u7387ChatGPT<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">\u7b2c\u4e03\u7ae0\uff1a\u6d4b\u8bd5\u8986\u76d6\u7387\u548c\u62a5\u544a<\/h2>\n\n\n\n<h3 class=\"wp-block-heading\">7.3 \u63d0\u9ad8\u6d4b\u8bd5\u8986\u76d6\u7387<\/h3>\n\n\n\n<h4 class=\"wp-block-heading\">\u63cf\u8ff0<\/h4>\n\n\n\n<p>\u63d0\u9ad8\u6d4b\u8bd5\u8986\u76d6\u7387\u662f\u4e00\u4e2a\u6301\u7eed\u7684\u8fc7\u7a0b\uff0c\u9700\u8981\u60a8\u4e0d\u65ad\u5730\u5ba1\u67e5\u4ee3\u7801\u548c\u6dfb\u52a0\u65b0\u7684\u6d4b\u8bd5\u7528\u4f8b\u3002\u4e00\u4e2a\u9ad8\u7684\u6d4b\u8bd5\u8986\u76d6\u7387\u53ef\u4ee5\u63d0\u4f9b\u66f4\u591a\u7684\u4fe1\u5fc3\uff0c\u786e\u4fdd\u60a8\u7684\u4ee3\u7801\u662f\u5065\u58ee\u548c\u53ef\u9760\u7684\u3002\u4ee5\u4e0b\u662f\u4e00\u4e9b\u5e38\u7528\u7684\u65b9\u6cd5\u548c\u6700\u4f73\u5b9e\u8df5\uff0c\u7528\u4e8e\u63d0\u9ad8\u6d4b\u8bd5\u8986\u76d6\u7387\u3002<\/p>\n\n\n\n<h4 class=\"wp-block-heading\">\u65b9\u6cd5\u548c\u6700\u4f73\u5b9e\u8df5<\/h4>\n\n\n\n<ol class=\"wp-block-list\">\n<li><strong>\u9488\u5bf9\u672a\u8986\u76d6\u4ee3\u7801\u7f16\u5199\u6d4b\u8bd5<\/strong>: \u4f7f\u7528\u8986\u76d6\u7387\u62a5\u544a\u6765\u8bc6\u522b\u672a\u88ab\u6d4b\u8bd5\u7684\u4ee3\u7801\u884c\u3001\u51fd\u6570\u548c\u5206\u652f\uff0c\u7136\u540e\u9488\u5bf9\u8fd9\u4e9b\u533a\u57df\u7f16\u5199\u65b0\u7684\u6d4b\u8bd5\u3002<\/li>\n\n\n\n<li><strong>\u589e\u52a0\u8fb9\u754c\u6d4b\u8bd5<\/strong>: \u5bf9\u4e8e\u6d89\u53ca\u6761\u4ef6\u5224\u65ad\u3001\u5faa\u73af\u548c\u9012\u5f52\u7b49\u7684\u4ee3\u7801\uff0c\u6dfb\u52a0\u8fb9\u754c\u6d4b\u8bd5\u7528\u4f8b\u3002\u8fd9\u901a\u5e38\u5305\u62ec\u6d4b\u8bd5\u6781\u9650\u503c\u3001\u7a7a\u503c\u548c\u975e\u6cd5\u8f93\u5165\u3002<\/li>\n\n\n\n<li><strong>\u4f7f\u7528\u53c2\u6570\u5316\u6d4b\u8bd5<\/strong>: \u901a\u8fc7\u4f7f\u7528\u76f8\u540c\u7684\u6d4b\u8bd5\u903b\u8f91\u4f46\u4e0d\u540c\u7684\u8f93\u5165\u503c\u6765\u8fd0\u884c\u591a\u4e2a\u6d4b\u8bd5\uff0c\u60a8\u53ef\u4ee5\u66f4\u6709\u6548\u5730\u8986\u76d6\u66f4\u591a\u7684\u4ee3\u7801\u3002<\/li>\n\n\n\n<li><strong>\u6a21\u62df\u5916\u90e8\u4f9d\u8d56<\/strong>: \u4f7f\u7528\u6a21\u62df\uff08Mocking\uff09\u548c\u5b58\u6839\uff08Stubbing\uff09\u6765\u9694\u79bb\u5916\u90e8\u4f9d\u8d56\uff0c\u5982\u6570\u636e\u5e93\u6216API\uff0c\u4ee5\u4fbf\u66f4\u5168\u9762\u5730\u6d4b\u8bd5\u60a8\u7684\u4ee3\u7801\u3002<\/li>\n\n\n\n<li><strong>\u4ee3\u7801\u91cd\u6784<\/strong>: \u6709\u65f6\u5019\uff0c\u4ee3\u7801\u7ed3\u6784\u53ef\u80fd\u4e0d\u5229\u4e8e\u6d4b\u8bd5\u3002\u5728\u8fd9\u79cd\u60c5\u51b5\u4e0b\uff0c\u8003\u8651\u8fdb\u884c\u4ee3\u7801\u91cd\u6784\u4ee5\u4f7f\u5176\u66f4\u6613\u4e8e\u6d4b\u8bd5\u3002<\/li>\n\n\n\n<li><strong>\u6301\u7eed\u96c6\u6210\u548c\u81ea\u52a8\u5316<\/strong>: \u5c06\u6d4b\u8bd5\u548c\u8986\u76d6\u7387\u68c0\u67e5\u96c6\u6210\u5230\u6301\u7eed\u96c6\u6210\u6d41\u7a0b\u4e2d\uff0c\u4ee5\u786e\u4fdd\u65b0\u6dfb\u52a0\u6216\u4fee\u6539\u7684\u4ee3\u7801\u59cb\u7ec8\u88ab\u6d4b\u8bd5\u3002<\/li>\n<\/ol>\n\n\n\n<h4 class=\"wp-block-heading\">\u4ee3\u7801\u793a\u4f8b<\/h4>\n\n\n\n<p>\u5047\u8bbe\u60a8\u6709\u4e00\u4e2a\u51fd\u6570\uff0c\u7528\u4e8e\u8ba1\u7b97\u4e24\u4e2a\u6570\u7684\u9664\u6cd5\uff1a<\/p>\n\n\n\n<p>typescriptCopy code<\/p>\n\n\n\n<p><code>\/\/ math.service.ts export class MathService { divide(a: number, b: number): number { if (b === 0) { throw new Error('Cannot divide by zero'); } return a \/ b; } }<\/code><\/p>\n\n\n\n<p>\u60a8\u53ef\u4ee5\u6dfb\u52a0\u4ee5\u4e0b\u6d4b\u8bd5\u7528\u4f8b\u4ee5\u63d0\u9ad8\u8986\u76d6\u7387\uff1a<\/p>\n\n\n\n<p>typescriptCopy code<\/p>\n\n\n\n<p><code>\/\/ math.service.spec.ts import { MathService } from '.\/math.service'; describe('MathService', () =&gt; { let service: MathService; beforeEach(() =&gt; { service = new MathService(); }); it('should divide two numbers', () =&gt; { expect(service.divide(4, 2)).toBe(2); }); it('should throw an error when dividing by zero', () =&gt; { expect(() =&gt; service.divide(4, 0)).toThrowError('Cannot divide by zero'); }); });<\/code><\/p>\n\n\n\n<p>\u8fd9\u4e9b\u6d4b\u8bd5\u7528\u4f8b\u8986\u76d6\u4e86\u51fd\u6570\u7684\u6b63\u5e38\u884c\u4e3a\u548c\u5f02\u5e38\u60c5\u51b5\uff0c\u4ece\u800c\u63d0\u9ad8\u4e86\u6d4b\u8bd5\u8986\u76d6\u7387\u3002<\/p>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<p>\u8fd9\u662f\u7b2c\u4e03\u7ae0\u7b2c\u4e09\u5c0f\u8282\u7684\u5185\u5bb9\uff0c\u4e13\u95e8\u8bb2\u89e3\u5982\u4f55\u63d0\u9ad8\u6d4b\u8bd5\u8986\u76d6\u7387\u3002\u5982\u679c\u60a8\u6709\u4efb\u4f55\u95ee\u9898\u6216\u9700\u8981\u8fdb\u4e00\u6b65\u7684\u6f84\u6e05\uff0c\u8bf7\u968f\u65f6\u544a\u8bc9\u6211\u3002<\/p>\n\n\n\n<figure class=\"wp-block-image\"><img decoding=\"async\" src=\"https:\/\/lh3.googleusercontent.com\/a\/ACg8ocLh4B_kew_Ugyfq9egjobpny7AWdKDF1KOH64Elebx0ZhM=s96-c\" alt=\"User\"\/><\/figure>\n\n\n\n<p>\u8bf7\u8be6\u7ec6\u89e3\u91ca\u7b2c\u516b\u7ae0\uff1a\u6301\u7eed\u96c6\u6210\u4e0e\u6d4b\u8bd5\u7684\u4ec0\u4e48\u662f\u6301\u7eed\u96c6\u6210ChatGPT<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">\u7b2c\u516b\u7ae0\uff1a\u6301\u7eed\u96c6\u6210\u4e0e\u6d4b\u8bd5<\/h2>\n\n\n\n<h3 class=\"wp-block-heading\">8.1 \u4ec0\u4e48\u662f\u6301\u7eed\u96c6\u6210<\/h3>\n\n\n\n<h4 class=\"wp-block-heading\">\u63cf\u8ff0<\/h4>\n\n\n\n<p>\u6301\u7eed\u96c6\u6210\uff08Continuous Integration\uff0c\u7b80\u79f0CI\uff09\u662f\u4e00\u79cd\u8f6f\u4ef6\u5f00\u53d1\u5b9e\u8df5\uff0c\u5176\u4e2d\u5f00\u53d1\u4eba\u5458\u4f1a\u9891\u7e41\u5730\u5c06\u4ee3\u7801\u66f4\u6539\u96c6\u6210\u5230\u5171\u4eab\u5b58\u50a8\u5e93\u4e2d\u3002\u6bcf\u6b21\u96c6\u6210\u90fd\u4f1a\u81ea\u52a8\u89e6\u53d1\u4e00\u7cfb\u5217\u81ea\u52a8\u5316\u7684\u6784\u5efa\u548c\u6d4b\u8bd5\uff0c\u4ee5\u786e\u4fdd\u65b0\u7684\u66f4\u6539\u4e0d\u4f1a\u7834\u574f\u73b0\u6709\u7684\u529f\u80fd\u3002\u8fd9\u6837\u505a\u7684\u76ee\u7684\u662f\u4e3a\u4e86\u5c3d\u65e9\u5730\u53d1\u73b0\u548c\u4fee\u590d\u95ee\u9898\uff0c\u63d0\u9ad8\u8f6f\u4ef6\u8d28\u91cf\u3002<\/p>\n\n\n\n<h4 class=\"wp-block-heading\">\u4e3b\u8981\u7ec4\u6210\u90e8\u5206<\/h4>\n\n\n\n<ol class=\"wp-block-list\">\n<li><strong>\u6e90\u4ee3\u7801\u7ba1\u7406\uff08SCM\uff09<\/strong>: \u4f7f\u7528\u5982Git\u8fd9\u6837\u7684\u6e90\u4ee3\u7801\u7ba1\u7406\u5de5\u5177\u6765\u7ef4\u62a4\u4ee3\u7801\u7248\u672c\u548c\u5386\u53f2\u3002<\/li>\n\n\n\n<li><strong>\u81ea\u52a8\u5316\u6784\u5efa<\/strong>: \u4f7f\u7528\u6784\u5efa\u5de5\u5177\uff08\u5982Maven\u3001Gradle\u6216npm\u7b49\uff09\u6765\u81ea\u52a8\u7f16\u8bd1\u6e90\u4ee3\u7801\u3001\u8fd0\u884c\u6d4b\u8bd5\u548c\u751f\u6210\u53ef\u90e8\u7f72\u7684\u8f6f\u4ef6\u5305\u3002<\/li>\n\n\n\n<li><strong>\u81ea\u52a8\u5316\u6d4b\u8bd5<\/strong>: \u5728\u6784\u5efa\u8fc7\u7a0b\u4e2d\u81ea\u52a8\u8fd0\u884c\u4e00\u7cfb\u5217\u6d4b\u8bd5\uff0c\u5305\u62ec\u5355\u5143\u6d4b\u8bd5\u3001\u96c6\u6210\u6d4b\u8bd5\u548c\u7aef\u5230\u7aef\u6d4b\u8bd5\uff0c\u4ee5\u786e\u4fdd\u4ee3\u7801\u8d28\u91cf\u3002<\/li>\n\n\n\n<li><strong>\u62a5\u544a\u548c\u901a\u77e5<\/strong>: \u5982\u679c\u6784\u5efa\u6216\u6d4b\u8bd5\u5931\u8d25\uff0c\u6301\u7eed\u96c6\u6210\u5de5\u5177\u4f1a\u81ea\u52a8\u901a\u77e5\u76f8\u5173\u4eba\u5458\u3002\u540c\u65f6\uff0c\u5b83\u4e5f\u4f1a\u751f\u6210\u5404\u79cd\u62a5\u544a\uff0c\u5982\u6d4b\u8bd5\u8986\u76d6\u7387\u62a5\u544a\u3001\u4ee3\u7801\u8d28\u91cf\u62a5\u544a\u7b49\u3002<\/li>\n\n\n\n<li><strong>\u90e8\u7f72<\/strong>: \u5728\u6210\u529f\u901a\u8fc7\u6240\u6709\u6d4b\u8bd5\u540e\uff0c\u4ee3\u7801\u53ef\u4ee5\u88ab\u81ea\u52a8\u90e8\u7f72\u5230\u4e00\u4e2a\u4e34\u65f6\u73af\u5883\u8fdb\u884c\u8fdb\u4e00\u6b65\u7684\u6d4b\u8bd5\uff0c\u6216\u76f4\u63a5\u90e8\u7f72\u5230\u751f\u4ea7\u73af\u5883\u3002<\/li>\n<\/ol>\n\n\n\n<h4 class=\"wp-block-heading\">\u5e38\u7528\u7684\u6301\u7eed\u96c6\u6210\u5de5\u5177<\/h4>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Jenkins<\/li>\n\n\n\n<li>Travis CI<\/li>\n\n\n\n<li>GitLab CI\/CD<\/li>\n\n\n\n<li>GitHub Actions<\/li>\n\n\n\n<li>CircleCI<\/li>\n<\/ul>\n\n\n\n<h4 class=\"wp-block-heading\">\u4ee3\u7801\u793a\u4f8b<\/h4>\n\n\n\n<p>\u5728\u4e00\u4e2a\u5178\u578b\u7684Angular\u9879\u76ee\u4e2d\uff0c\u60a8\u53ef\u80fd\u4f1a\u5728<code>.travis.yml<\/code>\uff08\u5982\u679c\u4f7f\u7528Travis CI\uff09\u6216<code>gitlab-ci.yml<\/code>\uff08\u5982\u679c\u4f7f\u7528GitLab CI\uff09\u4e2d\u5b9a\u4e49\u6301\u7eed\u96c6\u6210\u7684\u6d41\u7a0b\u3002<\/p>\n\n\n\n<p>\u4f8b\u5982\uff0c\u5728<code>.travis.yml<\/code>\u4e2d\uff1a<\/p>\n\n\n\n<p>yamlCopy code<\/p>\n\n\n\n<p><code>language: node_js node_js: - \"12\" cache: directories: - node_modules script: - ng build --prod - ng test --watch=false<\/code><\/p>\n\n\n\n<p>\u8fd9\u4e2a\u914d\u7f6e\u6587\u4ef6\u6307\u5b9a\u4e86\u4f7f\u7528Node.js\u73af\u5883\uff0c\u5e76\u7f13\u5b58\u4e86<code>node_modules<\/code>\u76ee\u5f55\u4ee5\u52a0\u901f\u6784\u5efa\u3002\u5b83\u8fd8\u5b9a\u4e49\u4e86\u4e24\u4e2a\u811a\u672c\uff1a\u4e00\u4e2a\u7528\u4e8e\u6784\u5efa\u9879\u76ee\uff0c\u53e6\u4e00\u4e2a\u7528\u4e8e\u8fd0\u884c\u6d4b\u8bd5\u3002<\/p>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<p>\u8fd9\u662f\u7b2c\u516b\u7ae0\u7b2c\u4e00\u5c0f\u8282\u7684\u5185\u5bb9\uff0c\u4e13\u95e8\u8bb2\u89e3\u4ec0\u4e48\u662f\u6301\u7eed\u96c6\u6210\u3002\u5982\u679c\u60a8\u6709\u4efb\u4f55\u95ee\u9898\u6216\u9700\u8981\u8fdb\u4e00\u6b65\u7684\u6f84\u6e05\uff0c\u8bf7\u968f\u65f6\u544a\u8bc9\u6211\u3002<\/p>\n\n\n\n<figure class=\"wp-block-image\"><img decoding=\"async\" src=\"https:\/\/lh3.googleusercontent.com\/a\/ACg8ocLh4B_kew_Ugyfq9egjobpny7AWdKDF1KOH64Elebx0ZhM=s96-c\" alt=\"User\"\/><\/figure>\n\n\n\n<p>\u8bf7\u8be6\u7ec6\u89e3\u91ca\u7b2c\u516b\u7ae0\uff1a\u6301\u7eed\u96c6\u6210\u4e0e\u6d4b\u8bd5\u7684\u5176\u4ed6\u6301\u7eed\u96c6\u6210\u4e0e\u6d4b\u8bd5\u5de5\u5177ChatGPT<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">\u7b2c\u516b\u7ae0\uff1a\u6301\u7eed\u96c6\u6210\u4e0e\u6d4b\u8bd5<\/h2>\n\n\n\n<h3 class=\"wp-block-heading\">8.2 \u5176\u4ed6\u6301\u7eed\u96c6\u6210\u4e0e\u6d4b\u8bd5\u5de5\u5177<\/h3>\n\n\n\n<h4 class=\"wp-block-heading\">\u63cf\u8ff0<\/h4>\n\n\n\n<p>\u9664\u4e86\u5e38\u89c1\u7684\u6301\u7eed\u96c6\u6210\u5de5\u5177\u5982Jenkins\u3001Travis CI\u548cGitLab CI\/CD\u4e4b\u5916\uff0c\u8fd8\u6709\u5176\u4ed6\u4e00\u4e9b\u5de5\u5177\u548c\u670d\u52a1\uff0c\u5b83\u4eec\u4e5f\u63d0\u4f9b\u4e86\u5f3a\u5927\u7684\u6301\u7eed\u96c6\u6210\u548c\u6d4b\u8bd5\u529f\u80fd\u3002\u8fd9\u4e9b\u5de5\u5177\u901a\u5e38\u66f4\u52a0\u4e13\u6ce8\u4e8e\u67d0\u4e9b\u7279\u5b9a\u7684\u9700\u6c42\u6216\u573a\u666f\uff0c\u5982\u4e91\u539f\u751f\u5e94\u7528\u3001\u5fae\u670d\u52a1\u67b6\u6784\u6216\u8005\u662f\u7279\u5b9a\u7f16\u7a0b\u8bed\u8a00\u3002<\/p>\n\n\n\n<h4 class=\"wp-block-heading\">\u5e38\u7528\u7684\u5176\u4ed6\u6301\u7eed\u96c6\u6210\u4e0e\u6d4b\u8bd5\u5de5\u5177<\/h4>\n\n\n\n<ol class=\"wp-block-list\">\n<li><strong>Bamboo<\/strong>: \u7531Atlassian\u5f00\u53d1\uff0c\u4e0eJira\u3001Bitbucket\u7b49\u5de5\u5177\u6709\u5f88\u597d\u7684\u96c6\u6210\u3002<\/li>\n\n\n\n<li><strong>TeamCity<\/strong>: \u7531JetBrains\u5f00\u53d1\uff0c\u63d0\u4f9b\u4e86\u4e30\u5bcc\u7684\u63d2\u4ef6\u548c\u53ef\u5b9a\u5236\u9009\u9879\u3002<\/li>\n\n\n\n<li><strong>CircleCI<\/strong>: \u4e13\u4e3a\u4e91\u539f\u751f\u5e94\u7528\u8bbe\u8ba1\uff0c\u63d0\u4f9b\u4e86Docker\u548cKubernetes\u7684\u539f\u751f\u652f\u6301\u3002<\/li>\n\n\n\n<li><strong>Semaphore<\/strong>: \u63d0\u4f9b\u9ad8\u5ea6\u53ef\u5b9a\u5236\u7684\u6301\u7eed\u96c6\u6210\u6d41\u6c34\u7ebf\u548c\u5feb\u901f\u7684\u6784\u5efa\u901f\u5ea6\u3002<\/li>\n\n\n\n<li><strong>GitHub Actions<\/strong>: \u76f4\u63a5\u96c6\u6210\u5728GitHub\u4ed3\u5e93\u4e2d\uff0c\u5141\u8bb8\u81ea\u52a8\u5316\u5404\u79cd\u8f6f\u4ef6\u5de5\u4f5c\u6d41\u7a0b\u3002<\/li>\n\n\n\n<li><strong>Azure Pipelines<\/strong>: \u5fae\u8f6f\u7684\u6301\u7eed\u96c6\u6210\u548c\u6301\u7eed\u90e8\u7f72\u670d\u52a1\uff0c\u4e0eAzure DevOps\u7d27\u5bc6\u96c6\u6210\u3002<\/li>\n\n\n\n<li><strong>Buildkite<\/strong>: \u63d0\u4f9b\u4e86\u4e00\u4e2a\u6df7\u5408\u7684\u6301\u7eed\u96c6\u6210\u89e3\u51b3\u65b9\u6848\uff0c\u5141\u8bb8\u5728\u81ea\u5df1\u7684\u57fa\u7840\u8bbe\u65bd\u6216\u4e91\u670d\u52a1\u4e0a\u8fd0\u884c\u6784\u5efa\u548c\u6d4b\u8bd5\u3002<\/li>\n\n\n\n<li><strong>Drone.io<\/strong>: \u4e00\u4e2a\u8f7b\u91cf\u7ea7\u7684\u6301\u7eed\u4ea4\u4ed8\u5e73\u53f0\uff0c\u4f7f\u7528\u5bb9\u5668\u6280\u672f\u6765\u8fd0\u884c\u6784\u5efa\u548c\u6d4b\u8bd5\u3002<\/li>\n\n\n\n<li><strong>GitLab Runner<\/strong>: GitLab\u7684\u6301\u7eed\u96c6\u6210\u5de5\u5177\uff0c\u53ef\u4ee5\u4e0eGitLab CI\/CD\u4e00\u8d77\u4f7f\u7528\u6216\u4f5c\u4e3a\u72ec\u7acb\u7684CI\/CD\u89e3\u51b3\u65b9\u6848\u3002<\/li>\n\n\n\n<li><strong>AppVeyor<\/strong>: \u4e13\u4e3aWindows\u73af\u5883\u8bbe\u8ba1\u7684\u6301\u7eed\u96c6\u6210\u89e3\u51b3\u65b9\u6848\u3002<\/li>\n<\/ol>\n\n\n\n<h4 class=\"wp-block-heading\">\u9009\u62e9\u5408\u9002\u7684\u5de5\u5177<\/h4>\n\n\n\n<p>\u5728\u9009\u62e9\u6301\u7eed\u96c6\u6210\u5de5\u5177\u65f6\uff0c\u8003\u8651\u4ee5\u4e0b\u51e0\u70b9\uff1a<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>\u4e0e\u73b0\u6709\u5de5\u5177\u7684\u96c6\u6210<\/strong>: \u9009\u62e9\u80fd\u4e0e\u60a8\u73b0\u6709\u7684\u7248\u672c\u63a7\u5236\u3001\u9879\u76ee\u7ba1\u7406\u548c\u5176\u4ed6\u5de5\u5177\u5f88\u597d\u5730\u96c6\u6210\u7684CI\u5de5\u5177\u3002<\/li>\n\n\n\n<li><strong>\u53ef\u5b9a\u5236\u6027\u548c\u6269\u5c55\u6027<\/strong>: \u67e5\u770b\u5de5\u5177\u662f\u5426\u5141\u8bb8\u60a8\u5b9a\u5236\u5de5\u4f5c\u6d41\u7a0b\uff0c\u4ee5\u53ca\u662f\u5426\u6709\u4e30\u5bcc\u7684\u63d2\u4ef6\u548c\u96c6\u6210\u9009\u9879\u3002<\/li>\n\n\n\n<li><strong>\u6210\u672c<\/strong>: \u8003\u8651\u5de5\u5177\u7684\u4ef7\u683c\uff0c\u4ee5\u53ca\u662f\u5426\u63d0\u4f9b\u514d\u8d39\u7684\u793e\u533a\u7248\u6216\u8bd5\u7528\u7248\u3002<\/li>\n\n\n\n<li><strong>\u793e\u533a\u548c\u652f\u6301<\/strong>: \u4e00\u4e2a\u6d3b\u8dc3\u7684\u793e\u533a\u548c\u826f\u597d\u7684\u6587\u6863\u901a\u5e38\u610f\u5473\u7740\u66f4\u597d\u7684\u652f\u6301\u548c\u66f4\u5feb\u7684\u95ee\u9898\u89e3\u51b3\u3002<\/li>\n<\/ul>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<p>\u8fd9\u662f\u7b2c\u516b\u7ae0\u7b2c\u4e8c\u5c0f\u8282\u7684\u5185\u5bb9\uff0c\u4e13\u95e8\u8bb2\u89e3\u5176\u4ed6\u6301\u7eed\u96c6\u6210\u4e0e\u6d4b\u8bd5\u5de5\u5177\u3002\u5982\u679c\u60a8\u6709\u4efb\u4f55\u95ee\u9898\u6216\u9700\u8981\u8fdb\u4e00\u6b65\u7684\u6f84\u6e05\uff0c\u8bf7\u968f\u65f6\u544a\u8bc9\u6211\u3002<\/p>\n\n\n\n<figure class=\"wp-block-image\"><img decoding=\"async\" src=\"https:\/\/lh3.googleusercontent.com\/a\/ACg8ocLh4B_kew_Ugyfq9egjobpny7AWdKDF1KOH64Elebx0ZhM=s96-c\" alt=\"User\"\/><\/figure>\n\n\n\n<p>\u8bf7\u8be6\u7ec6\u89e3\u91ca\u7b2c\u516b\u7ae0\uff1a\u6301\u7eed\u96c6\u6210\u4e0e\u6d4b\u8bd5\u7684\u4f7f\u7528travis ci\u8fdb\u884c\u6301\u7eed\u96c6\u6210\u6d4b\u8bd5ChatGPT<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">\u7b2c\u516b\u7ae0\uff1a\u6301\u7eed\u96c6\u6210\u4e0e\u6d4b\u8bd5<\/h2>\n\n\n\n<h3 class=\"wp-block-heading\">8.3 \u4f7f\u7528Travis CI\u8fdb\u884c\u6301\u7eed\u96c6\u6210\u6d4b\u8bd5<\/h3>\n\n\n\n<h4 class=\"wp-block-heading\">\u63cf\u8ff0<\/h4>\n\n\n\n<p>Travis CI\u662f\u4e00\u79cd\u6d41\u884c\u7684\u6301\u7eed\u96c6\u6210\u670d\u52a1\uff0c\u901a\u5e38\u7528\u4e8e\u6784\u5efa\u548c\u6d4b\u8bd5GitHub\u6258\u7ba1\u7684\u9879\u76ee\u3002\u5b83\u63d0\u4f9b\u4e86\u4e00\u4e2a\u7b80\u5355\u6613\u7528\u7684\u754c\u9762\u548c\u591a\u79cd\u8bed\u8a00\u548c\u73af\u5883\u7684\u652f\u6301\uff0c\u5305\u62ecNode.js\u3001Python\u3001Java\u7b49\u3002\u5728\u672c\u5c0f\u8282\u4e2d\uff0c\u6211\u4eec\u5c06\u8be6\u7ec6\u4ecb\u7ecd\u5982\u4f55\u4f7f\u7528Travis CI\u8fdb\u884c\u6301\u7eed\u96c6\u6210\u6d4b\u8bd5\u3002<\/p>\n\n\n\n<h4 class=\"wp-block-heading\">\u8bbe\u7f6e\u6b65\u9aa4<\/h4>\n\n\n\n<ol class=\"wp-block-list\">\n<li><strong>\u5173\u8054GitHub\u8d26\u6237<\/strong>: \u8bbf\u95eeTravis CI\u5b98\u7f51\u5e76\u4f7f\u7528GitHub\u8d26\u6237\u8fdb\u884c\u767b\u5f55\uff0c\u7136\u540e\u9009\u62e9\u60a8\u60f3\u8981\u8fdb\u884c\u6301\u7eed\u96c6\u6210\u7684\u4ed3\u5e93\u3002<\/li>\n\n\n\n<li><strong>\u6dfb\u52a0.travis.yml\u6587\u4ef6<\/strong>: \u5728\u9879\u76ee\u6839\u76ee\u5f55\u4e2d\u521b\u5efa\u4e00\u4e2a\u540d\u4e3a<code>.travis.yml<\/code>\u7684\u6587\u4ef6\uff0c\u8be5\u6587\u4ef6\u5c06\u5305\u542b\u6784\u5efa\u548c\u6d4b\u8bd5\u7684\u914d\u7f6e\u3002<\/li>\n\n\n\n<li><strong>\u914d\u7f6e\u6784\u5efa\u73af\u5883<\/strong>: \u5728<code>.travis.yml<\/code>\u6587\u4ef6\u4e2d\uff0c\u60a8\u53ef\u4ee5\u6307\u5b9a\u4f7f\u7528\u7684\u8bed\u8a00\u3001\u7248\u672c\u548c\u5176\u4ed6\u73af\u5883\u53d8\u91cf\u3002<\/li>\n\n\n\n<li><strong>\u5b9a\u4e49\u6784\u5efa\u548c\u6d4b\u8bd5\u811a\u672c<\/strong>: \u5728<code>.travis.yml<\/code>\u4e2d\uff0c\u60a8\u9700\u8981\u5b9a\u4e49\u8fd0\u884c\u54ea\u4e9b\u811a\u672c\u6765\u6784\u5efa\u548c\u6d4b\u8bd5\u60a8\u7684\u9879\u76ee\u3002<\/li>\n\n\n\n<li><strong>\u89e6\u53d1\u6784\u5efa<\/strong>: \u6bcf\u6b21\u5411GitHub\u4ed3\u5e93\u63a8\u9001\u4ee3\u7801\u65f6\uff0cTravis CI\u90fd\u4f1a\u81ea\u52a8\u89e6\u53d1\u6784\u5efa\u548c\u6d4b\u8bd5\u3002<\/li>\n<\/ol>\n\n\n\n<h4 class=\"wp-block-heading\">\u4ee3\u7801\u793a\u4f8b<\/h4>\n\n\n\n<p>\u4e0b\u9762\u662f\u4e00\u4e2a\u7528\u4e8eAngular\u9879\u76ee\u7684\u7b80\u5355<code>.travis.yml<\/code>\u914d\u7f6e\u793a\u4f8b\uff1a<\/p>\n\n\n\n<p>yamlCopy code<\/p>\n\n\n\n<p><code>language: node_js node_js: - \"14\" cache: directories: - node_modules install: - npm install script: - ng build --prod - ng test --watch=false<\/code><\/p>\n\n\n\n<p>\u5728\u8fd9\u4e2a\u793a\u4f8b\u4e2d\uff1a<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>\u6211\u4eec\u6307\u5b9a\u4e86\u4f7f\u7528Node.js\u4f5c\u4e3a\u6784\u5efa\u73af\u5883\uff0c\u5e76\u9009\u62e9\u4e86\u7248\u672c14\u3002<\/li>\n\n\n\n<li>\u6211\u4eec\u7f13\u5b58\u4e86<code>node_modules<\/code>\u76ee\u5f55\u4ee5\u52a0\u901f\u540e\u7eed\u6784\u5efa\u3002<\/li>\n\n\n\n<li>\u4f7f\u7528<code>npm install<\/code>\u5b89\u88c5\u9879\u76ee\u4f9d\u8d56\u3002<\/li>\n\n\n\n<li>\u4f7f\u7528<code>ng build --prod<\/code>\u8fdb\u884c\u9879\u76ee\u6784\u5efa\u3002<\/li>\n\n\n\n<li>\u4f7f\u7528<code>ng test --watch=false<\/code>\u8fd0\u884c\u6d4b\u8bd5\u3002<\/li>\n<\/ul>\n\n\n\n<h4 class=\"wp-block-heading\">\u67e5\u770b\u6784\u5efa\u7ed3\u679c<\/h4>\n\n\n\n<p>\u4e00\u65e6\u89e6\u53d1\u4e86\u6784\u5efa\uff0c\u60a8\u53ef\u4ee5\u5728Travis CI\u7684\u4eea\u8868\u677f\u4e0a\u67e5\u770b\u6784\u5efa\u72b6\u6001\u3001\u65e5\u5fd7\u548c\u6d4b\u8bd5\u7ed3\u679c\u3002<\/p>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<p>\u8fd9\u662f\u7b2c\u516b\u7ae0\u7b2c\u4e09\u5c0f\u8282\u7684\u5185\u5bb9\uff0c\u4e13\u95e8\u8bb2\u89e3\u5982\u4f55\u4f7f\u7528Travis CI\u8fdb\u884c\u6301\u7eed\u96c6\u6210\u6d4b\u8bd5\u3002\u5982\u679c\u60a8\u6709\u4efb\u4f55\u95ee\u9898\u6216\u9700\u8981\u8fdb\u4e00\u6b65\u7684\u6f84\u6e05\uff0c\u8bf7\u968f\u65f6\u544a\u8bc9\u6211\u3002<\/p>\n\n\n\n<figure class=\"wp-block-image\"><img decoding=\"async\" src=\"https:\/\/lh3.googleusercontent.com\/a\/ACg8ocLh4B_kew_Ugyfq9egjobpny7AWdKDF1KOH64Elebx0ZhM=s96-c\" alt=\"User\"\/><\/figure>\n\n\n\n<p>\u8bf7\u8be6\u7ec6\u89e3\u91ca\u7b2c\u4e5d\u7ae0\uff1a\u9ad8\u7ea7\u6d4b\u8bd5\u6280\u672f\u7684\u4f7f\u7528Spy\u8fdb\u884c\u51fd\u6570\u8c03\u7528\u68c0\u67e5ChatGPT<\/p>\n\n\n\n<figure class=\"wp-block-image\"><img decoding=\"async\" src=\"https:\/\/lh3.googleusercontent.com\/a\/ACg8ocLh4B_kew_Ugyfq9egjobpny7AWdKDF1KOH64Elebx0ZhM=s96-c\" alt=\"User\"\/><\/figure>\n\n\n\n<p>\u8bf7\u8be6\u7ec6\u89e3\u91ca\u7b2c\u4e5d\u7ae0\uff1a\u9ad8\u7ea7\u6d4b\u8bd5\u6280\u672f\u7684\u5f02\u6b65\u6d4b\u8bd5ChatGPT<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">\u7b2c\u4e5d\u7ae0\uff1a\u9ad8\u7ea7\u6d4b\u8bd5\u6280\u672f<\/h2>\n\n\n\n<h3 class=\"wp-block-heading\">9.2 \u5f02\u6b65\u6d4b\u8bd5<\/h3>\n\n\n\n<h4 class=\"wp-block-heading\">\u63cf\u8ff0<\/h4>\n\n\n\n<p>\u5728\u73b0\u4ee3\u524d\u7aef\u5f00\u53d1\u4e2d\uff0c\u5f02\u6b65\u64cd\u4f5c\u662f\u975e\u5e38\u5e38\u89c1\u7684\uff0c\u8fd9\u5305\u62ecHTTP\u8bf7\u6c42\u3001\u5b9a\u65f6\u5668\u6216\u5176\u4ed6\u4efb\u4f55\u53ef\u80fd\u4e0d\u4f1a\u7acb\u5373\u8fd4\u56de\u7ed3\u679c\u7684\u64cd\u4f5c\u3002\u56e0\u6b64\uff0c\u5f02\u6b65\u6d4b\u8bd5\u6210\u4e3a\u4e86\u4e00\u4e2a\u91cd\u8981\u7684\u4e3b\u9898\u3002Angular\u63d0\u4f9b\u4e86\u4e00\u4e9b\u5de5\u5177\u548c\u6280\u672f\uff0c\u5982<code>fakeAsync<\/code>\u3001<code>tick<\/code>\u548c<code>async<\/code>\u7b49\uff0c\u7528\u4e8e\u7b80\u5316\u5f02\u6b65\u4ee3\u7801\u7684\u6d4b\u8bd5\u3002<\/p>\n\n\n\n<h4 class=\"wp-block-heading\">\u5f02\u6b65\u6d4b\u8bd5\u65b9\u6cd5<\/h4>\n\n\n\n<ol class=\"wp-block-list\">\n<li><strong>\u4f7f\u7528<code>fakeAsync<\/code>\u548c<code>tick<\/code><\/strong>: \u8fd9\u4e24\u4e2a\u51fd\u6570\u5141\u8bb8\u60a8\u5728\u4e00\u4e2a\u6a21\u62df\u7684\u5f02\u6b65\u73af\u5883\u4e2d\u6267\u884c\u4ee3\u7801\uff0c\u5e76\u4f7f\u7528<code>tick<\/code>\u51fd\u6570\u6765\u6a21\u62df\u65f6\u95f4\u7684\u6d41\u901d\u3002<\/li>\n\n\n\n<li><strong>\u4f7f\u7528<code>async<\/code>\u548c<code>waitForAsync<\/code><\/strong>: \u8fd9\u4e24\u4e2a\u51fd\u6570\u7528\u4e8e\u5904\u7406\u66f4\u590d\u6742\u7684\u5f02\u6b65\u64cd\u4f5c\uff0c\u5982Promise\u548cObservable\u3002<\/li>\n\n\n\n<li><strong>\u4f7f\u7528<code>done<\/code>\u56de\u8c03<\/strong>: \u5728\u67d0\u4e9b\u60c5\u51b5\u4e0b\uff0c\u60a8\u53ef\u80fd\u9700\u8981\u4f7f\u7528Jasmine\u7684<code>done<\/code>\u56de\u8c03\u51fd\u6570\u6765\u624b\u52a8\u6807\u8bb0\u6d4b\u8bd5\u7684\u5b8c\u6210\u3002<\/li>\n<\/ol>\n\n\n\n<h4 class=\"wp-block-heading\">\u4ee3\u7801\u793a\u4f8b<\/h4>\n\n\n\n<h5 class=\"wp-block-heading\">\u4f7f\u7528<code>fakeAsync<\/code>\u548c<code>tick<\/code><\/h5>\n\n\n\n<p>typescriptCopy code<\/p>\n\n\n\n<p><code>import { fakeAsync, tick } from '@angular\/core\/testing'; it('should execute async operation', fakeAsync(() =&gt; { let result = null; setTimeout(() =&gt; { result = 'hello'; }, 1000); tick(1000); expect(result).toBe('hello'); }));<\/code><\/p>\n\n\n\n<p>\u5728\u8fd9\u4e2a\u4f8b\u5b50\u4e2d\uff0c\u6211\u4eec\u4f7f\u7528<code>fakeAsync<\/code>\u6765\u521b\u5efa\u4e00\u4e2a\u6a21\u62df\u7684\u5f02\u6b65\u6d4b\u8bd5\u73af\u5883\uff0c\u5e76\u4f7f\u7528<code>tick<\/code>\u6765\u6a21\u62df1\u79d2\u949f\u7684\u65f6\u95f4\u6d41\u901d\u3002<\/p>\n\n\n\n<h5 class=\"wp-block-heading\">\u4f7f\u7528<code>async<\/code>\u548c<code>waitForAsync<\/code><\/h5>\n\n\n\n<p>typescriptCopy code<\/p>\n\n\n\n<p><code>import { async, ComponentFixture, TestBed, waitForAsync } from '@angular\/core\/testing'; it('should execute async operation', waitForAsync(() =&gt; { someAsyncFunction().then((result) =&gt; { expect(result).toBe('hello'); }); }));<\/code><\/p>\n\n\n\n<p>\u5728\u8fd9\u4e2a\u4f8b\u5b50\u4e2d\uff0c\u6211\u4eec\u4f7f\u7528<code>waitForAsync<\/code>\u6765\u5904\u7406\u8fd4\u56dePromise\u7684\u5f02\u6b65\u51fd\u6570\u3002<\/p>\n\n\n\n<h4 class=\"wp-block-heading\">\u6ce8\u610f\u4e8b\u9879<\/h4>\n\n\n\n<ul class=\"wp-block-list\">\n<li>\u5728\u4f7f\u7528<code>fakeAsync<\/code>\u65f6\uff0c\u907f\u514d\u5728\u540c\u4e00\u4e2a\u6d4b\u8bd5\u7528\u4f8b\u4e2d\u6df7\u5408\u4f7f\u7528\u771f\u5b9e\u7684\u5f02\u6b65\u64cd\u4f5c\u3002<\/li>\n\n\n\n<li>\u4f7f\u7528<code>async<\/code>\u548c<code>waitForAsync<\/code>\u65f6\uff0c\u786e\u4fdd\u60a8\u7684\u5f02\u6b65\u64cd\u4f5c\u80fd\u5728\u5408\u7406\u7684\u65f6\u95f4\u5185\u5b8c\u6210\uff0c\u4ee5\u907f\u514d\u6d4b\u8bd5\u8d85\u65f6\u3002<\/li>\n<\/ul>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<p>\u8fd9\u662f\u7b2c\u4e5d\u7ae0\u7b2c\u4e8c\u5c0f\u8282\u7684\u5185\u5bb9\uff0c\u4e13\u95e8\u8bb2\u89e3\u5f02\u6b65\u6d4b\u8bd5\u7684\u5404\u79cd\u65b9\u6cd5\u548c\u6ce8\u610f\u4e8b\u9879\u3002\u5982\u679c\u60a8\u6709\u4efb\u4f55\u95ee\u9898\u6216\u9700\u8981\u8fdb\u4e00\u6b65\u7684\u6f84\u6e05\uff0c\u8bf7\u968f\u65f6\u544a\u8bc9\u6211\u3002<\/p>\n\n\n\n<figure class=\"wp-block-image\"><img decoding=\"async\" src=\"https:\/\/lh3.googleusercontent.com\/a\/ACg8ocLh4B_kew_Ugyfq9egjobpny7AWdKDF1KOH64Elebx0ZhM=s96-c\" alt=\"User\"\/><\/figure>\n\n\n\n<p>\u8bf7\u8be6\u7ec6\u89e3\u91ca\u7b2c\u4e5d\u7ae0\uff1a\u9ad8\u7ea7\u6d4b\u8bd5\u6280\u672f\u7684\u6027\u80fd\u6d4b\u8bd5ChatGPT<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">\u7b2c\u4e5d\u7ae0\uff1a\u9ad8\u7ea7\u6d4b\u8bd5\u6280\u672f<\/h2>\n\n\n\n<h3 class=\"wp-block-heading\">9.3 \u6027\u80fd\u6d4b\u8bd5<\/h3>\n\n\n\n<h4 class=\"wp-block-heading\">\u63cf\u8ff0<\/h4>\n\n\n\n<p>\u6027\u80fd\u6d4b\u8bd5\u662f\u4e00\u79cd\u8bc4\u4f30\u5e94\u7528\u6027\u80fd\u7684\u6d4b\u8bd5\u65b9\u6cd5\uff0c\u4e3b\u8981\u5173\u6ce8\u54cd\u5e94\u65f6\u95f4\u3001\u8d44\u6e90\u4f7f\u7528\u7387\u3001\u541e\u5410\u91cf\u7b49\u6307\u6807\u3002\u5728\u524d\u7aef\u5f00\u53d1\u4e2d\uff0c\u6027\u80fd\u6d4b\u8bd5\u901a\u5e38\u6d89\u53ca\u9875\u9762\u52a0\u8f7d\u901f\u5ea6\u3001\u52a8\u753b\u6d41\u7545\u5ea6\u3001\u5185\u5b58\u4f7f\u7528\u7b49\u65b9\u9762\u3002\u8fd9\u4e00\u5c0f\u8282\u5c06\u4ecb\u7ecd\u5982\u4f55\u5728Angular\u5e94\u7528\u4e2d\u8fdb\u884c\u6027\u80fd\u6d4b\u8bd5\u3002<\/p>\n\n\n\n<h4 class=\"wp-block-heading\">\u6027\u80fd\u6d4b\u8bd5\u65b9\u6cd5<\/h4>\n\n\n\n<ol class=\"wp-block-list\">\n<li><strong>\u4f7f\u7528\u6d4f\u89c8\u5668\u5f00\u53d1\u8005\u5de5\u5177<\/strong>: \u6d4f\u89c8\u5668\u5185\u7f6e\u7684\u5f00\u53d1\u8005\u5de5\u5177\u63d0\u4f9b\u4e86\u591a\u79cd\u6027\u80fd\u5206\u6790\u5de5\u5177\uff0c\u5982\u65f6\u95f4\u7ebf\u3001\u7f51\u7edc\u548c\u5185\u5b58\u5206\u6790\u3002<\/li>\n\n\n\n<li><strong>\u4f7f\u7528\u4e13\u95e8\u7684\u6027\u80fd\u6d4b\u8bd5\u5e93<\/strong>: \u4f8b\u5982\uff0cLighthouse\u548cWebPageTest\u53ef\u4ee5\u63d0\u4f9b\u5168\u9762\u7684\u6027\u80fd\u8bc4\u4f30\u3002<\/li>\n\n\n\n<li><strong>\u81ea\u5b9a\u4e49\u57fa\u51c6\u6d4b\u8bd5<\/strong>: \u4f7f\u7528JavaScript\u7684<code>performance.now()<\/code>\u6216\u5176\u4ed6\u5e93\u6765\u624b\u52a8\u6d4b\u91cf\u4ee3\u7801\u6bb5\u7684\u6267\u884c\u65f6\u95f4\u3002<\/li>\n\n\n\n<li><strong>\u670d\u52a1\u5668\u7aef\u6027\u80fd\u6d4b\u8bd5<\/strong>: \u4f8b\u5982\uff0c\u4f7f\u7528JMeter\u6216LoadRunner\u6765\u6a21\u62df\u591a\u7528\u6237\u5e76\u53d1\u8bbf\u95ee\uff0c\u4ee5\u6d4b\u8bd5\u670d\u52a1\u5668\u7684\u5904\u7406\u80fd\u529b\u3002<\/li>\n<\/ol>\n\n\n\n<h4 class=\"wp-block-heading\">\u4ee3\u7801\u793a\u4f8b<\/h4>\n\n\n\n<h5 class=\"wp-block-heading\">\u4f7f\u7528<code>performance.now()<\/code><\/h5>\n\n\n\n<p>javascriptCopy code<\/p>\n\n\n\n<p><code>const t0 = performance.now(); \/\/ Your code here const t1 = performance.now(); console.log(`Time taken: ${t1 - t0} milliseconds.`);<\/code><\/p>\n\n\n\n<p>\u5728\u8fd9\u4e2a\u4f8b\u5b50\u4e2d\uff0c\u6211\u4eec\u4f7f\u7528JavaScript\u7684<code>performance.now()<\/code>\u6765\u6d4b\u91cf\u4ee3\u7801\u6267\u884c\u65f6\u95f4\u3002<\/p>\n\n\n\n<h5 class=\"wp-block-heading\">\u4f7f\u7528Lighthouse<\/h5>\n\n\n\n<p>Lighthouse\u662f\u4e00\u4e2a\u5f00\u6e90\u7684\u81ea\u52a8\u5316\u5de5\u5177\uff0c\u7528\u4e8e\u6539\u8fdb\u7f51\u9875\u8d28\u91cf\uff0c\u5305\u62ec\u6027\u80fd\u3002\u60a8\u53ef\u4ee5\u5728Chrome\u5f00\u53d1\u8005\u5de5\u5177\u4e2d\u627e\u5230\u5b83\uff0c\u6216\u4f5c\u4e3a\u4e00\u4e2a\u72ec\u7acb\u7684CLI\u5de5\u5177\u8fd0\u884c\u3002<\/p>\n\n\n\n<p>bashCopy code<\/p>\n\n\n\n<p><code>lighthouse https:\/\/your-angular-app.com<\/code><\/p>\n\n\n\n<p>\u8fd9\u5c06\u751f\u6210\u4e00\u4e2a\u5305\u542b\u591a\u4e2a\u6027\u80fd\u6307\u6807\u7684\u62a5\u544a\u3002<\/p>\n\n\n\n<h4 class=\"wp-block-heading\">\u6ce8\u610f\u4e8b\u9879<\/h4>\n\n\n\n<ul class=\"wp-block-list\">\n<li>\u6027\u80fd\u6d4b\u8bd5\u901a\u5e38\u5e94\u5728\u4ea7\u54c1\u63a5\u8fd1\u53d1\u5e03\u6216\u5df2\u7ecf\u53d1\u5e03\u540e\u8fdb\u884c\uff0c\u4ee5\u83b7\u5f97\u6700\u51c6\u786e\u7684\u7ed3\u679c\u3002<\/li>\n\n\n\n<li>\u6027\u80fd\u4f18\u5316\u901a\u5e38\u662f\u4e00\u4e2a\u6301\u7eed\u7684\u8fc7\u7a0b\uff0c\u9700\u8981\u4e0d\u65ad\u5730\u8fdb\u884c\u6d4b\u8bd5\u548c\u8c03\u4f18\u3002<\/li>\n<\/ul>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<p>\u8fd9\u662f\u7b2c\u4e5d\u7ae0\u7b2c\u4e09\u5c0f\u8282\u7684\u5185\u5bb9\uff0c\u4e13\u95e8\u8bb2\u89e3\u5982\u4f55\u8fdb\u884c\u6027\u80fd\u6d4b\u8bd5\uff0c\u5305\u62ec\u4f7f\u7528\u4e0d\u540c\u7684\u5de5\u5177\u548c\u65b9\u6cd5\u3002\u5982\u679c\u60a8\u6709\u4efb\u4f55\u95ee\u9898\u6216\u9700\u8981\u8fdb\u4e00\u6b65\u7684\u6f84\u6e05\uff0c\u8bf7\u968f\u65f6\u544a\u8bc9\u6211\u3002<\/p>\n\n\n\n<figure class=\"wp-block-image\"><img decoding=\"async\" src=\"https:\/\/lh3.googleusercontent.com\/a\/ACg8ocLh4B_kew_Ugyfq9egjobpny7AWdKDF1KOH64Elebx0ZhM=s96-c\" alt=\"User\"\/><\/figure>\n\n\n\n<p>\u8bf7\u8be6\u7ec6\u89e3\u91ca\u7b2c\u5341\u7ae0\uff1a\u603b\u7ed3\u548c\u8fdb\u4e00\u6b65\u5b66\u4e60\u7684\u672c\u6559\u7a0b\u603b\u7ed3ChatGPT<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">\u7b2c\u5341\u7ae0\uff1a\u603b\u7ed3\u548c\u8fdb\u4e00\u6b65\u5b66\u4e60<\/h2>\n\n\n\n<h3 class=\"wp-block-heading\">10.1 \u672c\u6559\u7a0b\u603b\u7ed3<\/h3>\n\n\n\n<h4 class=\"wp-block-heading\">\u63cf\u8ff0<\/h4>\n\n\n\n<p>\u672c\u6559\u7a0b\u65e8\u5728\u63d0\u4f9b\u4e00\u4e2a\u5168\u9762\u7684Angular\u524d\u7aef\u5f00\u53d1\u6d4b\u8bd5\u6307\u5357\uff0c\u6db5\u76d6\u4e86\u4ece\u57fa\u7840\u6982\u5ff5\u5230\u9ad8\u7ea7\u6280\u672f\u7684\u5404\u4e2a\u65b9\u9762\u3002\u6211\u4eec\u8ba8\u8bba\u4e86\u5355\u5143\u6d4b\u8bd5\u3001\u7ec4\u4ef6\u6d4b\u8bd5\u3001\u670d\u52a1\u548cHTTP\u6d4b\u8bd5\u3001\u7aef\u5230\u7aef\uff08E2E\uff09\u6d4b\u8bd5\uff0c\u4ee5\u53ca\u9ad8\u7ea7\u6d4b\u8bd5\u6280\u672f\u5982\u5f02\u6b65\u6d4b\u8bd5\u548c\u6027\u80fd\u6d4b\u8bd5\u3002<\/p>\n\n\n\n<h4 class=\"wp-block-heading\">\u4e3b\u8981\u4eae\u70b9<\/h4>\n\n\n\n<ol class=\"wp-block-list\">\n<li><strong>\u57fa\u7840\u6982\u5ff5<\/strong>: \u4ecb\u7ecd\u4e86\u524d\u7aef\u6d4b\u8bd5\u7684\u57fa\u7840\u77e5\u8bc6\u548cAngular\u6d4b\u8bd5\u73af\u5883\u7684\u8bbe\u7f6e\u3002<\/li>\n\n\n\n<li><strong>\u5355\u5143\u548c\u7ec4\u4ef6\u6d4b\u8bd5<\/strong>: \u6df1\u5165\u8bb2\u89e3\u4e86\u5982\u4f55\u5bf9Angular\u7ec4\u4ef6\u8fdb\u884c\u5355\u5143\u6d4b\u8bd5\u3002<\/li>\n\n\n\n<li><strong>\u670d\u52a1\u548cHTTP\u6d4b\u8bd5<\/strong>: \u4ecb\u7ecd\u4e86\u5982\u4f55\u6d4b\u8bd5\u4e0e\u540e\u7aef\u4ea4\u4e92\u7684\u670d\u52a1\u548cHTTP\u8bf7\u6c42\u3002<\/li>\n\n\n\n<li><strong>\u7aef\u5230\u7aef\uff08E2E\uff09\u6d4b\u8bd5<\/strong>: \u8bb2\u89e3\u4e86\u5982\u4f55\u8fdb\u884c\u5168\u9762\u7684\u5e94\u7528\u7ea7\u522b\u6d4b\u8bd5\u3002<\/li>\n\n\n\n<li><strong>\u9ad8\u7ea7\u6d4b\u8bd5\u6280\u672f<\/strong>: \u5305\u62ec\u5f02\u6b65\u6d4b\u8bd5\u548c\u6027\u80fd\u6d4b\u8bd5\uff0c\u4ee5\u53ca\u5982\u4f55\u4f7f\u7528\u4e0d\u540c\u7684\u5de5\u5177\u548c\u5e93\u8fdb\u884c\u66f4\u590d\u6742\u7684\u6d4b\u8bd5\u3002<\/li>\n\n\n\n<li><strong>\u6301\u7eed\u96c6\u6210\u4e0e\u6d4b\u8bd5<\/strong>: \u4ecb\u7ecd\u4e86\u5982\u4f55\u5c06\u6d4b\u8bd5\u96c6\u6210\u5230\u6301\u7eed\u96c6\u6210\u6d41\u7a0b\u4e2d\uff0c\u4ee5\u5b9e\u73b0\u81ea\u52a8\u5316\u6d4b\u8bd5\u3002<\/li>\n<\/ol>\n\n\n\n<h4 class=\"wp-block-heading\">\u6210\u679c\u548c\u6536\u83b7<\/h4>\n\n\n\n<ul class=\"wp-block-list\">\n<li>\u638c\u63e1\u4e86Angular\u6d4b\u8bd5\u7684\u57fa\u7840\u548c\u9ad8\u7ea7\u6982\u5ff5\u3002<\/li>\n\n\n\n<li>\u4e86\u89e3\u4e86\u5982\u4f55\u7f16\u5199\u53ef\u7ef4\u62a4\u3001\u53ef\u6269\u5c55\u7684\u6d4b\u8bd5\u7528\u4f8b\u3002<\/li>\n\n\n\n<li>\u5b66\u4e60\u4e86\u5982\u4f55\u4f7f\u7528\u4e0d\u540c\u7684\u5de5\u5177\u548c\u5e93\u6765\u63d0\u9ad8\u6d4b\u8bd5\u7684\u6548\u7387\u548c\u8d28\u91cf\u3002<\/li>\n<\/ul>\n\n\n\n<h3 class=\"wp-block-heading\">10.2 \u8fdb\u4e00\u6b65\u5b66\u4e60\u7684\u53c2\u8003\u8d44\u6599<\/h3>\n\n\n\n<ol class=\"wp-block-list\">\n<li><strong>Angular\u5b98\u65b9\u6587\u6863<\/strong>: \u63d0\u4f9b\u4e86\u6700\u5168\u9762\u3001\u6700\u6743\u5a01\u7684Angular\u6d4b\u8bd5\u6307\u5357\u3002<\/li>\n\n\n\n<li><strong>Jasmine\u548cKarma\u6587\u6863<\/strong>: \u8fd9\u4e24\u4e2a\u5e93\u662fAngular\u6d4b\u8bd5\u4e2d\u7ecf\u5e38\u4f7f\u7528\u7684\uff0c\u4e86\u89e3\u5b83\u4eec\u80fd\u5e2e\u52a9\u4f60\u66f4\u6df1\u5165\u5730\u7406\u89e3\u6d4b\u8bd5\u3002<\/li>\n\n\n\n<li><strong>\u6301\u7eed\u96c6\u6210\u5de5\u5177\u7684\u6587\u6863<\/strong>: \u5982Travis CI\u3001Jenkins\u7b49\uff0c\u4ee5\u4fbf\u66f4\u597d\u5730\u96c6\u6210\u81ea\u52a8\u5316\u6d4b\u8bd5\u3002<\/li>\n\n\n\n<li><strong>\u6027\u80fd\u4f18\u5316\u76f8\u5173\u8d44\u6599<\/strong>: \u5982Google\u7684Web Dev\u548cLighthouse\u5de5\u5177\u7684\u5b98\u65b9\u6587\u6863\u3002<\/li>\n\n\n\n<li><strong>\u793e\u533a\u548c\u8bba\u575b<\/strong>: \u5982Stack Overflow\u548cReddit\u7684Angular\u793e\u533a\uff0c\u53ef\u4ee5\u7528\u6765\u89e3\u51b3\u95ee\u9898\u548c\u5b66\u4e60\u6700\u4f73\u5b9e\u8df5\u3002<\/li>\n<\/ol>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<p>\u8fd9\u662f\u7b2c\u5341\u7ae0\u7684\u5185\u5bb9\uff0c\u603b\u7ed3\u4e86\u672c\u6559\u7a0b\u7684\u4e3b\u8981\u5185\u5bb9\u548c\u5b66\u4e60\u6210\u679c\uff0c\u5e76\u63d0\u4f9b\u4e86\u8fdb\u4e00\u6b65\u5b66\u4e60\u7684\u53c2\u8003\u8d44\u6599\u3002\u5e0c\u671b\u672c\u6559\u7a0b\u80fd\u5e2e\u52a9\u4f60\u638c\u63e1Angular\u524d\u7aef\u5f00\u53d1\u6d4b\u8bd5\u7684\u5404\u4e2a\u65b9\u9762\u3002\u5982\u679c\u60a8\u6709\u4efb\u4f55\u95ee\u9898\u6216\u9700\u8981\u8fdb\u4e00\u6b65\u7684\u6f84\u6e05\uff0c\u8bf7\u968f\u65f6\u544a\u8bc9\u6211\u3002<\/p>\n\n\n\n<figure class=\"wp-block-image\"><img decoding=\"async\" src=\"https:\/\/lh3.googleusercontent.com\/a\/ACg8ocLh4B_kew_Ugyfq9egjobpny7AWdKDF1KOH64Elebx0ZhM=s96-c\" alt=\"User\"\/><\/figure>\n\n\n\n<p>\u8bf7\u8be6\u7ec6\u89e3\u91ca\u7b2c\u5341\u7ae0\uff1a\u603b\u7ed3\u548c\u8fdb\u4e00\u6b65\u5b66\u4e60\u7684\u8fdb\u4e00\u6b65\u7684\u5b66\u4e60\u8d44\u6e90ChatGPT<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">\u7b2c\u5341\u7ae0\uff1a\u603b\u7ed3\u548c\u8fdb\u4e00\u6b65\u5b66\u4e60<\/h2>\n\n\n\n<h3 class=\"wp-block-heading\">10.3 \u8fdb\u4e00\u6b65\u7684\u5b66\u4e60\u8d44\u6e90<\/h3>\n\n\n\n<h4 class=\"wp-block-heading\">\u63cf\u8ff0<\/h4>\n\n\n\n<p>\u638c\u63e1Angular\u6d4b\u8bd5\u7684\u57fa\u7840\u548c\u9ad8\u7ea7\u6982\u5ff5\u662f\u4e00\u4e2a\u6301\u7eed\u7684\u5b66\u4e60\u8fc7\u7a0b\u3002\u9664\u4e86\u672c\u6559\u7a0b\u63d0\u4f9b\u7684\u5185\u5bb9\u5916\uff0c\u8fd8\u6709\u8bb8\u591a\u5176\u4ed6\u8d44\u6e90\u53ef\u4ee5\u5e2e\u52a9\u60a8\u66f4\u6df1\u5165\u5730\u4e86\u89e3\u548c\u638c\u63e1\u8fd9\u4e00\u4e3b\u9898\u3002<\/p>\n\n\n\n<h4 class=\"wp-block-heading\">\u63a8\u8350\u7684\u5b66\u4e60\u8d44\u6e90<\/h4>\n\n\n\n<ol class=\"wp-block-list\">\n<li><strong>\u5728\u7ebf\u8bfe\u7a0b\u548c\u6559\u7a0b<\/strong>\n<ul class=\"wp-block-list\">\n<li>Pluralsight\u3001Udemy\u548cCoursera\u7b49\u5e73\u53f0\u4e0a\u6709\u8bb8\u591a\u9ad8\u8d28\u91cf\u7684Angular\u6d4b\u8bd5\u8bfe\u7a0b\u3002<\/li>\n<\/ul>\n<\/li>\n\n\n\n<li><strong>\u4e13\u4e1a\u4e66\u7c4d<\/strong>\n<ul class=\"wp-block-list\">\n<li>\u5982&#8221;Angular Testing and Debugging&#8221;\uff0c&#8221;Pro Angular 9&#8243;\u7b49\u4e66\u7c4d\u6709\u4e13\u95e8\u7684\u7ae0\u8282\u8bb2\u89e3\u6d4b\u8bd5\u3002<\/li>\n<\/ul>\n<\/li>\n\n\n\n<li><strong>YouTube\u548cPodcasts<\/strong>\n<ul class=\"wp-block-list\">\n<li>\u8bb8\u591a\u4e13\u5bb6\u548c\u5f00\u53d1\u8005\u5728YouTube\u548cPodcasts\u4e0a\u5206\u4eab\u4ed6\u4eec\u7684\u7ecf\u9a8c\u548c\u6700\u4f73\u5b9e\u8df5\u3002<\/li>\n<\/ul>\n<\/li>\n\n\n\n<li><strong>\u5f00\u6e90\u9879\u76ee<\/strong>\n<ul class=\"wp-block-list\">\n<li>\u5728GitHub\u4e0a\u53c2\u4e0e\u6216\u7814\u7a76\u4e00\u4e9b\u4f7f\u7528Angular\u7684\u5f00\u6e90\u9879\u76ee\uff0c\u53ef\u4ee5\u8ba9\u60a8\u770b\u5230\u5b9e\u9645\u5e94\u7528\u4e2d\u7684\u6d4b\u8bd5\u6848\u4f8b\u3002<\/li>\n<\/ul>\n<\/li>\n\n\n\n<li><strong>\u535a\u5ba2\u548c\u6587\u7ae0<\/strong>\n<ul class=\"wp-block-list\">\n<li>Medium\u3001Dev.to\u548c\u4e2a\u4eba\u535a\u5ba2\u4e0a\u6709\u5927\u91cf\u5173\u4e8eAngular\u6d4b\u8bd5\u7684\u6587\u7ae0\u3002<\/li>\n<\/ul>\n<\/li>\n\n\n\n<li><strong>\u793e\u7fa4\u548c\u7f51\u7edc\u7814\u8ba8\u4f1a<\/strong>\n<ul class=\"wp-block-list\">\n<li>\u52a0\u5165Angular\u6216\u524d\u7aef\u5f00\u53d1\u76f8\u5173\u7684\u793e\u7fa4\uff0c\u53c2\u4e0e\u7f51\u7edc\u7814\u8ba8\u4f1a\uff0c\u4e0e\u540c\u884c\u4ea4\u6d41\u3002<\/li>\n<\/ul>\n<\/li>\n\n\n\n<li><strong>\u5b98\u65b9API\u6587\u6863\u548c\u6837\u4f8b\u4ee3\u7801<\/strong>\n<ul class=\"wp-block-list\">\n<li>Angular\u5b98\u65b9\u7f51\u7ad9\u63d0\u4f9b\u4e86\u5927\u91cf\u7684API\u6587\u6863\u548c\u6837\u4f8b\u4ee3\u7801\uff0c\u662f\u6700\u6743\u5a01\u7684\u5b66\u4e60\u8d44\u6e90\u3002<\/li>\n<\/ul>\n<\/li>\n\n\n\n<li><strong>\u5b9e\u9645\u9879\u76ee\u5b9e\u8df5<\/strong>\n<ul class=\"wp-block-list\">\n<li>\u6700\u597d\u7684\u5b66\u4e60\u65b9\u5f0f\u5c31\u662f\u5b9e\u8df5\u3002\u5c1d\u8bd5\u5728\u60a8\u7684\u9879\u76ee\u4e2d\u5e94\u7528\u6240\u5b66\u7684\u6d4b\u8bd5\u77e5\u8bc6\u3002<\/li>\n<\/ul>\n<\/li>\n\n\n\n<li><strong>\u4ee3\u7801\u5ba1\u67e5\u548c\u5bf9\u6bd4<\/strong>\n<ul class=\"wp-block-list\">\n<li>\u901a\u8fc7\u5ba1\u67e5\u4ed6\u4eba\u7684\u4ee3\u7801\u6216\u4e0e\u4ed6\u4eba\u5bf9\u6bd4\u60a8\u7684\u4ee3\u7801\uff0c\u60a8\u53ef\u4ee5\u5b66\u5230\u5f88\u591a\u65b0\u4e1c\u897f\u3002<\/li>\n<\/ul>\n<\/li>\n\n\n\n<li><strong>\u6301\u7eed\u5173\u6ce8\u884c\u4e1a\u52a8\u6001<\/strong>\n<ul class=\"wp-block-list\">\n<li>\u8ba2\u9605\u76f8\u5173\u7684\u65b0\u95fb\u6e90\u548c\u535a\u5ba2\uff0c\u4ee5\u4fbf\u4e86\u89e3\u6700\u65b0\u7684\u5de5\u5177\u3001\u5e93\u548c\u6700\u4f73\u5b9e\u8df5\u3002<\/li>\n<\/ul>\n<\/li>\n<\/ol>\n\n\n\n<h4 class=\"wp-block-heading\">\u6ce8\u610f\u4e8b\u9879<\/h4>\n\n\n\n<ul class=\"wp-block-list\">\n<li>\u9009\u62e9\u9002\u5408\u60a8\u5f53\u524d\u6c34\u5e73\u548c\u9700\u6c42\u7684\u8d44\u6e90\u3002<\/li>\n\n\n\n<li>\u4e0d\u8981\u4ec5\u9650\u4e8e\u4e00\u79cd\u7c7b\u578b\u7684\u8d44\u6e90\uff0c\u591a\u5143\u5316\u7684\u5b66\u4e60\u65b9\u5f0f\u901a\u5e38\u66f4\u4e3a\u9ad8\u6548\u3002<\/li>\n<\/ul>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<p>\u8fd9\u662f\u7b2c\u5341\u7ae0\u6700\u540e\u4e00\u5c0f\u8282\u7684\u5185\u5bb9\uff0c\u4e13\u95e8\u4e3a\u60a8\u63d0\u4f9b\u4e86\u8fdb\u4e00\u6b65\u5b66\u4e60Angular\u6d4b\u8bd5\u7684\u591a\u79cd\u8d44\u6e90\u548c\u5efa\u8bae\u3002\u5e0c\u671b\u8fd9\u4e9b\u4fe1\u606f\u80fd\u5e2e\u52a9\u60a8\u5728Angular\u6d4b\u8bd5\u65b9\u9762\u8fbe\u5230\u66f4\u9ad8\u7684\u6c34\u5e73\u3002\u5982\u679c\u60a8\u6709\u4efb\u4f55\u95ee\u9898\u6216\u9700\u8981\u8fdb\u4e00\u6b65\u7684\u6f84\u6e05\uff0c\u8bf7\u968f\u65f6\u544a\u8bc9\u6211\u3002<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Angular\u524d\u7aef\u5f00\u53d1\u6d4b\u8bd5\u6559\u7a0b\u5927\u7eb2 \u7b2c\u4e00 &hellip; <\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"om_disable_all_campaigns":false,"_mi_skip_tracking":false,"footnotes":""},"categories":[23],"tags":[],"class_list":["post-3014","post","type-post","status-publish","format-standard","hentry","category-material"],"aioseo_notices":[],"_links":{"self":[{"href":"https:\/\/edu.ujhb.org\/index.php?rest_route=\/wp\/v2\/posts\/3014","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/edu.ujhb.org\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/edu.ujhb.org\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/edu.ujhb.org\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/edu.ujhb.org\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=3014"}],"version-history":[{"count":1,"href":"https:\/\/edu.ujhb.org\/index.php?rest_route=\/wp\/v2\/posts\/3014\/revisions"}],"predecessor-version":[{"id":3015,"href":"https:\/\/edu.ujhb.org\/index.php?rest_route=\/wp\/v2\/posts\/3014\/revisions\/3015"}],"wp:attachment":[{"href":"https:\/\/edu.ujhb.org\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=3014"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/edu.ujhb.org\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=3014"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/edu.ujhb.org\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=3014"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}