freemium-survey-components 0.10.37 → 0.10.40

package/cypress/e2e/card.cy.ts

@@ -0,0 +1,67 @@
+/// <reference types="cypress" />
+import { mockSurvey, mockPlaceholders } from '../fixtures/mock'
+import { sanitiseQuestion } from '../../src/survey/utils'
+const getQuestionText = (htmlText: string) => {
+  const text = htmlText.replace(/<[^>]+>/g, '')
+  return sanitiseQuestion(text, mockPlaceholders, null)
+}
+const { questions } = mockSurvey.question_details
+describe('load', () => {
+  it('visit page', () => {
+    cy.visit({
+      url: `http://localhost:6006/iframe.html?id=test-survey--card-survey&args=&viewMode=story`,
+    })
+  })
+})
+describe('renders nps question', () => {
+  it('mounts nps question', () => {
+    cy.contains(getQuestionText(questions[0].text))
+  })
+  it('check min max validation', () => {
+    cy.get('[data-test-nps-choice]')
+      .first()
+      .contains(questions[0].type_info.validation.min.toString())
+    cy.get('[data-test-nps-choice]')
+      .last()
+      .contains(questions[0].type_info.validation.max.toString())
+  })
+
+  describe('test detractor Range', () => {
+    beforeEach(() => {
+      cy.reload()
+    })
+    afterEach(() => {
+      const expectedNextQuestion = questions.find(
+        (question) => question.name === 'Q_22',
+      )
+      cy.get('[data-test-question-name="Q_22').contains(
+        getQuestionText(expectedNextQuestion.text),
+      )
+    })
+    it('navigate to next based_on_rating question (detractor min)', () => {
+      const detractorRange = questions[0].type_info.meta.branches.find(
+        (each) => each.id === 'detractor',
+      )
+      cy.get(`[data-test-nps-choice="${detractorRange.min}"]`).click()
+    })
+    it('navigate to next based_on_rating question (detractor max)', () => {
+      const detractorRange = questions[0].type_info.meta.branches.find(
+        (each) => each.id === 'detractor',
+      )
+      cy.get(`[data-test-nps-choice="${detractorRange.max}"]`).click()
+    })
+    it('navigate to next based_on_rating question (detractor min < random < max )', () => {
+      const detractorRange = questions[0].type_info.meta.branches.find(
+        (each) => each.id === 'detractor',
+      )
+      cy.get(
+        `[data-test-nps-choice="${Math.ceil(
+          Math.random() * (detractorRange.max - detractorRange.min) +
+            detractorRange.min,
+        )}"]`,
+      ).click()
+    })
+  })
+  // it('navigate to next based_on_rating question (passive)', () => {})
+  // it('navigate to next based_on_rating question (promoter)', () => {})
+})

package/cypress/fixtures/mock.ts

