refactor: replace isOn with useFlag in SvelteLDClient and update tests

Author: nosnibor89

packages/sdk/svelte/__tests__/lib/client/SvelteLDClient.test.ts

@@ -33,7 +33,7 @@ describe('launchDarkly', () => {
       expect(ld).toHaveProperty('initialize');
       expect(ld).toHaveProperty('initializing');
       expect(ld).toHaveProperty('watch');
-      expect(ld).toHaveProperty('isOn');
+      expect(ld).toHaveProperty('useFlag');
     });
 
     describe('initialize', async () => {
@@ -55,7 +55,7 @@ describe('launchDarkly', () => {
         const flagKey = 'test-flag';
         const user = { key: 'user1' };
 
-        expect(() => ld.isOn(flagKey)).toThrow('LaunchDarkly client not initialized');
+        expect(() => ld.useFlag(flagKey, true)).toThrow('LaunchDarkly client not initialized');
         await expect(() => ld.identify(user)).rejects.toThrow(
           'LaunchDarkly client not initialized',
         );
@@ -162,98 +162,54 @@ describe('launchDarkly', () => {
       });
     });
 
-    // TODO: fix these tests
-    // describe('isOn function', () => {
-    //   const ld = LD;
-
-    //   beforeEach(() => {
-    //     // mocks the initialize function to return the mockLDClient
-    //     (initialize as Mock<typeof initialize>).mockReturnValue(
-    //       mockLDClient as unknown as LDClient,
-    //     );
-    //   });
-
-    //   afterEach(() => {
-    //     vi.clearAllMocks();
-    //     mockLDEventEmitter.removeAllListeners();
-    //   });
-
-    //   it('should return true if the flag is on', () => {
-    //     const flagKey = 'test-flag';
-    //     ld.initialize(clientSideID);
-
-    //     expect(ld.isOn(flagKey)).toBe(true);
-    //   });
-
-    //   it('should return false if the flag is off', () => {
-    //     const flagKey = 'test-flag';
-    //     ld.initialize(clientSideID);
-
-    //     mockAllFlags.mockReturnValue({ ...rawFlags, 'test-flag': false });
-
-    //     // dispatch a change event on ldClient
-    //     const changeCallback = mockLDClient.on.mock.calls[0][1];
-    //     changeCallback();
-
-    //     expect(ld.isOn(flagKey)).toBe(false);
-    //   });
-
-    //   it('should return false if the flag is not found', () => {
-    //     const flagKey = 'non-existent-flag';
-    //     ld.initialize(clientSideID, { key: 'user1' });
-
-    //     expect(ld.isOn(flagKey)).toBe(false);
-    //   });
-    // });
-
-    // describe('identify function', () => {
-    //   const ld = LD;
-    //   beforeEach(() => {
-    //     mockInitialize.mockImplementation(() => mockLDClient);
-    //     mockAllFlags.mockImplementation(() => rawFlags);
-    //   });
-
-    //   it('should call the identify method on the LaunchDarkly client', () => {
-    //     const user = { key: 'user1' };
-    //     ld.initialize(clientSideID, user);
-
-    //     ld.identify(user);
-
-    //     expect(mockLDClient.identify).toHaveBeenCalledWith(user);
-    //   });
-    // });
+    describe('useFlag function', () => {
+      const ld = LD;
 
-    // describe('flags store', () => {
-    //   const ld = LD;
-    //   beforeEach(() => {
-    //     mockInitialize.mockImplementation(() => mockLDClient);
-    //     mockAllFlags.mockImplementation(() => rawFlags);
-    //   });
+      beforeEach(() => {
+        // mocks the initialize function to return the mockLDClient
+        (initialize as Mock<typeof initialize>).mockReturnValue(
+          mockLDClient as unknown as LDClient,
+        );
+      });
 
-    //   it('should return a readonly store of the flags', () => {
-    //     ld.initialize(clientSideID, { key: 'user1' });
+      afterEach(() => {
+        vi.clearAllMocks();
+        mockLDEventEmitter.removeAllListeners();
+      });
 
-    //     const { flags } = ld;
+      it('should return flag value', () => {
+        mockLDClient.variation.mockReturnValue(true);
+        const flagKey = 'test-flag';
+        ld.initialize(clientSideID, mockContext);
 
-    //     expect(get(flags)).toEqual(rawFlags);
-    //   });
+        expect(ld.useFlag(flagKey, false)).toBe(true);
+        expect(mockLDClient.variation).toHaveBeenCalledWith(flagKey, false);
+      });
+    });
 
-    //   it('should update the flags store when the flags change', () => {
-    //     ld.initialize(clientSideID, { key: 'user1' });
+    describe('identify function', () => {
+      const ld = LD;
 
-    //     const { flags } = ld;
+      beforeEach(() => {
+        // mocks the initialize function to return the mockLDClient
+        (initialize as Mock<typeof initialize>).mockReturnValue(
+          mockLDClient as unknown as LDClient,
+        );
+      });
 
-    //     expect(get(flags)).toEqual(rawFlags);
+      afterEach(() => {
+        vi.clearAllMocks();
+        mockLDEventEmitter.removeAllListeners();
+      });
 
-    //     const newFlags = { 'test-flag': false, 'another-test-flag': true };
-    //     mockAllFlags.mockReturnValue(newFlags);
+      it('should call the identify method on the LaunchDarkly client', () => {
+        const user = { key: 'user1' };
+        ld.initialize(clientSideID, user);
 
-    //     // dispatch a change event on ldClient
-    //     const changeCallback = mockLDClient.on.mock.calls[0][1];
-    //     changeCallback();
+        ld.identify(user);
 
-    //     expect(get(flags)).toEqual(newFlags);
-    //   });
-    // });
+        expect(mockLDClient.identify).toHaveBeenCalledWith(user);
+      });
+    });
   });
 });

