Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Junaed/fssdk 10437 enable coverage report #280

Closed
wants to merge 7 commits into from
Closed

Junaed/fssdk 10437 enable coverage report #280

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
7 commits
Select commit Hold shift + click to select a range
3ef3a01
[FSSDK-10616] experiment test improvement
junaed-optimizely Sep 5, 2024
c201a23
[FSSDK-10616] logOnlyEventDispatcher improvement
junaed-optimizely Sep 5, 2024
2c26938
[FSSDK-10616] logger improvement
junaed-optimizely Sep 6, 2024
6daf36f
[FSSDK-10616] utils improvement
junaed-optimizely Sep 6, 2024
3e28e68
[FSSDK-10616] hooks improvement
junaed-optimizely Sep 9, 2024
719a834
[FSSDK-10616] util test case readability improvement
junaed-optimizely Sep 9, 2024
1f97dbb
[FSSDK-10437] jest coverage report job addition
junaed-optimizely Sep 10, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
6 changes: 6 additions & 0 deletions .github/workflows/react.yml
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -24,6 +24,12 @@ jobs:
run: yarn install
- name: Run tests
run: yarn test

coverage:
runs-on: ubuntu-latest
steps:
- uses: actions/checkout@v3
- uses: ArtiomTr/jest-coverage-report-action@v2

integration_tests:
name: Run integration tests
Expand Down
134 changes: 67 additions & 67 deletions src/Experiment.spec.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -25,10 +25,14 @@ import { OptimizelyProvider } from './Provider';
import { ReactSDKClient } from './client';
import { OptimizelyVariation } from './Variation';

type Resolver = {
resolve: (value: { success: boolean; reason?: string }) => void;
reject: (reason?: string) => void;
};

