Wikimedia Apps/Team/iOS/Spec

Feature Specs

Application Launch

Scenario: Onboarding presentation

Given the app has just been installed

When I launch it for the first time

Then I should see the onboarding view

Given I have previously launched the app

When I launch the app

Then I should not see the onboarding view

Scenario: Returning user

Background

Given I was on $view

And have put the app in the background

Scenario: Less than 24 hours

Given less than or equal to 24 hours have passed since entering the background

When I resume the app

Then I should see $view

Given the app was terminated while in the background

And less than or equal to 24 hours have passed since entering the background

When I launch the app

Then I should see the article view with the title I read most recently

Scenario: More than 24 hours

And more than 24 hours have passed since entering the background

When I resume or launch the app

Then I should see the Explore view

Login

Scenario: Not logged in

Given that I am not logged into the app

When I am on the settings view

Then I should see an item for “Log in to Wikipedia”

Given that I have a settings item for “Log in to Wikipedia”

When I tap the “Log in to Wikipedia”

Then I should see the Log In view

Scenario: Logged in

Given that I am logged into the app

When I view the settings screen

Then I should see an item for “Log out of Wikipedia”

Main View

Given I am in the main view

When I tap the tab $tab

Then I should see the view for $tab

tabs:

Explore

Saved

History

Explore View

Shared Behaviors

Search Container

Universal Article List

Scenario: Loading the feed

Background

Given I am on the Explore view

And my internet connection is slow

When I scroll to items in the feed which haven’t loaded yet

Then I should see a placeholder

And I should not be able to interact with it

And I am looking at a placeholder card

When the data for that card is retrieved

Then it should replace the placeholder without affecting my scroll position

Scenario: Navigation

Given I am in the Explore view

When I tap the Settings button

Then I should see the Settings view

Scenario: Continue Reading

Given $title is at the top of my history

And it has been more than 24 hours since I was in the background

When I go to the Explore view

Then I should see a “Continue Reading” section containing $title

Given I see a “Continue Reading” section for $title

When I tap it

Then I should see the article view

And it should be scrolled to its previous offset

Given I see a “Continue Reading” section for $title

When I (tap the close button|swipe it to the left)

Then the “Continue Reading” section should be removed

Scenario: Interaction with iOS drawers

Given that I am in the Explore view

When I (raise the iOS Control Center | lower the iOS Notification Center)

Then the feed should not change

Scenario: Commons Picture of The Day Section (POTD)

Background

Given I am on the POTD section of the Explore view

When I am on the Explore view

Then I should see the Commons POTD section with the Wikimedia Commons picture of the day

Scenario: Captioning

And the POTD has a caption

Then it should be displayed on top of the image (see mock)

And the POTD has a caption in my device's current language

Then I should see the localized caption

Scenario: Placeholder

And the POTD hasn’t downloaded yet

Then I should see a placeholder

And I should not see the caption (or its gradient background)

Scenario: Tapping the POTD

When I tap the cell

Then I should see the fullscreen gallery

And it should have one Gallery View Item for the current POTD

Scenario: Random Section

Scenario: Loading

Given I am in the random section

And I haven’t seen a random article yet

When the random article is being downloaded

Then I should see a placeholder

When the random article is downloaded

Then I should see a random article in a preview card (see preview card specs)

Scenario: Refreshing

When I tap the random button

Then I should see a new random article

Scenario: Excluding non-main namespace

When I am presented with a random article

Then it should not be a disambiguation page (at least 95% of the time*)

And it should be in the main namespace (i.e. not a Category:, File:, Wikipedia:, Template:, etc.)

* We can’t satisfy this 100% of the time until S&D fixes it on the back-end (T119644)

Scenario: Related Section (“Because you read”)

Scenario: Adding a Related Section to the feed

Given I am on the Explore feed

And I have viewed an article from $site with $title for 30 seconds

When the feed is refreshed

Then I should see 3 recommendations for articles from $site related to $title

And they should not be disambiguation pages

