feat: add tutorial redirect modal (#584)

this modal should appear only to users that land
on a lesson page from a search engine result.

Author: zebateira

cypress.json

@@ -1,5 +1,5 @@
 {
    "baseUrl": "http://localhost:3000",
-   "defaultCommandTimeout": 45000,
+   "defaultCommandTimeout": 60000,
    "video": false
 }

cypress/integration/tutorial-redirect-modal.spec.js

@@ -0,0 +1,154 @@
+import tutorialsList, { getTutorialType } from '../../src/utils/tutorials'
+
+function visit (url, { referrer, clearStorage = true } = {}) {
+  cy.visit(url, {
+    onBeforeLoad (window) {
+      referrer &&
+        Object.defineProperty(window.document, 'referrer', { get () { return referrer } })
+
+      clearStorage &&
+        window.localStorage.clear()
+    }
+  })
+}
+
+// Asserts
+
+function assertModalShows () {
+  cy.get('.modal-overlay', { timeout: 5e3 }).should('exist')
+  cy.get('[data-cy="tutorial-redirect-modal"', { timeout: 5e3 }).should('be.visible')
+  cy.get('.home', { timeout: 5e3 }).should('be.visible') // still visible behind the overlay
+}
+
+function assertModalContent ({ tutorial, lessonId, context = 'start' }) {
+  const lesson = tutorial && tutorial.lessons.find(lesson => lesson.id === lessonId)
+
+  cy.get('.modal-content')
+    .should('contain.text', tutorial.title)
+    .should('contain.text', lesson.title)
+
+  if (context === 'start') {
+    // check content matches the start context
+    cy.get('.modal-content', { timeout: 5e3 }).should('contain', 'start this tutorial')
+  } else if (context === 'resume') {
+    cy.get('.modal-content', { timeout: 5e3 }).should('contain', 'resume the tutorial')
+  }
+}
+
+function assertModalActions ({ action = 'start' } = {}) {
+  if (action === 'start') {
+    cy.get('[data-cy="tutorial-redirect-modal-action-start"]', { timeout: 5e3 }).should('exist')
+  } else if (action === 'resume') {
+    cy.get('[data-cy="tutorial-redirect-modal-action-resume"]', { timeout: 5e3 }).should('exist')
+  }
+}
+
+function assertModalDoesNotShow () {
+  cy.get('[data-cy="tutorial-redirect-modal"', { timeout: 5e3 }).should('not.exist')
+  cy.get('.modal-overlay', { timeout: 5e3 }).should('not.exist')
+  cy.get('.home', { timeout: 5e3 }).should('be.visible')
+}
+
+describe('TUTORIAL REDIRECT MODAL', () => {
+  let tutorial
+
+  before(() => {
+    // get first text based tutorial
+    tutorial = tutorialsList[Object.keys(tutorialsList).find(tutorialFormattedId => getTutorialType(tutorialFormattedId) === 'text')]
+  })
+
+  it('should show when landing in the middle of a tutorial from a search engine', () => {
+    visit(`/${tutorial.url}/03`, { referrer: 'https://google.com/' })
+    assertModalShows()
+    assertModalContent({ tutorial, lessonId: 3 })
+
+    visit(`/${tutorial.url}/04/`, { referrer: 'https://bing.com/' })
+    assertModalShows()
+    assertModalContent({ tutorial, lessonId: 4 })
+  })
+
+  it('should show when landing in the middle of a tutorial from a search engine and show the resume option when some past lessons have been passed', () => {
+    visit(`/${tutorial.url}/01`, { referrer: '' })
+    cy.get('button[data-cy="next-lesson-text"]').click()
+    cy.get('button[data-cy="next-lesson-text"]').click()
+    visit(`/${tutorial.url}/05`, { referrer: 'https://google.com', clearStorage: false })
+    assertModalShows()
+    assertModalContent({ tutorial, lessonId: 5, context: 'resume' })
+    assertModalActions({ action: 'resume' })
+  })
+
+  it('should close when using close button', () => {
+    visit(`/${tutorial.url}/02`, { referrer: 'https://google.com' })
+    assertModalShows()
+    assertModalContent({ tutorial, lessonId: 2 })
+    cy.get('button.close').click()
+    assertModalDoesNotShow()
+  })
+
+  it('should close when using view lesson button', () => {
+    visit(`/${tutorial.url}/02`, { referrer: 'https://google.com' })
+    assertModalShows()
+    assertModalContent({ tutorial, lessonId: 2 })
+    cy.get('button[data-cy="tutorial-redirect-modal-view-lesson"').click()
+    assertModalDoesNotShow()
+  })
+
+  it('should not show when referrer is empty', () => {
+    visit(`/${tutorial.url}/02`, { referrer: '' })
+    assertModalDoesNotShow()
+  })
+
+  it('should not show when opening lesson and the referrer is not one of the configured search engines', () => {
+    visit(`/${tutorial.url}/03`, { referrer: 'https://searchengine.com/' })
+    assertModalDoesNotShow()
+  })
+
+  it('should not show when opening lesson from app link', () => {
+    visit(`/${tutorial.url}`, { referrer: 'http://localhost:3000/' })
+    cy.get(`a[href="/${tutorial.url}/02"][data-cy="lesson-link-standard"]`).click()
+    assertModalDoesNotShow()
+  })
+
+  it('should not show when opening the first lesson', () => {
+    visit(`/${tutorial.url}/01`, { referrer: 'https://google.com/' })
+    assertModalDoesNotShow()
+  })
+
+  it('should not show when opening resources lesson', () => {
+    visit(`/${tutorial.url}/resources`, { referrer: 'https://google.com/' })
+    assertModalDoesNotShow()
+  })
+
+  it('should not show when opening a lesson the user already passed', () => {
+    visit(`/${tutorial.url}/02`, { referrer: 'https://google.com' })
+    assertModalShows()
+    assertModalContent({ tutorial, lessonId: 2 })
+    cy.get('button.close').click()
+    cy.get('button[data-cy="next-lesson-text"]').click()
+    visit(`/${tutorial.url}/02`, { referrer: 'https://google.com', clearStorage: false })
+    assertModalDoesNotShow()
+  })
+
+  it('should not show a second time after starting a tutorial and passing the lesson', () => {
+    visit(`/${tutorial.url}/01`, { referrer: 'https://google.com' })
+    assertModalDoesNotShow()
+    cy.get('button[data-cy="next-lesson-text"]').click()
+    visit(`/${tutorial.url}/03`, { referrer: 'https://google.com', clearStorage: false })
+    assertModalShows()
+    assertModalContent({ tutorial, lessonId: 3, context: 'resume' })
+    assertModalActions({ action: 'resume' })
+    cy.get(`[data-cy="tutorial-redirect-modal-action-resume"]`).click()
+    cy.location('pathname').should('eq', `/${tutorial.url}/02`)
+    assertModalDoesNotShow()
+    cy.get('button[data-cy="next-lesson-text"]').click()
+    cy.location('pathname').should('eq', `/${tutorial.url}/03`)
+    assertModalDoesNotShow()
+  })
+
+  it('should always show when using the query parameter _forceShowRedirectModal=true', () => {
+    visit(`/${tutorial.url}/01?_forceShowRedirectModal=true`)
+    assertModalShows()
+    assertModalContent({ tutorial, lessonId: 1, context: 'start' })
+    assertModalActions({ action: 'start' })
+  })
+})

package-lock.json

@@ -45,6 +45,7 @@
     "monaco-editor-webpack-plugin": "^1.9.0",
     "new-github-issue-url": "^0.2.1",
     "p-timeout": "^3.2.0",
+    "portal-vue": "^2.1.7",
     "prerender-spa-plugin": "^3.4.0",
     "querystringify": "^2.1.1",
     "raw-loader": "^0.5.1",

package.json

@@ -1,6 +1,7 @@
 <template>
   <div id="app">
     <router-view :key="$route.path"></router-view>
+    <portal-target name="modal"></portal-target>
   </div>
 </template>
 

src/App.vue

@@ -0,0 +1 @@
+module.exports = (process.env.NODE_ENV === 'development' || process.env.NODE_ENV === 'test') && process.env.DEBUG

src/api/debug.js

@@ -4,7 +4,7 @@ const errorCode = require('err-code')
 const marked = require('meta-marked')
 
 const log = require('../logger')
-const debug = require('../../utils/debug')
+const debug = require('../debug')
 const config = require('../config')
 
 const logGroup = log.createLogGroup('lessons')

src/api/modules/lessons.js

@@ -1,5 +1,5 @@
 const log = require('../logger')
-const debug = require('../../utils/debug')
+const debug = require('../debug')
 const tutorialsApi = require('./tutorials')
 const utils = require('../utils')
 

src/api/modules/resources.js

@@ -12,7 +12,7 @@ const _ = require('lodash')
 const del = require('del')
 
 const log = require('../logger')
-const debug = require('../../utils/debug')
+const debug = require('../debug')
 const config = require('../config')
 const utils = require('../utils')
 const lessonsApi = require('./lessons')

src/api/modules/tutorials.js

@@ -1,5 +1,6 @@
 <template>
   <div :class="{'overflow-hidden': expandChallenge}">
+    <TutorialRedirectModal :tutorial="tutorial" :lesson="lesson" />
     <Header/>
     <div class="container center-l mw7-l ph3">
       <section class="mw7 center mt3 pt2">
@@ -11,7 +12,7 @@
               :lessonsInTutorial="lessonsInTutorial"
               :lessonPassed="lessonPassed" />
             <TypeIcon
-              :lessonId="isResources? 'resources' : lessonId"
+              :lessonId="isResources ? 'resources' : lessonId"
               :tutorialId="tutorial.formattedId"
               class="h2 ml3" />
         </div>
@@ -153,6 +154,7 @@ import Output from './Output.vue'
 import Info from './Info.vue'
 import Validator from './Validator.vue'
 import TutorialCompletionCallout from './callouts/TutorialCompletion.vue'
+import TutorialRedirectModal from './modals/TutorialRedirectModal.vue'
 import TypeIcon from './TypeIcon.vue'
 
 const MAX_EXEC_TIMEOUT = isProduction ? 10000 : 60000
@@ -221,6 +223,7 @@ export default {
     Info,
     Validator,
     TutorialCompletionCallout,
+    TutorialRedirectModal,
     TypeIcon
   },
   props: {