Merge pull request #3915 from flipt-io/v2-rollout-rules-tests

chore: add UI ITs for reordering/deleting rules and rollouts
flipt-io · Feb 12, 2025 · 68e74d1 · 68e74d1
2 parents 96f25a1 + 0ef3b6b
commit 68e74d1
Show file tree

Hide file tree

Showing 8 changed files with 84 additions and 23 deletions.
diff --git a/ui/src/components/UnsavedChangesModal.tsx b/ui/src/components/UnsavedChangesModal.tsx
@@ -84,7 +84,11 @@ export function UnsavedChangesModalWrapper(props: UnsavedChangesModalProps) {
   }, [formik.dirty]);
 
   const handleDiscard = () => {
-    onDiscard ? onDiscard() : formik.resetForm();
+    if (onDiscard) {
+      onDiscard();
+    } else {
+      formik.resetForm();
+    }
     setShowUnsavedModal(false);
     if (blocker.state === 'blocked') {
       blocker.proceed();
@@ -94,7 +98,11 @@ export function UnsavedChangesModalWrapper(props: UnsavedChangesModalProps) {
   };
 
   const handleSave = async () => {
-    onSave ? onSave() : await formik.submitForm();
+    if (onSave) {
+      onSave();
+    } else {
+      await formik.submitForm();
+    }
     setShowUnsavedModal(false);
     if (blocker.state === 'blocked') {
       blocker.proceed();

diff --git a/ui/src/components/rollouts/Rollout.tsx b/ui/src/components/rollouts/Rollout.tsx
@@ -40,6 +40,7 @@ const Rollout = forwardRef(
       key={rollout.id}
       ref={ref}
       style={style}
+      data-testid={`rollout-${rollout.rank}`}
       className={`${className} w-full items-center space-y-2 rounded-md border border-violet-300 bg-background shadow-md shadow-violet-100 hover:shadow-violet-200 sm:flex sm:flex-col lg:px-6 lg:py-2`}
     >
       <div className="w-full rounded-t-lg border-b border-gray-200 p-2">

diff --git a/ui/src/components/rollouts/SortableRollout.tsx b/ui/src/components/rollouts/SortableRollout.tsx
@@ -4,6 +4,8 @@ import { IFlag } from '~/types/Flag';
 import { IRollout } from '~/types/Rollout';
 import { ISegment } from '~/types/Segment';
 
+import { cls } from '~/utils/helpers';
+
 import Rollout from './Rollout';
 
 type SortableRolloutProps = {
@@ -35,16 +37,16 @@ export default function SortableRollout(props: SortableRolloutProps) {
       }
     : undefined;
 
-  const className = isDragging ? 'border-violet-500 cursor-move' : '';
-
   return (
     <Rollout
       key={rollout.id}
       ref={setNodeRef}
       {...listeners}
       {...attributes}
       style={style}
-      className={className}
+      className={cls({
+        'border-violet-500': isDragging
+      })}
       flag={flag}
       rollout={rollout}
       segments={segments}

diff --git a/ui/src/components/rules/Rule.tsx b/ui/src/components/rules/Rule.tsx
@@ -38,6 +38,7 @@ const Rule = forwardRef(
       key={rule.id}
       ref={ref}
       style={style}
+      data-testid={`rule-${rule.rank}`}
       className={`${className} w-full items-center space-y-2 rounded-md border border-violet-300 bg-background shadow-md shadow-violet-100 hover:shadow-violet-200 sm:flex sm:flex-col lg:px-4 lg:py-2`}
     >
       <div className="w-full rounded-t-lg border-b border-gray-200 p-2">

diff --git a/ui/src/components/rules/SortableRule.tsx b/ui/src/components/rules/SortableRule.tsx
@@ -4,6 +4,8 @@ import { IFlag } from '~/types/Flag';
 import { IRule } from '~/types/Rule';
 import { ISegment } from '~/types/Segment';
 
+import { cls } from '~/utils/helpers';
+
 import Rule from './Rule';
 
 type SortableRuleProps = {
@@ -34,16 +36,16 @@ export default function SortableRule(props: SortableRuleProps) {
       }
     : undefined;
 
-  const className = isDragging ? 'border-violet-500 cursor-move' : '';
-
   return (
     <Rule
       key={rule.id}
       ref={setNodeRef}
       {...listeners}
       {...attributes}
       style={style}
-      className={className}
+      className={cls({
+        'border-violet-500': isDragging
+      })}
       flag={flag}
       rule={rule}
       segments={segments}

diff --git a/ui/src/components/segments/SegmentForm.tsx b/ui/src/components/segments/SegmentForm.tsx
@@ -14,6 +14,7 @@ import {
 
 import { Button } from '~/components/Button';
 import Loading from '~/components/Loading';
+import { UnsavedChangesModalWrapper } from '~/components/UnsavedChangesModal';
 import Constraints from '~/components/constraints/Constraints';
 import Input from '~/components/forms/Input';
 
@@ -29,7 +30,6 @@ import {
   stringAsKey
 } from '~/utils/helpers';
 
-import { UnsavedChangesModalWrapper } from '../UnsavedChangesModal';
 import { SegmentFormProvider } from './SegmentFormContext';
 
 const segmentMatchTypes = [

diff --git a/ui/tests/rollouts.spec.ts b/ui/tests/rollouts.spec.ts
@@ -66,18 +66,6 @@ test.describe('Rollouts', () => {
     await expect(page.getByText('Successfully updated flag')).toBeVisible();
   });
 
-  test('can delete rollout', async ({ page }) => {
-    await page.getByRole('link', { name: 'test-boolean' }).click();
-    await page.getByTestId('rollout-menu-button').click();
-    await page.getByRole('menuitem', { name: 'Delete' }).click();
-    await page.getByRole('button', { name: 'Delete' }).click();
-    await page.getByRole('button', { name: 'Update' }).click();
-    await expect(page.getByText('Successfully updated flag')).toBeVisible();
-    await expect(
-      page.getByRole('button', { name: 'Threshold Rollout' })
-    ).toBeHidden();
-  });
-
   test('can create segment rollout', async ({ page }) => {
     await test.step('create segment', async () => {
       await page.getByRole('link', { name: 'Segments' }).click();
@@ -107,4 +95,35 @@ test.describe('Rollouts', () => {
       await expect(page.getByText('Successfully updated flag')).toBeVisible();
     });
   });
+
+  test('can reorder rollouts', async ({ page }) => {
+    await page.getByRole('link', { name: 'test-boolean' }).click();
+    await page
+      .getByTestId('rollout-0')
+      .getByRole('button', { name: 'Rollout' })
+      .dragTo(
+        page.getByTestId('rollout-1').getByRole('button', { name: 'Rollout' })
+      );
+    await page.getByRole('button', { name: 'Update' }).click();
+    await expect(page.getByText('Successfully updated flag')).toBeVisible();
+    await expect(
+      page.getByTestId('rollout-0').getByRole('button', { name: '1' })
+    ).toBeVisible();
+    await expect(
+      page.getByTestId('rollout-1').getByRole('button', { name: '2' })
+    ).toBeVisible();
+  });
+
+  test('can delete rollout', async ({ page }) => {
+    await page.getByRole('link', { name: 'test-boolean' }).click();
+    await page
+      .getByTestId('rollout-1')
+      .getByTestId('rollout-menu-button')
+      .click();
+    await page.getByRole('menuitem', { name: 'Delete' }).click();
+    await page.getByRole('button', { name: 'Delete' }).click();
+    await page.getByRole('button', { name: 'Update' }).click();
+    await expect(page.getByText('Successfully updated flag')).toBeVisible();
+    await expect(page.getByTestId('rollout-1')).toBeHidden();
+  });
 });
diff --git a/ui/tests/rules.spec.ts b/ui/tests/rules.spec.ts
@@ -105,15 +105,43 @@ test.describe('Rules', () => {
     await expect(page.getByText('Successfully updated flag')).toBeVisible();
   });
 
+  test('can reorder rules', async ({ page }) => {
+    await page.getByRole('link', { name: 'test-rule' }).click();
+    await page.getByRole('link', { name: 'Rules' }).click();
+    await page
+      .getByTestId('rule-1')
+      .getByRole('button', { name: 'Rule' })
+      .dragTo(page.getByTestId('rule-0').getByRole('button', { name: 'Rule' }));
+    await page.getByRole('button', { name: 'Update' }).click();
+    await expect(page.getByText('Successfully updated flag')).toBeVisible();
+    await expect(
+      page.getByTestId('rule-0').getByRole('button', { name: '1' })
+    ).toBeVisible();
+    await expect(
+      page.getByTestId('rule-1').getByRole('button', { name: '2' })
+    ).toBeVisible();
+  });
+
   test('can update default rule', async ({ page }) => {
     await page.getByRole('link', { name: 'test-rule' }).click();
     await page.getByRole('link', { name: 'Rules' }).click();
     await expect(
       page.getByRole('heading', { name: 'Default Rule' })
     ).toBeVisible();
-    await page.locator('#defaultVariant-select-input').click();
-    await page.getByLabel('', { exact: true }).getByText('456').click(); // TODO: should get variant by label
+    await page.locator('#defaultVariant-select-button').click();
+    await page.getByRole('option', { name: '456' }).locator('div').click();
+    await page.getByRole('button', { name: 'Update' }).click();
+    await expect(page.getByText('Successfully updated flag')).toBeVisible();
+  });
+
+  test('can delete rule', async ({ page }) => {
+    await page.getByRole('link', { name: 'test-rule' }).click();
+    await page.getByRole('link', { name: 'Rules' }).click();
+    await page.getByTestId('rule-1').getByTestId('rule-menu-button').click();
+    await page.getByRole('menuitem', { name: 'Delete' }).click();
+    await page.getByRole('button', { name: 'Delete' }).click();
     await page.getByRole('button', { name: 'Update' }).click();
     await expect(page.getByText('Successfully updated flag')).toBeVisible();
+    await expect(page.getByTestId('rule-1')).toBeHidden();
   });
 });