feat!: add design tokens support by arbrandes · Pull Request #759 · openedx/frontend-app-learner-dashboard

arbrandes · 2025-12-08T19:02:52Z

BREAKING CHANGE: Pre-design-tokens theming is no longer supported.

The shell's SCSS must be explicitly loaded by site.config.dev.tsx.

codecov · 2026-01-27T16:05:57Z

Codecov Report

✅ All modified and coverable lines are covered by tests.
⚠️ Please upload report for BASE (frontend-base@117b518). Learn more about missing BASE report.

Additional details and impacted files

@@               Coverage Diff                @@
##             frontend-base     #759   +/-   ##
================================================
  Coverage                 ?   88.79%           
================================================
  Files                    ?      158           
  Lines                    ?     1294           
  Branches                 ?      214           
================================================
  Hits                     ?     1149           
  Misses                   ?      141           
  Partials                 ?        4

☔ View full report in Codecov by Sentry.
📢 Have feedback on the report? Share it here.

🚀 New features to boost your workflow:

❄️ Test Analytics: Detect flaky tests, report on failures, and find test suite problems.
📦 JS Bundle Analysis: Save yourself from yourself by tracking and limiting bundle sizes in JS merges.

arbrandes · 2026-01-27T16:09:57Z

@brian-smith-tcril, thanks to @jesusbalderramawgu's latest commit, this now passes tests. Ready for review!

brian-smith-tcril

Overall this is looking great!

I haven't tested this locally yet, but I have

Compared the changes here to frontend-base...master
Looked at arbrandes#1 for more context

I found some places where the changes didn't match up and it wasn't clear why, and a couple small issues, but nothing major.

brian-smith-tcril · 2026-01-27T19:43:29Z

src/containers/CourseCard/components/CourseCardActions/index.test.jsx

-jest.mock('./ViewCourseButton', () => 'ViewCourseButton');
-jest.mock('./BeginCourseButton', () => 'BeginCourseButton');
-jest.mock('./ResumeButton', () => 'ResumeButton');
+jest.mock('../../../../slots/CourseCardActionSlot', () => jest.fn(() => <div>CourseCardActionSlot</div>));


Suggested change

jest.mock('../../../../slots/CourseCardActionSlot', () => jest.fn(() => <div>CourseCardActionSlot</div>));

jest.mock('@src/slots/CourseCardActionSlot', () => jest.fn(() => <div>CourseCardActionSlot</div>));

brian-smith-tcril · 2026-01-28T14:11:58Z

src/setupTest.jsx

+jest.mock('./data/constants/app', () => ({
+  ...jest.requireActual('./data/constants/app'),
  locationId: 'fake-location-id',
 }));


Is this needed? It looks like it was removed on master in #678

Yeah, it's not needed. I'll remove it.

brian-smith-tcril · 2026-01-28T14:12:27Z

src/setupTest.jsx

+jest.mock('./utils', () => ({
+  ...jest.requireActual('./utils'),
  nullMethod: jest.fn().mockName('utils.nullMethod'),
 }));


Is this needed? It looks like it was removed on master in #678

brian-smith-tcril · 2026-01-28T14:12:37Z

src/setupTest.jsx

Is this needed? It looks like it was removed on master in #678

brian-smith-tcril · 2026-01-28T14:19:03Z

src/utils/StrictDict.test.js

