Testing with Snapshots

A talk I gave at CocoaHeads Berlin about testing iOS view components with FBSnapshotTestCase

Transcript

1. Testing with Snapshots Philip Brechler • CocoaHeads Berlin
2. About me • iOS developer since 2008 • Mobile Lead MOTOR-TALK.de • Developing apps for Europe’s biggest automotive community
3. Testing Mobile Apps • Apps are getting more complex • Testing is essential for great quality • Testing logic with unit tests • Testing UI with UI Testing Frameworks (KIF etc.)
4. Problems when Testing • Logic tests are fast and easy to write but test only a bare minimal • UI tests are slow and complex to write • Tests should encourage a good architecture
14. Testing a Cell • Testing if a cell’s layout is correct is really hard • Testing landscape and portrait • Testing edge cases • Testing states • Testing on a lot of devices
16. Meet FBSnapshotTestCase
17. FBSnapshotTestCase • OpenSource Project by Jonathan Dan (Facebook) • Take reference pictures from view components • Compare those pictures to current state
19. - (void)testWithViewModel { UIStoryboard *storyboard = [UIStoryboard storyboardWithName:@"Main" bundle:[NSBundle mainBundle]]; ThreadTableViewController *tableViewController = [storyboard instantiateViewControllerWithIdentifier:NSStringFromClass([ThreadTableVie wController class])]; PostTableViewCell *cell = [tableViewController.tableView dequeueReusableCellWithIdentifier:NSStringFromClass([PostTableViewCell class])]; Post *testPost = [[Post alloc]init]; [testPost setTimestamp:[NSDate dateWithTimeIntervalSince1970:1420120800]]; [testPost setAuthor:[[User alloc] init]]; testPost.author.displayName = @"Test User"; testPost.text = @"Jujubes pie wafer (…)“; CGFloat heightForCell = [PostTableViewCell heightForPostText:testPost.text cellWidth:320]; [cell setFrame:CGRectMake(0, 0, 320, heightForCell)]; PostViewModel *viewModel = [[PostViewModel alloc]initWithPost:testPost]; cell.authorNameLabel.text = viewModel.authorName; cell.authorAvatarImageView.image = [UIImage imageNamed:@"no_avatar"] ; cell.postTextView.attributedText = viewModel.text; cell.postDateLabel.text = viewModel.dateString; FBSnapshotVerifyView(cell, nil); }
20. - (void)testWithViewModel { UIStoryboard *storyboard = [UIStoryboard storyboardWithName:@"Main" bundle:[NSBundle mainBundle]]; ThreadTableViewController *tableViewController = [storyboard instantiateViewControllerWithIdentifier:NSStringFromClass([ThreadTableVie wController class])]; PostTableViewCell *cell = [tableViewController.tableView dequeueReusableCellWithIdentifier:NSStringFromClass([PostTableViewCell class])]; Post *testPost = [[Post alloc]init]; [testPost setTimestamp:[NSDate dateWithTimeIntervalSince1970:1420120800]]; [testPost setAuthor:[[User alloc] init]]; testPost.author.displayName = @"Test User"; testPost.text = @"Jujubes pie wafer (…)“; CGFloat heightForCell = [PostTableViewCell heightForPostText:testPost.text cellWidth:320]; [cell setFrame:CGRectMake(0, 0, 320, heightForCell)]; PostViewModel *viewModel = [[PostViewModel alloc]initWithPost:testPost]; cell.authorNameLabel.text = viewModel.authorName; cell.authorAvatarImageView.image = [UIImage imageNamed:@"no_avatar"] ; cell.postTextView.attributedText = viewModel.text; cell.postDateLabel.text = viewModel.dateString; FBSnapshotVerifyView(cell, nil); }
21. - (void)testWithViewModel { UIStoryboard *storyboard = [UIStoryboard storyboardWithName:@"Main" bundle:[NSBundle mainBundle]]; ThreadTableViewController *tableViewController = [storyboard instantiateViewControllerWithIdentifier:NSStringFromClass([ThreadTableVie wController class])]; PostTableViewCell *cell = [tableViewController.tableView dequeueReusableCellWithIdentifier:NSStringFromClass([PostTableViewCell class])]; Post *testPost = [[Post alloc]init]; [testPost setTimestamp:[NSDate dateWithTimeIntervalSince1970:1420120800]]; [testPost setAuthor:[[User alloc] init]]; testPost.author.displayName = @"Test User"; testPost.text = @"Jujubes pie wafer (…)“; CGFloat heightForCell = [PostTableViewCell heightForPostText:testPost.text cellWidth:320]; [cell setFrame:CGRectMake(0, 0, 320, heightForCell)]; PostViewModel *viewModel = [[PostViewModel alloc]initWithPost:testPost]; cell.authorNameLabel.text = viewModel.authorName; cell.authorAvatarImageView.image = [UIImage imageNamed:@"no_avatar"] ; cell.postTextView.attributedText = viewModel.text; cell.postDateLabel.text = viewModel.dateString; FBSnapshotVerifyView(cell, nil); }
22. - (void)testWithViewModel { UIStoryboard *storyboard = [UIStoryboard storyboardWithName:@"Main" bundle:[NSBundle mainBundle]]; ThreadTableViewController *tableViewController = [storyboard instantiateViewControllerWithIdentifier:NSStringFromClass([ThreadTableVie wController class])]; PostTableViewCell *cell = [tableViewController.tableView dequeueReusableCellWithIdentifier:NSStringFromClass([PostTableViewCell class])]; Post *testPost = [[Post alloc]init]; [testPost setTimestamp:[NSDate dateWithTimeIntervalSince1970:1420120800]]; [testPost setAuthor:[[User alloc] init]]; testPost.author.displayName = @"Test User"; testPost.text = @"Jujubes pie wafer (…)“; CGFloat heightForCell = [PostTableViewCell heightForPostText:testPost.text cellWidth:320]; [cell setFrame:CGRectMake(0, 0, 320, heightForCell)]; PostViewModel *viewModel = [[PostViewModel alloc]initWithPost:testPost]; cell.authorNameLabel.text = viewModel.authorName; cell.authorAvatarImageView.image = [UIImage imageNamed:@"no_avatar"] ; cell.postTextView.attributedText = viewModel.text; cell.postDateLabel.text = viewModel.dateString; FBSnapshotVerifyView(cell, nil); }
23. - (void)testWithViewModel { UIStoryboard *storyboard = [UIStoryboard storyboardWithName:@"Main" bundle:[NSBundle mainBundle]]; ThreadTableViewController *tableViewController = [storyboard instantiateViewControllerWithIdentifier:NSStringFromClass([ThreadTableVie wController class])]; PostTableViewCell *cell = [tableViewController.tableView dequeueReusableCellWithIdentifier:NSStringFromClass([PostTableViewCell class])]; Post *testPost = [[Post alloc]init]; [testPost setTimestamp:[NSDate dateWithTimeIntervalSince1970:1420120800]]; [testPost setAuthor:[[User alloc] init]]; testPost.author.displayName = @"Test User"; testPost.text = @"Jujubes pie wafer (…)“; CGFloat heightForCell = [PostTableViewCell heightForPostText:testPost.text cellWidth:320]; [cell setFrame:CGRectMake(0, 0, 320, heightForCell)]; PostViewModel *viewModel = [[PostViewModel alloc]initWithPost:testPost]; cell.authorNameLabel.text = viewModel.authorName; cell.authorAvatarImageView.image = [UIImage imageNamed:@"no_avatar"] ; cell.postTextView.attributedText = viewModel.text; cell.postDateLabel.text = viewModel.dateString; FBSnapshotVerifyView(cell, nil); }
24. - (void)testWithViewModel { UIStoryboard *storyboard = [UIStoryboard storyboardWithName:@"Main" bundle:[NSBundle mainBundle]]; ThreadTableViewController *tableViewController = [storyboard instantiateViewControllerWithIdentifier:NSStringFromClass([ThreadTableVie wController class])]; PostTableViewCell *cell = [tableViewController.tableView dequeueReusableCellWithIdentifier:NSStringFromClass([PostTableViewCell class])]; Post *testPost = [[Post alloc]init]; [testPost setTimestamp:[NSDate dateWithTimeIntervalSince1970:1420120800]]; [testPost setAuthor:[[User alloc] init]]; testPost.author.displayName = @"Test User"; testPost.text = @"Jujubes pie wafer (…)“; CGFloat heightForCell = [PostTableViewCell heightForPostText:testPost.text cellWidth:320]; [cell setFrame:CGRectMake(0, 0, 320, heightForCell)]; PostViewModel *viewModel = [[PostViewModel alloc]initWithPost:testPost]; cell.authorNameLabel.text = viewModel.authorName; cell.authorAvatarImageView.image = [UIImage imageNamed:@"no_avatar"] ; cell.postTextView.attributedText = viewModel.text; cell.postDateLabel.text = viewModel.dateString; FBSnapshotVerifyView(cell, nil); }
30. Test Driven? • Don’t use your design mockups as references! • Finding resizing issues is easy • Testing edge cases is easy • Helps a lot during development
31. Wins • Fast tests for UI components (100ms per test) • Test multiple sizes and landscape without juggling devices • Encourages to clearly separate views and logic (MVVM) • Good at finding regression problems in complex apps
32. Problems • Reference images need to be taken for each simulator once • False positives are possible (but not common) • Can not replace UI tests completely but makes the number of tests smaller
33. Thanks! Questions?