And they should be in the main namespace

Scenario: Nearby

Given I am on the Explore view

And I am scrolled to the nearby section

And I haven’t given the app permission to use my location

Then I should be prompted to go through the location permissions UX

And I have given the app permission to use my location

And I haven’t downloaded nearby results yet

Then I should see a placeholder

When I have given the app permission to use my location

And when I have downloaded nearby results

Then I should see a compass pointing in the direction of their location

And I should see how far I am from their location

Then I should see Nearby Item View cells for each title

And I have given the app permission to use my location

And I have downloaded nearby results

When I move at least 500m from when I last downloaded nearby results

Then the section should update with titles for my new location

Scenario: More near my location

When I tap “more nearby your location”

Then I should see a list of titles near my current location

And that list’s items should not change as I move

Scenario: Settings gear

Given I am on the Explore view

When I tap on the settings gear in the navigation bar

I should see the Settings View presented modally

Related Item View

Shared Behaviors

Preview Card Article View

Random Item View

Shared Behaviors

Preview Card Article View

Picture of the Day Item View

Shared Behaviors

Image View

Rotatable View

Nearby Explore Item View

Shared Behaviors

Image View

Rotatable View

Nearby Item View

Scenario: Live Updates

Background

Given I am in the nearby section

And it contains items

When I change the direction my device is facing

Then the compasses should point in the direction of their corresponding items

When I walk more than one (foot|meter)

Then the distance field should update

Continue Reading View

Given I see a “Continue Reading” section for $title

When $title has a Wikidata $description

Then I can see the $description below the $title

Saved Pages View

Behaves like a Universal Article List

Behaves like a Search Container

Given I have just tapped the save bookmark for $title

When I tap Saved Pages in the main tab bar

Then I should see that article at the top of the list

Given that I have 0 Saved Pages

When I tap Saved Pages in the main tab bar

Then I should see an explanation of Saved Pages

Given that I have an item with $title

When I tap the bookmark button for that item

Then the list item for $title should animate offscreen to the left

And $title should be removed from the list view

Recent View

Behaves like a Universal Article List

Behaves like a Search Container

Given I have just viewed an article in the Article View with $title

When I tap Recent in the main tab bar

Then I should see that article at the top of the list

Given that I have 0 Recent pages

When I tap Recent in the main tab bar

Then I should see an explanation of Recent view

Given that I have 100 Recent pages

And given that  I have just viewed an article in the Article View with $title

Then the oldest item on my recent list should be removed

Search Button Container

Given I am in a search container view

When I tap the Search button

Then I should see the Search view

And the search field should become active

Search View

Behaves like a Universal Article List

Scenario: Search Navigation

Given that I am on the Search view

When I tap the X on the right side of the navigation bar

Then the search view should animate off screen

And the keyboard should be dismissed

And I should see the last view I was in prior to tapping the search button

Scenario: Entering and Running Searches

Background

Given that I am in the Search view

When I type into the text field

Then I should eventually see search results for the text I entered

And I should see a small delete button

And I have started searching for something

And the results have not arrived yet

When I type into the text field

Then I should eventually see search results for the text I entered

And I should not see results for my previous search

And there is text in the search text field

When I tap “Search” on the keyboard

Then the app should select the first result with a matching title

And there is text in the search text field

When I tap the small delete button in the text input field

Then the text I’ve entered should be deleted

And the search results should fade out

When I search for something with only a couple prefix search results

Then I should see the prefix results

And I should eventually see full-text search results appended to the prefix results

Scenario: With no search history

Background

I am a user with no previous searches or who has deleted my previous searches

Given that I have no search history

When I tap the search button

I should not see the Recent Searches header

And I should not see the delete all button

Scenario: With search history

Background

I am a user who has run one or more previous previous searches

Given that I am on the Search View

When there is no text in the input field

Then I should see my previous searches

Given that I am on the Search View

When I start typing in the text input field

Then my previous searches should fade out

Search Item View

Scenario: Preview Images

Given $title has a lead image

