|
1 | 1 | import '@testing-library/jest-dom' |
2 | | -import { fireEvent, render } from '@testing-library/preact' |
| 2 | +import { cleanup, fireEvent, render, screen } from '@testing-library/preact' |
3 | 3 | import { SurveyPopup } from '../../../extensions/surveys' |
4 | 4 | import { Survey, SurveyQuestionType, SurveyType } from '../../../posthog-surveys-types' |
5 | 5 |
|
@@ -41,79 +41,47 @@ describe('SurveyPopup', () => { |
41 | 41 |
|
42 | 42 | beforeEach(() => { |
43 | 43 | // Reset DOM |
44 | | - document.getElementsByTagName('html')[0].innerHTML = '' |
| 44 | + cleanup() |
45 | 45 | localStorage.clear() |
46 | 46 | jest.clearAllMocks() |
47 | 47 | }) |
48 | 48 |
|
49 | | - test('calls onCloseConfirmationMessage when X button is clicked', () => { |
| 49 | + test('calls onCloseConfirmationMessage when X button is clicked in the confirmation message', () => { |
50 | 50 | // Create a mock function to test if it gets called |
51 | 51 | const mockOnCloseConfirmationMessage = jest.fn() |
52 | 52 | const mockRemoveSurveyFromFocus = jest.fn() |
53 | | - |
54 | | - // Create a custom wrapper to set isSurveySent to true |
55 | | - // This simulates the state after survey submission when confirmation message is shown |
56 | | - const SurveyWrapper = () => { |
57 | | - return ( |
58 | | - <SurveyPopup |
59 | | - survey={mockSurvey} |
60 | | - removeSurveyFromFocus={mockRemoveSurveyFromFocus} |
61 | | - isPopup={true} |
62 | | - onCloseConfirmationMessage={mockOnCloseConfirmationMessage} |
63 | | - // Force the confirmation message to show by providing props that match showConfirmation condition |
64 | | - // In the component: const shouldShowConfirmation = isSurveySent || previewPageIndex === survey.questions.length |
65 | | - previewPageIndex={mockSurvey.questions.length} |
66 | | - /> |
67 | | - ) |
68 | | - } |
69 | | - |
70 | | - // Render the component |
71 | | - const { container } = render(<SurveyWrapper />) |
72 | | - |
73 | | - // Find the X/Cancel button directly in the container |
74 | | - const cancelButton = container.querySelector('button.form-cancel[aria-label="Close survey"]') |
75 | | - |
| 53 | + render( |
| 54 | + <SurveyPopup |
| 55 | + survey={mockSurvey} |
| 56 | + removeSurveyFromFocus={mockRemoveSurveyFromFocus} |
| 57 | + isPopup={true} |
| 58 | + onCloseConfirmationMessage={mockOnCloseConfirmationMessage} |
| 59 | + // Force the confirmation message to show |
| 60 | + previewPageIndex={mockSurvey.questions.length} |
| 61 | + /> |
| 62 | + ) |
| 63 | + const cancelButton2 = screen.getByRole('button', { name: 'Close survey', hidden: true }) |
76 | 64 | // Click the cancel button |
77 | | - if (cancelButton) { |
78 | | - fireEvent.click(cancelButton) |
79 | | - // Verify that onCloseConfirmationMessage was called |
80 | | - expect(mockOnCloseConfirmationMessage).toHaveBeenCalledTimes(1) |
81 | | - } else { |
82 | | - expect(cancelButton).not.toBeNull() // Use expect instead of fail |
83 | | - } |
| 65 | + fireEvent.click(cancelButton2) |
| 66 | + // Verify that onCloseConfirmationMessage was called |
| 67 | + expect(mockOnCloseConfirmationMessage).toHaveBeenCalledTimes(1) |
84 | 68 | }) |
85 | 69 |
|
86 | | - test('calls onCloseConfirmationMessage when Close button is clicked', () => { |
87 | | - // Create a mock function to test if it gets called |
| 70 | + test('calls onCloseConfirmationMessage when survey is closed in the confirmation message', () => { |
88 | 71 | const mockOnCloseConfirmationMessage = jest.fn() |
89 | 72 | const mockRemoveSurveyFromFocus = jest.fn() |
| 73 | + render( |
| 74 | + <SurveyPopup |
| 75 | + survey={mockSurvey} |
| 76 | + removeSurveyFromFocus={mockRemoveSurveyFromFocus} |
| 77 | + isPopup={true} |
| 78 | + onCloseConfirmationMessage={mockOnCloseConfirmationMessage} |
| 79 | + previewPageIndex={mockSurvey.questions.length} |
| 80 | + /> |
| 81 | + ) |
90 | 82 |
|
91 | | - // Create a custom wrapper with confirmation message showing |
92 | | - const SurveyWrapper = () => { |
93 | | - return ( |
94 | | - <SurveyPopup |
95 | | - survey={mockSurvey} |
96 | | - removeSurveyFromFocus={mockRemoveSurveyFromFocus} |
97 | | - isPopup={true} |
98 | | - onCloseConfirmationMessage={mockOnCloseConfirmationMessage} |
99 | | - previewPageIndex={mockSurvey.questions.length} |
100 | | - /> |
101 | | - ) |
102 | | - } |
103 | | - |
104 | | - // Render the component |
105 | | - const { container } = render(<SurveyWrapper />) |
106 | | - |
107 | | - // Find the Close button directly in the container (rather than in Shadow DOM) |
108 | | - const closeButton = container.querySelector('button.form-submit') |
109 | | - |
110 | | - // Click the Close button |
111 | | - if (closeButton) { |
112 | | - fireEvent.click(closeButton) |
113 | | - // Verify that onCloseConfirmationMessage was called |
114 | | - expect(mockOnCloseConfirmationMessage).toHaveBeenCalledTimes(1) |
115 | | - } else { |
116 | | - expect(closeButton).not.toBeNull() // Use expect instead of fail |
117 | | - } |
| 83 | + const closeButton = screen.getByRole('button', { name: /close/i }) |
| 84 | + fireEvent.click(closeButton) |
| 85 | + expect(mockOnCloseConfirmationMessage).toHaveBeenCalledTimes(1) |
118 | 86 | }) |
119 | 87 | }) |
0 commit comments