Testing instructions for critical flows

Please follow the below instructions to execute/run the cases mentioned in the critical flow.

Verify Plugin Activation Without Errors

Verify that the Figma Block plugin installs and activates successfully without any errors.

Test Steps:

1. Download the plugin zip file.
2. Log in to the WordPress Admin Dashboard.
3. Install the plugin.
4. After successful installation, click the "Activate" button to activate the plugin.
5. Observe the activation process for any error messages or issues.
6. Check the "Plugins" page to ensure that the newly installed plugin appears in the list of active plugins.

Expected Result:

The plugin should be installed and activated without any errors. A success message should be displayed after activation, indicating that the plugin is now active.

---

Verify Figma Block Appearance in Page/Post Block Editor

Verify that the Figma block appears in the Page/Post block editor without any issues.

Test Steps:

1. Log in to the WordPress Admin Dashboard.
2. Navigate to the "Pages" or "Posts" section.
3. Click on "Add New" to create a new page/post or select an existing page/post to edit.
4. Enter a title for the page/post in the title field.
5. Click on the Plus icon (+) in the editor to add a new block.
6. In the block search field, type "Figma."
7. From the suggestions, click on the block named "Figma" to add it to the page/post editor.

Expected Result:

The Figma block should appear in the page/post editor without any errors. The block should be functional and ready for use within the editor.

---

Verify Option to Add Figma URL in the Block

Verify that an option to add a Figma URL appears in the Figma block within the Page/Post block editor.

Test Steps:

1. Log in to the WordPress Admin Dashboard.
2. Navigate to the "Pages" or "Posts" section.
3. Click on "Add New" to create a new page/post or select an existing page/post to edit.
4. Enter a title for the page/post in the title field.
5. Click on the Plus icon (+) in the editor to add a new block.
6. In the block search field, type "Figma."
7. From the suggestions, click on the block named "Figma" to add it to the page/post editor.
8. Check the Figma block to see if there is an option to add a Figma URL.

Expected Result:

The Figma block should appear in the page/post editor with an option to add a Figma URL. The URL input field should be functional and allow the user to enter a Figma URL.

---

Verify Embedding of Figma Content After Adding URL

Verify that after adding a Figma URL, the Figma block embeds the content correctly within the Page/Post block editor.

Test Steps:

1. In the Figma block, enter a valid Figma URL in the URL input field.
2. CLick on the 'Embed' button.
3. Observe the Figma block to ensure the content is embedded correctly.

Expected Result:

After adding a valid Figma URL, the Figma block should embed the Figma content within the page/post editor. The embedded content should display as expected and be functional.

---

Verify Figma Content Appearance on Frontend

Verify that the Figma content appears as expected on the frontend after adding a Figma URL in the block editor.

Test Steps:

1. In the Figma block, enter a valid Figma URL in the URL input field.
2. Save or publish the page/post.
3. View the page/post on the frontend.

Expected Result:

The Figma content should appear on the frontend as expected. The embedded content should be visible, correctly formatted, and functional, matching the appearance.