-    it('logs error with target, name, and error stack', () => {
-      // eslint-ignore-next-line no-unused-vars
-      const callBadKey = () => dict.fakeKey;
-      callBadKey();
-      expect(window.console.error.mock.calls).toEqual([
-        [{ target: dict, name: 'fakeKey' }],
-        [Error('invalid property "fakeKey"').stack],
-      ]);
+    it('returns undefined for missing key', () => {
+      // Accessing a missing key should return undefined
+      expect(dict.fakeKey).toBeUndefined();


It looks like this used to test error logging but now it's just testing for undefined in a slightly different way than it is being tested for a couple lines down?

Removal was intentional, but the test is redundant.

brian-smith-tcril · 2026-01-28T14:42:39Z

src/containers/Dashboard/hooks.test.js

-  describe('useInitializeDashboard', () => {
-    it('dispatches initialize thunk action on component load', () => {
-      hooks.useInitializeDashboard();
-      const [cb, prereqs] = React.useEffect.mock.calls[0];
-      expect(prereqs).toEqual([]);
-      expect(initializeApp).not.toHaveBeenCalled();
-      cb();
-      expect(initializeApp).toHaveBeenCalledWith();
-    });
-  });


It looks like @jesusbalderramawgu's comment about removing this (arbrandes#1 (comment)) didn't get a response, so I'm assuming it's intentional.

This is something I left for after we get fully into react-query land, since Jesus had some trouble writing tests that covered the initialization function fully.

brian-smith-tcril · 2026-01-28T15:06:41Z

src/containers/CourseCard/components/CourseCardDetails/hooks.test.js

  describe('useCardDetailsData', () => {
    const providerData = {
-      name: 'my-provider-name',
+      name: 'Unknown',


This feels like it might be hiding an issue with the "forwards provider name if it exists, else formatted unknown provider name" by matching the unknownProviderName

frontend-app-learner-dashboard/src/containers/CourseCard/components/CourseCardDetails/messages.js

Lines 29 to 33 in cfc8297

unknownProviderName: {

id: 'learner-dash.courseCard.CourseCardDetails.unknownProviderName',

description: 'Provider name display when name is unknown',

defaultMessage: 'Unknown',

},

Yeah, we shouldn't be passing 'Uknown' here. I'll look into it.

brian-smith-tcril · 2026-01-28T15:08:13Z

src/containers/CourseCard/components/CourseCardMenu/hooks.js

+import track from '../../../../tracking';
+import { StrictDict } from '../../../../utils';


Can these use @src?

brian-smith-tcril · 2026-01-28T15:10:03Z

src/containers/CourseCard/components/CourseCardMenu/index.test.jsx

-  reduxHooks: { useMasqueradeData: jest.fn(), useCardEnrollmentData: jest.fn() },
+jest.mock('@src/hooks', () => ({
+  reduxHooks: {
+


nit: empty line here

brian-smith-tcril · 2026-01-28T15:15:05Z

src/containers/CourseCard/components/CourseCardMenu/SocialShareMenu.test.jsx

        if (isMasquerading) {
-          it('is disabled', () => {
-            expect(loadToggle().props.disabled).toEqual(true);
+          it('renders when masquerading', () => {
+            const emailSettingsButton = screen.getByRole('button', { name: messages.emailSettings.defaultMessage });
+            expect(emailSettingsButton).toBeInTheDocument();
+            expect(emailSettingsButton).toHaveAttribute('aria-disabled', 'true');
+            expect(emailSettingsButton).toHaveClass('disabled');
          });
        } else {
          it('is enabled', () => {
-            expect(loadToggle().props.disabled).toEqual(false);
+            const emailSettingsButton = screen.getByRole('button', { name: messages.emailSettings.defaultMessage });
+            expect(emailSettingsButton).toBeEnabled();
          });


the naming here feels a bit confusing.

Yeah, we should change the name back to "is disabled".

brian-smith-tcril · 2026-01-29T16:37:02Z

Tested locally with

diff --git a/site.config.dev.tsx b/site.config.dev.tsx
index cf10014..ac25c9a 100644
--- a/site.config.dev.tsx
+++ b/site.config.dev.tsx
@@ -36,6 +36,17 @@ const siteConfig: SiteConfig = {
   ],
 
   accessTokenCookieName: 'edx-jwt-cookie-header-payload',
+
+ theme: {
+    defaults: {
+      light: "light",
+    },
+    variants: {
+      light: {
+        url: "https://cdn.jsdelivr.net/gh/brian-smith-tcril/sample-plugin@brand/brand/dist/light.min.css",
+      },
+    },
+  },
 };
 
 export default siteConfig;

and everything seems to work as expected!

Once the comments are addressed this should be good to merge!

github-project-automation bot added this to Aperture-Maintained Dec 8, 2025

arbrandes mentioned this pull request Dec 8, 2025

feat!: Paragon 23 and External CSS support openedx/frontend-base#111

Merged

arbrandes added 2 commits December 12, 2025 13:04

feat!: add design tokens support

b9d2055

BREAKING CHANGE: Pre-design-tokens theming is no longer supported.

build: Update to Node 24

3cfcd2c

arbrandes force-pushed the frontend-base-design-tokens branch from 4046498 to 3cfcd2c Compare December 12, 2025 16:07

arbrandes and others added 2 commits January 6, 2026 10:05

fix: missing styles

815401b

The shell's SCSS must be explicitly loaded by site.config.dev.tsx.

test: Remove react-unit-test-utils

72e7b20

arbrandes force-pushed the frontend-base-design-tokens branch from 346657a to 72e7b20 Compare January 6, 2026 20:15

arbrandes mentioned this pull request Jan 6, 2026

feat!: design tokens support openedx/frontend-template-site#5

Merged

jesusbalderramawgu mentioned this pull request Jan 8, 2026

[frontend-base] Fix tests #779

Closed

jesusbalderramawgu mentioned this pull request Jan 16, 2026

fix: tests fixed after design tokens support change arbrandes/frontend-app-learner-dashboard#1

Merged

fix: tests fixed after design tokens support change (#1)

57a5c40

arbrandes linked an issue Jan 27, 2026 that may be closed by this pull request

[frontend-base] Design tokens support #785

Closed

arbrandes marked this pull request as ready for review January 27, 2026 16:08

arbrandes requested a review from brian-smith-tcril January 27, 2026 16:08

brian-smith-tcril reviewed Jan 28, 2026

View reviewed changes

test: fix minor issues with tests

62fda92

arbrandes merged commit 4f117df into openedx:frontend-base Feb 6, 2026
6 checks passed

github-project-automation bot moved this to Done in Aperture-Maintained Feb 6, 2026

	jest.mock('../../../../slots/CourseCardActionSlot', () => jest.fn(() => <div>CourseCardActionSlot</div>));
	jest.mock('@src/slots/CourseCardActionSlot', () => jest.fn(() => <div>CourseCardActionSlot</div>));

	unknownProviderName: {
	id: 'learner-dash.courseCard.CourseCardDetails.unknownProviderName',
	description: 'Provider name display when name is unknown',
	defaultMessage: 'Unknown',
	},

		import track from '../../../../tracking';
		import { StrictDict } from '../../../../utils';

Conversation

arbrandes commented Dec 8, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

codecov bot commented Jan 27, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Codecov Report

Uh oh!

arbrandes commented Jan 27, 2026

Uh oh!

brian-smith-tcril left a comment

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

brian-smith-tcril commented Jan 29, 2026

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

4 participants

arbrandes commented Dec 8, 2025 •

edited

Loading

codecov bot commented Jan 27, 2026 •

edited

Loading