From 1772450945712c8a12ae0ab9d6f548bdcb1ee2b8 Mon Sep 17 00:00:00 2001 From: Fayaz Ahmed Date: Tue, 27 Aug 2024 12:11:43 +0530 Subject: [PATCH] Review fixes --- .../helpcenter/components/ArticleItem.vue | 6 +- .../components/HelpCenterLayout.vue | 7 +- .../composables/specs/usePortal.spec.js | 78 +++++++++++-------- .../helpcenter/composables/usePortal.js | 57 +++++++------- 4 files changed, 82 insertions(+), 66 deletions(-) diff --git a/app/javascript/dashboard/routes/dashboard/helpcenter/components/ArticleItem.vue b/app/javascript/dashboard/routes/dashboard/helpcenter/components/ArticleItem.vue index e5770a398..73378299e 100644 --- a/app/javascript/dashboard/routes/dashboard/helpcenter/components/ArticleItem.vue +++ b/app/javascript/dashboard/routes/dashboard/helpcenter/components/ArticleItem.vue @@ -3,6 +3,7 @@ import { dynamicTime } from 'shared/helpers/timeHelper'; import { usePortal } from '../composables/usePortal'; import { frontendURL } from 'dashboard/helper/URLHelper'; import Thumbnail from 'dashboard/components/widgets/Thumbnail.vue'; +import { useAccount } from 'dashboard/composables/useAccount'; export default { components: { @@ -44,8 +45,9 @@ export default { }, }, setup() { - const { accountId, portalSlug, locale, localeName } = usePortal(); - return { accountId, portalSlug, locale, localeName }; + const { accountId } = useAccount(); + const { articleUrl, portalSlug, locale, localeName } = usePortal(); + return { accountId, portalSlug, locale, localeName, articleUrl }; }, computed: { lastUpdatedAt() { diff --git a/app/javascript/dashboard/routes/dashboard/helpcenter/components/HelpCenterLayout.vue b/app/javascript/dashboard/routes/dashboard/helpcenter/components/HelpCenterLayout.vue index f8a875014..a17698140 100644 --- a/app/javascript/dashboard/routes/dashboard/helpcenter/components/HelpCenterLayout.vue +++ b/app/javascript/dashboard/routes/dashboard/helpcenter/components/HelpCenterLayout.vue @@ -10,6 +10,7 @@ import WootKeyShortcutModal from 'dashboard/components/widgets/modal/WootKeyShor import AccountSelector from 'dashboard/components/layout/sidebarComponents/AccountSelector.vue'; import NotificationPanel from 'dashboard/routes/dashboard/notifications/components/NotificationPanel.vue'; import { useUISettings } from 'dashboard/composables/useUISettings'; +import { useAccount } from 'dashboard/composables/useAccount'; import { usePortal } from '../composables/usePortal'; import AddCategory from '../pages/categories/AddCategory.vue'; import { FEATURE_FLAGS } from 'dashboard/featureFlags'; @@ -30,12 +31,14 @@ export default { }, setup() { const { uiSettings, updateUISettings } = useUISettings(); - const { accountId } = usePortal(); - + const { accountId } = useAccount(); + const { locale, localeName } = usePortal(); return { uiSettings, updateUISettings, accountId, + locale, + localeName, }; }, data() { diff --git a/app/javascript/dashboard/routes/dashboard/helpcenter/composables/specs/usePortal.spec.js b/app/javascript/dashboard/routes/dashboard/helpcenter/composables/specs/usePortal.spec.js index 250b8757f..3a6e6a95e 100644 --- a/app/javascript/dashboard/routes/dashboard/helpcenter/composables/specs/usePortal.spec.js +++ b/app/javascript/dashboard/routes/dashboard/helpcenter/composables/specs/usePortal.spec.js @@ -1,56 +1,68 @@ -import { describe, it, expect, vi, beforeEach } from 'vitest'; +import { describe, it, expect, vi } from 'vitest'; import { usePortal } from '../usePortal'; -import { useMapGetter } from 'dashboard/composables/store'; +import { useAccount } from 'dashboard/composables/useAccount'; +import { useRoute } from 'dashboard/composables/route'; import { frontendURL } from 'dashboard/helper/URLHelper'; import allLocales from 'shared/constants/locales.js'; -vi.mock('dashboard/composables/store', () => ({ - useMapGetter: vi.fn(), -})); - -vi.mock('dashboard/helper/URLHelper', () => ({ - frontendURL: vi.fn(), -})); +vi.mock('dashboard/composables/useAccount'); +vi.mock('dashboard/composables/route'); +vi.mock('dashboard/helper/URLHelper'); describe('usePortal', () => { beforeEach(() => { - vi.resetAllMocks(); - - useMapGetter - .mockReturnValueOnce('1') - .mockReturnValueOnce('test-portal') - .mockReturnValueOnce('en'); - - frontendURL.mockImplementation(url => `/app/${url}`); + vi.mocked(useAccount).mockReturnValue({ accountId: { value: 123 } }); }); - it('returns accountId', () => { - const { accountId } = usePortal(); - expect(accountId.value).toBe('1'); + it('returns the correct properties', () => { + vi.mocked(useRoute).mockReturnValue({ + params: { portalSlug: 'test-portal', locale: 'en' }, + }); + + const portal = usePortal(); + + expect(portal).toHaveProperty('accountId'); + expect(portal).toHaveProperty('portalSlug'); + expect(portal).toHaveProperty('locale'); + expect(portal).toHaveProperty('articleUrl'); + expect(portal).toHaveProperty('localeName'); }); - it('returns portalSlug', () => { - const { portalSlug } = usePortal(); + it('computes portalSlug and locale correctly', () => { + vi.mocked(useRoute).mockReturnValue({ + params: { portalSlug: 'test-portal', locale: 'fr' }, + }); + + const { portalSlug, locale } = usePortal(); + expect(portalSlug.value).toBe('test-portal'); + expect(locale.value).toBe('fr'); }); - it('returns locale', () => { - const { locale } = usePortal(); - expect(locale.value).toBe('en'); - }); + it('generates correct article URL', () => { + vi.mocked(useAccount).mockReturnValue({ accountId: { value: 456 } }); + vi.mocked(useRoute).mockReturnValue({ + params: { portalSlug: 'help-center', locale: 'es' }, + }); + vi.mocked(frontendURL).mockReturnValue('https://example.com/article'); - it('generates correct articleUrl', () => { const { articleUrl } = usePortal(); - const url = articleUrl(123); - expect(url).toBe('/app/accounts/1/portals/test-portal/en/articles/123'); + const url = articleUrl(789); + expect(frontendURL).toHaveBeenCalledWith( - 'accounts/1/portals/test-portal/en/articles/123' + 'accounts/456/portals/help-center/es/articles/789' ); + expect(url).toBe('https://example.com/article'); }); - it('returns correct localeName', () => { + it('returns correct locale name', () => { + vi.mocked(useRoute).mockReturnValue({ + params: { portalSlug: 'test-portal', locale: 'ja' }, + }); + const { localeName } = usePortal(); - expect(localeName('es')).toBe(allLocales.es); - expect(localeName('fr')).toBe(allLocales.fr); + const name = localeName('ja'); + + expect(name).toBe(allLocales.ja); }); }); diff --git a/app/javascript/dashboard/routes/dashboard/helpcenter/composables/usePortal.js b/app/javascript/dashboard/routes/dashboard/helpcenter/composables/usePortal.js index 026417aa1..567b42749 100644 --- a/app/javascript/dashboard/routes/dashboard/helpcenter/composables/usePortal.js +++ b/app/javascript/dashboard/routes/dashboard/helpcenter/composables/usePortal.js @@ -1,37 +1,31 @@ +import { useAccount } from 'dashboard/composables/useAccount'; import { frontendURL } from 'dashboard/helper/URLHelper'; import allLocales from 'shared/constants/locales.js'; -import { useMapGetter } from 'dashboard/composables/store'; +import { useRoute } from 'dashboard/composables/route'; import { computed } from 'vue'; /** - * COmposable to work with portal-related data and URLs. - * - * @returns {Object} The portal-related data and utilities. + * @typedef {Object} PortalComposable + * @property {import('vue').ComputedRef} accountId - The current account ID. + * @property {import('vue').ComputedRef} portalSlug - The slug of the current portal. + * @property {import('vue').ComputedRef} locale - The current locale code. + * @property {function(number): string} articleUrl - A function to generate the URL for an article. + * @property {function(string): string} localeName - A function to get the localized name of a locale. + */ + +/** + * A composable for managing portal-related data and utilities. + * @returns {PortalComposable} An object containing portal-related properties and functions. */ export const usePortal = () => { - /** - * Gets the current account ID. - * @type {number} - */ - const accountId = useMapGetter('getCurrentAccountId'); + const { accountId } = useAccount(); + const portalSlug = computed(() => useRoute().params.portalSlug); + const locale = computed(() => useRoute().params.locale); /** - * Computes the current portal slug. - * @type {import('vue').ComputedRef} - */ - const portalSlug = computed(() => useMapGetter('getCurrentPortalSlug')); - - /** - * Computes the current locale. - * @type {import('vue').ComputedRef} - */ - const locale = computed(() => useMapGetter('getCurrentLocale')); - - /** - * Generates the URL for an article based on the account ID, portal slug, and locale. - * - * @param {number|string} id - The ID of the article. - * @returns {string} The URL of the article. + * Generates the URL for an article. + * @param {number} id - The ID of the article. + * @returns {string} The full URL for the article. */ const articleUrl = id => { return frontendURL( @@ -40,14 +34,19 @@ export const usePortal = () => { }; /** - * Retrieves the locale name using the locale code. - * + * Gets the localized name of a locale. * @param {string} code - The locale code. - * @returns {string} The locale name. + * @returns {string} The localized name of the locale. */ const localeName = code => { return allLocales[code]; }; - return { accountId, portalSlug, locale, articleUrl, localeName }; + return { + accountId, + portalSlug, + locale, + articleUrl, + localeName, + }; };