PlaybookUI 0.3.3

PlaybookUI 0.3.3

×

由 ra1028 维护。

PlaybookUI 0.3.3

  • 由
  • ra1028

Playbook

一个用于隔离开发 UI 组件并自动捕获其快照的库。

playbook

Playbook

Playbook

Swift5 CI Status Lincense
Release Swift Package Manager CocoaPods Carthage

Playbook 是一个库，为构建 UI 组件提供了一个沙箱，而不必担心特定应用的依赖，强烈受到网络前端开发中 JavaScript 的 Storybook 的启发。

使用 Playbook 构建的组件可以生成一个独立的 app，作为活风格指南。
这不仅可以快速审查 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

组件视觉列表和显示。
出现在顶部屏幕上的并不是实际进行布局，而是显示在运行时高效生成的快照。

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

PlaybookCatalog

这是一个在抽屉中搜索和选择场景的UI。它更像Storybook。
如果有太多场景，这可能比PlaybookCatalog更有效率。

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

如何保存快照图片

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

PlaybookSnapshot

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

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菜单文件 > Swift Packages > 添加依赖包...，并通过GUI输入仓库URL。

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

注意：目前SwiftPM不支持为每个库指定OS版本，因此只有iOS13受到支持。

许可证

Playbook遵循Apache 2.0许可证。


Playbook