@@ -0,0 +1,317 @@
+export const mockSurvey = {
+  name: 'Hello',
+  desc: '',
+  type: 'NPS',
+  state: 'DRAFT',
+  is_template: false,
+  question_details: {
+    questions: [
+      {
+        id: '45cc1a3c-8f28-41f9-88f1-144a57322eee',
+        text: '<p>How likely are you to recommend <span class="placeholder-tag"><span contenteditable="false">{{account.company_name}}</span></span> to your colleagues or professional network?</p>',
+        name: 'Q_1',
+        position: 1,
+        required: false,
+        type_info: {
+          comment: false,
+          driver: false,
+          question_type: 'RANGE',
+          validation: {
+            min: 1,
+            max: 10,
+          },
+          linear_scale: {
+            point_scale: null,
+            scale_order: null,
+            button_style: 'highlighted',
+            button_shape: 'rounded',
+          },
+          rating_presets: {
+            start: 'Very unlikely',
+            end: 'Very likely',
+          },
+          choices: [
+            {
+              position: '1',
+              value: '1',
+              dependent_question_names: ['Q_22', 'TY_02'],
+            },
+            {
+              position: '2',
+              value: '2',
+              dependent_question_names: ['Q_22', 'TY_02'],
+            },
+            {
+              position: '3',
+              value: '3',
+              dependent_question_names: ['Q_22', 'TY_02'],
+            },
+            {
+              position: '4',
+              value: '4',
+              dependent_question_names: ['Q_22', 'TY_02'],
+            },
+            {
+              position: '5',
+              value: '5',
+              dependent_question_names: ['Q_22', 'TY_02'],
+            },
+            {
+              position: '6',
+              value: '6',
+              dependent_question_names: ['Q_22', 'TY_02'],
+            },
+            {
+              position: '7',
+              value: '7',
+              dependent_question_names: ['Q_21', 'TY_01'],
+            },
+            {
+              position: '8',
+              value: '8',
+              dependent_question_names: ['Q_21', 'TY_01'],
+            },
+            {
+              position: '9',
+              value: '9',
+              dependent_question_names: ['Q_20', 'TY_0'],
+            },
+            {
+              position: '10',
+              value: '10',
+              dependent_question_names: ['Q_20', 'TY_0'],
+            },
+          ],
+          footer_text: 'We look forward to your feedback.',
+          meta: {
+            block: {
+              name: 'NPS',
+              title: 'NPS',
+              is_based_on_rating: false,
+            },
+            branches: [
+              {
+                min: 1,
+                max: 6,
+                id: 'detractor',
+              },
+              {
+                min: 7,
+                max: 8,
+                id: 'passive',
+              },
+              {
+                min: 9,
+                max: 10,
+                id: 'promoter',
+              },
+            ],
+            branchType: 'logic',
+          },
+          pivot_question: true,
+        },
+      },
+      {
+        id: '22413e27-9225-49cc-9620-55d2c43eda23',
+        text: '<p>Wow! You made our day. Thank you for giving us a <span class="placeholder-tag"><span contenteditable="false">{{nps.rating}}</span></span>. Please tell us what you liked the most.</p>',
+        name: 'Q_20',
+        position: 2,
+        required: false,
+        type_info: {
+          comment: false,
+          driver: false,
+          question_type: 'PARAGRAPH',
+          validation: null,
+          linear_scale: null,
+          rating_presets: null,
+          choices: null,
+          footer_text: null,
+          meta: {
+            block: {
+              name: 'B_2',
+              title: 'Q2',
+              is_based_on_rating: true,
+              question_names: ['Q_20', 'Q_21', 'Q_22'],
+            },
+          },
+          pivot_question: false,
+        },
+      },
+      {
+        id: 'c391f15b-6a09-4711-8887-8675623c1557',
+        text: '<p>Thank you for giving us a <span class="placeholder-tag"><span contenteditable="false">{{nps.rating}}</span></span>. Do you see any areas where we could improve?</p>',
+        name: 'Q_21',
+        position: 3,
+        required: false,
+        type_info: {
+          comment: false,
+          driver: false,
+          question_type: 'PARAGRAPH',
+          validation: null,
+          linear_scale: null,
+          rating_presets: null,
+          choices: null,
+          footer_text: null,
+          meta: null,
+          pivot_question: false,
+        },
+      },
+      {
+        id: 'a39e9193-ffa7-41a0-bcc7-9d91c01602b3',
+        text: "<p>We see we've fallen short of your expectation. Please accept our apologies. Any feedback you might have will certainly help us improve.</p>",
+        name: 'Q_22',
+        position: 4,
+        required: false,
+        type_info: {
+          comment: false,
+          driver: false,
+          question_type: 'PARAGRAPH',
+          validation: null,
+          linear_scale: null,
+          rating_presets: null,
+          choices: null,
+          footer_text: null,
+          meta: null,
+          pivot_question: false,
+        },
+      },
+      {
+        id: 'ddf185e8-017b-4403-8333-00ee7b683c59',
+        text: 'Promotors\n',
+        name: 'TY_0',
+        position: 5,
+        required: false,
+        type_info: {
+          comment: false,
+          driver: false,
+          question_type: 'TEXT',
+          validation: null,
+          linear_scale: null,
+          rating_presets: null,
+          choices: null,
+          footer_text: null,
+          meta: {
+            block: {
+              name: 'TY',
+              title: 'Thank you',
+              is_based_on_rating: true,
+              question_names: ['TY_0', 'TY_01', 'TY_02'],
+            },
+          },
+          pivot_question: false,
+        },
+      },
+      {
+        id: 'a541b019-25b6-43fd-8304-47b720c34ad9',
+        text: 'Passive (7-8)',
+        name: 'TY_01',
+        position: 6,
+        required: false,
+        type_info: {
+          comment: false,
+          driver: false,
+          question_type: 'TEXT',
+          validation: null,
+          linear_scale: null,
+          rating_presets: null,
+          choices: null,
+          footer_text: null,
+          meta: {},
+          pivot_question: false,
+        },
+      },
+      {
+        id: '02a22da0-7aff-4589-9636-64b485928fcd',
+        text: 'Detractors',
+        name: 'TY_02',
+        position: 7,
+        required: false,
+        type_info: {
+          comment: false,
+          driver: false,
+          question_type: 'TEXT',
+          validation: null,
+          linear_scale: null,
+          rating_presets: null,
+          choices: null,
+          footer_text: null,
+          meta: {},
+          pivot_question: false,
+        },
+      },
+    ],
+  },
+  created_at: '2022-05-20T04:38:14.167Z',
+  updated_at: '2022-05-20T04:38:14.167Z',
+  gratitude_message: null,
+  ui_branding: {
+    logo_url: null,
+    name: null,
+  },
+  ui_theme: {
+    body_background_color: null,
+    primary_font: null,
+    secondary_font: null,
+    primary_background_color: null,
+    secondary_background_color: null,
+    primary_button_color: null,
+    secondary_button_color: null,
+    brand_color: '#e51923',
+    primary_button_text_color: '#fff',
+    button_style: null,
+    secondary_button_text_color: '#111',
+    question_background_color: '#abc',
+    question_text_color: '#12344d',
+    css_url: null,
+  },
+  meta: {
+    survey_layout: 'card',
+    created_by: 'user-541',
+  },
+  channels: null,
+  template: false,
+  header_message:
+    'Thank you for your time. This survey should take under a minute to complete.',
+  contact_info: null,
+  schedule_info: null,
+  throttle_info: null,
+  channel_info: null,
+  product_client_id: '_199-3',
+}
+
+export const mockPlaceholders = {
+  '{{account.organisation_domain}}': 'test.int.myfreshworks.dev',
+  '{{account.company_name}}': 'Acme Inc',
+  '{{account.logo_url}}': '',
+  '{{account.brand_color}}': '#E50914',
+  '{{account.name}}': 'test',
+  '{{account.domain}}': 'test.sta91ng-freshsurvey.com',
+  '{{account.id}}': 'acc-208',
+  '{{account.timezone}}': '',
+  '{{survey.desc}}': 'Survey Description goes here',
+  '{{survey.id}}': 'f18fa279-eb2a-45ff-acd3-f7d4e4f03814',
+  '{{survey.name}}': 'Untitled NPS Survey',
+  '{{contact.updated_at}}': '1644730335625',
+  '{{contact.external_id}}': '154328a3-4b7a-4cbe-8c67-933f3340761d',
+  '{{contact.zipcode}}': '',
+  '{{contact.industry}}': '',
+  '{{contact.first_name}}': 'Kill',
+  '{{contact.address}}': '',
+  '{{contact.city}}': '',
+  '{{contact.list_ids}}': '[cl-135]',
+  '{{contact.company_website}}': '',
+  '{{contact.creater_id}}': '412842723848100367',
+  '{{contact.work_number}}': '',
+  '{{contact.created_at}}': '1644730321825',
+  '{{contact.mobile_number}}': '',
+  '{{contact.company_name}}': '',
+  '{{contact.timezone}}': '',
+  '{{contact.updater_id}}': '412842723848100367',
+  '{{contact.sub_state}}': '1',
+  '{{contact.designation}}': '',
+  '{{contact.last_name}}': 'Bill',
+  '{{contact.state}}': '',
+  '{{contact.language}}': '',
+  '{{contact.work_email}}': 'test@freshworks.com',
+  '{{contact.country}}': '',
+}

