doordash-oss / swiftui-preview-snapshots

Apache License 2.0
154 stars 7 forks source link

Snapshot does not match preview #6

Open cadaniel opened 8 months ago

cadaniel commented 8 months ago

So I have a SwiftUI view I'm trying to test. The preview renders correctly, but the Snapshot test does not, and I'm not sure what it's trying to do that's different.

Test Case:

class HomeViewTest: XCTestCase {

    override class func setUp() {
        ServiceContainer.register(type: GetCurrentUserUseCase.self, MockGetCurrentUserUseCase())
        ServiceContainer.register(type: GetWaveInsightsUseCase.self, MockGetWaveInsightsUseCase())
        ServiceContainer.register(type: GetCurrentWaveUseCase.self, MockGetCurrentWaveUseCase())
    }

    func testHomeViewSnapshots() {
        HomeView_Previews.snapshots.assertSnapshots(
            as: .wait(
                for: 2,
                on: .image(
                    layout: .device(config: .iPhone13)
                )
            )
        )
    }
} 

View

struct HomeView: View {
    private let widthOffset = 1.0
    private let heightOffset = 0.27

    @EnvironmentObject private var rootHomeViewModel: RootHomeViewModel
    @State internal var homeViewModel: HomeViewModel

    init() {
        self.homeViewModel = HomeViewModel()
    }

    init(homeViewModel: HomeViewModel) {
        self.homeViewModel = homeViewModel
    }

    var body: some View {
        VStack {
            GeometryReader { geometry in
                let width = geometry.size.width/2
                let height = geometry.size.height/3.5
                LazyVGrid(
                    columns: [
                        GridItem(.fixed(width), alignment: .trailing),
                        GridItem(.fixed(width), alignment: .leading)
                    ]
                ) {
                    ProfileHexagon()
                        .padding()
                        .frame(
                            width: width * widthOffset,
                            height: height
                        )
                        .offset(y: height * 0.25 * -1)
                        .onTapGesture {
                            rootHomeViewModel.appendPage(.profile)
                        }

                    StudyHexagons()
                        .padding()
                        .frame(
                            width: width * widthOffset,
                            height: height
                        )
                        .offset(y: height * 0.25)
                    WellnessHexagon()
                        .padding()
                        .frame(
                            width: width * widthOffset,
                            height: height
                        )
                        .offset(y: height * 0.25 * -1)

                    WaveHexagon()
                        .padding()
                        .frame(
                            width: width * widthOffset,
                            height: height
                        )
                        .offset(y: height * 0.25)

                    WellnessHexagon()
                        .padding()
                        .frame(
                            width: width * widthOffset,
                            height: height
                        )
                        .offset(y: height * 0.25 * -1)

                    WellnessHexagon()
                        .padding()
                        .frame(
                            width: width * widthOffset,
                            height: height
                        )
                        .offset(y: height * 0.25)

                    StudyHexagons()
                        .padding()
                        .frame(
                            width: width * widthOffset,
                            height: height
                        )
                        .offset(y: height * 0.25 * -1)
                }
                .offset(
                    x: -1 * geometry.size.width * 0.15,
                    y: -1 * geometry.size.height * 0.05
                )
                .task {
                    await homeViewModel.loadWave()
                }.frame(width: geometry.size.width, height: geometry.size.height)
            }
        }
        .setBackground(homeViewModel.state)
        .environmentObject(homeViewModel)
    }
}

struct HomeView_Previews: PreviewProvider {
    static var previews: some View {
        return snapshots.previews.previewLayout(PreviewLayout.device)
    }

    static var snapshots: PreviewSnapshots<HomeState> {
        PreviewSnapshots(
            configurations: [
                .init(
                    name: "Phase1-1",
                    state: .loaded(
                        ModelWave(
                            name: "menstrual",
                            type: .menstrual,
                            startDate: Date(),
                            endDate: Date(),
                            phases: [
                                ModelPhase(
                                    name: .phase1,
                                    startDate: Date(),
                                    endDate: Date()
                                )
                            ]
                        ),
                        .phase1, 0.2
                    )
                )

            ],
            configure: { config in
                HomeView(homeViewModel: HomeViewModel(state: config))
                    .environmentObject(HomeViewModel(state: config))
            }
        )
    }
}

Expected output:

Screenshot 2023-11-05 at 11 49 46 AM

Actual output:

testHomeViewSnapshots Phase1-1