When I search for $title

Then I should see a result with the lead image for $title in the thumbnail image view

Given $title doesn’t have a lead image

When I search for $title

Then I should see a result with a placeholder image in the thumbnail image view

Scenario: Redirects

Given that I have entered a search $query

When that $query result includes a page with a redirect

Then I should see a list item with the redirect title

And subhead text with “Redirected from $query”

Scenario: Disambiguation Pages

Given that I have entered a search $query

When that $query result includes a disambiguation page

Then I should see a list item with the $query

And subhead text with “Wikipedia disambiguation page”

Article View

Behaves like a search container

Behaves like a navigation stack item

Scenario: Toolbar

Background

Given that I am in an article view

And the article is a main page

When the article loads

Then I should not see the table of contents toolbar item

And the article is a not main page

When the article loads

Then I should see the table of contents toolbar item

Scenario: Rotation

Background

Given that I am in an article view

And I am at the top of the page

When I rotate the device

Then I should still be at the top of the page

And $paragraph is scrolled to the middle of the view

When I rotate the device

Then I should still see $paragraph in the middle of the view

And I am scrolled to $footer_section

When I rotate the device

Then I should still see $footer_section

Scenario: Navigation

Background

Given that I am in an article view

When I (tap the table of contents icon|swipe from the right)

Then the table of contents overlay should slide in from the right edge of the screen

When I tap the language button

Then the language view should be presented modally

Scenario: Citation drawer

Given I am in an article with one or more citations

When I tap the citation link

Then the citation drawer should be displayed

Given that the citation drawer is displayed

When I swipe on the citation drawer

Then I can see additional citation links (if any) in that direction

Given that the citation drawer is displayed

When I (swipe down|tap the close button) on the drawer

Then the citation drawer should be dismissed

Scenario: Sharing

Given I am in an article view

When I tap the iOS share toolbar icon

Then I should see a dialog with the options to “Share as Text” or “Share as Image”

Given that I am in an article view

When I perform a long touch on the text

Then the text should be selected

And a text actions pop-over should appear

And one of the options should be Share

Given that I have a text actions pop-over visible

When I tap Share

Then I should see a dialog with the options to “Share as Text” or “Share as Image”

Scenario: Saving

Given that I am in an article view

And given that the article has not been saved

When I tap the bookmark toolbar icon

Then the article should be added to my saved pages

Given that I am in an article view

And given that the article has been saved

When I tap the bookmark toolbar icon

Then the article should be removed from my saved pages

Scenario: Switching article language

Given that I am viewing article with $title

When I tap the language switcher button

Then I should see the language picker

And with any languages where article $title is available listed

Given that I am in the language picker

When I select a $language

Then article with $title in $language should load in the article view

And the language picker should animate off screen

Scenario: Editing

Given that the current article can be edited

When I tap the pencil icon

Then I should see the Editing view

Table of Contents View

Scenario: Rotation

Given I am on the article view

When I rotate the device

Then the table of contents preserves its overlap ratio (to the article view)

And its cells resize to fit new horizontal spacing

And its header view is correctly positioned

Scenario: Subsection highlighting

Given I am on the table of contents view

When I select a section

Then that section should have an indicator showing it is selected

And all sections belonging to the same root section should have a background indicating they are selected

Scenario: Presentation and Dismissal

Background

Given I am on an article view

And the device language is $writing_direction

When I start an edge swipe from the $trailing_edge

Then I should see the table of contents view interactively slide in from the $trailing_edge

And I should see a white-out effect be interactively applied to the article view

When I tap the table of contents button

Then I should see the table of contents slide into view from the $trailing_edge

And the article view should have a white-out effect

When I tap the article view behind the table of contents

Then the table of contents view should slide away towards the $trailing_edge

And the article view’s white-out effect should be removed

When I start dragging the table of contents view

Then the table of contents view interactively slide away to the $trailing_edge

And the article view’s white-out effect should be interactively removed

writing_direction	trailing_edge
LTR	right
RTL	left

