diff --git a/modules/web-common b/modules/web-common index 7c98d525..00f99acb 160000 --- a/modules/web-common +++ b/modules/web-common @@ -1 +1 @@ -Subproject commit 7c98d525cbb6a5acfca8f1d1457459923f710863 +Subproject commit 00f99acb4b5e5319a3700114ced2df02db52fd70 diff --git a/src/js/component/tag-selector/tag-list.jsx b/src/js/component/tag-selector/tag-list.jsx index 4b689770..e166b87d 100644 --- a/src/js/component/tag-selector/tag-list.jsx +++ b/src/js/component/tag-selector/tag-list.jsx @@ -58,7 +58,7 @@ const TagDotMenu = memo(({ onDotMenuToggle, onToggleTagManager, hasColor, isDotM = maxColoredTags } + disabled={ !hasColor && tagColorsLength >= maxColoredTags } onClick={ handleAssignColorClick } > Assign Color diff --git a/test/tags.test.jsx b/test/tags.test.jsx index 956acb69..a4635bb5 100644 --- a/test/tags.test.jsx +++ b/test/tags.test.jsx @@ -9,13 +9,14 @@ import { findAllByRole, findByRole, getByRole, screen, queryAllByRole, waitFor } import userEvent from '@testing-library/user-event' import { renderWithProviders } from './utils/render'; -import { JSONtoState } from './utils/state'; +import { getPatchedState, JSONtoState } from './utils/state'; import { MainZotero } from '../src/js/component/main'; import { applyAdditionalJestTweaks, waitForPosition } from './utils/common'; import stateRaw from './fixtures/state/desktop-test-user-item-view.json'; import testUserTagsSuggestions from './fixtures/response/test-user-tags-suggestions.json'; import testUserTagsForItem from './fixtures/response/test-user-tags-for-item.json'; import testUserManageTags from './fixtures/response/test-user-manage-tags.json'; +import { maxColoredTags } from '../src/js/constants/constants'; const state = JSONtoState(stateRaw); @@ -234,4 +235,33 @@ describe('Tags', () => { await user.type(screen.getByRole('searchbox', { name: 'Filter Tags' }), 'read'); expect(await findAllByRole(list, 'listitem')).toHaveLength(1); // eslint-disable-line jest-dom/prefer-in-document }); + + test('Assign color should be disabled if at max tag colors', async () => { + renderWithProviders(, + { preloadedState: getPatchedState( + state, + 'libraries.u1.tagColors', { value: Array(maxColoredTags).fill(0).map((n, i) => ({ tag: `Tag ${i}`, color: `#00000${i}` })) } + )} + ); + await waitForPosition(); + const user = userEvent.setup(); + + server.use( + http.get('https://api.zotero.org/users/1/tags', () => { + return HttpResponse.json(testUserManageTags, { + headers: { 'Total-Results': '8' } + }); + }), + ); + + await user.click(screen.getByRole('button', { name: 'Tag Selector Options' })); + const manageTagsOpt = await screen.findByRole('menuitem', { name: 'Manage Tags' }); + await user.click(manageTagsOpt); + const manageTagsModal = await screen.findByRole('dialog', { name: 'Manage Tags' }); + const list = await findByRole(manageTagsModal, 'list', { name: 'Tags' }); + const tagItem = await findByRole(list, 'listitem', { name: 'pathfinding' }); + const moreButton = getByRole(tagItem, 'button', { name: 'More' }); + await user.click(moreButton); + expect(await screen.findByRole('menuitem', { name: 'Assign Color' })).toBeDisabled(); + }); });