How To Test A UI Code (iOS, Swift) — Part 1

Quick intro: I am trying to build a great app, all myself. But I haven’t done it before and I don’t know how. So, I am trying to do and learn.

Up until now, I have been testing my UI, by running the app completely, sometimes by making a bit of twitch in it.
But now my app has dozens of views and thousands of lines of code. I really don’t want to run the whole thing, to test just a small part. So, now I want to figure out other options:

First, the XCode tests

I have seen these things around, but ignored them. Because I didn’t feel the need. But now I am starting have that feeling.

XCode asks you if you want to include them, when you want to start a new project

And then, you can see them here. (Nicemin is my app’s name)

After a bit of research, I found out there are two types of Xcode tests: UI Test and Unit Test. UI Test tests the UI (who would have thought?!!). I mean you run tests, like "check if you can see a button called start" and "tap on the button that says start" and also "check if it started". Xcode runs them and tells you the result. Unit Test however, tests a particular part of your code, in isolation. You take a class, out of your whole project, and test it by itself, to see if it does the job the way you expect it to do.

But, this is not quite what I wanted. I have a UIViewController, and I want to run it by itself, without having to run the whole app and see if looks the way I want it to!

So, I kept looking I found other options like Google's EarlGrey, which is a great UI test automation tool, but still not what I want!

Then I remembered…

*Drum rolls*

Swift Playground. Where you can play with your code and see the result, right there.

The glorious Swift Playground! The promised heaven of Swift developers!😍

I remembered that we can test any Swift code in the playground, and I remembered that I saw bunch of developers posting about how they use Playground to see how their UI code looks like in action!

The simplest approach for starting, is just creating a Single View and copy paste your code there and watch the beauty!

On the left, your code. On the right, the result.

But…

My app has grown bigger than Hello World, I need the views to interact with many parts of my app. It is tedious to copy past everything there! And what about my Cocoapods?? Even when I have the Playground inside my project, I couldn’t access other files from my Playground. So, I searched around the web for a solution, and I found this:

Step 1: Adding the Playground to your project

Create a Playground, go and find it in Finder drag and drop it to your Workspace and not the project in Xcode! You should be able to see it among your files in your Workspace. Even if you create it in the Workspace’s folder(I think it’s actually a good idea to do that) it won’t be inside your project. So, you need to drag and drop it, go to Files-> add files to "<your project name>"

You can see your Playground in your Workspace after adding it.

Step 2: building a framework from your project

It’s quite easy. Go to File > New > Target and choose "Cocoa touch framework". Important: choose Embed in Application to None. Give it a name. I chose "NiceminFramework".

Now, go to each file that you want to play with, in the playground, right click and from the File Inspector go to Target Membership, and choose the framework. Leave your app included.

It is important to set any class, method or anything to public, if you want to have access to them.
You can also set them to Open. Public means you can read them, test them outside of the declared framework, but you can't change them. Open means you can ALSO change them.

Now, build the framework. Go to upper left side of the Xcode, click on your App name, choose your framework. AND choose a simulator for target. If you choose something else for the target, it won’t work in the playground! And now build it with cmd⌘ + B. And every time you made a change in your code, you should re-build the framework, if you want the change to reflect on your playground.

Step 3: Let the fun begin

Choose your playground, on the top write import <your framework's name>. If there is no error it means you can use the files that you choose to be included in your framework (from each file's file inspector) and you set them to open.

Here, I made a ViewController and I want to see how does it look like. I make the MyViewController a subclass of the View Controller I want to test.

Then run it by clicking on the start► button on the left.

Also you want to choose assistant editor on top right (two circles)

and then click on manual (top middle) and from the menu choose live view

It seems fine!

Now I can play with each part of my code I want, do experiments on them and see what will happen.

But I still can’t play with cocoapods. I should fine a solution for this one, as well.

Optional Step 4: Adding Cocoapods to the playground

For me it is important to integrate and be able to play with the pods because they are crucial parts of my app.

I found this solution on the web:

1. Go to the Podfile. Add a new target, which is the new framework we built for the Playground, and add any pods you want.

Added Alamofire to the framework in order to access it from playground!

2. Pod install. But here’s a trick. I ran pod install but it didn't work, then I ran pod deintegrate ( which erases every trace of pods in your workplace/project) then ran pod install, again and it worked!

3. Try to import the pod in your playground. If you don’t see any error, it means it should be fine.

To make sure, I ran a test and it seemed fine!

Successfully fetched Batman with Alamofire!

So, that’s it for today.

On the second part I will try the Xcode test and other automated UI tests, but that’s for later.