Scenario: Article View Sync

Background

Given I am on an article view

And the article has a lead section

And I am is positioned within the lead section

When I open the table of contents

Then the item matching the article’s title should be selected and visible

And I am positioned at the top of the article

When I open the table of contents

Then the item matching the article’s title should be selected and visible

And I am is positioned at the between the beginning and end of $section

When I open the table of contents

Then the item for $section should be selected and visible

Scenario: Selection

Background:

Given that I am in the table of contents view

And the article content is visible on the screen (i.e. user is not deep into Read More)

When I tap the item for $section in the article

Then the article view should scroll to $section with an animation

And the article content is not visible on screen (i.e. the user is deep into Read More)

When I tap the item for $section in the article

Then the article view should show $section without an animation

When I tap the item for “Read More”

Then the article view should scroll to “Read More” with an animation

Article Header Image Gallery View

Scenario: Shared Behaviors

Behaves like a Horizontally Scrolling View

Behaves like an Image Gallery

Scenario: Navigation

Given I was scrolled to image $X in the header gallery

When I tap it

Then I should see the image gallery

Given I am on the gallery view after tapping a header gallery image

And I have scrolled to image $X

When I dismiss the gallery view

Then I should see image $x in the header gallery

Scenario: Article has images

Background

Given I am on the article view

And an article has images

When I tap an image

Then I should see that image in the fullscreen gallery view

When I swipe on the gallery

Then I can navigate to the images (if any) in that direction

When I rotate to landscape

Then I should not see the lead image

Scenario: Article has no images

Given I am on the article view

and the article with no images

When I am at the top of the article

Then no image should be displayed

Gallery View

Scenario: Shared Behaviors

Behaves like a Horizontally Scrolling View

Behaves like an Image Gallery

Scenario: Navigation

Scenario: Gallery Dismissal

Given I am in the gallery view

When I tap the “X” button

Then I should see the article view scrolled to its previous position

Scenario: Launching the image gallery

Given I am in the article view

When I tap an image in the article

Then the image gallery should be presented

And the image I selected should be visible

Scenario: Device rotation

When I rotate the device in any direction

Then the currently visible image should remain on screen

And it should be sized and positioned properly

Given I am zoomed into an image

When I rotate the device in any direction

Then the zoom should reset

And the image should be sized and positioned properly

Scenario: Image transitions

Given I am looking at a lower-resolution image

When the high-resolution image is shown

Then the image should transition to the high-resolution version without changing its frame

Scenario: Image size handling

Given I am looking at an image smaller than the gallery's bounds

And the bottom of the image is within 150 pts of the gallery's bounds

When the chrome is visible

Then the gradient should blend in with the black bar across the bottom of the image

Given I am looking at an image smaller than the gallery's bounds

And the chrome is visible

When I zoom into the image

Then the gradient should maintain its position at the bottom of the image

Scenario: Image zooming

Given I am zoomed into an image

When I pan my finger around the screen

Then the image should scroll and bounce within the gallery's bounds

Given I am zoomed into an image

And there are more images to the (left|right)

When I swipe to the (left|right)

Then I should see the image to the (left|right)

Given I am looking at an image smaller than the gallery's bounds

And the bottom of the image is within 150 pts of the gallery's bounds

When I zoom into the image

Then the image should remained centered in the gallery

Editing View

[The Editing View and behavior should be identical to the 4.1.7 version of the app.]

Article Preview Card View

Shared Behaviors

Rotatable View

Save Button Container

Image View (article image, if present)

Scenario: Text Extraction Manipulation

Given the article summary has an IPA

When I view a preview card for that article

Then the IPA and enclosing parentheses should be removed

Scenario: Preview Images

Given the article has a lead image

And given I am on an iPhone in portrait orientation

When I am waiting for the lead image to load

Then I should see a placeholder image

And that image should be shown at a 16x9 ratio

Given the article has a lead image

And given I am on an iPhone in portrait orientation

When the lead image is loaded

