diff --git a/frontend/src/component/playground/Playground/AdvancedPlaygroundResultsTable/AdvancedPlaygroundResultsTable.test.tsx b/frontend/src/component/playground/Playground/AdvancedPlaygroundResultsTable/AdvancedPlaygroundResultsTable.test.tsx index 5c1b696880..a7eab1e90f 100644 --- a/frontend/src/component/playground/Playground/AdvancedPlaygroundResultsTable/AdvancedPlaygroundResultsTable.test.tsx +++ b/frontend/src/component/playground/Playground/AdvancedPlaygroundResultsTable/AdvancedPlaygroundResultsTable.test.tsx @@ -104,4 +104,5 @@ test('should render advanced playground table', async () => { expect(screen.getByText('ChangeReqs')).toBeInTheDocument(); expect(screen.getByText('Development')).toBeInTheDocument(); expect(screen.getByText('Production')).toBeInTheDocument(); + expect(screen.getByText('Preview diff')).toBeInTheDocument(); }); diff --git a/frontend/src/component/playground/Playground/AdvancedPlaygroundResultsTable/AdvancedPlaygroundResultsTable.tsx b/frontend/src/component/playground/Playground/AdvancedPlaygroundResultsTable/AdvancedPlaygroundResultsTable.tsx index 2c3d78db30..1461467eb5 100644 --- a/frontend/src/component/playground/Playground/AdvancedPlaygroundResultsTable/AdvancedPlaygroundResultsTable.tsx +++ b/frontend/src/component/playground/Playground/AdvancedPlaygroundResultsTable/AdvancedPlaygroundResultsTable.tsx @@ -32,9 +32,14 @@ import { AdvancedPlaygroundEnvironmentCell } from './AdvancedPlaygroundEnvironme import { AdvancedPlaygroundRequestSchema, AdvancedPlaygroundFeatureSchema, + AdvancedPlaygroundFeatureSchemaEnvironments, + AdvancedPlaygroundEnvironmentFeatureSchema, } from 'openapi'; import { capitalizeFirst } from 'utils/capitalizeFirst'; -import { AdvancedPlaygroundEnvironmentDiffCell } from './AdvancedPlaygroundEnvironmentCell/AdvancedPlaygroundEnvironmentDiffCell'; +import { + AdvancedPlaygroundEnvironmentDiffCell, + IAdvancedPlaygroundEnvironmentCellProps, +} from './AdvancedPlaygroundEnvironmentCell/AdvancedPlaygroundEnvironmentDiffCell'; const defaultSort: SortingRule = { id: 'name' }; const { value, setValue } = createLocalStorage( @@ -67,6 +72,10 @@ export const AdvancedPlaygroundResultsTable = ({ ); const theme = useTheme(); const isSmallScreen = useMediaQuery(theme.breakpoints.down('md')); + const environmentsCount = + features && features.length > 0 + ? Object.keys(features[0].environments).length + : 0; const COLUMNS = useMemo(() => { return [ @@ -106,17 +115,29 @@ export const AdvancedPlaygroundResultsTable = ({ ), }; }) || []), - { - Header: 'Diff', - minWidth: 150, - id: 'diff', - align: 'left', - Cell: ({ row }: any) => ( - - ), - }, + ...(environmentsCount > 1 + ? [ + { + Header: 'Diff', + minWidth: 150, + id: 'diff', + align: 'left', + Cell: ({ + row, + }: { + row: { + original: { + environments: AdvancedPlaygroundFeatureSchemaEnvironments; + }; + }; + }) => ( + + ), + }, + ] + : []), ]; }, [input]); @@ -131,7 +152,7 @@ export const AdvancedPlaygroundResultsTable = ({ ? Array(5).fill({ name: 'Feature name', projectId: 'Feature Project', - environments: { name: 'Feature Envrironments', variants: [] }, + environments: { name: 'Feature Environments', variants: [] }, enabled: true, }) : searchedData; diff --git a/frontend/src/component/playground/Playground/PlaygroundEnvironmentTable/PlaygroundEnvironmentDiffTable.test.tsx b/frontend/src/component/playground/Playground/PlaygroundEnvironmentTable/PlaygroundEnvironmentDiffTable.test.tsx new file mode 100644 index 0000000000..19f8cd1a34 --- /dev/null +++ b/frontend/src/component/playground/Playground/PlaygroundEnvironmentTable/PlaygroundEnvironmentDiffTable.test.tsx @@ -0,0 +1,65 @@ +import { screen } from '@testing-library/react'; +import { render } from 'utils/testRenderer'; +import { PlaygroundEnvironmentDiffTable } from './PlaygroundEnvironmentDiffTable'; +import { UIProviderContainer } from '../../../providers/UIProvider/UIProviderContainer'; + +const irrelevantDetails = { + strategies: { + data: [], + result: false, + }, + isEnabledInCurrentEnvironment: true, + variants: [], + variant: { + name: 'variantName', + enabled: true, + payload: { + type: 'string' as const, + value: 'variantValue', + }, + }, + projectId: 'projectA', +}; + +test('should render environment table', async () => { + render( + + + + ); + + expect(screen.getByText('web')).toBeInTheDocument(); + expect(screen.getByText('clientA')).toBeInTheDocument(); + expect(screen.getByText('True')).toBeInTheDocument(); + expect(screen.getByText('False')).toBeInTheDocument(); + expect(screen.getByText('myapp')).toBeInTheDocument(); +});