编辑“︁Django前端测试”︁（章节）

= Django前端测试 =

'''Django前端测试'''是指在Django项目中针对前端界面（HTML模板、JavaScript交互、CSS样式等）进行的自动化测试，确保用户界面行为符合预期。这类测试通常与后端逻辑测试结合，构成完整的全栈测试体系。

== 概述 ==
Django作为一个全栈框架，其前端测试主要关注：
* '''模板渲染'''：验证动态数据是否正确嵌入HTML
* '''表单交互'''：检查表单验证、提交行为
* '''JavaScript集成'''：测试前端逻辑与Django后端的通信
* '''响应式设计'''：确保不同设备的显示兼容性

== 测试类型 ==
=== 1. 单元测试 ===
针对独立前端组件的小范围测试，通常使用Django内置测试工具：

<syntaxhighlight lang="python">
from django.test import TestCase
from django.urls import reverse

class TemplateTest(TestCase):
    def test_homepage_template(self):
        response = self.client.get(reverse('home'))
        self.assertTemplateUsed(response, 'home.html')
        self.assertContains(response, 'Welcome to Django')
</syntaxhighlight>

'''输出说明'''：测试通过表示：
1. 正确使用了home.html模板
2. 响应中包含"Welcome to Django"文本

=== 2. 功能测试 ===
使用浏览器自动化工具（如Selenium）模拟用户操作：

<mermaid>
graph TD
    A[启动测试浏览器] --> B[访问/login页面]
    B --> C[填写表单并提交]
    C --> D[验证重定向和欢迎消息]
</mermaid>

<syntaxhighlight lang="python">
from selenium import webdriver
from django.test import LiveServerTestCase

class LoginTest(LiveServerTestCase):
    @classmethod
    def setUpClass(cls):
        super().setUpClass()
        cls.browser = webdriver.Chrome()

    def test_login(self):
        self.browser.get(f"{self.live_server_url}/login")
        username = self.browser.find_element_by_name('username')
        password = self.browser.find_element_by_name('password')
        username.send_keys('testuser')
        password.send_keys('secret123')
        self.browser.find_element_by_tag_name('form').submit()
        self.assertIn('Dashboard', self.browser.title)
</syntaxhighlight>

=== 3. JavaScript测试 ===
使用Jest或QUnit等框架测试前端逻辑：

<syntaxhighlight lang="javascript">
// 测试Django CSRF令牌处理
test('AJAX请求包含CSRF令牌', () => {
    const token = document.querySelector('[name=csrfmiddlewaretoken]').value;
    const xhr = new XMLHttpRequest();
    xhr.open('POST', '/api/data');
    expect(xhr.requestHeaders['X-CSRFToken']).toBe(token);
});
</syntaxhighlight>

== 测试策略 ==
{| class="wikitable"
|-
! 测试层级 !! 工具 !! 覆盖范围
|-
| 单元测试 | Django TestCase | 模板、视图上下文
|-
| 组件测试 | Storybook + Django | 独立UI组件
|-
| E2E测试 | Selenium/Cypress | 完整用户流程
|}

== 实际案例 ==
'''电商网站商品筛选测试'''：
1. 用户在前端选择价格范围
2. JavaScript发送AJAX请求到Django视图
3. 返回JSON格式的过滤结果
4. 前端动态更新商品列表

测试验证点：
* 价格参数是否正确传递
* 响应数据是否符合预期结构
* DOM是否按预期更新

<syntaxhighlight lang="python">
# Django测试视图
def test_product_filter_view(self):
    response = self.client.get('/products/filter', {'min_price': 50})
    self.assertEqual(response.json(), {
        'results': [
            {'name': 'Premium Widget', 'price': 75}
        ]
    })
</syntaxhighlight>

== 最佳实践 ==
* '''测试隔离'''：每个测试只验证一个功能点
* '''数据工厂'''：使用<code>factory_boy</code>创建测试数据
* '''视觉回归'''：使用<code>percy.io</code>检测CSS变化
* '''持续集成'''：将前端测试纳入CI/CD流程

数学公式示例（响应时间计算）：
<math>
T_{response} = T_{network} + T_{server} + T_{render}
</math>

== 常见问题 ==
'''Q: 如何处理前端测试的异步加载内容？'''
A: 使用显式等待策略：

<syntaxhighlight lang="python">
from selenium.webdriver.support.ui import WebDriverWait

element = WebDriverWait(driver, 10).until(
    lambda d: d.find_element_by_id('dynamic-content')
)
</syntaxhighlight>

== 进阶主题 ==
* '''测试覆盖率分析'''：使用<code>coverage.py</code>测量前端代码覆盖率
* '''跨浏览器测试'''：配置Selenium Grid
* '''无障碍测试'''：集成<code>axe-core</code>进行WCAG合规检查

通过系统化的前端测试，可以确保Django应用提供一致可靠的用户界面体验，减少生产环境中的界面相关缺陷。

[[Category:后端框架]]
[[Category:Django]]
[[Category:Django与前端集成]]