Then I should see the image at 16x9 ratio at the top of the card

Given the article has a lead image

And given I am on an iPhone in landscape orientation

When I am waiting for the lead image to load

Then I should see a placeholder image

And that image should fill the width of the card, minus 30px of padding

Given the article has a lead image

And given I am on an iPhone in landscape orientation

When the image is loaded

Then that image should fill the width of the card, minus 30px of padding

Given the article does not have a lead image

When I see the article preview card view

Then the title should be the first item in the preview card

And no placeholder image should be displayed

Settings View

Scenario: Site preference

Given I am on the settings view

When I tap the site preference

Then I should see the site picker view

Given I am on the settings view

When I select $site

Then I should see the Settings view

Search Site

Given I haven’t launched the app

When I launch the app

Then my site should be set to the one matching my device language

And my (nearby|random) feed items should update to contain results from $site

Shared Behavior Specs

Image View

Given a view should display $image

And that image isn’t cached in memory

When that image starts loading

Then I should see a placeholder

And I should eventually see the image cross fade into the view

Image Gallery

Given an article has images

And some of them are smaller than 30x30

When I view that article

Then I shouldn’t see the images smaller than 30x30

Nearby Item View

Scenario: Live Updates

Given I am on a view which displays distance to $title

When I change my distance to its location

Then I should see the distance label update

Given I am on a view which displays my heading towards $title

When I rotate my device

Then I should see the compass update

Given a nearby item view is in the window

When it is not visible

Then it should not respond to location updates

Horizontally Scrolling View

Given there are no items to the left and right

And the interface layout direction is $interfaceLayout

When I swipe to the $swipeDirection

Then the $navDirection image in the article should be presented

swipeDirection	interfaceLayout	navDirection
left	LTR	next
right	LTR	previous
left	RTL	next
right	RTL	previous

Given there is no more items in $direction

When I swipe to the $direction

The view bounces back to the starting position

direction

left

right

Rotatable View

Given I am on a rotatable view

When I rotate to $orientation

Then the view matches the mock for $orientation

Navigation Stack Item

Given I am not in the first item on the navigation stack

When I (tap the back button|edge-swipes right)

Then I should see the previous stack item

Given I am in a navigation stack

When I tap to go to another view

It should be pushed from the trailing edge of the screen

And I should see its items in the navigation bar

Save Button Container

Given $article is (un)saved

Then I should see an (un)saved image

Given $article is (un)saved

When I tap the save button

Then the article should be not be (un)saved

Universal Article List

Scenario: Navigation

Given I have a list item for $title

When I tap it

Then I should see the article view for $title

Given I am using a 3D-Touch-compatible device

And I have an item in my feed for $title

When I start a peek gesture

Then I should see a preview for the article view for $title

Given I am peeking $title

When I cancel a peek gesture

Then I should see the list view

Given I am peeking $title

When I finish the peek gesture (pop)

Then I should see the article view for $title

Scenario: Deletion

Given that $title appears in my list view

When I swipe it from the left

Then the item should animate left slightly

And a standard iOS Delete button should appear on the right edge of the item

Given that I have a Delete button visible next to an item

When I tap the Delete button

Then the list item for $title should animate offscreen to the left

And $title should be removed from the list view

Given that I have a Delete button visible next to an item

When I (swipe the item from right to left | tap anywhere outside the Delete button)

Then the list item for $title should animate back into its original position

And the Delete button should no longer be visible

Given that I have a list with 1 or more items

When I tap the trash icon

Then I should see an alert to “Delete all items? This cannot be undone.”

And that alert should have “Cancel” and “Delete All” options

Given that I viewing a Delete All confirmation alert

When I tap “Cancel”

Then I should be taken back to the list

Given that I viewing a Delete All confirmation alert

When I tap “Delete All”

Then I should be taken back to the list with no items

Scenario: Rotation

Given I am on an article list

When I rotate the device

Then the list’s items should adapt to fit the screen

And any text should be expanded or truncated to adapt to the new size