@instructure/outcomes-ui 4.1.1 → 4.1.3

package/es/translated/es_ES/components/Gradebook/GradebookApp.stories.js

@@ -1,53 +1,10 @@
-import _regenerator from "@babel/runtime/helpers/esm/regenerator";
-import _asyncToGenerator from "@babel/runtime/helpers/esm/asyncToGenerator";
-import React from 'react';
 import { GradebookApp } from "./GradebookApp.js";
-import { action } from '@storybook/addon-actions';
-
-// Example minimal settings type
-
 var meta = {
   title: 'Gradebook/GradebookApp',
   component: GradebookApp
 };
 export default meta;
-var defaultConfig = {
-  components: {
-    StudentPopover: function StudentPopover() {
-      return /*#__PURE__*/React.createElement("div", null, "Student Popover");
-    },
-    SettingsTrayContent: function SettingsTrayContent() {
-      return /*#__PURE__*/React.createElement("div", null, "Settings Content");
-    }
-  }
-};
-var defaultSettings = {
-  settings: {
-    option1: true
-  },
-  onSave: function () {
-    var _onSave = _asyncToGenerator(/*#__PURE__*/_regenerator().m(function _callee(settings) {
-      return _regenerator().w(function (_context) {
-        while (1) switch (_context.n) {
-          case 0:
-            action('onSave')(settings);
-            _context.n = 1;
-            return new Promise(function (resolve) {
-              return setTimeout(resolve, 1000);
-            });
-          case 1:
-            return _context.a(2, {
-              success: true
-            });
-        }
-      }, _callee);
-    }));
-    function onSave(_x) {
-      return _onSave.apply(this, arguments);
-    }
-    return onSave;
-  }()
-};
+var defaultConfig = {};
 var resourceOverrides = {
   en: {
     'align_new_outcomes_2a2d3d48': 'Align new outcomes',
@@ -97,7 +54,6 @@ var resourceOverrides = {
 export var Default = {
   args: {
     config: defaultConfig,
-    settings: defaultSettings,
     translations: {
       language: 'en',
       resourceOverrides: resourceOverrides,

package/es/translated/es_ES/components/Gradebook/__tests__/index.test.js

@@ -45,24 +45,7 @@ import { GradebookApp } from "../GradebookApp.js";
 import * as i18nModule from "../../../i18n/i18n.js";
 var mockSetupI18n = i18nModule.setupI18n;
 describe('GradebookApp', function () {
-  var mockConfig = {
-    components: {
-      StudentPopover: function StudentPopover() {
-        return /*#__PURE__*/React.createElement("div", null, "Student Popover");
-      },
-      SettingsTrayContent: function SettingsTrayContent() {
-        return /*#__PURE__*/React.createElement("div", null, "Settings");
-      }
-    }
-  };
-  var mockSettingsData = {};
-  var mockOnSave = jest.fn().mockResolvedValue({
-    success: true
-  });
-  var mockSettings = {
-    settings: mockSettingsData,
-    onSave: mockOnSave
-  };
+  var mockConfig = {};
   beforeEach(function () {
     jest.clearAllMocks();
   });
@@ -72,8 +55,7 @@ describe('GradebookApp', function () {
         while (1) switch (_context.n) {
           case 0:
             render(/*#__PURE__*/React.createElement(GradebookApp, {
-              config: mockConfig,
-              settings: mockSettings
+              config: mockConfig
             }));
 
             // Should call setupI18n with default language
@@ -92,7 +74,6 @@ describe('GradebookApp', function () {
     it('renders with i18n disabled', function () {
       render(/*#__PURE__*/React.createElement(GradebookApp, {
         config: mockConfig,
-        settings: mockSettings,
         translations: {
           i18nEnabled: false
         }
@@ -110,7 +91,6 @@ describe('GradebookApp', function () {
           case 0:
             render(/*#__PURE__*/React.createElement(GradebookApp, {
               config: mockConfig,
-              settings: mockSettings,
               translations: {
                 language: 'es',
                 i18nEnabled: true
@@ -138,7 +118,6 @@ describe('GradebookApp', function () {
             };
             render(/*#__PURE__*/React.createElement(GradebookApp, {
               config: mockConfig,
-              settings: mockSettings,
               translations: {
                 language: 'fr',
                 i18nEnabled: true,
@@ -163,7 +142,6 @@ describe('GradebookApp', function () {
           case 0:
             render(/*#__PURE__*/React.createElement(GradebookApp, {
               config: mockConfig,
-              settings: mockSettings,
               translations: {
                 i18nEnabled: false
               }
@@ -180,7 +158,6 @@ describe('GradebookApp', function () {
     it('renders fallback content when no children provided', function () {
       render(/*#__PURE__*/React.createElement(GradebookApp, {
         config: mockConfig,
-        settings: mockSettings,
         translations: {
           i18nEnabled: false
         }
@@ -192,7 +169,6 @@ describe('GradebookApp', function () {
     it('passes gradebookConfig to GradebookConfigProvider', function () {
       render(/*#__PURE__*/React.createElement(GradebookApp, {
         config: mockConfig,
-        settings: mockSettings,
         translations: {
           i18nEnabled: false
         }
@@ -201,15 +177,10 @@ describe('GradebookApp', function () {
       expect(provider).toBeInTheDocument();
       var configData = provider.getAttribute('data-config');
       expect(configData).toBeTruthy();
-      var parsedConfig = JSON.parse(configData);
-      expect(parsedConfig).toMatchObject({
-        components: expect.any(Object)
-      });
     });
     it('wraps children with GradebookConfigProvider', function () {
       render(/*#__PURE__*/React.createElement(GradebookApp, {
         config: mockConfig,
-        settings: mockSettings,
         translations: {
           i18nEnabled: false
         }
@@ -228,7 +199,6 @@ describe('GradebookApp', function () {
           case 0:
             render(/*#__PURE__*/React.createElement(GradebookApp, {
               config: mockConfig,
-              settings: mockSettings,
               translations: {
                 language: 'en',
                 i18nEnabled: true
@@ -256,7 +226,6 @@ describe('GradebookApp', function () {
           case 0:
             _render = render(/*#__PURE__*/React.createElement(GradebookApp, {
               config: mockConfig,
-              settings: mockSettings,
               translations: {
                 language: 'en',
                 i18nEnabled: true
@@ -266,7 +235,6 @@ describe('GradebookApp', function () {
             expect(mockSetupI18n).toHaveBeenCalledTimes(1);
             rerender(/*#__PURE__*/React.createElement(GradebookApp, {
               config: mockConfig,
-              settings: mockSettings,
               translations: {
                 language: 'es',
                 i18nEnabled: true
@@ -299,7 +267,6 @@ describe('GradebookApp', function () {
             };
             _render2 = render(/*#__PURE__*/React.createElement(GradebookApp, {
               config: mockConfig,
-              settings: mockSettings,
               translations: {
                 language: 'en',
                 i18nEnabled: true,
@@ -309,7 +276,6 @@ describe('GradebookApp', function () {
             expect(mockSetupI18n).toHaveBeenCalledWith('en', overrides1);
             rerender(/*#__PURE__*/React.createElement(GradebookApp, {
               config: mockConfig,
-              settings: mockSettings,
               translations: {
                 language: 'en',
                 i18nEnabled: true,
@@ -329,7 +295,6 @@ describe('GradebookApp', function () {
     it('does not re-run setupI18n when i18nEnabled changes to false', function () {
       var _render3 = render(/*#__PURE__*/React.createElement(GradebookApp, {
           config: mockConfig,
-          settings: mockSettings,
           translations: {
             language: 'en',
             i18nEnabled: true
@@ -339,7 +304,6 @@ describe('GradebookApp', function () {
       expect(mockSetupI18n).toHaveBeenCalledTimes(1);
       rerender(/*#__PURE__*/React.createElement(GradebookApp, {
         config: mockConfig,
-        settings: mockSettings,
         translations: {
           i18nEnabled: false
         }
@@ -350,29 +314,10 @@ describe('GradebookApp', function () {
     });
   });
   describe('Type Safety', function () {
-    it('accepts gradebookConfig with custom settings type', function () {
-      var customConfig = {
-        components: {
-          StudentPopover: function StudentPopover() {
-            return /*#__PURE__*/React.createElement("div", null, "Popover");
-          },
-          SettingsTrayContent: function SettingsTrayContent() {
-            return /*#__PURE__*/React.createElement("div", null, "Settings");
-          }
-        }
-      };
-      var customSettingsData = {
-        customOption: true
-      };
-      var customOnSave = jest.fn().mockResolvedValue({
-        success: true
-      });
+    it('accepts gradebookConfig', function () {
+      var customConfig = {};
       render(/*#__PURE__*/React.createElement(GradebookApp, {
         config: customConfig,
-        settings: {
-          settings: customSettingsData,
-          onSave: customOnSave
-        },
         translations: {
           i18nEnabled: false
         }

package/es/translated/es_ES/components/Gradebook/context/GradebookAppContext/GradebookAppProvider.js

@@ -11,6 +11,7 @@ export var GradebookAppProvider = function GradebookAppProvider(_ref) {
     settings = _useState2[0],
     setSettings = _useState2[1];
   var value = {
+    // If the settings will be implemented on the app level, we can remove this (MC won't use it)
     settings: {
       settings: settings,
       setSettings: setSettings,

package/es/translated/es_ES/components/Gradebook/context/GradebookConfigContext/GradebookConfigContext.js

@@ -1,3 +1,2 @@
 import { createContext } from 'react';
-// eslint-disable-next-line @typescript-eslint/no-explicit-any
 export var GradebookConfigContext = /*#__PURE__*/createContext(null);

package/es/translated/es_ES/components/Gradebook/context/GradebookConfigContext/__tests__/GradebookConfigContext.test.js

@@ -2,53 +2,50 @@ import React from 'react';
 import { expect } from '@jest/globals';
 import '@testing-library/jest-dom';
 import { render, screen } from '@testing-library/react';
-import { GradebookConfigProvider, useGradebookConfig } from "../../../../../../lib/index.js"; // Test component that uses the config hook
+import { GradebookConfigProvider, useGradebookConfig } from "../../../../../../lib/index.js";
+// Test component that uses the config hook
 var TestConfigConsumer = function TestConfigConsumer() {
   var config = useGradebookConfig();
   return /*#__PURE__*/React.createElement("div", {
     "data-testid": "config-consumer"
-  }, config.components.StudentPopover ? 'has-student-popover' : 'no-student-popover');
+  }, config.masteryLevelConfig ? 'has-mastery-config' : 'no-mastery-config');
 };
 
-// Test component that uses the components
-var TestComponentsConsumer = function TestComponentsConsumer() {
+// Test component that uses the mastery level config
+var TestMasteryLevelConsumer = function TestMasteryLevelConsumer() {
+  var _config$masteryLevelC, _config$masteryLevelC2;
   var config = useGradebookConfig();
-  var components = config.components;
-  var componentCount = Object.keys(components).length;
+  var availableLevels = ((_config$masteryLevelC = config.masteryLevelConfig) === null || _config$masteryLevelC === void 0 ? void 0 : (_config$masteryLevelC2 = _config$masteryLevelC.availableLevels) === null || _config$masteryLevelC2 === void 0 ? void 0 : _config$masteryLevelC2.length) || 0;
   return /*#__PURE__*/React.createElement("div", {
-    "data-testid": "component-count"
-  }, componentCount);
+    "data-testid": "mastery-level-count"
+  }, availableLevels);
 };
-var DEFAULT_CONFIG = {
-  components: {
-    StudentPopover: function StudentPopover() {
-      return /*#__PURE__*/React.createElement("div", null, "Mock StudentPopover");
-    },
-    SettingsTrayContent: function SettingsTrayContent() {
-      return /*#__PURE__*/React.createElement("div", null, "Settings Content");
-    }
+var DEFAULT_CONFIG = {};
+var CONFIG_WITH_MASTERY = {
+  masteryLevelConfig: {
+    availableLevels: ['exceeds_mastery', 'mastery', 'near_mastery']
   }
 };
 describe('GradebookConfigContext', function () {
   describe('GradebookConfigProvider', function () {
     it('provides config to children', function () {
       render(/*#__PURE__*/React.createElement(GradebookConfigProvider, {
-        config: DEFAULT_CONFIG
+        config: CONFIG_WITH_MASTERY
       }, /*#__PURE__*/React.createElement(TestConfigConsumer, null)));
-      expect(screen.getByTestId('config-consumer')).toHaveTextContent('has-student-popover');
+      expect(screen.getByTestId('config-consumer')).toHaveTextContent('has-mastery-config');
     });
-    it('requires components field', function () {
+    it('allows empty config', function () {
       render(/*#__PURE__*/React.createElement(GradebookConfigProvider, {
         config: DEFAULT_CONFIG
       }, /*#__PURE__*/React.createElement(TestConfigConsumer, null)));
       expect(screen.getByTestId('config-consumer')).toBeInTheDocument();
-      expect(screen.getByTestId('config-consumer')).toHaveTextContent('has-student-popover');
+      expect(screen.getByTestId('config-consumer')).toHaveTextContent('no-mastery-config');
     });
-    it('requires StudentPopover in components', function () {
+    it('provides mastery level config when specified', function () {
       render(/*#__PURE__*/React.createElement(GradebookConfigProvider, {
-        config: DEFAULT_CONFIG
-      }, /*#__PURE__*/React.createElement(TestComponentsConsumer, null)));
-      expect(screen.getByTestId('component-count')).toHaveTextContent('2');
+        config: CONFIG_WITH_MASTERY
+      }, /*#__PURE__*/React.createElement(TestMasteryLevelConsumer, null)));
+      expect(screen.getByTestId('mastery-level-count')).toHaveTextContent('3');
     });
   });
   describe('useGradebookConfig', function () {
@@ -62,24 +59,24 @@ describe('GradebookConfigContext', function () {
     });
     it('returns config when used inside provider', function () {
       render(/*#__PURE__*/React.createElement(GradebookConfigProvider, {
-        config: DEFAULT_CONFIG
+        config: CONFIG_WITH_MASTERY
       }, /*#__PURE__*/React.createElement(TestConfigConsumer, null)));
-      expect(screen.getByTestId('config-consumer')).toHaveTextContent('has-student-popover');
+      expect(screen.getByTestId('config-consumer')).toHaveTextContent('has-mastery-config');
     });
   });
-  describe('components', function () {
+  describe('masteryLevelConfig', function () {
     it('throws error when used outside provider', function () {
       var consoleSpy = jest.spyOn(console, 'error').mockImplementation(function () {});
       expect(function () {
-        render(/*#__PURE__*/React.createElement(TestComponentsConsumer, null));
+        render(/*#__PURE__*/React.createElement(TestMasteryLevelConsumer, null));
       }).toThrow('useGradebookConfig must be used within GradebookConfigProvider');
       consoleSpy.mockRestore();
     });
-    it('returns components when provided', function () {
+    it('returns mastery level config when provided', function () {
       render(/*#__PURE__*/React.createElement(GradebookConfigProvider, {
-        config: DEFAULT_CONFIG
-      }, /*#__PURE__*/React.createElement(TestComponentsConsumer, null)));
-      expect(screen.getByTestId('component-count')).toHaveTextContent('2');
+        config: CONFIG_WITH_MASTERY
+      }, /*#__PURE__*/React.createElement(TestMasteryLevelConsumer, null)));
+      expect(screen.getByTestId('mastery-level-count')).toHaveTextContent('3');
     });
   });
 });

package/es/translated/es_ES/components/Gradebook/gradebook-table/ColumnHeader/__tests__/index.test.js

@@ -168,4 +168,14 @@ describe('ColumnHeader', function () {
     render(/*#__PURE__*/React.createElement(ColumnHeader, defaultProps));
     expect(screen.getByTestId('column-header')).toBeInTheDocument();
   });
+  it('renders the optionsMenu prop when provided', function () {
+    var customMenu = /*#__PURE__*/React.createElement("button", {
+      "data-testid": "custom-options-menu"
+    }, "Custom Menu");
+    render(/*#__PURE__*/React.createElement(ColumnHeader, Object.assign({}, defaultProps, {
+      optionsMenu: customMenu
+    })));
+    expect(screen.getByTestId('custom-options-menu')).toBeInTheDocument();
+    expect(screen.getByText('Custom Menu')).toBeInTheDocument();
+  });
 });

package/es/translated/es_ES/components/Gradebook/gradebook-table/ColumnHeader/index.js

@@ -11,7 +11,9 @@ import TruncateWithTooltip from "../../shared/TruncateWithTooltip/index.js";
 import { getInverseColor } from "../../../../util/gradebook/colors.js";
 export var ColumnHeader = function ColumnHeader(_ref) {
   var title = _ref.title,
+    titleId = _ref.titleId,
     optionsMenuTriggerLabel = _ref.optionsMenuTriggerLabel,
+    optionsMenu = _ref.optionsMenu,
     _ref$optionsMenuItems = _ref.optionsMenuItems,
     optionsMenuItems = _ref$optionsMenuItems === void 0 ? [] : _ref$optionsMenuItems,
     icon = _ref.icon,
@@ -28,7 +30,7 @@ export var ColumnHeader = function ColumnHeader(_ref) {
     alignItems: "center",
     justifyItems: "space-between",
     height: CELL_HEIGHT,
-    padding: "none none none x-small"
+    padding: "none x-small none x-small"
   }, /*#__PURE__*/React.createElement(Flex.Item, {
     shouldGrow: true,
     shouldShrink: true,
@@ -43,7 +45,8 @@ export var ColumnHeader = function ColumnHeader(_ref) {
     overflowX: "hidden",
     padding: "0 xx-small 0 0"
   }, /*#__PURE__*/React.createElement(AccessibleContent, {
-    alt: title
+    alt: title,
+    id: titleId
   }, /*#__PURE__*/React.createElement(Text, {
     weight: "bold"
   }, /*#__PURE__*/React.createElement(TruncateWithTooltip, null, title)))))), optionsMenuItems.length > 0 && /*#__PURE__*/React.createElement(Menu, {
@@ -55,5 +58,5 @@ export var ColumnHeader = function ColumnHeader(_ref) {
       screenReaderLabel: optionsMenuTriggerLabel,
       color: getInverseColor(background)
     }, /*#__PURE__*/React.createElement(IconMoreLine, null))
-  }, optionsMenuItems)));
+  }, optionsMenuItems), optionsMenu));
 };

package/es/translated/es_ES/components/Gradebook/gradebook-table/ColumnHeader/index.stories.js

@@ -25,6 +25,12 @@ export var LongTitle = {
     title: 'This is a long title that should be truncated with an ellipsis when it exceeds the available space'
   }
 };
+export var WithTitleId = {
+  args: {
+    title: 'Test Title',
+    titleId: 'test-title-id'
+  }
+};
 export var WithMenu = {
   args: {
     title: 'Test Title',

package/es/translated/es_ES/components/Gradebook/gradebook-table/ScoreCellContent/ScoreWithLabel.js

@@ -6,6 +6,7 @@ import { MasteryLevelIcon } from "../../icons/MasteryLevelIcon/index.js";
 var Label = function Label(_ref) {
   var scoreDisplayFormat = _ref.scoreDisplayFormat,
     score = _ref.score,
+    totalScore = _ref.totalScore,
     text = _ref.text;
   if (scoreDisplayFormat === ScoreDisplayFormat.ICON_AND_LABEL) {
     return /*#__PURE__*/React.createElement(Text, {
@@ -17,22 +18,34 @@ var Label = function Label(_ref) {
       size: "legend"
     }, score);
   }
+  var isPercentFormat = scoreDisplayFormat === ScoreDisplayFormat.PERCENT;
+  var isPercentAndRatioFormat = scoreDisplayFormat === ScoreDisplayFormat.PERCENT_AND_RATIO;
+  if (isPercentFormat || isPercentAndRatioFormat) {
+    var percent = score != null && totalScore != null && totalScore !== 0 ? "".concat(Math.round(score / totalScore * 100), "%") : null;
+    return percent != null ? /*#__PURE__*/React.createElement(Flex, {
+      gap: "x-small"
+    }, /*#__PURE__*/React.createElement(Text, {
+      weight: "bold"
+    }, percent), isPercentAndRatioFormat && /*#__PURE__*/React.createElement(Text, null, "(".concat(score, "/").concat(totalScore, ")"))) : null;
+  }
 };
 export var ScoreWithLabel = function ScoreWithLabel(_ref2) {
   var masteryLevel = _ref2.masteryLevel,
     score = _ref2.score,
+    totalScore = _ref2.totalScore,
     label = _ref2.label,
     _ref2$scoreDisplayFor = _ref2.scoreDisplayFormat,
     scoreDisplayFormat = _ref2$scoreDisplayFor === void 0 ? ScoreDisplayFormat.ICON_ONLY : _ref2$scoreDisplayFor;
+  var isPercentFormat = [ScoreDisplayFormat.PERCENT, ScoreDisplayFormat.PERCENT_AND_RATIO].includes(scoreDisplayFormat);
   var justifyItems = scoreDisplayFormat === ScoreDisplayFormat.ICON_ONLY ? 'center' : 'start';
   return /*#__PURE__*/React.createElement(Flex, {
     width: "100%",
     height: "100%",
     alignItems: "center",
     gap: "small",
-    padding: "none medium-small",
+    padding: "none small",
     justifyItems: justifyItems
-  }, /*#__PURE__*/React.createElement(MasteryLevelIcon, {
+  }, !isPercentFormat && /*#__PURE__*/React.createElement(MasteryLevelIcon, {
     masteryLevel: masteryLevel,
     width: "1.5rem",
     height: "1.5rem",
@@ -41,6 +54,7 @@ export var ScoreWithLabel = function ScoreWithLabel(_ref2) {
   }), /*#__PURE__*/React.createElement(Label, {
     scoreDisplayFormat: scoreDisplayFormat,
     score: score,
+    totalScore: totalScore,
     text: label
   }));
 };

package/es/translated/es_ES/components/Gradebook/gradebook-table/ScoreCellContent/__tests__/ScoreWithLabel.test.js

@@ -38,6 +38,47 @@ describe('ScoreWithLabel', function () {
       expect(pointsText).toBeInTheDocument();
       expect(pointsText.closest('[class*="screenReaderContent"]')).not.toBeInTheDocument();
     });
+    it('shows percent with PERCENT format', function () {
+      render(/*#__PURE__*/React.createElement(ScoreWithLabel, Object.assign({}, defaultProps, {
+        score: 3,
+        totalScore: 4,
+        scoreDisplayFormat: ScoreDisplayFormat.PERCENT
+      })));
+      expect(screen.getByText('75%')).toBeInTheDocument();
+    });
+    it('does not show mastery icon with PERCENT format', function () {
+      var _render = render(/*#__PURE__*/React.createElement(ScoreWithLabel, Object.assign({}, defaultProps, {
+          score: 3,
+          totalScore: 4,
+          scoreDisplayFormat: ScoreDisplayFormat.PERCENT
+        }))),
+        container = _render.container;
+      expect(container.querySelector('svg')).not.toBeInTheDocument();
+    });
+    it('shows percent and ratio with PERCENT_AND_RATIO format', function () {
+      render(/*#__PURE__*/React.createElement(ScoreWithLabel, Object.assign({}, defaultProps, {
+        score: 3,
+        totalScore: 4,
+        scoreDisplayFormat: ScoreDisplayFormat.PERCENT_AND_RATIO
+      })));
+      expect(screen.getByText('75%')).toBeInTheDocument();
+      expect(screen.getByText('(3/4)')).toBeInTheDocument();
+    });
+    it('does not show mastery icon with PERCENT_AND_RATIO format', function () {
+      var _render2 = render(/*#__PURE__*/React.createElement(ScoreWithLabel, Object.assign({}, defaultProps, {
+          score: 3,
+          totalScore: 4,
+          scoreDisplayFormat: ScoreDisplayFormat.PERCENT_AND_RATIO
+        }))),
+        container = _render2.container;
+      expect(container.querySelector('svg')).not.toBeInTheDocument();
+    });
+    it('shows null when totalScore is missing with PERCENT format', function () {
+      render(/*#__PURE__*/React.createElement(ScoreWithLabel, Object.assign({}, defaultProps, {
+        scoreDisplayFormat: ScoreDisplayFormat.PERCENT
+      })));
+      expect(screen.queryByText(/%/)).not.toBeInTheDocument();
+    });
   });
   it('uses default ICON_ONLY format when not specified', function () {
     render(/*#__PURE__*/React.createElement(ScoreWithLabel, defaultProps));

package/es/translated/es_ES/components/Gradebook/gradebook-table/ScoreCellContent/__tests__/index.test.js

@@ -21,23 +21,31 @@ describe('ScoreCellContent', function () {
       render(/*#__PURE__*/React.createElement(ScoreCellContent, Object.assign({}, defaultProps, {
         onAction: jest.fn()
       })));
-      expect(screen.queryByTestId('score-cell-action-button')).not.toBeInTheDocument();
+      expect(screen.getByTestId('score-cell-action-wrapper')).toHaveStyle({
+        opacity: '0'
+      });
     });
     it('shows action button when focus is true', function () {
       render(/*#__PURE__*/React.createElement(ScoreCellContent, Object.assign({}, defaultProps, {
         onAction: jest.fn(),
         focus: true
       })));
-      expect(screen.getByTestId('score-cell-action-button')).toBeInTheDocument();
+      expect(screen.getByTestId('score-cell-action-wrapper')).toHaveStyle({
+        opacity: '1'
+      });
     });
     it('shows action button on hover (internal state)', function () {
       render(/*#__PURE__*/React.createElement(ScoreCellContent, Object.assign({}, defaultProps, {
         onAction: jest.fn()
       })));
-      expect(screen.queryByTestId('score-cell-action-button')).not.toBeInTheDocument();
+      expect(screen.getByTestId('score-cell-action-wrapper')).toHaveStyle({
+        opacity: '0'
+      });
       var viewElement = screen.getByTestId('score-cell-content');
       fireEvent.mouseEnter(viewElement);
-      expect(screen.getByTestId('score-cell-action-button')).toBeInTheDocument();
+      expect(screen.getByTestId('score-cell-action-wrapper')).toHaveStyle({
+        opacity: '1'
+      });
     });
     it('hides action button on mouse leave (internal state)', function () {
       render(/*#__PURE__*/React.createElement(ScoreCellContent, Object.assign({}, defaultProps, {
@@ -45,16 +53,22 @@ describe('ScoreCellContent', function () {
       })));
       var viewElement = screen.getByTestId('score-cell-content');
       fireEvent.mouseEnter(viewElement);
-      expect(screen.getByTestId('score-cell-action-button')).toBeInTheDocument();
+      expect(screen.getByTestId('score-cell-action-wrapper')).toHaveStyle({
+        opacity: '1'
+      });
       fireEvent.mouseLeave(viewElement);
-      expect(screen.queryByTestId('score-cell-action-button')).not.toBeInTheDocument();
+      expect(screen.getByTestId('score-cell-action-wrapper')).toHaveStyle({
+        opacity: '0'
+      });
     });
     it('shows action button when hover prop is true (controlled)', function () {
       render(/*#__PURE__*/React.createElement(ScoreCellContent, Object.assign({}, defaultProps, {
         onAction: jest.fn(),
         hover: true
       })));
-      expect(screen.getByTestId('score-cell-action-button')).toBeInTheDocument();
+      expect(screen.getByTestId('score-cell-action-wrapper')).toHaveStyle({
+        opacity: '1'
+      });
     });
     it('does not update internal hover state when hover prop is controlled', function () {
       render(/*#__PURE__*/React.createElement(ScoreCellContent, Object.assign({}, defaultProps, {
@@ -65,7 +79,9 @@ describe('ScoreCellContent', function () {
       fireEvent.mouseEnter(viewElement);
 
       // Button should not appear because hover prop is controlled and set to false
-      expect(screen.queryByTestId('score-cell-action-button')).not.toBeInTheDocument();
+      expect(screen.getByTestId('score-cell-action-wrapper')).toHaveStyle({
+        opacity: '0'
+      });
     });
   });
   describe('action button interaction', function () {
@@ -79,12 +95,12 @@ describe('ScoreCellContent', function () {
       fireEvent.click(button);
       expect(onAction).toHaveBeenCalledTimes(1);
     });
-    it('disables action button when onAction is undefined', function () {
+    it('does not show action button when onAction is undefined', function () {
       render(/*#__PURE__*/React.createElement(ScoreCellContent, Object.assign({}, defaultProps, {
         onAction: void 0,
         focus: true
       })));
-      expect(screen.queryByTestId('score-cell-action-button')).toHaveAttribute('disabled');
+      expect(screen.queryByTestId('score-cell-action-wrapper')).not.toBeInTheDocument();
     });
   });
   describe('scoreDisplayFormat', function () {
@@ -107,5 +123,22 @@ describe('ScoreCellContent', function () {
       })));
       expect(screen.getByText('3')).toBeInTheDocument();
     });
+    it('renders percent with PERCENT format', function () {
+      render(/*#__PURE__*/React.createElement(ScoreCellContent, Object.assign({}, defaultProps, {
+        score: 3,
+        totalScore: 4,
+        scoreDisplayFormat: ScoreDisplayFormat.PERCENT
+      })));
+      expect(screen.getByText('75%')).toBeInTheDocument();
+    });
+    it('renders percent and ratio with PERCENT_AND_RATIO format', function () {
+      render(/*#__PURE__*/React.createElement(ScoreCellContent, Object.assign({}, defaultProps, {
+        score: 3,
+        totalScore: 4,
+        scoreDisplayFormat: ScoreDisplayFormat.PERCENT_AND_RATIO
+      })));
+      expect(screen.getByText('75%')).toBeInTheDocument();
+      expect(screen.getByText('(3/4)')).toBeInTheDocument();
+    });
   });
 });