diff --git a/frontend/src/component/playground/Playground/PlaygroundResultsTable/FeatureResultInfoPopoverCell/FeatureDetails/FeatureDetails.test.tsx b/frontend/src/component/playground/Playground/PlaygroundResultsTable/FeatureResultInfoPopoverCell/FeatureDetails/FeatureDetails.test.tsx
new file mode 100644
index 0000000000..de3c2bf045
--- /dev/null
+++ b/frontend/src/component/playground/Playground/PlaygroundResultsTable/FeatureResultInfoPopoverCell/FeatureDetails/FeatureDetails.test.tsx
@@ -0,0 +1,95 @@
+import { screen } from '@testing-library/react';
+import { render } from 'utils/testRenderer';
+import React from 'react';
+import { FeatureDetails } from './FeatureDetails';
+import { PlaygroundFeatureSchema, PlaygroundRequestSchema } from 'openapi';
+
+const testCases = [
+    {
+        name: 'Feature has unsatisfied parent dependency and feature environment is disabled',
+        feature: {
+            hasUnsatisfiedDependency: true,
+            isEnabledInCurrentEnvironment: false,
+        } as PlaygroundFeatureSchema,
+        expectedText1: 'This feature toggle is False in development because',
+        expectedText2:
+            'parent dependency is not satisfied and the environment is disabled',
+    },
+    {
+        name: 'Feature has unsatisfied parent dependency',
+        feature: {
+            hasUnsatisfiedDependency: true,
+            isEnabledInCurrentEnvironment: true,
+        } as PlaygroundFeatureSchema,
+        expectedText1: 'This feature toggle is False in development because',
+        expectedText2: 'parent dependency is not satisfied',
+    },
+    {
+        name: 'Feature environment is disabled',
+        feature: {
+            hasUnsatisfiedDependency: false,
+            isEnabledInCurrentEnvironment: false,
+        } as PlaygroundFeatureSchema,
+        expectedText1: 'This feature toggle is False in development because',
+        expectedText2: 'the environment is disabled',
+    },
+    {
+        name: 'Feature environment is enabled',
+        feature: {
+            isEnabled: true,
+        } as PlaygroundFeatureSchema,
+        expectedText1: 'This feature toggle is True in development because',
+        expectedText2: 'at least one strategy is True',
+    },
+    {
+        name: 'Feature has only custom strategies',
+        feature: {
+            isEnabledInCurrentEnvironment: true,
+            strategies: {
+                data: [{ name: 'custom' }],
+            },
+        } as PlaygroundFeatureSchema,
+        expectedText1: 'This feature toggle is Unknown in development because',
+        expectedText2: 'no strategies could be fully evaluated',
+    },
+    {
+        name: 'Feature has some custom strategies',
+        feature: {
+            isEnabledInCurrentEnvironment: true,
+            strategies: {
+                data: [{ name: 'custom' }, { name: 'default' }],
+            },
+        } as PlaygroundFeatureSchema,
+        expectedText1: 'This feature toggle is Unknown in development because',
+        expectedText2: 'not all strategies could be fully evaluated',
+    },
+    {
+        name: 'Feature has all strategies evaluating to false',
+        feature: {
+            isEnabledInCurrentEnvironment: true,
+            strategies: {
+                data: [{ name: 'default' }],
+            },
+        } as PlaygroundFeatureSchema,
+        expectedText1: 'This feature toggle is False in development because',
+        expectedText2:
+            'all strategies are either False or could not be fully evaluated',
+    },
+];
+
+testCases.forEach(({ name, feature, expectedText1, expectedText2 }) => {
+    test(name, async () => {
+        render(
+            <FeatureDetails
+                feature={feature}
+                input={
+                    { environment: 'development' } as PlaygroundRequestSchema
+                }
+                onClose={() => {}}
+            />,
+        );
+
+        await screen.findByText(expectedText1);
+        await screen.findByText(expectedText2);
+    });
+});
diff --git a/frontend/src/component/playground/Playground/PlaygroundResultsTable/FeatureResultInfoPopoverCell/FeatureStrategyList/PlaygroundResultFeatureStrategyList.test.tsx b/frontend/src/component/playground/Playground/PlaygroundResultsTable/FeatureResultInfoPopoverCell/FeatureStrategyList/PlaygroundResultFeatureStrategyList.test.tsx
new file mode 100644
index 0000000000..d181431a1f
--- /dev/null
+++ b/frontend/src/component/playground/Playground/PlaygroundResultsTable/FeatureResultInfoPopoverCell/FeatureStrategyList/PlaygroundResultFeatureStrategyList.test.tsx
@@ -0,0 +1,80 @@
+import { screen } from '@testing-library/react';
+import { render } from 'utils/testRenderer';
+import React from 'react';
+import { PlaygroundFeatureSchema, PlaygroundRequestSchema } from 'openapi';
+import { PlaygroundResultFeatureStrategyList } from './PlaygroundResultFeatureStrategyList';
+
+const testCases = [
+    {
+        name: 'Environment not enabled and parent dependency not satisfied',
+        feature: {
+            strategies: {
+                result: true,
+                data: [
+                    {
+                        name: 'default',
+                        parameters: {},
+                        result: { enabled: true, evaluationStatus: 'complete' },
+                    },
+                ],
+            },
+            isEnabledInCurrentEnvironment: false,
+            hasUnsatisfiedDependency: true,
+        } as PlaygroundFeatureSchema,
+        expectedText:
+            'If environment was enabled and parent dependencies were satisfied, then this feature toggle would be TRUE with strategies evaluated like so:',
+    },
+    {
+        name: 'Environment enabled and parent dependency not satisfied',
+        feature: {
+            strategies: {
+                result: true,
+                data: [
+                    {
+                        name: 'default',
+                        parameters: {},
+                        result: { enabled: true, evaluationStatus: 'complete' },
+                    },
+                ],
+            },
+            isEnabledInCurrentEnvironment: true,
+            hasUnsatisfiedDependency: true,
+        } as PlaygroundFeatureSchema,
+        expectedText:
+            'If parent dependencies were satisfied, then this feature toggle would be TRUE with strategies evaluated like so:',
+    },
+    {
+        name: 'Environment not enabled and parent dependency satisfied',
+        feature: {
+            strategies: {
+                result: true,
+                data: [
+                    {
+                        name: 'default',
+                        parameters: {},
+                        result: { enabled: true, evaluationStatus: 'complete' },
+                    },
+                ],
+            },
+            isEnabledInCurrentEnvironment: false,
+            hasUnsatisfiedDependency: false,
+        } as PlaygroundFeatureSchema,
+        expectedText:
+            'If environment was enabled, then this feature toggle would be TRUE with strategies evaluated like so:',
+    },
+];
+
+testCases.forEach(({ name, feature, expectedText }) => {
+    test(name, async () => {
+        render(
+            <PlaygroundResultFeatureStrategyList
+                feature={feature}
+                input={
+                    { environment: 'development' } as PlaygroundRequestSchema
+                }
+            />,
+        );
+
+        await screen.findByText(expectedText);
+    });
+});