package/cypress/stories/survey.test.stories.tsx

@@ -0,0 +1,34 @@
+import { withKnobs } from '@storybook/addon-knobs'
+import { storiesOf } from '@storybook/react'
+import React from 'react'
+import { Survey } from '../../src'
+import { mockSurvey, mockPlaceholders } from '../fixtures/mock'
+
+const stories = storiesOf('Test Survey', module)
+stories.addDecorator(withKnobs)
+
+stories.add('Card Survey', () => {
+  return (
+    <div
+      style={{
+        display: 'flex',
+        flexDirection: 'column',
+        maxWidth: '700px',
+        margin: '0 auto',
+      }}
+    >
+      <Survey
+        survey={mockSurvey}
+        surveyStyle={'card'}
+        placeholders={mockPlaceholders}
+        onSubmit={(data, callback) => {
+          console.log(data)
+          callback?.()
+        }}
+        closePreview={() => console.log('Closing preview...')}
+        preview={true}
+        widgetNavigatorQuerySelector="#header"
+      />
+    </div>
+  )
+})

package/cypress/support/commands.ts

@@ -0,0 +1,37 @@
+/// <reference types="cypress" />
+// ***********************************************
+// This example commands.ts shows you how to
+// create various custom commands and overwrite
+// existing commands.
+//
+// For more comprehensive examples of custom
+// commands please read more here:
+// https://on.cypress.io/custom-commands
+// ***********************************************
+//
+//
+// -- This is a parent command --
+// Cypress.Commands.add('login', (email, password) => { ... })
+//
+//
+// -- This is a child command --
+// Cypress.Commands.add('drag', { prevSubject: 'element'}, (subject, options) => { ... })
+//
+//
+// -- This is a dual command --
+// Cypress.Commands.add('dismiss', { prevSubject: 'optional'}, (subject, options) => { ... })
+//
+//
+// -- This will overwrite an existing command --
+// Cypress.Commands.overwrite('visit', (originalFn, url, options) => { ... })
+//
+// declare global {
+//   namespace Cypress {
+//     interface Chainable {
+//       login(email: string, password: string): Chainable<void>
+//       drag(subject: string, options?: Partial<TypeOptions>): Chainable<Element>
+//       dismiss(subject: string, options?: Partial<TypeOptions>): Chainable<Element>
+//       visit(originalFn: CommandOriginalFn, url: string, options: Partial<VisitOptions>): Chainable<Element>
+//     }
+//   }
+// }

package/cypress/support/e2e.ts

@@ -0,0 +1,20 @@
+// ***********************************************************
+// This example support/e2e.ts is processed and
+// loaded automatically before your test files.
+//
+// This is a great place to put global configuration and
+// behavior that modifies Cypress.
+//
+// You can change the location of this file or turn off
+// automatically serving support files with the
+// 'supportFile' configuration option.
+//
+// You can read more here:
+// https://on.cypress.io/configuration
+// ***********************************************************
+
+// Import commands.js using ES2015 syntax:
+import './commands'
+
+// Alternatively you can use CommonJS syntax:
+// require('./commands')

package/cypress.config.ts

@@ -0,0 +1,7 @@
+import { defineConfig } from 'cypress'
+
+export default defineConfig({
+  e2e: {
+    baseUrl: 'http://localhost:6006',
+  },
+})