Playbook 0.3.3

Playbook 0.3.3

×

由ra1028维护。

Playbook 0.3.3

  • 作者
  • ra1028

Playbook

一个用于隔离开发 UI 组件并自动为它们创建快照的库。

playbook

Playbook

Playbook

Swift5 CI Status Lincense
Release Swift Package Manager CocoaPods Carthage

Playbook是一个库，提供了一个沙盒式环境构建 UI 组件，而无需担心应用程序特定的依赖，受到Storybook的启发，主要用于 Web 前端开发中的 JavaScript。

使用Playbook构建的组件可以生成一个独立的官方文档应用。
这使得您可以快速审查 UI，并通过将业务逻辑与组件分离来提供更稳健的设计。

此外，每个组件的快照可由单元测试自动生成，并可以使用任意第三方工具进行视觉回归测试。

对于复杂的现代应用程序开发，更敏感地捕捉 UI 变化并更快地改进它们非常重要。
使用Playbook，您不必通过准备数据而挣扎，也不必为手动测试投入人力资源。


使用方法

Playbook

Playbook是一个框架，为组件管理提供基本功能。它支持SwiftUI和UIKit。
组件是以场景的形式独立存储的。一个Scenario定义了组件的布局方式。请检查API 文档以了解不同的布局方案。

Playbook.default.addScenarios(of: "Home") {
    Scenario("CategoryHome", layout: .fill) {
        CategoryHome().environmentObject(UserData.stub)
    }

    Scenario("LandmarkList", layout: .fill) {
        NavigationView {
            LandmarkList().environmentObject(UserData.stub)
        }
    }

    Scenario("UIView red", layout: .fixed(length: 100)) {
        let view = UIView()
        view.backgroundColor = .red
        return view
    }
}

ScenarioProvider允许您隔离附加场景并保持您的 Playbook 建设干净。

struct HomeScenarios: ScenarioProvider {
    static func addScenarios(into playbook: Playbook) {
        playbook.addScenarios(of: "Home") {
            Scenario("CategoryHome", layout: .fill) {
                CategoryHome().environmentObject(UserData.stub)
            }
        }
    }
}

struct AllScenarios: ScenarioProvider {
    static func addScenarios(into playbook: Playbook) {
        playbook.add(HomeScenarios.self)
    }
}

您可以使用传递给创建组件的闭包的ScenarioContext获取快照中的屏幕尺寸，或者在生成快照之前等待。

Scenario("MapView", layout: .fill) { context in
    MapView(coordinate: landmarkData[10].locationCoordinate) {
        // This closure will called after the map has completed to render.
        context.snapshotWaiter.fulfill()
     }
     .onAppear(perform: context.snapshotWaiter.wait)
}

PlaybookUI

PlaybookUI是一个提供由SwiftUI创建的用户界面框架，用于浏览场景列表。

PlaybookGallery

列出并显示组件视觉效果。
displayed on the top screen实际上并非执行布局，而是显示在运行时高效生成的快照。

浏览器 详细
Gellery LightGellery Dark Gellery Content LightGellery Content Dark

PlaybookCatalog

在抽屉中搜索和选择场景的用户界面。它更类似于Storybook。
如果您有太多的场景，这可能是比PlaybookCatalog更高效的方法。

浏览器 详细
Catalog Drawer LightCatalog Drawer Dark Catalog LightCatalog Dark

如何保存快照图像

要从每个UI的分享按钮将快照图像保存到照片库，必须支持NSPhotoLibraryAddUsageDescription。有关更多信息，请参阅官方文档。

PlaybookSnapshot

可以通过符合TestTool协议的类型实例测试场景。
Snapshot是其中之一，它可以模拟给定设备的屏幕尺寸和安全的区域来生成所有场景的快照。
由于Playbook不依赖于XCTest，因此它不需要在单元测试上运行。

final class SnapshotTests: XCTestCase {
    func testTakeSnapshot() throws {
        let directory = ProcessInfo.processInfo.environment["SNAPSHOT_DIR"]!

        try Playbook.default.run(
            Snapshot(
                directory: URL(fileURLWithPath: directory),
                clean: true,
                format: .png,
                keyWindow: UIApplication.shared.windows.first { $0.isKeyWindow },
                devices: [.iPhone11Pro(.portrait)]
            )
        )
    }
}

generate images

PlaybookAccessibilitySnapshot

Playbook 的一个扩展，利用 AccessibilitySnapshot 来生成包含激活点和标签等辅助功能信息的快照。

accessibility-snapshot

与第三方工具集成

生成的快照图像可以用作各种第三方工具进行更高级的视觉回归测试。

percy

percy

reg-viz/reg-suit

reg-suit

要求

  • Swift 5.1+
  • Xcode 11.0+
  • iOS
    • Playbook: 11.0+
    • PlaybookSnapshot: 11.0+
    • PlaybookUI: 13.0+

安装

Playbook 的特性被分为以下框架。

  • Playbook: 组件管理的核心系统。
  • PlaybookSnapshot: 生成所有组件的快照。
  • PlaybookUI: 为 Playbook 管理的组件提供浏览 UI。

CocoaPods

将以下内容添加到您的 Podfile

target 'YourPlaybook' do
  pod 'Playbook'
  pod 'PlaybookUI'

  target 'YourPlaybookTests' do
    inherit! :search_paths

    pod 'PlaybookSnapshot'
  end
end

Carthage

将以下内容添加到您的 Cartfile

github "playbook-ui/playbook-ios"

Swift Package Manager

在 Xcode 菜单中选择 File > Swift Packages > Add Package Dependency... 并使用图形界面输入仓库 URL。

Repository: https://github.com/playbook-ui/playbook-ios

注意：目前 SwiftPM 不支持为每个库指定操作系统版本，因此只支持 iOS13。

许可证

Playbook 采用 Apache 2.0 许可证发布。


Playbook