Fixed "error  Expected linebreaks to be 'LF' but found 'CRLF' " by running eslint --fix on them hence the change to @api-router.js

UI updates to @Tagsmanager.vue

writing multi-tag tests in @status-page.spec.js
This commit is contained in:
grvwy 2025-05-20 23:47:17 +02:00
parent f0ebc0405c
commit 12b5ca5750
2 changed files with 51 additions and 11 deletions

View file

@ -25,7 +25,7 @@
<div class="modal-content">
<div class="modal-body">
<!-- Display area for tags staged for batch addition -->
<h4 v-if="stagedForBatchAdd.length > 0">{{ $t("Staged Tags for Batch Add") }}</h4>
<h4 v-if="stagedForBatchAdd.length > 0">{{ $t("Add Tags") }}</h4>
<div v-if="stagedForBatchAdd.length > 0" class="mb-3 staging-area" style="max-height: 150px; overflow-y: auto;">
<Tag
v-for="stagedTag in stagedForBatchAdd"
@ -126,21 +126,22 @@
</div>
<!-- End Validation Feedback -->
<!-- Add Another Tag Button -->
<!-- This button will be moved to the footer -->
<!-- Action Buttons: Clear current form and Stage current tag -->
<div class="d-flex justify-content-end align-items-center mt-3">
<a class="me-3" href="#" @click.prevent="clearDraftTag">{{ $t("Clear Form") }}</a>
<button type="button" class="btn btn-outline-primary" :disabled="processing || validateDraftTag.invalid" @click.stop="stageCurrentTag">
{{ $t("Add Another Tag") }}
</button>
</div>
<!-- Removed original action buttons here -->
<div v-if="newDraftTag.select == null && !canStageMoreNewSystemTags && validateDraftTag.invalid && validateDraftTag.messageKey === 'tagLimitReached'" class="form-text text-danger text-end mt-1">
{{ $t(validateDraftTag.messageKey, validateDraftTag.messageParams) }}
</div>
</div>
<!-- Modal Footer: Cancel batch or Confirm and Add all staged tags -->
<div class="modal-footer">
<button type="button" class="btn btn-outline-primary me-2" :disabled="processing || validateDraftTag.invalid" @click.stop="stageCurrentTag">
{{ $t("Add Another Tag") }}
</button>
<button type="button" class="btn btn-secondary" @click.stop="clearStagingAndCloseModal">{{ $t("Cancel") }}</button>
<button type="button" class="btn btn-primary" :disabled="processing || (stagedForBatchAdd.length === 0 && validateDraftTag.invalid)" data-testid="tag-final-add-button" @click.stop="confirmAndCommitStagedTags">{{ $t("Add") }}</button>
<button type="button" class="btn btn-primary" :disabled="processing || (stagedForBatchAdd.length === 0 && validateDraftTag.invalid)" data-testid="add-tags-final-button" @click.stop="confirmAndCommitStagedTags">{{ $t("Add Tags") }}</button>
</div>
<!-- End Modal Footer -->
</div>

View file

@ -33,12 +33,30 @@ test.describe("Status Page", () => {
await page.getByTestId("monitor-type-select").selectOption("http");
await page.getByTestId("friendly-name-input").fill(monitorName);
await page.getByTestId("url-input").fill(monitorUrl);
// Open Tags modal
await page.getByTestId("add-tag-button").click();
await expect(page.getByTestId("tag-name-input")).toBeVisible({ timeout: 10000 });
// Define and Stage the first tag
await page.getByTestId("tag-name-input").fill(tagName);
await page.getByTestId("tag-value-input").fill(tagValue);
await page.getByTestId("tag-color-select").click(); // Vue-Multiselect component
await page.getByTestId("tag-color-select").click();
await page.getByTestId("tag-color-select").getByRole("option", { name: "Orange" }).click();
await page.getByTestId("tag-final-add-button").click();
await page.getByRole("button", { name: "Add Another Tag" }).click();
// Define the second tag (inputs should be clear after staging the first)
const tagName2 = "Project";
const tagValue2 = "Phoenix";
await page.getByTestId("tag-name-input").fill(tagName2);
await page.getByTestId("tag-value-input").fill(tagValue2);
await page.getByTestId("tag-color-select").click();
await page.getByTestId("tag-color-select").getByRole("option", { name: "Blue" }).click();
// Commit both staged tags (and the current draft if any)
await page.getByTestId("add-tags-final-button").click();
await expect(page.getByTestId("tag-name-input")).not.toBeVisible({ timeout: 5000 });
await page.getByTestId("save-button").click();
await page.waitForURL("/dashboard/*"); // wait for the monitor to be created
@ -61,7 +79,27 @@ test.describe("Status Page", () => {
await page.getByTestId("show-certificate-expiry-checkbox").uncheck();
await page.getByTestId("google-analytics-input").fill(googleAnalyticsId);
await page.getByTestId("custom-css-input").getByTestId("textarea").fill(customCss); // Prism
// Wait for the description-editable to reflect the input
await page.waitForFunction(
(expectedText) => {
const element = document.querySelector("[data-testid=description-editable]");
return element && element.textContent === expectedText;
},
descriptionText,
{ timeout: 7000 }
);
await expect(page.getByTestId("description-editable")).toHaveText(descriptionText);
// Assuming footer text updates similarly, let's apply a similar pattern or ensure it's checked after description
await page.waitForFunction(
(expectedText) => {
const element = document.querySelector("[data-testid=custom-footer-editable]");
return element && element.textContent === expectedText;
},
footerText,
{ timeout: 7000 }
);
await expect(page.getByTestId("custom-footer-editable")).toHaveText(footerText);
// Add an incident
@ -129,7 +167,8 @@ test.describe("Status Page", () => {
await expect(page.getByTestId("edit-sidebar")).toHaveCount(0);
await expect(page.getByTestId("powered-by")).toContainText("Powered by");
await expect(page.getByTestId("monitor-tag")).toContainText(tagValue);
await expect(page.getByTestId("monitor-tag").filter({ hasText: tagValue })).toBeVisible();
await expect(page.getByTestId("monitor-tag").filter({ hasText: tagValue2 })).toBeVisible();
await screenshot(testInfo, page);
});