从Symfony 2的第一个版本开始，欧宝娱乐app下载地址<一个href＝＂//www.oldmanjams.com/doc/current/testing.html" class="reference external">该框架提供了一套方便的工具创建功能测试。他们使用BrowserKit和DomCrawler组件来模拟具有开发者友好API的web浏览器。

WebTestCase助手

让我们通过创建一个小型新闻网站和相应的功能测试套件来刷新我们的记忆:欧宝app在哪里找

1 2 3 4 5 6 7 8 9 10

#创建新项目＄作曲家创建项目symfony/骨架新闻网站欧宝娱乐app下载地址欧宝app在哪里找＄cd欧宝app在哪里找新闻网站/#添加一些依赖项＄作曲家需要树枝注释＄编写器要求—开发人员测试#运行PHP内置web服务器＄php -S 127.0.0.1:8000 -t public

我们准备好编码了。首先添加一个类来存储和检索新闻:欧宝app在哪里找

12 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28

/ / src /仓库/ NewsR欧宝app在哪里找epository.php名称空间应用程序＼存储库；类欧宝app在哪里找NewsRepository｛私人常量欧宝app在哪里找新闻= [“周- 601”= > [“鼻涕虫”= >“周- 601”，“标题”= >“交响乐一周#601(欧宝娱乐app下载地址2018年7月2日至8日)”，“身体”= >"我是孤独的，我是神圣的，我是劳动的"),“欧宝娱乐app下载地址symfony -生活- usa - 2018”= > [“鼻涕虫”= >“欧宝娱乐app下载地址symfony -生活- usa - 2018”，“标题”= >“加入我们2018年美国欧宝娱乐app下载地址SymfonyLive !”，“身体”= >"尼莫，伊姆，伊姆，性，性，坐着，自然，自然，自然，结果"]];公共函数findAll（）：可迭代的｛返回元素自我：：欧宝app在哪里找新闻);｝公共函数findOneBySlug(字符串＄鼻涕虫）:哦?数组｛返回自我：：欧宝app在哪里找新闻(＄鼻涕虫) ? ?零；}}

这个实现不是非常动态的，但它完成了工作。然后，我们需要一个控制器和相应的Twig模板来显示社区的最新消息。欧宝下载链接欧宝app在哪里找我们将使用Maker Bundle来生成它们:

＄./bin/console make:控制器新闻欧宝app在哪里找

编辑生成的代码以满足我们的需求:

12 34 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39

/ / src /控制器/ News欧宝app在哪里找Controller.php名称空间应用程序＼控制器；使用应用程序＼存储库＼欧宝app在哪里找NewsRepository；使用欧宝娱乐app下载地址＼组件＼HttpFoundation＼响应；使用欧宝娱乐app下载地址＼组件＼路由＼注释＼路线；使用欧宝娱乐app下载地址＼包＼FrameworkBundle＼控制器＼控制器；类欧宝app在哪里找NewsController扩展控制器｛私人＄欧宝app在哪里找newsRepository；公共函数__construct(欧宝app在哪里找NewsRepository＄欧宝app在哪里找newsRepository）｛＄这->欧宝app在哪里找newsRepository =＄欧宝app在哪里找newsRepository；｝/ * * *@Route("/"， name="欧宝app在哪里找news_index") */公共函数指数（）：响应｛返回＄这->呈现(“欧宝app在哪里找新闻/ index.html.twig”, (“收集”= >＄这->欧宝app在哪里找newsRepository->findAll ()));｝/ * * *@Route("/欧宝app在哪里找news/{slug}"， name="news_item") */公共函数项(字符串＄鼻涕虫）：响应｛如果（零＝＝＝＄欧宝app在哪里找＝＄这->欧宝app在哪里找newsRepository->findOneBySlug (＄鼻涕虫)) {扔＄这->createNotFoundException ();｝返回＄这->呈现(“欧宝app在哪里找新闻/ item.html.twig”, (“项目”= >＄欧宝app在哪里找]);}}

              12 3 4 5 6 7 8 9 10 11 12 13
              {#模板/新闻/ inde欧宝app在哪里找x . html。树枝#}{%扩展“base.html。嫩枝' %}{%块标题%}欧宝app在哪里找{%endblock%}{%块身体%}{%为集合%}中的项<文章id＝＂{{项目。鼻涕虫}}＂><h1><一个href＝＂{{path('n欧宝app在哪里找ews_item'， {slug: item.slug})}}＂>{{项目。标题}}一个>h1>{{项目。身体}}文章>{%endfor%}{%endblock%}
             

              1 2 3 4 5 6 7 8
              {%扩展“base.html。嫩枝' %}{%块标题%}{{项目。标题}}{%endblock%}{%块身体%}<h1>{{项目。标题}}h1>{{项目。身体}}{%endblock%}
             

多亏了WebTestCase助手，为这个网站添加一些功能测试很容易。首先，生成一个功能测试框架:

＄./bin/console make:function -test N欧宝app在哪里找ewsControllerTest

并添加断言来检查我们的控制器是否正常工作:

12 3 4 5 6 7 8 9 10 11 12 13 14 16 17 18 19 20 21

/ /测试/ Ne欧宝app在哪里找wsControllerTest.php名称空间应用程序＼测试；使用欧宝娱乐app下载地址＼包＼FrameworkBundle＼测试＼WebTestCase；类欧宝app在哪里找NewsControllerTest扩展WebTestCase｛公共函数test欧宝app在哪里找News（）｛＄客户端＝静态：：createClient ();＄履带＝＄客户端->请求(“得到”，' / '）;＄这->assertCount (2，＄履带->过滤器(“标题”));＄这->assertSame ([“周- 601”，“欧宝娱乐app下载地址symfony -生活- usa - 2018”),＄履带->过滤器(“文章”）->提取(“id”));＄链接＝＄履带->selectLink (“加入我们2018年美国欧宝娱乐app下载地址SymfonyLive !”）->链接();＄履带＝＄客户端->点击(＄链接）;＄这->assertSame (“加入我们2018年美国欧宝娱乐app下载地址SymfonyLive !”，＄履带->过滤器(“标题”）->text ());}}

现在，运行测试:

＄/ bin / phpunit)

所有绿色!欧宝娱乐app下载地址Symfony提供了一个非常方便的API来浏览网站，检查链接是否正常工作，并断言显示了预期的内容。它很容易安装，而且超级快!

WebTestCase不使用真正的网络浏览器。它模拟了一个纯PHP组件。它甚至不使用HTTP协议:它创建HttpFoundation的实例请求对象，将它们传递给Symfony内核，并允许在Htt欧宝娱乐app下载地址pFoundation上断言响应实例返回的应用程序。现在，如果一个问题阻止网页加载发生在浏览器吗?这类问题可以是多种多样的，比如被错误的CSS规则隐藏的链接、默认的表单行为<一个href＝＂https://developer.mozilla.org/en-US/docs/Web/API/Event/preventDefault" class="reference external" rel="external noopener noreferrer" target="_blank">由一个有bug的JavaScript文件阻止，或者更糟的是，<一个href＝＂https://www.chromium.org/developers/design-documents/xss-auditor" class="reference external" rel="external noopener noreferrer" target="_blank">由浏览器检测代码中的安全漏洞．

好吧，Panther允许在真实的浏览器中运行完全相同的场景!它还实现了BrowserKit和DomCrawler api，但在底层它使用<一个href＝＂https://github.com/facebook/php-webdriver" class="reference external" rel="external noopener noreferrer" target="_blank">Facebook PHP WebDriver图书馆。这意味着您可以选择在闪电般的纯PHP实现中执行相同的浏览场景(WebTestCase)或在任何现代网页浏览器中，通过<一个href＝＂https://www.w3.org/TR/webdriver/" class="reference external" rel="external noopener noreferrer" target="_blank">WebDriver浏览器自动化协议该标准在6月成为W3C的官方推荐标准。

更棒的是，使用Panther，你只需要在本地安装Chrome。没有什么需要安装的了:没有Selenium(但是Panther也支持它)，没有晦涩的浏览器驱动程序或扩展……实际上，因为Panther现在是欧宝娱乐app下载地址symfony /测试包在你输入黑豹的时候，你已经安装了黑豹而不知道它编写器请求—开发测试早些时候。您还可以通过运行在任何PHP项目中直接安装Panther作曲家要求交响乐/黑豹欧宝娱乐app下载地址．

让我们调整我们现有的测试用例的一些行:

12 3 4 5 6 7 8 9 10 11 12 13

// tests/欧宝app在哪里找NewsControllerTest.php命名空间App\ tests;用Symf欧宝娱乐app下载地址ony \包\ FrameworkBundle \ \ WebTestCase测试;+使用Sy欧宝娱乐app下载地址mfony \ \豹\ PantherTestCase组件;-class 欧宝app在哪里找NewsControllerTest扩展WebTestCase+类NewsC欧宝app在哪里找ontrollerTest扩展PantherTestCase{公共函数testNews() {欧宝app在哪里找- $client = static::createClient();//如果需要，仍然工作+ $client = static::createPantherClient();

再次运行测试:

＄/ bin / phpunit)

又全绿了!但这一次，我们确信我们的新闻网站在谷歌Chrome浏览器中正常工作。欧宝app在哪里找

黑豹的引擎盖下有:

使用内置的PHP web服务器启动项目localhost: 9000
启动版本<一个href＝＂http://chromedriver.chromium.org/" class="reference external" rel="external noopener noreferrer" target="_blank">Chromedriver附带的库可以自动化您的本地Chrome<李>使用Chrome浏览器在headless模式下执行测试中定义的浏览场景

如果你只相信你所看到的，试着运行下面的程序:

＄PANTHER_NO_HEADLESS = 1 / bin / phpunit)

观看录像

你可能在录音中注意到了，我增加了一些通话睡眠()为了突出它的工作原理。访问浏览器的窗口(以及Dev Tools)对于调试失败的场景也非常有用。

因为这两个工具实现了相同的API, Panther也可以执行为流行编写的web抓取场景<一个href＝＂https://github.com/FriendsOfPHP/Goutte" class="reference external" rel="external noopener noreferrer" target="_blank">Goutte图书馆．在测试用例中，Panther允许您选择是否必须使用Symfony内核执行场景(当可用时，欧宝娱乐app下载地址静态:createClient ())，使用Goutte(发送真正的HTTP查询，但不支持JavaScript和CSS，静态:createGoutteClient ())或使用真正的网页浏览器(静态:createPantherClient ()）.

即使Chrome是默认选项，Panther也可以控制任何支持WebDriver协议的浏览器。它还支持远程浏览器测试服务，例如<一个href＝＂https://github.com/SeleniumHQ/selenium/wiki/Grid2" class="reference external" rel="external noopener noreferrer" target="_blank">硒网格（开源),<一个href＝＂https://saucelabs.com/" class="reference external" rel="external noopener noreferrer" target="_blank">SauceLabs而且<一个href＝＂https://www.browserstack.com/" class="reference external" rel="external noopener noreferrer" target="_blank">Browserstack．

也有<一个href＝＂https://github.com/欧宝娱乐app下载地址symfony/panther/pull/14" class="reference external" rel="external noopener noreferrer" target="_blank">一个实验分支使用<一个href＝＂https://github.com/mozilla/geckodriver" class="reference external" rel="external noopener noreferrer" target="_blank">Geckodriver自动启动并驱动本地Firefox安装，而不是Chrome。

Vue.js．对这个特性使用JavaScript可以提高整体性能和用户体验:每次我们发布新的评论时，它都将显示在现有页面中，而不需要完全重新加载。

欧宝娱乐app下载地址Symfony提供了与的正式集成<一个href＝＂https://api-%20platform.com" class="reference external" rel="external noopener noreferrer" target="_blank">API的平台，可能是创建现代web api最简单的方法(hypermedia和/或GraphQL)。安装:

＄作曲家需要API

然后，再次使用Maker Bundle创建一个评论实体类，并通过读写API端点公开它:

＄./bin/console make:entity——api-resource注释

该命令是交互式的，允许指定要创建的字段。我们只需要两个:欧宝app在哪里找(这则新闻的重头戏)和欧宝app在哪里找身体(评论的内容)。欧宝app在哪里找是类型的字符串(最大长度255识字课),而身体是类型的文本．两者都不是空的。

以下是与该命令互动的完整记录:

12 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24

新的属性名称(按<返回>停止添加字段):> news字段欧宝app在哪里找类型(输入?[string]: >字段长度[255]:>该字段可以为空吗在the database (nullable) (yes/no) [no]: > updated: src/Entity/Comment.php添加另一个属性?输入属性名(或按<返回>停止添加字段):> body字段类型(输入?to see all types) [string]: > text该字段可以为空吗在the database (nullable) (yes/no) [no]: > updated: src/Entity/Comment.php

更新.env的值DATABASE_URL到RDBMS的地址，并运行以下命令创建与我们的实体对应的表:

＄/ bin /控制台学说:模式:创建

如果你打开http://localhost:8000/api，您可以看到API已经在工作并有文档记录。

我们将对生成的评论类。目前，API允许得到，帖子，把而且删除操作。这太开放了。因为我们现在没有任何认证机制，我们只希望我们的用户能够创建和阅读注释:

1 2 3 4 5 6

／**- * @ApiResource()+ * @ApiResource(+ * collectionOperations={"post"， "get"}，+ * itemOperations={"get"}+ *)

然后，我们希望能够检索发布在特定新闻文章上的评论。欧宝app在哪里找我们将使用<一个href＝＂https://api-platform.com/docs/core/filters/" class="reference external" rel="external noopener noreferrer" target="_blank">过滤器为了做到这一点:

1 2 3 4 5 6 7 8 9

+使用ApiPlatform\Core\Annotation\ApiFilter;使用ApiPlatform \ \注释\ ApiResource核心;+使用ApiPlatform\Core\Bridge\Doctrine\Orm\Filter\SearchFilter;/** * @ORM\Column(type="string"， length=255)+ * @ApiFilter(SearchFilter::class)*/ private $欧宝app在哪里找news;

最后，添加一些验证约束，以确保提交的注释是OK的:

12 3 4 5 6 7 8 9 10 11 12

/** * @ORM\Column(type="string"， length=255)+ * @Assert\Choice(choices={"week-601"， "欧宝娱乐app下载地址symfony-live-usa-2018"})* @ApiFilter(SearchFilter::class) */ private $欧宝app在哪里找news;/** * @ORM\Column(type="text")+ * @Assert\NotBlank()*/ private $body;

重新加载http://localhost:8000/api时，更改会自动被考虑。

创建一个<一个href＝＂//www.oldmanjams.com/doc/current/validation/custom_constraint.html" class="reference external">自定义验证约束选择断言中可用的段代码列表不是硬编码，而是留给读者作为练习。

以上就是PHP的全部内容!很简单，不是吗?让我们用Vue.js来使用我们的API吧!为此，我们将使用Vue.js集成<一个href＝＂//www.oldmanjams.com/doc/current/frontend.html" class="reference external">欧宝娱乐app下载地址Symfony Webpack Encore．

安装Encore及其Vue.js集成:

1 2 3 4

＄作曲家要求返场#如果你还没有Yarn包管理器，从https://yarnpkg.com/en/安装它＄线安装＄Yarn add——dev vue vue-loader@^14 vue-template-compiler

更新Encore的配置以启用Vue加载器:

1 2 3 4 5 6

// webpack.config.js Encore //…+ . addentry ('js/comments'， './assets/comments/index.js')+ .enableVueLoader ()

我们准备创建一些很酷的前端!让我们从一个Vue组件开始，它呈现了一个评论列表和一个发布新评论的表单:

12 34 56 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61

<！——资产/评论/ CommentSystem。vue - - - ><模板><div><ol逆转v＝“comments.length”><李v代表＝“评论中的评论”:关键＝“评论[@ id的]”>{{发表评论。身体}}李>ol><pv-else>暂无评论p><形式id＝“post-comment”@submit.prevent＝“onSubmit”><文本区域的名字＝“新的评论”v模型＝“newComment”占位符＝“你的意见很重要!请给我们留言。”>文本区域><输入类型＝“提交”:禁用＝"！newComment”>形式>div>模板><脚本>出口默认的｛道具: {欧宝app在哪里找: {类型：字符串，要求：真正的}},方法: {fetchComments() {fetch(' / api /评论吗?欧宝app在哪里找新闻=$ {encodeURIComponent（这格欧宝app在哪里找式)}｀) (（响应) = >response.json ()) (（数据) = >这.comments = data[“九头蛇:成员”]);}， onSubmit(){获取(“/ api /评论”, {方法：“职位”，头: {“接受”：应用程序/ ld + json的，“内容类型”：应用程序/ ld + json的}，身体：JSON.stringify ({欧宝app在哪里找：这格欧宝app在哪里找式,身体：这.newComment})}) .then(（{好,statusText}) = >｛如果(!ok) {alert(statusText);返回；｝这.newComment =”；这.fetchComments ();});}}， data() {返回｛评论: [],newComment：”};}， created() {这.fetchComments ();}}脚本>

没有那么难，对吧?

然后，为我们的评论应用程序创建入口点:

1 2 3 4 5 6 7 8

/ /资产/评论/ index.js进口Vue从“vue”；进口CommentSystem从”。/ CommentSystem '；新Vue ({埃尔：“#评论”，组件: {CommentSystem}});

最后，引用JavaScript文件并初始化<评论系统>Web组件中的当前段item.html.twig模板:

12 3 4 5 6 7 8 9 10 11 12 13

{% block body %} {{item。Title}}
 {{item。身体}}+ +  < /评论系统>+ < / div >{% endblock %}+ {% block javascript %}+ < script src = "{{资产(“构建/ js / comments.js”)}}" > < /脚本>+ {% endblock %}

构建编译和缩小的JS文件(您可能想使用<一个href＝＂//www.oldmanjams.com/doc/current/frontend/encore/dev-server.html" class="reference external">热模块重装在dev):

＄纱线返场生产

哇!多亏了Symfony欧宝娱乐app下载地址 4，我们只用了几行代码就创建了一个web API和一个丰富的Vue.js web应用程序。好的，让我们为我们的评论系统添加一些测试!

等待……注释使用AJAX获取，并使用JavaScript在客户端呈现。新的注释也是使用JS异步添加的。不幸的是，它将无法使用WebTestCase也没有Goutte来测试我们的新功能:它们是用PHP编写的，不支持JavaScript或AJAX。

不用担心，Panther能够测试这样的应用程序。记住:在引擎盖下，它使用一个真正的网络浏览器!

让我们测试一下我们的评论系统:

12 3 4 5 6 7 8 9 10 11 12 13 14 16 17 18 19 20 21

名称空间应用程序＼测试；使用欧宝娱乐app下载地址＼组件＼豹＼PantherTestCase；类CommentsTest扩展PantherTestCase｛公共函数testComments（）｛＄客户端＝静态：：createPantherClient ();＄履带＝＄客户端->请求(“得到”，' 欧宝app在哪里找/新闻/ 欧宝娱乐app下载地址symfony -生活-美国- 2018”）;＄客户端->等待(“# post-comment”）;//等待表单出现，这可能需要一些时间，因为它是用JS完成的＄形式＝＄履带->过滤器(“# post-comment”）->形式([“新的评论”= >“欧宝娱乐app下载地址Symfony太酷了!”]);＄客户端->提交(＄形式）;＄客户端->等待(“#评论的）;//等待注释出现＄这->assertSame (自我:: $baseUri。' 欧宝app在哪里找/新闻/ 欧宝娱乐app下载地址symfony -生活-美国- 2018”，＄客户端->getCurrentURL ());//我们仍然在同一页上＄这->assertSame (“欧宝娱乐app下载地址Symfony太酷了!”，＄履带->过滤器(#评论ol li:第一个孩子）->text ());}}

注意，在测试模式中，环境变量必须由定义phpunit.xml.dist．一定要更新DATABASE_URL引用用所需表填充的干净数据库。当数据库准备就绪时，运行测试:

＄/ bin / phpunit)

观看录像

多亏了Panther，您可以利用现有的Symfony技能和漂亮的BrowserKit API来测试现代JavaScript应用程欧宝娱乐app下载地址序。

Facebook \ WebDriver \ WebDriver接口，给予访问<一个href＝＂https://github.com/facebook/php-webdriver/wiki" class="reference external" rel="external noopener noreferrer" target="_blank">PHP Webdriver的所有特性．

我们试试吧。更新之前的测试场景，截取渲染页面的截图:

1 2

$this->assertSame('欧宝娱乐app下载地址Symfony太酷了!”,履带- >过滤器(“#评论ol李:第一个孩子”)- >文本());+客户端- > takeScreenshot(“screen.png”);

Panther也可以在持续集成系统中运行:它支持Travis和AppVeyor开箱即用，并且与Docker兼容!

要阅读完整的文档，或给项目打一颗星欧宝体育电话，请转到<一个href＝＂https://github.com/欧宝娱乐app下载地址symfony/panther＂类＝＂reference external" rel="external noopener noreferrer" target="_blank">GitHub存储库．

赞助机会．

部署在

WebTestCase助手

{{item。Title}}

评论

评论截止。