Update spellcasting tool labels

Paul-Ladyman · Apr 23, 2024 · b10bc4a · b10bc4a
1 parent c9d5e1a
commit b10bc4a
Show file tree

Hide file tree

Showing 10 changed files with 73 additions and 54 deletions.
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "dnd-battle-tracker",
-  "version": "5.102.1",
+  "version": "5.103.0",
   "private": true,
   "dependencies": {
     "@apollo/client": "^3.9.2",

diff --git a/src/components/creature/SpellSlotMeters.js b/src/components/creature/SpellSlotMeters.js
@@ -42,7 +42,7 @@ export default function SpellSlotMeters({ totalSpellSlots, usedSpellSlots, id })
 
   return (
     <div className="avoid-break">
-      <div className="creature-note-list--label">Spell Slots</div>
+      <div className="creature-note-list--label">Spellcasting</div>
       {spellSlotMeters}
     </div>
   );

diff --git a/src/components/creature/toolbar/tool-menus/spellSlots.js b/src/components/creature/toolbar/tool-menus/spellSlots.js
@@ -50,7 +50,7 @@ export function SpellSlotsButton({
       id={`${toolMenuId}-spell-slots`}
     >
       <SpellSlotsIcon />
-      Spell Slots
+      Spellcasting
     </button>
   );
 }
diff --git a/src/components/creature/toolbar/tools/SpellSlotTool.js b/src/components/creature/toolbar/tools/SpellSlotTool.js
@@ -91,7 +91,16 @@ function SpellSlotGrid(props) {
 export default function SpellSlotTool({
   creatureId, toolMenuId, totalSpellSlots, addTotalSpellSlots, usedSpellSlots, addUsedSpellSlots,
 }) {
-  const tabs = ['Used', 'Total'];
+  const tabs = [
+    {
+      label: 'Used slots',
+      id: 'used-slots',
+    },
+    {
+      label: 'Total slots',
+      id: 'total-slots',
+    },
+  ];
   const panels = [
     <SpellSlotGrid
       id="used"

diff --git a/src/components/widgets/TabList.js b/src/components/widgets/TabList.js
@@ -15,9 +15,10 @@ export default function TabList({
     <div className={`tablist-container ${customClasses}`}>
       <div role="tablist" className="tablist" aria-labelledby={labelledBy}>
         {tabs.map((tab, i) => {
+          const { label, id: tabId } = tab;
           const isSelected = i === selected;
-          const key = `${id}-${tab}`;
-          const panelId = `${id}-${tab}-panel`;
+          const key = `${id}-${tabId}`;
+          const panelId = `${id}-${tabId}-panel`;
           return (
             <button
               type="button"
@@ -28,7 +29,7 @@ export default function TabList({
               id={key}
               onClick={() => onClick(i)}
             >
-              {tab}
+              {label}
             </button>
           );
         })}
@@ -37,7 +38,7 @@ export default function TabList({
         panels.map((panel, i) => {
           const panelSelected = i === selected;
           const display = panelSelected ? 'block' : 'none';
-          const tab = tabs[i];
+          const { id: tab } = tabs[i];
           const tabId = `${id}-${tab}`;
           const key = `${id}-${tab}-panel`;
           return (

diff --git a/src/components/widgets/TabList.test.js b/src/components/widgets/TabList.test.js
@@ -7,7 +7,16 @@ import '@testing-library/jest-dom';
 import React from 'react';
 import TabList from './TabList';
 
-const tabs = ['one', 'two'];
+const tabs = [
+  {
+    label: 'one',
+    id: 'one',
+  },
+  {
+    label: 'two',
+    id: 'two',
+  },
+];
 const panels = ['panel one', 'panel two'];
 
 describe('TabList', () => {

diff --git a/test-integration/creature-toolbar/spell-slots-tool.test.js b/test-integration/creature-toolbar/spell-slots-tool.test.js
@@ -5,15 +5,15 @@ describe('Spell Slots tool', () => {
   it('opens the tool menu when the Spell Slots toolbar button is selected', async () => {
     const dmApp = new DmApp();
     await dmApp.createCreatureForm.addCreature('goblin');
-    await dmApp.creatureToolbar.selectTool('goblin', 'Spell Slots');
+    await dmApp.creatureToolbar.selectTool('goblin', 'Spellcasting');
     await dmApp.creatureToolbar.assertToolMenuVisible('goblin');
   });
 
   it('closes the tool menu when the Spell Slots toolbar button is unselected', async () => {
     const dmApp = new DmApp();
     await dmApp.createCreatureForm.addCreature('goblin');
-    await dmApp.creatureToolbar.selectTool('goblin', 'Spell Slots');
-    await dmApp.creatureToolbar.selectTool('goblin', 'Spell Slots');
+    await dmApp.creatureToolbar.selectTool('goblin', 'Spellcasting');
+    await dmApp.creatureToolbar.selectTool('goblin', 'Spellcasting');
     await dmApp.creatureToolbar.assertToolMenuNotVisible('goblin');
   });
 });
@@ -22,7 +22,7 @@ describe('Used spell slots', () => {
   it('sets the number of used spell slots for all levels to 0 by default', async () => {
     const dmApp = new DmApp();
     await dmApp.createCreatureForm.addCreature('goblin');
-    await dmApp.creatureToolbar.selectTool('goblin', 'Spell Slots');
+    await dmApp.creatureToolbar.selectTool('goblin', 'Spellcasting');
     await dmApp.spellSlotsTool.assertUsedSpellSlotValue('goblin', '1st', 0);
     await dmApp.spellSlotsTool.assertUsedSpellSlotValue('goblin', '2nd', 0);
     await dmApp.spellSlotsTool.assertUsedSpellSlotValue('goblin', '3rd', 0);
@@ -37,7 +37,7 @@ describe('Used spell slots', () => {
   it('sets the minimum number of used spell slots for all levels to 0', async () => {
     const dmApp = new DmApp();
     await dmApp.createCreatureForm.addCreature('goblin');
-    await dmApp.creatureToolbar.selectTool('goblin', 'Spell Slots');
+    await dmApp.creatureToolbar.selectTool('goblin', 'Spellcasting');
     await dmApp.spellSlotsTool.assertUsedSpellSlotMin('goblin', '1st', '0');
     await dmApp.spellSlotsTool.assertUsedSpellSlotMin('goblin', '2nd', '0');
     await dmApp.spellSlotsTool.assertUsedSpellSlotMin('goblin', '3rd', '0');
@@ -52,7 +52,7 @@ describe('Used spell slots', () => {
   it('sets the default maximum number of used spell slots for all levels', async () => {
     const dmApp = new DmApp();
     await dmApp.createCreatureForm.addCreature('goblin');
-    await dmApp.creatureToolbar.selectTool('goblin', 'Spell Slots');
+    await dmApp.creatureToolbar.selectTool('goblin', 'Spellcasting');
     await dmApp.spellSlotsTool.assertUsedSpellSlotMax('goblin', '1st', '4');
     await dmApp.spellSlotsTool.assertUsedSpellSlotMax('goblin', '2nd', '3');
     await dmApp.spellSlotsTool.assertUsedSpellSlotMax('goblin', '3rd', '3');
@@ -77,7 +77,7 @@ describe('Used spell slots', () => {
   ])('sets the maximum number of used spell slots for level %p when the total spell slots for the same level is modified', async (level) => {
     const dmApp = new DmApp();
     await dmApp.createCreatureForm.addCreature('goblin');
-    await dmApp.creatureToolbar.selectTool('goblin', 'Spell Slots');
+    await dmApp.creatureToolbar.selectTool('goblin', 'Spellcasting');
 
     await dmApp.spellSlotsTool.openTotalSpellSlots('goblin');
     await dmApp.spellSlotsTool.setTotalSpellSlotValue('goblin', level, '0');
@@ -108,15 +108,15 @@ describe('Used spell slots', () => {
   ])('sets the number of used spell slots for level %p when the total spell slots for the same level is set lower than the current used value', async (level) => {
     const dmApp = new DmApp();
     await dmApp.createCreatureForm.addCreature('goblin');
-    await dmApp.creatureToolbar.selectTool('goblin', 'Spell Slots');
+    await dmApp.creatureToolbar.selectTool('goblin', 'Spellcasting');
 
     await dmApp.spellSlotsTool.setUsedSpellSlotValue('goblin', level, '1');
 
     await dmApp.spellSlotsTool.openTotalSpellSlots('goblin');
     await dmApp.spellSlotsTool.setTotalSpellSlotValue('goblin', level, '0');
 
-    await dmApp.creatureToolbar.selectTool('goblin', 'Spell Slots');
-    await dmApp.creatureToolbar.selectTool('goblin', 'Spell Slots');
+    await dmApp.creatureToolbar.selectTool('goblin', 'Spellcasting');
+    await dmApp.creatureToolbar.selectTool('goblin', 'Spellcasting');
 
     await dmApp.spellSlotsTool.assertUsedSpellSlotValue('goblin', level, 0);
   });
@@ -134,7 +134,7 @@ describe('Used spell slots', () => {
   ])('disables used spell slots for level %p when the total spell slots for the same level is set to 0', async (level) => {
     const dmApp = new DmApp();
     await dmApp.createCreatureForm.addCreature('goblin');
-    await dmApp.creatureToolbar.selectTool('goblin', 'Spell Slots');
+    await dmApp.creatureToolbar.selectTool('goblin', 'Spellcasting');
 
     await dmApp.spellSlotsTool.openTotalSpellSlots('goblin');
     await dmApp.spellSlotsTool.setTotalSpellSlotValue('goblin', level, '0');
@@ -148,7 +148,7 @@ describe('Total spell slots', () => {
   it('does not set the number of total spell slots for all levels by default', async () => {
     const dmApp = new DmApp();
     await dmApp.createCreatureForm.addCreature('goblin');
-    await dmApp.creatureToolbar.selectTool('goblin', 'Spell Slots');
+    await dmApp.creatureToolbar.selectTool('goblin', 'Spellcasting');
     await dmApp.spellSlotsTool.openTotalSpellSlots('goblin');
     await dmApp.spellSlotsTool.assertTotalSpellSlotValue('goblin', '1st', null);
     await dmApp.spellSlotsTool.assertTotalSpellSlotValue('goblin', '2nd', null);
@@ -164,7 +164,7 @@ describe('Total spell slots', () => {
   it('sets the minimum number of total spell slots for all levels to 0', async () => {
     const dmApp = new DmApp();
     await dmApp.createCreatureForm.addCreature('goblin');
-    await dmApp.creatureToolbar.selectTool('goblin', 'Spell Slots');
+    await dmApp.creatureToolbar.selectTool('goblin', 'Spellcasting');
     await dmApp.spellSlotsTool.openTotalSpellSlots('goblin');
     await dmApp.spellSlotsTool.assertTotalSpellSlotMin('goblin', '1st', '0');
     await dmApp.spellSlotsTool.assertTotalSpellSlotMin('goblin', '2nd', '0');
@@ -180,7 +180,7 @@ describe('Total spell slots', () => {
   it('sets the maximum number of total spell slots for all levels', async () => {
     const dmApp = new DmApp();
     await dmApp.createCreatureForm.addCreature('goblin');
-    await dmApp.creatureToolbar.selectTool('goblin', 'Spell Slots');
+    await dmApp.creatureToolbar.selectTool('goblin', 'Spellcasting');
     await dmApp.spellSlotsTool.openTotalSpellSlots('goblin');
     await dmApp.spellSlotsTool.assertTotalSpellSlotMax('goblin', '1st', '4');
     await dmApp.spellSlotsTool.assertTotalSpellSlotMax('goblin', '2nd', '3');
@@ -196,7 +196,7 @@ describe('Total spell slots', () => {
   it('allows the number of total spell slots for all levels to be set and persisted', async () => {
     const dmApp = new DmApp();
     await dmApp.createCreatureForm.addCreature('goblin');
-    await dmApp.creatureToolbar.selectTool('goblin', 'Spell Slots');
+    await dmApp.creatureToolbar.selectTool('goblin', 'Spellcasting');
     await dmApp.spellSlotsTool.openTotalSpellSlots('goblin');
 
     await dmApp.spellSlotsTool.setTotalSpellSlotValue('goblin', '1st', '1');
@@ -209,8 +209,8 @@ describe('Total spell slots', () => {
     await dmApp.spellSlotsTool.setTotalSpellSlotValue('goblin', '8th', '1');
     await dmApp.spellSlotsTool.setTotalSpellSlotValue('goblin', '9th', '1');
 
-    await dmApp.creatureToolbar.selectTool('goblin', 'Spell Slots');
-    await dmApp.creatureToolbar.selectTool('goblin', 'Spell Slots');
+    await dmApp.creatureToolbar.selectTool('goblin', 'Spellcasting');
+    await dmApp.creatureToolbar.selectTool('goblin', 'Spellcasting');
     await dmApp.spellSlotsTool.openTotalSpellSlots('goblin');
 
     await dmApp.spellSlotsTool.assertTotalSpellSlotValue('goblin', '1st', 1);
@@ -227,7 +227,7 @@ describe('Total spell slots', () => {
   it('prefills total spell slots when an SRD monster is created with spell slots', async () => {
     const dmApp = new DmApp();
     await dmApp.createCreatureForm.addSrdCreature('Mage');
-    await dmApp.creatureToolbar.selectTool('Mage', 'Spell Slots');
+    await dmApp.creatureToolbar.selectTool('Mage', 'Spellcasting');
     await dmApp.spellSlotsTool.openTotalSpellSlots('Mage');
     await dmApp.spellSlotsTool.assertTotalSpellSlotValue('Mage', '1st', 4);
     await dmApp.spellSlotsTool.assertTotalSpellSlotValue('Mage', '2nd', 3);

diff --git a/test-integration/creature-toolbar/toolbar.test.js b/test-integration/creature-toolbar/toolbar.test.js
@@ -104,7 +104,7 @@ describe('Creature toolbar navigation', () => {
   it('wraps navigation when navigating forwards with the keyboard', async () => {
     const dmApp = new DmApp();
     await dmApp.createCreatureForm.addCreature('goblin');
-    await dmApp.creatureToolbar.selectTool('goblin', 'Spell Slots');
+    await dmApp.creatureToolbar.selectTool('goblin', 'Spellcasting');
     await dmApp.creatureToolbar.navigate('goblin', 1);
     await dmApp.creatureToolbar.assertButtonFocused('goblin', 'Creature Menu');
   });
@@ -122,7 +122,7 @@ describe('Creature toolbar navigation', () => {
     await dmApp.createCreatureForm.addCreature('goblin');
     await dmApp.creatureToolbar.selectTool('goblin', 'Creature Menu');
     await dmApp.creatureToolbar.navigate('goblin', 1, false);
-    await dmApp.creatureToolbar.assertButtonFocused('goblin', 'Spell Slots');
+    await dmApp.creatureToolbar.assertButtonFocused('goblin', 'Spellcasting');
   });
 
   it('navigates to the first button when the home key is pressed', async () => {
@@ -138,7 +138,7 @@ describe('Creature toolbar navigation', () => {
     await dmApp.createCreatureForm.addCreature('goblin');
     await dmApp.creatureToolbar.selectTool('goblin', 'Initiative');
     await dmApp.creatureToolbar.navigateEnd('goblin');
-    await dmApp.creatureToolbar.assertButtonFocused('goblin', 'Spell Slots');
+    await dmApp.creatureToolbar.assertButtonFocused('goblin', 'Spellcasting');
   });
 
   it("navigates two creature's toolbars independently", async () => {

diff --git a/test-integration/creature/spell-slots.test.js b/test-integration/creature/spell-slots.test.js
@@ -1,11 +1,11 @@
 import DmApp from '../page-object-models/dmApp';
 
-describe('Spell Slots', () => {
+describe('Spellcasting', () => {
   it('does not show the Spell Slots section if the creature has no total or used spell slots', async () => {
     const dmApp = new DmApp();
     await dmApp.createCreatureForm.addCreature('goblin');
     await dmApp.creature.expand('goblin');
-    await dmApp.creature.assertExpandedTextNotVisible('goblin', 'Spell Slots');
+    await dmApp.creature.assertExpandedTextNotVisible('goblin', 'Spellcasting');
   });
 
   it('does not show spell slots if the creature has no total or used spell slots', async () => {
@@ -18,18 +18,18 @@ describe('Spell Slots', () => {
   it('does not show the Spell Slots section if the creature has total spell slots all with values of 0', async () => {
     const dmApp = new DmApp();
     await dmApp.createCreatureForm.addCreature('goblin');
-    await dmApp.creatureToolbar.selectTool('goblin', 'Spell Slots');
+    await dmApp.creatureToolbar.selectTool('goblin', 'Spellcasting');
     await dmApp.spellSlotsTool.openTotalSpellSlots('goblin');
     await dmApp.spellSlotsTool.setTotalSpellSlotValue('goblin', '1st', '0');
     await dmApp.spellSlotsTool.setTotalSpellSlotValue('goblin', '2nd', '0');
     await dmApp.creature.expand('goblin');
-    await dmApp.creature.assertExpandedTextNotVisible('goblin', 'Spell Slots');
+    await dmApp.creature.assertExpandedTextNotVisible('goblin', 'Spellcasting');
   });
 
   it('does not shows spell slots if the creature has total spell slots all with values of 0', async () => {
     const dmApp = new DmApp();
     await dmApp.createCreatureForm.addCreature('goblin');
-    await dmApp.creatureToolbar.selectTool('goblin', 'Spell Slots');
+    await dmApp.creatureToolbar.selectTool('goblin', 'Spellcasting');
     await dmApp.spellSlotsTool.openTotalSpellSlots('goblin');
     await dmApp.spellSlotsTool.setTotalSpellSlotValue('goblin', '1st', '0');
     await dmApp.spellSlotsTool.setTotalSpellSlotValue('goblin', '2nd', '0');
@@ -40,26 +40,26 @@ describe('Spell Slots', () => {
   it('shows the spell slots section if the creature has used spell slots', async () => {
     const dmApp = new DmApp();
     await dmApp.createCreatureForm.addCreature('goblin');
-    await dmApp.creatureToolbar.selectTool('goblin', 'Spell Slots');
+    await dmApp.creatureToolbar.selectTool('goblin', 'Spellcasting');
     await dmApp.spellSlotsTool.setUsedSpellSlotValue('goblin', '1st', '1');
     await dmApp.creature.expand('goblin');
-    await dmApp.creature.assertExpandedTextVisible('goblin', 'Spell Slots');
+    await dmApp.creature.assertExpandedTextVisible('goblin', 'Spellcasting');
   });
 
   it('shows the spell slots section if the creature has total spell slots', async () => {
     const dmApp = new DmApp();
     await dmApp.createCreatureForm.addCreature('goblin');
-    await dmApp.creatureToolbar.selectTool('goblin', 'Spell Slots');
+    await dmApp.creatureToolbar.selectTool('goblin', 'Spellcasting');
     await dmApp.spellSlotsTool.openTotalSpellSlots('goblin');
     await dmApp.spellSlotsTool.setTotalSpellSlotValue('goblin', '1st', '1');
     await dmApp.creature.expand('goblin');
-    await dmApp.creature.assertExpandedTextVisible('goblin', 'Spell Slots');
+    await dmApp.creature.assertExpandedTextVisible('goblin', 'Spellcasting');
   });
 
   it('shows a full spell slot meter per level if the creature has used spell slots', async () => {
     const dmApp = new DmApp();
     await dmApp.createCreatureForm.addCreature('goblin');
-    await dmApp.creatureToolbar.selectTool('goblin', 'Spell Slots');
+    await dmApp.creatureToolbar.selectTool('goblin', 'Spellcasting');
     await dmApp.spellSlotsTool.setUsedSpellSlotValue('goblin', '1st', '1');
     await dmApp.spellSlotsTool.setUsedSpellSlotValue('goblin', '2nd', '1');
     await dmApp.creature.expand('goblin');
@@ -70,7 +70,7 @@ describe('Spell Slots', () => {
   it('shows an empty spell slot meter per level if the creature has total spell slots', async () => {
     const dmApp = new DmApp();
     await dmApp.createCreatureForm.addCreature('goblin');
-    await dmApp.creatureToolbar.selectTool('goblin', 'Spell Slots');
+    await dmApp.creatureToolbar.selectTool('goblin', 'Spellcasting');
     await dmApp.spellSlotsTool.openTotalSpellSlots('goblin');
     await dmApp.spellSlotsTool.setTotalSpellSlotValue('goblin', '1st', '1');
     await dmApp.spellSlotsTool.setTotalSpellSlotValue('goblin', '2nd', '1');
@@ -82,7 +82,7 @@ describe('Spell Slots', () => {
   it('shows a spell slot meter per level if the creature has both used and total spell slots per level', async () => {
     const dmApp = new DmApp();
     await dmApp.createCreatureForm.addCreature('goblin');
-    await dmApp.creatureToolbar.selectTool('goblin', 'Spell Slots');
+    await dmApp.creatureToolbar.selectTool('goblin', 'Spellcasting');
 
     await dmApp.spellSlotsTool.openTotalSpellSlots('goblin');
     await dmApp.spellSlotsTool.setTotalSpellSlotValue('goblin', '1st', '2');
@@ -100,7 +100,7 @@ describe('Spell Slots', () => {
   it('shows a spell slot meter per level if the creature has some levels with only total spell slots', async () => {
     const dmApp = new DmApp();
     await dmApp.createCreatureForm.addCreature('goblin');
-    await dmApp.creatureToolbar.selectTool('goblin', 'Spell Slots');
+    await dmApp.creatureToolbar.selectTool('goblin', 'Spellcasting');
 
     await dmApp.spellSlotsTool.openTotalSpellSlots('goblin');
     await dmApp.spellSlotsTool.setTotalSpellSlotValue('goblin', '1st', '2');