Skip to main content

Tutorial Specs - new-tutorial-PM-5819

TUTORIAL OVERHAUL

BRANCH: new-tutorial-PM-5819

NOTES:

  • Tutorial config files are currently in view/auto_docs/platforms/PLATFORM_NAME.rb. (The .rb file NOT the .haml files)

TESTING NOTES:

Platforms where NOT all apps have the same flow (no need to go to platform):

  • Wix: Apps in the wix app market (Form Builder) vs NOT in the wix app market (FAQ)

    • Cloudflare: new tutorial for formBuilder, countdownTimer, socialFeed, vs other apps (just test one old vs one new)
- Weebly apps in app center (Social feed) vs not (Tabs) - Messed up on PROD!

  • Platforms that need to be tested when embedded and not

  • Weebly backend FAQ gets called when it should

    • Bigcommerce -> both stencil theme vs blueprint theme

    • Shopify

  • WordPress
  • Jumpseller- can’t test on staging
  • Lightspeed => no difference in code, should there be?

BUGS / TODO

@Aigul ~~or @Anuarbek: Searching for a platform gives weird feedback:~~

alt_text

~~@Aigul or @Anuarbek: Tutorial configs with a Vimeo video should embed the video inside of Show Me modal (new feature that wasn’t in orig specs). ~~

~~@Aigul or @Anuarbek: Sign in prompt is not appearing when signed out. ~~

@kelsey: Embed Code react component should probably be added to the style guide

@kelsey: Embed code text is quite grayed out and hard to see, can we improve this?

@Aigul: Search Bar missing a simple copy https://i.imgur.com/hCFgzME.png

@Devis or @Anuarbek: “Show me” missing video/pictures:

@Devis: Code snippet / download is missing

@Devis: PAGE or THEME toggles has no text on them

@Devis wIx: Apps in the wix app market vs NOT in the wix app market - all have same 1 step “Search App Market” https://i.imgur.com/MIzcDtP.png

~~@Aigul: Drupal- has this weird yellow module (general copies needs to be parsed)>> https://i.imgur.com/9R2wFf6.png ~~

@anuarbek: Shopify Platform:

** **

SPECS

SCENARIO: Code cleanup

- tutorial landing pages with ?view_mode=tutorial => get rid of for now

- getTutorialData in javascript and tutorial_data method in auto_docs_controller should be removed

- clean up old shit in install_instructions.jsx

- where is tutorials/ going

- best_plugin_for_platform => show

- clean up show in auto_docs_controller

- update to new cloudflare tutorial

- Bigcommerce embedded vs not, what's up with button?

-~~ wix tut fucked~~

- wordpress .com vs .org

- clean up shopify tutorial

SCENARIO: User clicks on Embed Code \ GIVEN user is on Install

WHEN the user clicks on Embed Code

THEN the HTML code snippet should display

SCENARIO: User clicks copy code button \ GIVEN user is on Install and a code snippet is displayed

WHEN the user clicks “Copy Code” button

OR clicks the code snippet container

THEN the code will be copied to clipboard

SCENARIO: User selects Platform \ GIVEN user is on Install

WHEN the user clicks “Platform”

THEN the content for selecting a platform should display

alt_text

SCENARIO: User selects Share \ GIVEN user is on Install

WHEN the user clicks “Share”

THEN the share content should display

alt_text

SCENARIO: User clicks Add Collaborators on Share \ GIVEN user is on Install and Share is active

WHEN the user clicks “Add Collaborators”

THEN the add collaborator form should display

alt_text

SCENARIO: Clicking ‘cancel’ on Add Collaborators or changing content should return user back to Share link content \ GIVEN user is on Install > Share > Add Collaborators

WHEN the user clicks “Cancel” or selects different content

THEN then the content for ‘Share’ should return to displaying the share link

alt_text

SCENARIO: Selecting a platform should load the tutorial for that platform \ GIVEN user is on Install with toggle Platform active

WHEN user clicks Wordpress

THEN the Wordpress tutorial should be rendered

SCENARIO: Tutorial steps should be designed according to mock:

alt_text

alt_text

SCENARIO: Searching for a platform should show results that match

GIVEN user is on Install with toggle Platform active

WHEN user searches “W”

THEN platforms that have the letter W in the name should be displayed

alt_text

SCENARIO: Searching for a platform should record what the user has searched for in SearchAnalytic model

GIVEN user is on Install with toggle Platform active

WHEN user searches FluffySiteBuilder

THEN a single SearchAnalytic should be saved

NOTE: ajax calls must be debounced by 1 second to avoid saving a ton of garbage results

SCENARIO: Searching for a platform with no results should show empty message

GIVEN user is on Install with toggle Platform active

WHEN user searches FluffySiteBuilder

THEN “No Results” message should be shown according to following mock:

alt_text

SCENARIO: Change platform should change the platform

GIVEN a user is on Install with toggle Platform active

AND a tutorial is already shown

WHEN user click change platform

THEN the platform should be unselected \ AND user should be able to select a new platform

SCENARIO: Change platform should be saved to the User model

GIVEN a user is on Install with toggle Platform active

AND a tutorial is already shown

WHEN user click change platform

AND selects a new platform

THEN the platform should be updated on the user model (and the new platform should appear on the users/me/account page) \

SCENARIO: Tutorial switch should appear as Step 1 when present.

GIVEN a user is on Install with toggle Platform active

WHEN Americommerce tutorial is loaded \ THEN Step 1 should show a choice to switch between the tutorial modes

SCENARIO: User is signed out

GIVEN the user is on Install

AND signed out

THEN tabs and content will be blurred and sign in will be prompted

alt_text

SCENARIO: Clicking “Show Me” on a tutorial step should open a modal showing the Title, description, and image for that Step (same as current behavior on production, but use react modal)

GIVEN a user in on Install with toggle Platform active

AND a tutorial is already shown

WHEN user clicks “Show Me” \ THEN a modal should be visible for that step showing the title, description, and image

SCENARIO: AB test: A group of users should see “Embed Code” toggle highlighted by default.

GIVEN user in in group A

WHEN user is on Install page

THEN “Embed Code” should be toggled by default

alt_text

SCENARIO: AB test: B group of users should see “By Platform” toggle highlighted by default

GIVEN user in in group B

WHEN user is on Install page

THEN “Platform” should be toggled by default

alt_text

SCENARIO: React inputs for all types of embed codes. Clicking COPY should copy the embed code. Valid types:

  • div
  • script_and_div
  • url
  • iframe
  • shortcode
  • google_sites_gadget
  • script
  • insert_script ??? (only used in spacecraft, probably not a thing)

SCENARIO: Clicking in an embed code text area should automatically highlight all the text and copy it to the clipboard.

GIVEN a user is viewing a tutorial with an embed code \ WHEN user clicks in the textarea with the embed code

THEN the text should be automatically highlighted \ AND the Copy button should say “Copied“

~~SCENARIO: Tutorial Configuration Updates -- Buttons should always be part of a step that at least has a title \ ~~Our current configuration has steps like as follows. These steps should be moved to the previous step that has a title. I.e. NO naked buttons like this:

{

          buttonHref: "https://bigcommerce.evyy.net/c/169729/169598/2941",

          buttonText: "Go to BigCommerce"

}