From e73eaae9697a6818a016e2a5ebd67128ea275f2c Mon Sep 17 00:00:00 2001
From: alangsto <46360176+alangsto@users.noreply.github.com>
Date: Mon, 18 Sep 2023 12:18:27 -0400
Subject: [PATCH] feat: make call to action message clickable (#28)

---
 src/components/ToggleXpertButton/index.jsx  | 22 +++++++++++++++------
 src/components/ToggleXpertButton/index.scss |  3 +++
 src/widgets/Xpert.test.jsx                  | 17 ++++++++++++++++
 3 files changed, 36 insertions(+), 6 deletions(-)

diff --git a/src/components/ToggleXpertButton/index.jsx b/src/components/ToggleXpertButton/index.jsx
index da47108a..d6ae3519 100644
--- 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,12 +59,18 @@ 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
@@ -69,6 +78,7 @@ const ToggleXpert = ({
         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
index 9cf4a20c..db383598 100644
--- 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
index f8d4fe77..94fe0bdf 100644
--- 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();