Review fixes

2024-08-27 12:11:43 +05:30
parent 692aba278b
commit 1772450945
4 changed files with 82 additions and 66 deletions
@@ -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() {
@@ -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() {
@@ -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);
  });
 });
@@ -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<number>} accountId - The current account ID.
+ * @property {import('vue').ComputedRef<string>} portalSlug - The slug of the current portal.
+ * @property {import('vue').ComputedRef<string>} 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<string>}
-   */
-  const portalSlug = computed(() => useMapGetter('getCurrentPortalSlug'));
-
-  /**
-   * Computes the current locale.
-   * @type {import('vue').ComputedRef<string>}
-   */
-  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,
+  };
 };