[FSSDK-9839] fix: rendering default OptimizelyVariation when not last (#226)

* fix: rendering `default` with matching variation

OptimizelyExperiment renders `default` when before matching variations

* test: add coverage for `default` selection

* chore: update copyright & remove `any`

* test: revert use of `any` 😩

Author: mikechu-optimizely

src/Experiment.spec.tsx

@@ -1,11 +1,11 @@
 /**
- * Copyright 2018-2019, Optimizely
+ * Copyright 2018-2019, 2023, Optimizely
  *
  * Licensed under the Apache License, Version 2.0 (the "License");
  * you may not use this file except in compliance with the License.
  * You may obtain a copy of the License at
  *
- * http://www.apache.org/licenses/LICENSE-2.0
+ * https://www.apache.org/licenses/LICENSE-2.0
  *
  * Unless required by applicable law or agreed to in writing, software
  * distributed under the License is distributed on an "AS IS" BASIS,
@@ -170,7 +170,7 @@ describe('<OptimizelyExperiment>', () => {
       await waitFor(() => expect(screen.getByTestId('variation-key')).toHaveTextContent('correct variation'));
     });
 
-    it('should render using <OptimizelyVariation default>', async () => {
+    it('should render using <OptimizelyVariation default> in last position', async () => {
       const { container } = render(
         <OptimizelyProvider optimizely={optimizelyMock}>
           <OptimizelyExperiment experiment="experiment1">
@@ -196,6 +196,56 @@ describe('<OptimizelyExperiment>', () => {
       await waitFor(() => expect(screen.getByTestId('variation-key')).toHaveTextContent('default variation'));
     });
 
+    it('should NOT render using <OptimizelyVariation default> in first position when matching variation', async () => {
+      const { container } = render(
+        <OptimizelyProvider optimizely={optimizelyMock}>
+          <OptimizelyExperiment experiment="experiment1">
+            <OptimizelyVariation default>
+              <span data-testid="variation-key">default variation</span>
+            </OptimizelyVariation>
+            <OptimizelyVariation variation="variationResult">
+              <span data-testid="variation-key">matching variation</span>
+            </OptimizelyVariation>
+          </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('matching variation'));
+    });
+
+    it('should render using <OptimizelyVariation default> in first position when NO matching variation', async () => {
+      const { container } = render(
+        <OptimizelyProvider optimizely={optimizelyMock}>
+          <OptimizelyExperiment experiment="experiment1">
+            <OptimizelyVariation default>
+              <span data-testid="variation-key">default variation</span>
+            </OptimizelyVariation>
+            <OptimizelyVariation variation="otherVariation">
+              <span data-testid="variation-key">other non-matching variation</span>
+            </OptimizelyVariation>
+          </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('default variation'));
+    });
+
     it('should render an empty string when no default or matching variation is provided', async () => {
       const { container } = render(
         <OptimizelyProvider optimizely={optimizelyMock}>

src/Experiment.tsx

@@ -1,11 +1,11 @@
 /**
- * Copyright 2018-2019, Optimizely
+ * Copyright 2018-2019, 2023, Optimizely
  *
  * Licensed under the Apache License, Version 2.0 (the "License");
  * you may not use this file except in compliance with the License.
  * You may obtain a copy of the License at
  *
- * http://www.apache.org/licenses/LICENSE-2.0
+ * https://www.apache.org/licenses/LICENSE-2.0
  *
  * Unless required by applicable law or agreed to in writing, software
  * distributed under the License is distributed on an "AS IS" BASIS,
@@ -55,26 +55,33 @@ const Experiment: React.FunctionComponent<ExperimentProps> = props => {
     return <>{(children as ChildrenRenderFunction)(variation, clientReady, didTimeout)}</>;
   }
 
-  let match: React.ReactElement<VariationProps> | null = null;
+  let defaultMatch: React.ReactElement<VariationProps> | null = null;
+  let variationMatch: React.ReactElement<VariationProps> | null = null;
 
   // We use React.Children.forEach instead of React.Children.toArray().find()
   // here because toArray adds keys to all child elements and we do not want
   // to trigger an unmount/remount
   React.Children.forEach(children, (child: React.ReactElement<VariationProps>) => {
-    if (match || !React.isValidElement(child)) {
+    if (!React.isValidElement(child)) {
       return;
     }
 
     if (child.props.variation) {
       if (variation === child.props.variation) {
-        match = child;
+        variationMatch = child;
       }
     } else if (child.props.default) {
-      match = child;
+      defaultMatch = child;
     }
   });
 
-  return match ? React.cloneElement(match, { variation }) : null;
+  let match: React.ReactElement<VariationProps> | null = null;
+  if (variationMatch) {
+    match = variationMatch;
+  } else if (defaultMatch) {
+    match = defaultMatch;
+  }
+  return match;
 };
 
 export const OptimizelyExperiment = Experiment;