[SwiftUI] [UnitTest] テストの作り方 ( NavigationView + List 編)

SwiftUI component UITest シリーズ NavigationView + List 編

NavigationView と List を使ったアプリのテスト方法を説明します。

Sponsor Link

環境＆対象
テスト対象アプリ
テスト対象の要素と操作
- 対象操作
- 対象要素
要素の取得方法
所感
まとめ：NavigationView と List を使ったアプリのテスト

環境＆対象

以下の環境で動作確認を行なっています。

macOS Catalina 10.15.7
Xcode 12.2
iOS 14.2

テスト対象アプリ

example code


struct ContentView: View {
    @State private var items = ["item1", "item2", "item3"]
    var body: some View {
        NavigationView {
            List {
                ForEach(items, id:\.self) { item in
                    Text(item)
                }
                .onDelete { _ in 
                }
            }
            .accessibility(identifier: "MyList")
            .toolbar{
                #if os(iOS)
                ToolbarItem(placement: .navigationBarLeading) {
                    EditButton()
                        .accessibility(identifier: "EditButton") // does not work
                }
                #endif
                ToolbarItem(placement: .navigationBarTrailing) {
                    Button(action: {
                        items.append("item\(Date().timeIntervalSince1970)")
                    }, label: {
                        Label("Add Item", systemImage: "plus")
                    })
                    .accessibility(identifier: "Add") // does not work
                }
            }
            .navigationTitle("NavTitle")
        }
    }
}

テスト対象の要素と操作

以下をテスト対象の要素および操作とします。

対象操作

List 表示
編集ボタンによる操作
削除操作
追加操作

対象要素

NavigationLink
List
List の行
NavigationBar
NavigationBar のボタン
編集モードでの削除操作

リンク

要素の取得方法

List

Accessibility ID を使って、取得することができます。

app.tables["＜ID＞"] とすることで、取得可能です。

Listの行

Accessibility ID を使って、取得することは、できないようです。

table.rows とすることで、取得可能です。

個別行は、rows.element(boundBy: ＜index＞) として取得することができます。

NavigationLink

Accessibility ID を使って、取得することができます。

app.buttons["＜ID＞"] とすることで、取得可能です。

NavigationBar

Accessibility ID を使って、取得することは、できないようです。

Title をつけることで、その Title を使って取得することができます。

app.navigationBars["＜title＞"] とすることで、取得可能です。

NavigationBar のボタン

Accessibility ID を使って、取得することは、できないようです。

表示順（左側）に取得することはできます。

navBar.buttons.element(boundBy: 0) とすることで、取得可能です。

編集モードでのボタン

Accessibility ID を使って、取得することは、できないようです。

特定の ID を持っているようで、

編集モードでの行の左に表示される ❌ ボタンは、"Delete "

❌ボタン押下後に表示される Delete ボタンは、"Delete" という ID で取得できます。

サンプルコード

以下は、アプリ起動後に、Edit ボタンを押下し、削除操作することで、行数が減ることをテストするコードです。

NavigationView + List をテスト


    func test_launch_withInitialData_ListShouldHaveThree() {
        let app = XCUIApplication()
        app.launch()

        // (1)		
        let myList = app.tables["MyList"]
        // (2)		
        let rows = myList.cells
        XCTAssertEqual(rows.count, 3)
        
        // (3)		
        let myNavBar = app.navigationBars["NavTitle"]
        XCTAssertTrue(myNavBar.exists)

        // (4)
        let editButton = myNavBar.buttons["Edit"]
        XCTAssertTrue(editButton.exists)

        // (5)		
        let addButton = myNavBar.buttons.element(boundBy: 1)
        XCTAssertTrue(addButton.exists)
        //XCTAssertEqual(addButton.label, "Add Item") // does not work

        // delete 2nd line
        // (6)		
        editButton.tap()
        // (7)		
        rows.element(boundBy: 1).buttons["Delete "].tap()
        // (8)		
        rows.element(boundBy: 1).buttons["Delete"].tap()

        XCTAssertEqual(rows.count, 2)
    }

コード解説