테스트 가능한 테마 구축: 단위 테스트를 위한 초보자 가이드
- 王林원래의
- 2023-09-04 16:29:091179검색
이 시리즈의 처음 두 기사에서는 단위 테스트가 무엇인지, 그리고 이를 플러그인 개발 환경에 적용하는 방법을 자세히 살펴보았습니다. 물론 WordPress에는 단순히 플러그인을 작성하는 것 이상의 기능이 있습니다. 그렇죠? WordPress 개발자의 업무 중 중요한 부분은 테마 개발입니다. 어떤 사람에게는 가장가장 중요한 부분이기도 합니다.
그래서 이번 글에서는 테스트 가능한 테마를 개발하는 방법을 알아보겠습니다. 구체적으로 테마가 플러그인과 어떻게 다른지 살펴본 다음 단위 테스트의 원칙을 보여주고 향후 개발에 적용할 수 있는 매우 간단한 테마를 작성해 보겠습니다.
테마와 플러그인의 차이점 이해하기
테마 생성을 시작하거나 코드를 검토하기 전에 테마와 플러그인 개발의 차이점을 이해하는 것이 중요합니다. 첫째, 플러그인은 두 가지 방법으로 작성할 수 있습니다:
- 일련의 기능을 캡슐화하는 객체로서(이 글에서 우리가 하는 일이 바로 이것이다).
- 단순한 기능 모음으로
두 방법 모두 동일한 작업을 수행합니다. 즉, 함수 및 필터 모음을 사용하여 WordPress에 새로운 기능을 도입합니다. 주요 차이점은 함수가 캡슐화되는 방식입니다.
하지만 테마 개발에 있어서 테마를 개발하는 방법은 실제로 한 가지뿐입니다. 그것은 functions.php에 정의된 함수 모음을 사용하는 것입니다. 이로 인해 주제 단위 테스트를 작성하는 데 다음과 같은 두 가지 과제가 발생합니다.
- 테마가 객체지향이 아니기 때문에 실제로 이전 글처럼 객체를 배열로 저장할 수는 없습니다
- 테마를 브라우저에 로드하는 것과 별도로 실행되는 테마 기능을 작성하고 평가하는 방법을 식별해야 했습니다
좋은 테마는 필터와 액션의 모음을 사용하기 때문에 이러한 모범 사례를 따르는 테마를 만들 것이며, 이 특정 기사의 초점은 단위 테스트 테마에 있으므로 대신 테스트 작성에 더 중점을 두는 것이 아닙니다. 아름답고 기능적인 테마를 만듭니다.
단위 테스트 준비
코딩하기 전에 프로젝트 디렉터리를 초기화해 보겠습니다. WordPress 테마 디렉터리 내에 테마에 대한 새 디렉터리가 생성되도록 테마 프레임워크를 설정해야 합니다. 내 이름은 Basic Theme입니다. 다음 파일을 추가하세요(나중에 채울 예정입니다):
- footer.php
- functions.php
- header.php
- index.php
- style.css
WordPress가 테마를 인식하고 대시보드에서 활성화할 수 있도록 스타일시트를 삭제해 보겠습니다. 이렇게 하려면 다음 코드를 추가하세요:
으아악완전성을 위해 함수 파일의 시작과 끝에 PHP 열기 및 닫기 태그를 추가하세요. 이렇게 하면 이 문서의 뒷부분에서 주제 함수 작성을 시작할 때 기초를 다질 수 있습니다.
그리고 tests라는 새 디렉토리를 추가하세요. 여기에서 WordPress 테스트를 수행해야 합니다.
WordPress 테스트: 간략한 소개
이 시리즈 초반에 GitHub에 있는 WordPress 테스트 링크를 제공했습니다. 이러한 테스트도 훌륭하지만 Automattic에서 유지관리하는 최신 WordPress 테스트가 이 Subversion 저장소에 있습니다.
고급 개발자라면 이 테스트를 확인하는 것이 좋습니다. 그러나 단위 테스트를 막 시작한 경우에는 문제 없습니다. 모든 소스 코드(WordPress 테스트 포함)를 GitHub 리포지토리에서 다운로드하여 참조하고 자신의 프로젝트에서 사용할 수 있도록 만들었습니다.
테스트를 설치한 후 테마 디렉토리는 다음과 같아야 합니다.
PHPUnit은 명령줄에서 실행해야 하므로 터미널 세션(또는 명령 프롬프트)을 열고 tests 디렉터리로 이동한 후 다음 명령을 사용하여 실행할 수 있습니다(예: ):
으아악터미널에서 다음을 출력해야 합니다.
基本主题：可单元测试的 WordPress 主题
此时，让我们继续激活仪表板中的主题。主题应该激活（如果没有激活，请确保模板文件中没有任何杂散字符）。如果您尝试查看主题，它自然会显示白屏。
在编写任何测试之前，让我们继续使用一些内容填充我们的模板文件，以便我们可以在前端显示一些内容。
在header.php中，添加以下代码：
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <link rel="profile" href="http://gmpg.org/xfn/11" /> <link rel="pingback" href="<?php bloginfo( 'pingback_url' ); ?>" /> <title><?php wp_title( '' ); ?></title> <?php wp_head(); ?> </head> <body <?php body_class(); ?>> <div id="header"> This is the header. </div><!-- /#header -->
在index.php中，添加以下代码：
<?php get_header(); ?> <div id="content"> This is the content. </div><!-- /#content --> <?php get_footer(); ?>
并在footer.php中添加以下代码：
<div id="footer"> This is the footer. </div><!-- /#footer --> </body> </html>
很简单，我知道，但这足以让我们在开始编写测试时使用。保存您的工作，在浏览器中查看主题，您应该会看到以下内容：
编写单元测试
测试主题激活
在您的 tests 目录中，创建一个名为 test_basic_theme.php 的文件，并对该文件进行存根处理，如下所示：
// Include the functions for the theme
include_once('../functions.php');
class Test_Basic_Theme extends WP_UnitTestCase {
} // end class
上面，我们定义了一个类，用于包装所有主题的单元测试。
首先，我们定义 setUp 方法。 setUp 方法是 WordPress 测试框架提供的函数，我们可以使用它在测试运行之前触发某些函数。例如，当 WordPress 测试运行时，它们会针对默认主题（即“211”）运行。在我们的例子中，我们希望针对我们自己的主题运行测试。
为此，我们需要告诉 WordPress 在运行其余测试之前实际切换主题。由于这需要在测试运行之前发生，因此需要在 setUp 方法中定义。有道理吗？
所以让我们编写 setUp 方法：
function setUp() {
parent::setUp();
switch_theme( 'Basic Theme', 'Basic Theme' );
} // end setup
再次执行我们的测试。我们可以通过运行与最初设置测试时相同的命令来完成此操作：
phpunit tests/test_basic_theme.php
如果您已正确完成所有操作，那么在测试运行时您实际上应该会看到失败：
但错误消息很明确：“在类“Test_Basic_Theme””中找不到测试。因此，让我们减轻这种情况并为主题编写第一个测试。它可以是非常简单的事情，但请记住上一篇文章中我们不想只测试最佳路径，而是还要测试失败路径。
因此，我们需要测试基本主题是否处于活动状态以及“211”是否处于活动状态。为此，我们将使用assertTrue 方法和assertFalse 方法，并且我们将在两个函数的上下文中执行此操作。查看下面的代码并相应地更新您的测试文件：
function testActiveTheme() {
$this->assertTrue( 'Basic Theme' == get_current_theme() );
} // end testThemeInitialization
function testInactiveTheme() {
$this->assertFalse( 'Twenty Eleven' == get_current_theme() );
} // end testInactiveTheme
再次执行测试，您应该看到它们运行绿色。不错，对吧？
这是一个相对简单的功能，因此让我们考虑一下我们的主题可以具有的一些高级功能。
测试 jQuery 是否已入队
开箱即用的基本主题不包含 jQuery，因此我们将其包含在我们的主题中。如果您还记得之前的帖子，正确的单元测试方法如下：
- 编写测试
- 运行测试（它会失败）
- 编写使测试通过所需的代码
- 运行测试（它应该通过，允许第 3 步正确完成）
那么，让我们对 jQuery 执行此操作。
首先，我们需要编写一个测试来确定 jQuery 是否已加载。我们将使用 WordPress 函数 wp_script_is。由于主题在浏览器中经历正常的页面生命周期，因此我们需要使用 do_action 函数手动告诉 WordPress 加载 jQuery。
function testjQueryIsLoaded() {
$this->assertFalse( wp_script_is( 'jquery' ) );
do_action( 'wp_enqueue_scripts' );
$this->assertTrue( wp_script_is( 'jquery' ) );
} // end testjQueryIsLoaded
在我们进一步讨论之前，这里有一些重要的事情需要注意：我不喜欢在一个函数中放置多个断言，因为我认为每个函数应该用于测试一个目的；然而，也有例外。在这里，我们需要确保在调用 do_action 之前未加载 jQuery。
无论如何，运行测试都会失败。因此，我们需要将代码添加到 functions.php 中，以确保将 jQuery 添加到我们的主题中。为此，请在函数文件中包含以下函数：
function basic_add_jquery() {
wp_enqueue_script( 'jquery' );
} // end basic_remove_jquery
add_action( 'wp_enqueue_scripts', 'basic_add_jquery' );
最后，运行测试，它应该是绿色的。很简单，不是吗？
测试元描述
假设我们想要在主页上包含默认元描述。在最简单的情况下，它只不过是博客的描述。因此，按照上面概述的方法，我们引入一个函数来测试添加到 head 元素的元描述字符串是否符合我们的预期：
function testBasicMetaDescription() {
$meta_description = '<meta name="description" content="' . get_bloginfo( 'description' ) . '" />';
$this->expectOutputString( $meta_description, basic_meta_description() );
} // end testBasicMetaDescription
运行它——它会失败。请注意，我没有使用标准 assertTrue、assertFalse 函数 - 稍后会有更多详细信息。现在，我们将以下函数引入到functions.php中：
function basic_meta_description() {
echo '<meta name="description" content="' . get_bloginfo( 'description' ) . '" />';
} // end basic_meta_description
add_action( 'wp_head', 'basic_meta_description' );
请注意，此函数挂钩到 wp_head 操作。为了将元描述写入 head 元素，我们必须回显字符串，而不是返回字符串。
现在，请注意，在上面的测试中，我们使用的是 expectOutputString。当我们需要评估一个回显一个字符串（而不是返回一个字符串）的函数时，这非常有用。由于 wp_head 操作将返回大量数据（即整个 head 元素），因此我们实际上只需要评估返回的元描述。这就是为什么我不调用 do_action( 'wp_head' ) ，而是简单地调用函数本身并根据我期望的结果评估输出。
再次运行 PHPUnit，您的测试应该全部通过。
测试所有事情
显然，我们只是触及了单元测试对主题开发的表面作用。还有很多东西可以测试 - 我们甚至还没有考虑过测试 The Loop、评估帖子格式的各种方法，甚至还没有考虑如何检查评论。
请记住，这是一本初学者指南，这三篇文章涵盖了很多内容。
无论如何，原则是相同的：问题是确保以编程方式触发适当的函数或操作，并在预期和意外情况下评估其输出。
最后，您可以在此 GitHub 存储库中找到整个项目以及记录的函数。
资源
以下是本文中使用的资源的摘要：
- 什么是单元测试？
- 构建可测试的插件
- PHPUnit
- 官方 WordPress 测试
assertTrueassertFalsewp_script_isdo_actionwp_headexpectOutputString- GitHub 上的基本主题
위 내용은 테스트 가능한 테마 구축: 단위 테스트를 위한 초보자 가이드의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!