{lastFlag ?
: ''}
{isLoading ? (
diff --git a/src/components/SubmitControls.tsx b/src/components/SubmitControls.tsx
index e905c20..516c491 100644
--- a/src/components/SubmitControls.tsx
+++ b/src/components/SubmitControls.tsx
@@ -23,7 +23,7 @@ const SubmitControls = ({
}: SubmitControlsProps): JSX.Element => {
const handleNewFlag = () => {
const defaultStatus = applyFilters(
- 'mrFeatureFlags.newFlag.defaultStatus',
+ 'codebFeatureFlags.newFlag.defaultStatus',
true
) as boolean;
const newFlag = {
diff --git a/src/components/snippets/JsSnippet.tsx b/src/components/snippets/JsSnippet.tsx
index 377ead3..1e222b9 100644
--- a/src/components/snippets/JsSnippet.tsx
+++ b/src/components/snippets/JsSnippet.tsx
@@ -8,8 +8,8 @@ export default function ({ flag }: { flag: string }): JSX.Element {
return `import domReady from '@wordpress/dom-ready';
domReady(function () {
if (
- typeof window?.mrFeatureFlags !== 'undefined' &&
- window.mrFeatureFlags.isEnabled('${flag}')
+ typeof window?.codebFeatureFlags !== 'undefined' &&
+ window.codebFeatureFlags.isEnabled('${flag}')
) {
// js code goes here...
}
diff --git a/src/components/snippets/TsSupport.tsx b/src/components/snippets/TsSupport.tsx
index bfc51e6..411dc14 100644
--- a/src/components/snippets/TsSupport.tsx
+++ b/src/components/snippets/TsSupport.tsx
@@ -6,14 +6,14 @@ import Snippet from './Snippet';
const TsSupport = (): JSX.Element => {
const tsSnippet = useMemo(() => {
- return `declare namespace mrFeatureFlags {
+ return `declare namespace codebFeatureFlags {
export interface FeatureFlagProps {
isEnabled: (flag: string) => boolean;
}
}
declare global {
interface Window {
- mrFeatureFlags: mrFeatureFlags.FeatureFlagProps;
+ codebFeatureFlags: codebFeatureFlags.FeatureFlagProps;
}
}
export {};`;
diff --git a/src/index.ts b/src/index.ts
index 5f68277..9461583 100644
--- a/src/index.ts
+++ b/src/index.ts
@@ -1,9 +1,9 @@
-const { mrFeatureFlags } = window;
+const { codebFeatureFlags } = window;
import { Flag } from '../types';
//Appends isEnabled method to global window object.
-mrFeatureFlags.isEnabled = (flag: string) => {
- const isFlagExist: Flag | undefined = mrFeatureFlags.flags.find(
+codebFeatureFlags.isEnabled = (flag: string) => {
+ const isFlagExist: Flag | undefined = codebFeatureFlags.flags.find(
(item: Flag) => {
return item.name === flag && item.enabled === true;
}
diff --git a/src/settings.tsx b/src/settings.tsx
index 799336d..49de202 100644
--- a/src/settings.tsx
+++ b/src/settings.tsx
@@ -1,6 +1,8 @@
import { createRoot } from '@wordpress/element';
import Flags from './components/Flags';
import './styles/settings.scss';
-const container = document.getElementById('mr_feature_flags_settings_screen');
+const container = document.getElementById(
+ 'codeb_feature_flags_settings_screen'
+);
const root = container && createRoot(container);
root?.render(
);
diff --git a/tests/e2e/feature-flags.spec.ts b/tests/e2e/feature-flags.spec.ts
index 918ebd4..0067559 100644
--- a/tests/e2e/feature-flags.spec.ts
+++ b/tests/e2e/feature-flags.spec.ts
@@ -7,7 +7,7 @@ import {
DisableFlag,
OpenSdkModal,
SaveFlags,
- deleteLastFlag,
+ deleteAllFlags,
} from './helper';
// eslint-disable-next-line
@@ -16,18 +16,14 @@ test.use({ storageState: process.env.WP_AUTH_STORAGE });
test.describe('Feature flags', () => {
test.beforeEach(async ({ page, admin }) => {
await admin.visitAdminPage('/');
-
- //Find the feature flags in side menu
await page.getByRole('link', { name: 'Feature Flags' }).click();
-
- //Confirm the setting page header
await expect(
- page.getByRole('heading', { name: 'Feature Flags settings' })
+ page.getByRole('heading', { name: 'Feature Flags' })
).toBeVisible();
});
test.afterEach(async ({ page }) => {
- await deleteLastFlag(page);
+ await deleteAllFlags(page);
});
test('Create and save new flag successfully', async ({ page }) => {
@@ -61,11 +57,9 @@ test.describe('Feature flags', () => {
});
test('Check duplicate and invalid flag', async ({ page }) => {
- //Create new flag
await AddNewFlagAndFill(page, 'testDuplicate');
await SaveFlags(page);
- //Confirm save success
expect(
await page.getByLabel('Dismiss this notice').innerText()
).toMatch(/Saved successfully!/);
@@ -80,9 +74,6 @@ test.describe('Feature flags', () => {
expect(page.getByText(ERROR_FLAG_INVALID)).toBeVisible();
expect(page.getByRole('button', { name: 'Save' })).toBeDisabled();
- //Delete the flag
- await deleteLastFlag(page);
-
expect(
await page.getByLabel('Dismiss this notice').innerText()
).toMatch(/Saved successfully!/);
@@ -118,10 +109,9 @@ test.describe('Feature flags', () => {
'navigator.clipboard.readText()'
);
expect(jsClipboardText).toContain(
- `window.mrFeatureFlags.isEnabled('${flagName}')`
+ `window.codebFeatureFlags.isEnabled('${flagName}')`
);
- //Close SDK modal
await CloseSdkModal(page);
});
});
diff --git a/tests/e2e/helper/index.ts b/tests/e2e/helper/index.ts
index c81bc1d..d309384 100644
--- a/tests/e2e/helper/index.ts
+++ b/tests/e2e/helper/index.ts
@@ -10,12 +10,30 @@ export async function deleteLastFlag(page: Page) {
.last()
.getByLabel('Delete Flag')
.click();
+
await page.getByRole('button', { name: 'Yes' }).click();
},
{ box: true }
);
}
+export async function deleteAllFlags(page: Page) {
+ await test.step(
+ 'Delete all flag',
+ async () => {
+ const count = await page
+ .locator('id=mr-feature-flag-item')
+ .getByLabel('Delete Flag')
+ .count();
+
+ if (count > 0) {
+ for (let i = 0; i < count; ++i) await deleteLastFlag(page);
+ }
+ },
+ { box: true }
+ );
+}
+
export async function AddNewFlag(page: Page, text: string) {
await test.step(
'Add new flag',
diff --git a/tests/e2e/visual-comparison.spec.ts b/tests/e2e/visual-comparison.spec.ts
new file mode 100644
index 0000000..c962640
--- /dev/null
+++ b/tests/e2e/visual-comparison.spec.ts
@@ -0,0 +1,67 @@
+import { test, expect } from '@wordpress/e2e-test-utils-playwright';
+import {
+ AddNewFlagAndFill,
+ CloseSdkModal,
+ DisableFlag,
+ OpenSdkModal,
+ SaveFlags,
+ deleteAllFlags,
+} from './helper';
+
+test.describe.configure({ mode: 'serial' });
+
+test.describe('Visual tests', () => {
+ test.use({ storageState: process.env.WP_AUTH_STORAGE });
+
+ test.beforeEach(async ({ page, admin }) => {
+ await admin.visitAdminPage('/');
+ await page.getByRole('link', { name: 'Feature Flags' }).click();
+ });
+
+ test.afterEach(async ({ page }) => {
+ await deleteAllFlags(page);
+ });
+
+ test('Feature flags screen without flags', async ({ page }) => {
+ await expect(page).toHaveScreenshot('no-flags.png');
+ });
+
+ test('Feature flags screen with some flags', async ({ page }) => {
+ await AddNewFlagAndFill(page, 'hello_test');
+ await AddNewFlagAndFill(page, '123');
+ await DisableFlag(page, true);
+ await AddNewFlagAndFill(page, 'healthCheck');
+
+ await SaveFlags(page);
+ await expect(page).toHaveScreenshot('some-flags.png');
+ });
+
+ test('Toggle feature flag', async ({ page }) => {
+ await AddNewFlagAndFill(page, 'auth0');
+ await DisableFlag(page, true);
+ await expect(page).toHaveScreenshot('flag-disabled.png');
+ });
+
+ test('Delete flag modal', async ({ page }) => {
+ await AddNewFlagAndFill(page, 'helloWorld');
+
+ await page
+ .locator('id=mr-feature-flag-item')
+ .last()
+ .getByLabel('Delete Flag')
+ .click();
+
+ await expect(page).toHaveScreenshot('delete-flag-modal.png');
+
+ await page.getByRole('button', { name: 'Yes' }).click();
+ });
+
+ test('SDK modal', async ({ page }) => {
+ await AddNewFlagAndFill(page, 'drag-drop');
+ await OpenSdkModal(page);
+
+ await expect(page).toHaveScreenshot('sdk-modal.png');
+
+ await CloseSdkModal(page);
+ });
+});
diff --git a/tests/e2e/visual-comparison.spec.ts-snapshots/delete-flag-modal-chromium-darwin.png b/tests/e2e/visual-comparison.spec.ts-snapshots/delete-flag-modal-chromium-darwin.png
new file mode 100644
index 0000000..e7e8d1b
Binary files /dev/null and b/tests/e2e/visual-comparison.spec.ts-snapshots/delete-flag-modal-chromium-darwin.png differ
diff --git a/tests/e2e/visual-comparison.spec.ts-snapshots/delete-flag-modal-chromium-linux.png b/tests/e2e/visual-comparison.spec.ts-snapshots/delete-flag-modal-chromium-linux.png
new file mode 100644
index 0000000..0db7277
Binary files /dev/null and b/tests/e2e/visual-comparison.spec.ts-snapshots/delete-flag-modal-chromium-linux.png differ
diff --git a/tests/e2e/visual-comparison.spec.ts-snapshots/flag-disabled-chromium-darwin.png b/tests/e2e/visual-comparison.spec.ts-snapshots/flag-disabled-chromium-darwin.png
new file mode 100644
index 0000000..468f3f4
Binary files /dev/null and b/tests/e2e/visual-comparison.spec.ts-snapshots/flag-disabled-chromium-darwin.png differ
diff --git a/tests/e2e/visual-comparison.spec.ts-snapshots/flag-disabled-chromium-linux.png b/tests/e2e/visual-comparison.spec.ts-snapshots/flag-disabled-chromium-linux.png
new file mode 100644
index 0000000..0a473a3
Binary files /dev/null and b/tests/e2e/visual-comparison.spec.ts-snapshots/flag-disabled-chromium-linux.png differ
diff --git a/tests/e2e/visual-comparison.spec.ts-snapshots/no-flags-chromium-darwin.png b/tests/e2e/visual-comparison.spec.ts-snapshots/no-flags-chromium-darwin.png
new file mode 100644
index 0000000..029d383
Binary files /dev/null and b/tests/e2e/visual-comparison.spec.ts-snapshots/no-flags-chromium-darwin.png differ
diff --git a/tests/e2e/visual-comparison.spec.ts-snapshots/no-flags-chromium-linux.png b/tests/e2e/visual-comparison.spec.ts-snapshots/no-flags-chromium-linux.png
new file mode 100644
index 0000000..a98dee9
Binary files /dev/null and b/tests/e2e/visual-comparison.spec.ts-snapshots/no-flags-chromium-linux.png differ
diff --git a/tests/e2e/visual-comparison.spec.ts-snapshots/sdk-modal-chromium-darwin.png b/tests/e2e/visual-comparison.spec.ts-snapshots/sdk-modal-chromium-darwin.png
new file mode 100644
index 0000000..fb6243a
Binary files /dev/null and b/tests/e2e/visual-comparison.spec.ts-snapshots/sdk-modal-chromium-darwin.png differ
diff --git a/tests/e2e/visual-comparison.spec.ts-snapshots/sdk-modal-chromium-linux.png b/tests/e2e/visual-comparison.spec.ts-snapshots/sdk-modal-chromium-linux.png
new file mode 100644
index 0000000..3eb8a5b
Binary files /dev/null and b/tests/e2e/visual-comparison.spec.ts-snapshots/sdk-modal-chromium-linux.png differ
diff --git a/tests/e2e/visual-comparison.spec.ts-snapshots/some-flags-chromium-darwin.png b/tests/e2e/visual-comparison.spec.ts-snapshots/some-flags-chromium-darwin.png
new file mode 100644
index 0000000..dd2411c
Binary files /dev/null and b/tests/e2e/visual-comparison.spec.ts-snapshots/some-flags-chromium-darwin.png differ
diff --git a/tests/e2e/visual-comparison.spec.ts-snapshots/some-flags-chromium-linux.png b/tests/e2e/visual-comparison.spec.ts-snapshots/some-flags-chromium-linux.png
new file mode 100644
index 0000000..0649a60
Binary files /dev/null and b/tests/e2e/visual-comparison.spec.ts-snapshots/some-flags-chromium-linux.png differ
diff --git a/tests/integration/FlagsApiTest.php b/tests/integration/FlagsApiTest.php
index 21fc1c7..104203f 100644
--- a/tests/integration/FlagsApiTest.php
+++ b/tests/integration/FlagsApiTest.php
@@ -193,7 +193,7 @@ public function test_create_item_with_custom_max_allowed_filter() {
// Mock the filter hook
$mocked_max_flags = 3;
- add_filter('mr_feature_flags_max_allowed', function () use ($mocked_max_flags) {
+ add_filter('codeb_feature_flags_max_allowed', function () use ($mocked_max_flags) {
return $mocked_max_flags;
});
diff --git a/tests/unit/SettingsTest.php b/tests/unit/SettingsTest.php
index 2d029a7..5119474 100644
--- a/tests/unit/SettingsTest.php
+++ b/tests/unit/SettingsTest.php
@@ -57,6 +57,6 @@ public function testRenderPage() {
$output = ob_get_clean();
- $this->assertStringContainsString('
', $output);
+ $this->assertStringContainsString('
', $output);
}
}
diff --git a/types/window.d.ts b/types/window.d.ts
index 29ce5d3..055ee35 100644
--- a/types/window.d.ts
+++ b/types/window.d.ts
@@ -12,7 +12,7 @@ declare namespace mrFeatureFlag {
declare global {
interface Window {
- mrFeatureFlags: mrFeatureFlag.FeatureFlagProps;
+ codebFeatureFlags: mrFeatureFlag.FeatureFlagProps;
}
}