feat: make call to action message clickable (#28)

edx · Sep 18, 2023 · e73eaae · e73eaae
1 parent 9f59a46
commit e73eaae
Show file tree

Hide file tree

Showing 3 changed files with 36 additions and 6 deletions.
diff --git a/src/components/ToggleXpertButton/index.jsx b/src/components/ToggleXpertButton/index.jsx
@@ -15,12 +15,15 @@ const ToggleXpert = ({
   contentToolsEnabled,
 }) => {
   const [hasDismissed, setHasDismissed] = useState(false);
-  const handleClick = () => {
+  const handleClick = (event) => {
     // log event if the tool is opened
     if (!isOpen) {
-      sendTrackEvent('edx.ui.lms.learning_assistant.launch', {
-        course_id: courseId,
-      });
+      sendTrackEvent(
+        `edx.ui.lms.learning_assistant.launch${event.target.id === 'toggle-button' ? '' : '.cta-triggered'}`,
+        {
+          course_id: courseId,
+        },
+      );
     }
     setIsOpen(!isOpen);
   };
@@ -56,19 +59,26 @@ const ToggleXpert = ({
             className="dismiss-button mx-2 mt-1 bg-gray"
             size="sm"
           />
-          <div className="action-message open-negative-margin p-3 mb-4.5">
+          <button
+            className="action-message open-negative-margin p-3 mb-4.5"
+            data-testid="message-button"
+            onClick={handleClick}
+            aria-label="Can I answer any questions for you?"
+            type="button"
+          >
             <span>
               Hi there! 👋 I&apos;m Xpert,
               an AI-powered assistant from edX who can help you with questions about this course.
             </span>
-          </div>
+          </button>
         </div>
       )}
       <Button
         variant="primary"
         className="toggle button-icon"
         data-testid="toggle-button"
         onClick={handleClick}
+        id="toggle-button"
       >
         <XpertLogo />
       </Button>

diff --git a/src/components/ToggleXpertButton/index.scss b/src/components/ToggleXpertButton/index.scss
@@ -33,6 +33,9 @@
     width: 40%;
     text-align: left;
     border-radius: 1rem;
+
+    // necessary to override user agent stylesheet, which adds a dark border to buttons
+    border-color: rgba(0,0,0,0);
 }
 
 .dismiss-button {

diff --git a/src/widgets/Xpert.test.jsx b/src/widgets/Xpert.test.jsx
@@ -63,6 +63,23 @@ test('clicking the call to action dismiss button removes the message', async ()
   expect(screen.queryByTestId('toggle-button')).toBeVisible();
   expect(screen.queryByTestId('action-message')).not.toBeInTheDocument();
 });
+test('clicking the call to action opens the sidebar', async () => {
+  const user = userEvent.setup();
+
+  render(<Xpert courseId={courseId} contentToolsEnabled={false} />, { preloadedState: initialState });
+
+  await user.click(screen.queryByTestId('message-button'));
+
+  // assert that UI elements present in the sidebar are visible
+  expect(screen.getByRole('heading', { name: 'Hi, I\'m Xpert!' })).toBeVisible();
+  expect(screen.getByRole('textbox')).toBeVisible();
+  expect(screen.getByRole('button', { name: 'submit' })).toBeVisible();
+  expect(screen.getByTestId('close-button')).toBeVisible();
+  expect(screen.getByRole('button', { name: 'clear' })).toBeVisible();
+
+  // assert that text input has focus
+  expect(screen.getByRole('textbox')).toHaveFocus();
+});
 test('clicking the toggle button opens the sidebar', async () => {
   const user = userEvent.setup();