vorteil/direktiv

View on GitHub
ui/e2e/gateway/consumers/index.spec.ts

Summary

Maintainability
C
1 day
Test Coverage
import { createNamespace, deleteNamespace } from "e2e/utils/namespace";
import { createRedisConsumerFile, findConsumerWithApiRequest } from "./utils";
import { expect, test } from "@playwright/test";

import { createFile } from "e2e/utils/files";
import { encode } from "js-base64";
import { headers } from "e2e/utils/testutils";
import { patchFile } from "~/api/files/mutate/patchFile";

let namespace = "";

test.beforeEach(async () => {
  namespace = await createNamespace();
});

test.afterEach(async () => {
  await deleteNamespace(namespace);
  namespace = "";
});

test("Consumer list is empty by default", async ({ page }) => {
  await page.goto(`/n/${namespace}/gateway/consumers`, {
    waitUntil: "networkidle",
  });

  await expect(
    page.getByTestId("breadcrumb-consumers"),
    "it renders the 'Consumers' breadcrumb"
  ).toBeVisible();

  await expect(
    page.getByText("No consumers exist yet"),
    "it renders an empty list of consumers"
  ).toBeVisible();
});

test("Consumer list shows all available consumers", async ({ page }) => {
  await createFile({
    name: "redis-consumer.yaml",
    namespace,
    type: "consumer",
    yaml: createRedisConsumerFile({
      username: "userA",
      password: "password",
    }),
  });

  await expect
    .poll(
      async () =>
        await findConsumerWithApiRequest({
          namespace,
          match: (consumer) => consumer.username === "userA",
        }),
      "the consumer was created and is available"
    )
    .toBeTruthy();

  await page.goto(`/n/${namespace}/gateway/consumers`, {
    waitUntil: "networkidle",
  });

  await expect(
    page.getByTestId("consumer-table").locator("tr"),
    "it renders one row of consumers"
  ).toHaveCount(1);

  await expect(
    page.getByTestId("consumer-table").getByRole("cell").nth(0).locator("div"),
    "it renders the text for the username"
  ).toHaveText("userA");

  await expect(
    page
      .getByTestId("consumer-table")
      .locator("tr")
      .getByRole("textbox")
      .first(),
    "it renders the text for the password"
  ).toHaveValue("password");

  await expect(
    page
      .getByTestId("consumer-table")
      .locator("tr")
      .getByRole("textbox")
      .nth(1),
    "it renders the text for the apikey"
  ).toHaveValue("123456789");

  await expect(
    page.getByTestId("consumer-groups").locator("div"),
    "it renders exactly two groups"
  ).toHaveCount(2);

  await expect(
    page.getByTestId("consumer-groups").locator("div").first(),
    "it renders the text of the first group"
  ).toHaveText("group1");

  await expect(
    page.getByTestId("consumer-tags").locator("div"),
    "it renders exactly one tag"
  ).toHaveCount(1);

  await expect(
    page.getByTestId("consumer-tags").locator("div"),
    "it renders the text of the first tag"
  ).toHaveText("tag1");
});

test("Consumer list will update the consumers when refetch button is clicked", async ({
  page,
}) => {
  await createFile({
    name: "consumer.yaml",
    namespace,
    type: "consumer",
    yaml: createRedisConsumerFile({
      username: "userOld",
      password: "passwordOld",
    }),
  });

  await page.goto(`/n/${namespace}/gateway/consumers`, {
    waitUntil: "networkidle",
  });

  await expect(
    page
      .getByTestId("consumer-table")
      .getByRole("cell", { name: "userOld", exact: true }),
    "it shows the (old) username"
  ).toBeVisible();

  await expect(
    page
      .getByTestId("consumer-table")
      .locator("tr")
      .getByRole("textbox")
      .first(),
    "it shows the (old) password"
  ).toHaveValue("passwordOld");

  await patchFile({
    payload: {
      data: encode(
        createRedisConsumerFile({
          username: "userNew",
          password: "passwordNew",
        })
      ),
    },
    urlParams: {
      baseUrl: process.env.PLAYWRIGHT_UI_BASE_URL,
      namespace,
      path: "/consumer.yaml",
    },
    headers,
  });

  await page.waitForTimeout(500);

  await page.getByLabel("Refetch consumers").click();

  await expect(
    page
      .getByTestId("consumer-table")
      .getByRole("cell", { name: "userNew", exact: true }),
    "it has updated the rendered username to the new value"
  ).toBeVisible();

  await expect(
    page
      .getByTestId("consumer-table")
      .locator("tr")
      .getByRole("textbox")
      .first(),
    "it has updated the rendered password to the new value"
  ).toHaveValue("passwordNew");
});