feat: add start:with-theme command

Author: KristinAoki

.husky/pre-commit

@@ -15,10 +15,10 @@
     "i18n_extract": "fedx-scripts formatjs extract",
     "lint": "fedx-scripts eslint --ext .js --ext .jsx --ext .ts --ext .tsx .",
     "lint:fix": "fedx-scripts eslint --fix --ext .js --ext .jsx --ext .ts --ext .tsx .",
-    "prepare": "husky",
     "postinstall": "patch-package",
     "snapshot": "fedx-scripts jest --updateSnapshot",
     "start": "fedx-scripts webpack-dev-server --progress",
+    "start:with-theme": "paragon install-theme && npm start && npm install",
     "dev": "PUBLIC_PATH=/learning/ MFE_CONFIG_API_URL='http://localhost:8000/api/mfe_config/v1' fedx-scripts webpack-dev-server --progress --host apps.local.openedx.io",
     "test": "fedx-scripts jest --coverage --passWithNoTests",
     "test:watch": "fedx-scripts jest --watch --passWithNoTests",
@@ -37,7 +37,7 @@
     "@edx/brand": "npm:@openedx/brand-openedx@^1.2.2",
     "@edx/browserslist-config": "1.5.0",
     "@edx/frontend-component-header": "^5.8.0",
-    "@edx/frontend-lib-learning-assistant": "^2.19.1",
+    "@edx/frontend-lib-learning-assistant": "^2.19.2",
     "@edx/frontend-lib-special-exams": "^3.1.3",
     "@edx/frontend-platform": "^8.0.0",
     "@edx/openedx-atlas": "^0.6.0",
@@ -55,7 +55,6 @@
     "buffer": "^6.0.3",
     "classnames": "2.5.1",
     "copy-webpack-plugin": "^12.0.0",
-    "husky": "9.1.7",
     "joi": "^17.11.0",
     "js-cookie": "3.0.5",
     "lodash": "^4.17.21",
@@ -84,7 +83,7 @@
     "@testing-library/jest-dom": "5.17.0",
     "@testing-library/react": "12.1.5",
     "@testing-library/react-hooks": "^8.0.1",
-    "@testing-library/user-event": "14.5.2",
+    "@testing-library/user-event": "14.6.1",
     "axios-mock-adapter": "2.1.0",
     "bundlewatch": "^0.4.0",
     "eslint-import-resolver-webpack": "^0.13.9",

package-lock.json

@@ -141,32 +141,32 @@ const CoursewareSearch = ({ ...sectionProps }) => {
               </Button>
             </div>
           </div>
-
-          {status === 'loading' ? (
-            <div className="courseware-search__spinner" data-testid="courseware-search-spinner">
-              <Spinner animation="border" variant="light" screenReaderText={formatMessage(messages.loading)} />
-            </div>
-          ) : null}
-          {status === 'error' && (
-            <Alert className="mt-4" variant="danger" data-testid="courseware-search-error">
-              {formatMessage(messages.searchResultsError)}
-            </Alert>
-          )}
-          {status === 'results' ? (
-            <>
-              {total > 0 ? (
-                <div
-                  className="courseware-search__results-summary"
-                  aria-live="polite"
-                  aria-relevant="all"
-                  aria-atomic="true"
-                  data-testid="courseware-search-summary"
-                >{formatMessage(messages.searchResultsLabel, { total, keyword: lastSearchKeyword })}
-                </div>
-              ) : null}
-              <CoursewareSearchResultsFilterContainer />
-            </>
-          ) : null}
+          <div className="courseware-search__results" aria-live="polite" data-testid="courseware-search-results">
+            {status === 'loading' ? (
+              <div className="courseware-search__spinner" data-testid="courseware-search-spinner">
+                <Spinner animation="border" variant="light" screenReaderText={formatMessage(messages.loading)} />
+              </div>
+            ) : null}
+            {status === 'error' && (
+              <Alert className="mt-4" variant="danger" data-testid="courseware-search-error">
+                {formatMessage(messages.searchResultsError)}
+              </Alert>
+            )}
+            {status === 'results' ? (
+              <>
+                {total > 0 ? (
+                  <div
+                    className="courseware-search__results-summary"
+                    aria-relevant="all"
+                    aria-atomic="true"
+                    data-testid="courseware-search-summary"
+                  >{formatMessage(messages.searchResultsLabel, { total, keyword: lastSearchKeyword })}
+                  </div>
+                ) : null}
+                <CoursewareSearchResultsFilterContainer />
+              </>
+            ) : null}
+          </div>
         </div>
       </div>
     </dialog>

package.json

@@ -9,6 +9,7 @@ import {
   screen,
   waitFor,
   fireEvent,
+  within,
 } from '../../setupTest';
 import { CoursewareSearch } from './index';
 import { useElementBoundingBox, useLockScroll, useCoursewareSearchParams } from './hooks';
@@ -243,14 +244,17 @@ describe('CoursewareSearch', () => {
       expect(screen.queryByTestId('courseware-search-summary')).not.toBeInTheDocument();
     });
 
-    it('should show a summary for the results', () => {
+    it('should show a summary for the results within a container with aria-live="polite"', () => {
       mockModels({
         searchKeyword: 'fubar',
         total: 1,
       });
       renderComponent();
 
-      expect(screen.queryByTestId('courseware-search-summary').textContent).toBe('Results for "fubar":');
+      const results = screen.queryByTestId('courseware-search-results');
+
+      expect(results).toHaveAttribute('aria-live', 'polite');
+      expect(within(results).queryByTestId('courseware-search-summary').textContent).toBe('Results for "fubar":');
     });
   });