describe('<OptimizelyExperiment>', () => {
const variationKey = 'matchingVariation';
// eslint-disable-next-line @typescript-eslint/no-explicit-any
let resolver: any;
let resolver: Resolver;
let optimizelyMock: ReactSDKClient;
let isReady: boolean;

Expand Down Expand Up @@ -58,25 +62,48 @@ describe('<OptimizelyExperiment>', () => {
getIsReadyPromiseFulfilled: () => true,
getIsUsingSdkKey: () => true,
onForcedVariationsUpdate: jest.fn().mockReturnValue(() => {}),
setUser: jest.fn(),
} as unknown as ReactSDKClient;
});

it('does not throw an error when not rendered in the context of an OptimizelyProvider', () => {
expect(() => {
render(
const { container } = render(
<OptimizelyExperiment experiment="experiment1">
{(variation: string | null) => <span data-testid="variation-key">{variation}</span>}
</OptimizelyExperiment>
);

expect(container).toBeDefined();
});

it('isValidElement check works as expected', async () => {
const { container } = render(
<OptimizelyProvider optimizely={optimizelyMock}>
<OptimizelyExperiment experiment="experiment1">
{(variation: string) => <span data-testid="variation-key">{variation}</span>}
{(variation: string | null) => (
<>
<span data-testid="variation-key">{variation}</span>
{null}
{<div />}
</>
)}
</OptimizelyExperiment>
);
}).toBeDefined();
</OptimizelyProvider>
);
resolver.resolve({ success: true });

await waitFor(() => {
const validChildren = container.getElementsByTagName('span');
expect(validChildren).toHaveLength(1);
});
});

describe('when isServerSide prop is false', () => {
it('should wait client is ready then render result of activate', async () => {
const { container, rerender } = render(
<OptimizelyProvider optimizely={optimizelyMock} timeout={100}>
<OptimizelyExperiment experiment="experiment1">
{(variation: string) => <span data-testid="variation-key">{variation}</span>}
{(variation: string | null) => <span data-testid="variation-key">{variation}</span>}
</OptimizelyExperiment>
</OptimizelyProvider>
);
Expand All @@ -89,12 +116,10 @@ describe('<OptimizelyExperiment>', () => {
// Simulate client becoming ready: onReady resolving, firing config update notification
resolver.resolve({ success: true });

await optimizelyMock.onReady();

rerender(
<OptimizelyProvider optimizely={optimizelyMock}>
<OptimizelyExperiment experiment="experiment1">
{(variation: string) => <span data-testid="variation-key">{variation}</span>}
{(variation: string | null) => <span data-testid="variation-key">{variation}</span>}
</OptimizelyExperiment>
</OptimizelyProvider>
);
Expand All @@ -108,7 +133,7 @@ describe('<OptimizelyExperiment>', () => {
const { container } = render(
<OptimizelyProvider optimizely={optimizelyMock} timeout={100}>
<OptimizelyExperiment experiment="experiment1" timeout={200}>
{(variation: string) => <span data-testid="variation-key">{variation}</span>}
{(variation: string | null) => <span data-testid="variation-key">{variation}</span>}
</OptimizelyExperiment>
</OptimizelyProvider>
);
Expand All @@ -120,16 +145,15 @@ describe('<OptimizelyExperiment>', () => {

// Simulate client becoming ready; onReady resolving, firing config update notification
resolver.resolve({ success: true });
await optimizelyMock.onReady();

expect(optimizelyMock.activate).toHaveBeenCalledWith('experiment1', undefined, undefined);
await waitFor(() => expect(optimizelyMock.activate).toHaveBeenCalledWith('experiment1', undefined, undefined));
});

it(`should use the Experiment prop's timeout when there is no timeout passed to <Provider>`, async () => {
const { container } = render(
<OptimizelyProvider optimizely={optimizelyMock}>
<OptimizelyExperiment experiment="experiment1" timeout={200}>
{(variation: string) => <span data-testid="variation-key">{variation}</span>}
{(variation: string | null) => <span data-testid="variation-key">{variation}</span>}
</OptimizelyExperiment>
</OptimizelyProvider>
);
Expand All @@ -141,9 +165,8 @@ describe('<OptimizelyExperiment>', () => {

// Simulate client becoming ready
resolver.resolve({ success: true });
await optimizelyMock.onReady();

expect(optimizelyMock.activate).toHaveBeenCalledWith('experiment1', undefined, undefined);
await waitFor(() => expect(optimizelyMock.activate).toHaveBeenCalledWith('experiment1', undefined, undefined));
});

it('should render using <OptimizelyVariation> when the variationKey matches', async () => {
Expand All @@ -162,14 +185,13 @@ describe('<OptimizelyExperiment>', () => {
</OptimizelyExperiment>
</OptimizelyProvider>
);

// while it's waiting for onReady()
expect(container.innerHTML).toBe('');

// Simulate client becoming ready
resolver.resolve({ success: true });

await optimizelyMock.onReady();

await waitFor(() => expect(screen.getByTestId('variation-key')).toHaveTextContent('correct variation'));
});

Expand All @@ -194,8 +216,6 @@ describe('<OptimizelyExperiment>', () => {
// Simulate client becoming ready
resolver.resolve({ success: true });

await optimizelyMock.onReady();

await waitFor(() => expect(screen.getByTestId('variation-key')).toHaveTextContent('default variation'));
});

Expand All @@ -219,8 +239,6 @@ describe('<OptimizelyExperiment>', () => {
// Simulate client becoming ready
resolver.resolve({ success: true });

await optimizelyMock.onReady();

await waitFor(() => expect(screen.getByTestId('variation-key')).toHaveTextContent('matching variation'));
});

Expand All @@ -244,12 +262,10 @@ describe('<OptimizelyExperiment>', () => {
// Simulate client becoming ready
resolver.resolve({ success: true });

await optimizelyMock.onReady();

await waitFor(() => expect(screen.getByTestId('variation-key')).toHaveTextContent('default variation'));
});

describe('a OptimizelyVariation with default & variation props', () => {
describe('OptimizelyVariation with default & variation props', () => {
it('should render default with NO matching variations ', async () => {
const { container } = render(
<OptimizelyProvider optimizely={optimizelyMock}>
Expand All @@ -270,8 +286,6 @@ describe('<OptimizelyExperiment>', () => {
// Simulate client becoming ready
resolver.resolve({ success: true });

await optimizelyMock.onReady();

await waitFor(() =>
expect(screen.getByTestId('variation-key')).toHaveTextContent('default & non matching variation')
);
Expand All @@ -297,8 +311,6 @@ describe('<OptimizelyExperiment>', () => {
// Simulate client becoming ready
resolver.resolve({ success: true });

await optimizelyMock.onReady();

await waitFor(() => expect(screen.getByTestId('variation-key')).toHaveTextContent('matching variation'));
});
});
Expand Down Expand Up @@ -329,8 +341,6 @@ describe('<OptimizelyExperiment>', () => {
// Simulate client becoming ready
resolver.resolve({ success: true });

await optimizelyMock.onReady();

await waitFor(() => expect(screen.getByTestId('variation-key')).toHaveTextContent('non-matching variation 3'));
});

Expand All @@ -354,8 +364,6 @@ describe('<OptimizelyExperiment>', () => {
// Simulate client becoming ready
resolver.resolve({ success: true });

await optimizelyMock.onReady();

expect(container.innerHTML).toBe('');
});

Expand All @@ -367,7 +375,7 @@ describe('<OptimizelyExperiment>', () => {
overrideUserId="james123"
overrideAttributes={{ betaUser: true }}
>
{(variation: string) => <span data-testid="variation-key">{variation}</span>}
{(variation: string | null) => <span data-testid="variation-key">{variation}</span>}
</OptimizelyExperiment>
</OptimizelyProvider>
);
Expand All @@ -380,18 +388,17 @@ describe('<OptimizelyExperiment>', () => {
// Simulate client becoming ready
resolver.resolve({ success: true });

await optimizelyMock.onReady();

expect(optimizelyMock.activate).toHaveBeenCalledWith('experiment1', 'james123', { betaUser: true });

await waitFor(() => expect(screen.getByTestId('variation-key')).toHaveTextContent('matchingVariation'));
await waitFor(() => {
expect(optimizelyMock.activate).toHaveBeenCalledWith('experiment1', 'james123', { betaUser: true });
expect(screen.getByTestId('variation-key')).toHaveTextContent('matchingVariation');
});
});

it('should pass the values for clientReady and didTimeout', async () => {
const { container } = render(
<OptimizelyProvider optimizely={optimizelyMock} timeout={100}>
<OptimizelyExperiment experiment="experiment1">
{(variation: string, clientReady: boolean, didTimeout: boolean) => (
{(variation: string | null, clientReady?: boolean, didTimeout?: boolean) => (
<span data-testid="variation-key">{`${variation}|${clientReady}|${didTimeout}`}</span>
)}
</OptimizelyExperiment>
Expand All @@ -404,12 +411,10 @@ describe('<OptimizelyExperiment>', () => {
// Simulate client becoming ready
resolver.resolve({ success: true });

await optimizelyMock.onReady();

expect(optimizelyMock.activate).toHaveBeenCalledWith('experiment1', undefined, undefined);
await waitFor(() =>
expect(screen.getByTestId('variation-key')).toHaveTextContent('matchingVariation|true|false')
);
await waitFor(() => {
expect(optimizelyMock.activate).toHaveBeenCalledWith('experiment1', undefined, undefined);
expect(screen.getByTestId('variation-key')).toHaveTextContent('matchingVariation|true|false');
});
});

describe('when the onReady() promise return { success: false }', () => {
Expand All @@ -431,9 +436,8 @@ describe('<OptimizelyExperiment>', () => {
expect(container.innerHTML).toBe('');

resolver.resolve({ success: false, reason: 'fail' });
await optimizelyMock.onReady();

expect(container.innerHTML).toBe('');
await waitFor(() => expect(container.innerHTML).toBe(''));
});
});
});
Expand All @@ -443,9 +447,7 @@ describe('<OptimizelyExperiment>', () => {
const { container } = render(
<OptimizelyProvider optimizely={optimizelyMock} timeout={100}>
<OptimizelyExperiment experiment="experiment1" autoUpdate={true}>
{(variation: string, clientReady: boolean, didTimeout: boolean) => (
<span data-testid="variation-key">{variation}</span>
)}
{(variation: string | null) => <span data-testid="variation-key">{variation}</span>}
</OptimizelyExperiment>
</OptimizelyProvider>
);
Expand All @@ -457,11 +459,11 @@ describe('<OptimizelyExperiment>', () => {
// Simulate client becoming ready
resolver.resolve({ success: true });
isReady = true;
await act(async () => await optimizelyMock.onReady());

expect(optimizelyMock.activate).toHaveBeenCalledWith('experiment1', undefined, undefined);

await waitFor(() => expect(screen.getByTestId('variation-key')).toHaveTextContent('matchingVariation'));
await waitFor(() => {
expect(optimizelyMock.activate).toHaveBeenCalledWith('experiment1', undefined, undefined);
expect(screen.getByTestId('variation-key')).toHaveTextContent('matchingVariation');
});

// capture the OPTIMIZELY_CONFIG_UPDATE function
// change the return value of activate
Expand All @@ -473,16 +475,14 @@ describe('<OptimizelyExperiment>', () => {

expect(optimizelyMock.activate).toHaveBeenCalledWith('experiment1', undefined, undefined);
await waitFor(() => expect(screen.getByTestId('variation-key')).toHaveTextContent('newVariation'));
expect(optimizelyMock.activate).toBeCalledTimes(2);
expect(optimizelyMock.activate).toHaveBeenCalledTimes(2);
});

it('should re-render when the user changes', async () => {
const { container } = render(
<OptimizelyProvider optimizely={optimizelyMock} timeout={100}>
<OptimizelyExperiment experiment="experiment1" autoUpdate={true}>
{(variation: string, clientReady: boolean, didTimeout: boolean) => (
<span data-testid="variation-key">{variation}</span>
)}
{(variation: string | null) => <span data-testid="variation-key">{variation}</span>}
</OptimizelyExperiment>
</OptimizelyProvider>
);
Expand All @@ -493,10 +493,11 @@ describe('<OptimizelyExperiment>', () => {
// Simulate client becoming ready
resolver.resolve({ success: true });
isReady = true;
await act(async () => await optimizelyMock.onReady());
expect(optimizelyMock.activate).toHaveBeenCalledWith('experiment1', undefined, undefined);

await waitFor(() => expect(screen.getByTestId('variation-key')).toHaveTextContent('matchingVariation'));
await waitFor(() => {
expect(optimizelyMock.activate).toHaveBeenCalledWith('experiment1', undefined, undefined);
expect(screen.getByTestId('variation-key')).toHaveTextContent('matchingVariation');
});

// capture the onUserUpdate function
const updateFn = (optimizelyMock.onUserUpdate as jest.Mock).mock.calls[0][0];
Expand All @@ -506,7 +507,7 @@ describe('<OptimizelyExperiment>', () => {

expect(optimizelyMock.activate).toHaveBeenCalledWith('experiment1', undefined, undefined);
await waitFor(() => expect(screen.getByTestId('variation-key')).toHaveTextContent('newVariation'));
expect(optimizelyMock.activate).toBeCalledTimes(2);
expect(optimizelyMock.activate).toHaveBeenCalledTimes(2);
});
});

Expand All @@ -515,9 +516,7 @@ describe('<OptimizelyExperiment>', () => {
render(
<OptimizelyProvider optimizely={optimizelyMock} timeout={100} isServerSide={true}>
<OptimizelyExperiment experiment="experiment1">
{(variation: string, clientReady: boolean, didTimeout: boolean) => (
<span data-testid="variation-key">{variation}</span>
)}
{(variation: string | null) => <span data-testid="variation-key">{variation}</span>}
</OptimizelyExperiment>
</OptimizelyProvider>
);
Expand All @@ -541,6 +540,7 @@ describe('<OptimizelyExperiment>', () => {
</OptimizelyExperiment>
</OptimizelyProvider>
);

await waitFor(() => expect(screen.getByTestId('variation-key')).toHaveTextContent('correct variation'));
});
});
Expand Down
Loading
Loading