-
Notifications
You must be signed in to change notification settings - Fork 120
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
feat(surveys): Make surveys site app native to posthog-js #801
Merged
Merged
Changes from 7 commits
Commits
Show all changes
8 commits
Select commit
Hold shift + click to select a range
d233991
feat(surveys): Make surveys site app native to posthog-js
neilkakkar 63d2eaa
check bundle size on import change
neilkakkar b7f5039
check bundle size on import change
neilkakkar 5b9a8fe
revert interface
neilkakkar 44dd6be
update from feature-surveys branch pr #17
neilkakkar 03c120d
merge pr #17
neilkakkar 5d51d37
no need to whitelabel
neilkakkar 8472158
address comment
neilkakkar File filter
Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,151 @@ | ||
import { createShadow, callSurveys, generateSurveys } from '../../extensions/surveys' | ||
|
||
describe('survey display logic', () => { | ||
beforeEach(() => { | ||
// we have to manually reset the DOM before each test | ||
document.getElementsByTagName('html')[0].innerHTML = '' | ||
localStorage.clear() | ||
jest.clearAllMocks() | ||
}) | ||
|
||
test('createShadow', () => { | ||
const surveyId = 'randomSurveyId' | ||
const mockShadow = createShadow(`.survey-${surveyId}-form {}`, surveyId) | ||
expect(mockShadow.mode).toBe('open') | ||
expect(mockShadow.host.className).toBe(`PostHogSurvey${surveyId}`) | ||
}) | ||
|
||
let mockSurveys = [ | ||
{ | ||
id: 'testSurvey1', | ||
name: 'Test survey 1', | ||
appearance: null, | ||
questions: [ | ||
{ | ||
question: 'How satisfied are you with our newest product?', | ||
description: 'This is a question description', | ||
type: 'rating', | ||
display: 'number', | ||
scale: 10, | ||
lower_bound_label: 'Not Satisfied', | ||
upper_bound_label: 'Very Satisfied', | ||
}, | ||
], | ||
}, | ||
] | ||
const mockPostHog = { | ||
getActiveMatchingSurveys: jest.fn().mockImplementation((callback) => callback(mockSurveys)), | ||
get_session_replay_url: jest.fn(), | ||
capture: jest.fn().mockImplementation((eventName) => eventName), | ||
} | ||
|
||
test('does not show survey to user if they have dismissed it before', () => { | ||
expect(localStorage.getItem(`seenSurvey_${mockSurveys[0].id}`)).toBe(null) | ||
callSurveys(mockPostHog, false) | ||
expect(mockPostHog.capture).toBeCalledTimes(1) | ||
expect(mockPostHog.capture).toBeCalledWith('survey shown', { | ||
$survey_id: 'testSurvey1', | ||
$survey_name: 'Test survey 1', | ||
sessionRecordingUrl: undefined, | ||
}) | ||
|
||
// now we dismiss the survey | ||
const cancelButton = document | ||
.getElementsByClassName(`PostHogSurvey${mockSurveys[0].id}`)[0] | ||
.shadowRoot.querySelectorAll('.form-cancel')[0] | ||
cancelButton.click() | ||
expect(mockPostHog.capture).toBeCalledTimes(2) | ||
expect(mockPostHog.capture).toBeCalledWith('survey dismissed', { | ||
$survey_id: 'testSurvey1', | ||
$survey_name: 'Test survey 1', | ||
sessionRecordingUrl: undefined, | ||
}) | ||
expect(localStorage.getItem(`seenSurvey_${mockSurveys[0].id}`)).toBe('true') | ||
|
||
// now we clear the DOM to imitate a new page load and call surveys again, and it should not show the survey | ||
document.getElementsByTagName('html')[0].innerHTML = '' | ||
callSurveys(mockPostHog, false) | ||
expect(document.getElementsByClassName(`PostHogSurvey${mockSurveys[0].id}`)[0]).toBe(undefined) | ||
// no additional capture events are called because the survey is not shown | ||
expect(mockPostHog.capture).toBeCalledTimes(2) | ||
}) | ||
|
||
test('does not show survey to user if they have already completed it', () => { | ||
expect(localStorage.getItem(`seenSurvey_${mockSurveys[0].id}`)).toBe(null) | ||
callSurveys(mockPostHog, false) | ||
expect(mockPostHog.capture).toBeCalledTimes(1) | ||
expect(mockPostHog.capture).toBeCalledWith('survey shown', { | ||
$survey_id: 'testSurvey1', | ||
$survey_name: 'Test survey 1', | ||
sessionRecordingUrl: undefined, | ||
}) | ||
|
||
// submit the survey | ||
const submitButton = document | ||
.getElementsByClassName(`PostHogSurvey${mockSurveys[0].id}`)[0] | ||
.shadowRoot.querySelectorAll('.rating_1')[0] | ||
submitButton.click() | ||
expect(mockPostHog.capture).toBeCalledTimes(2) | ||
expect(mockPostHog.capture).toBeCalledWith('survey sent', { | ||
$survey_id: 'testSurvey1', | ||
$survey_name: 'Test survey 1', | ||
$survey_question: 'How satisfied are you with our newest product?', | ||
$survey_response: 1, | ||
sessionRecordingUrl: undefined, | ||
}) | ||
expect(localStorage.getItem(`seenSurvey_${mockSurveys[0].id}`)).toBe('true') | ||
|
||
// now we clear the DOM to imitate a new page load and call surveys again, and it should not show the survey | ||
document.getElementsByTagName('html')[0].innerHTML = '' | ||
callSurveys(mockPostHog, false) | ||
expect(document.getElementsByClassName(`PostHogSurvey${mockSurveys[0].id}`)[0]).toBe(undefined) | ||
// no additional capture events are called because the survey is not shown | ||
expect(mockPostHog.capture).toBeCalledTimes(2) | ||
}) | ||
|
||
test('does not show survey to user if they have seen it before and survey wait period is set', () => { | ||
mockSurveys = [ | ||
{ | ||
id: 'testSurvey2', | ||
name: 'Test survey 2', | ||
appearance: null, | ||
conditions: { seenSurveyWaitPeriodInDays: 10 }, | ||
questions: [ | ||
{ | ||
question: 'How was your experience?', | ||
description: 'This is a question description', | ||
type: 'rating', | ||
display: 'emoji', | ||
scale: 5, | ||
lower_bound_label: 'Not Good', | ||
upper_bound_label: 'Very Good', | ||
}, | ||
], | ||
}, | ||
] | ||
expect(mockSurveys[0].conditions.seenSurveyWaitPeriodInDays).toBe(10) | ||
expect(localStorage.getItem(`seenSurvey_${mockSurveys[0].id}`)).toBe(null) | ||
callSurveys(mockPostHog, false) | ||
expect(mockPostHog.capture).toBeCalledTimes(1) | ||
expect(mockPostHog.capture).toBeCalledWith('survey shown', { | ||
$survey_id: 'testSurvey2', | ||
$survey_name: 'Test survey 2', | ||
sessionRecordingUrl: undefined, | ||
}) | ||
expect(localStorage.getItem('lastSeenSurveyDate').split('T')[0]).toBe(new Date().toISOString().split('T')[0]) | ||
|
||
document.getElementsByTagName('html')[0].innerHTML = '' | ||
callSurveys(mockPostHog, false) | ||
expect(document.getElementsByClassName(`PostHogSurvey${mockSurveys[0].id}`)[0]).toBe(undefined) | ||
// no additional capture events are called because the survey is not shown | ||
expect(mockPostHog.capture).toBeCalledTimes(1) | ||
}) | ||
|
||
test('when url changes, callSurveys runs again', () => { | ||
jest.useFakeTimers() | ||
jest.spyOn(global, 'setInterval') | ||
generateSurveys(mockPostHog) | ||
expect(mockPostHog.getActiveMatchingSurveys).toBeCalledTimes(1) | ||
expect(setInterval).toHaveBeenLastCalledWith(expect.any(Function), 1500) | ||
}) | ||
}) |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Oops, something went wrong.
Oops, something went wrong.
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Can we scope this a little more perhaps?
window.extendPostHogWithSurveys
or something?Should be incredibly low chance of a clash but still. "generateSurveys" is somewhat too generic
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Makes sense, will do 👍