packages/sdk/svelte/package.json

@@ -40,7 +40,8 @@
     "check": "yarn prettier && yarn lint && yarn build && yarn test",
     "test": "playwright test",
     "test:unit": "vitest",
-    "test:unit-ui": "vitest --ui"
+    "test:unit-ui": "vitest --ui",
+    "test:unit-coverage": "vitest --coverage"
   },
   "peerDependencies": {
     "@launchdarkly/js-client-sdk": "workspace:^",
@@ -60,6 +61,7 @@
     "@types/jest": "^29.5.11",
     "@typescript-eslint/eslint-plugin": "^6.20.0",
     "@typescript-eslint/parser": "^6.20.0",
+    "@vitest/coverage-v8": "^2.1.8",
     "@vitest/ui": "^2.1.8",
     "eslint": "^8.45.0",
     "eslint-config-airbnb-base": "^15.0.0",

packages/sdk/svelte/src/lib/LDFlag.svelte

@@ -1,8 +1,8 @@
 <script lang="ts">
-    import { LD, type LDFlagsValue } from './client/SvelteLDClient.js';
+    import { LD, type LDFlagValue } from './client/SvelteLDClient.js';
 
     export let flag: string;
-    export let matches: LDFlagsValue = true;
+    export let matches: LDFlagValue = true;
 
     $: flagValue = LD.watch(flag);
   </script>

packages/sdk/svelte/src/lib/client/SvelteLDClient.ts

@@ -1,4 +1,4 @@
-import { derived, get, type Readable, readonly, writable, type Writable } from 'svelte/store';
+import { derived, type Readable, readonly, writable, type Writable } from 'svelte/store';
 
 import type { LDFlagSet } from '@launchdarkly/js-client-sdk';
 import {
@@ -8,7 +8,7 @@ import {
   type LDFlagValue,
 } from '@launchdarkly/js-client-sdk/compat';
 
-export type { LDContext };
+export type { LDContext, LDFlagValue };
 
 /** Client ID for LaunchDarkly */
 export type LDClientID = string;
@@ -112,23 +112,23 @@ function createLD() {
     derived<Writable<LDFlags>, LDFlagValue>(flagsWritable, ($flags) => $flags[flagKey]);
 
   /**
-   * Checks if a flag is on.
-   * @param {string} flagKey - The key of the flag to check.
-   * @returns {boolean} True if the flag is on, false otherwise.
+   * Gets the current value of a flag.
+   * @param {string} flagKey - The key of the flag to get.
+   * @param {TFlag} defaultValue - The default value of the flag.
+   * @returns {TFlag} The current value of the flag.
    */
-  const isOn = (flagKey: string): boolean => {
+  function useFlag<TFlag extends LDFlagValue>(flagKey: string, defaultValue: TFlag): TFlag {
     isClientInitialized(coreLdClient);
-    const currentFlags = get(flagsWritable);
-    return !!currentFlags[flagKey];
-  };
+    return coreLdClient.variation(flagKey, defaultValue);
+  }
 
   return {
     identify,
     flags: readonly(flagsWritable),
     initialize: LDInitialize,
     initializing: readonly(loading),
     watch,
-    isOn,
+    useFlag,
   };
 }