Skip to content
sendou.ink docs

Tier list maker · E2E tests

0 modules · 0 exports · 0 repositories · 3 e2e tests · 1 route

  • Arrange data setup
  • Act what the user does
  • Assert what is expected
e2e/tier-list-maker.spec.ts

Tier List Maker

toggles work, items can be dragged, and state persists after reload

tier-list-maker.spec.ts:5

Renders/tier-list-maker

LOLogged out
Tier list maker page
Act
  1. Open the tier list maker page
    await tierList.goto();
  2. Set placement mode “drag”
    await tierList.setPlacementMode("drag");
Assert
  1. empty tiers drag mode count is 5
    await expect(tierList.locators.emptyTiersDragMode).toHaveCount(5);
Act
  1. Toggle “noDuplicates”
    await tierList.toggle("noDuplicates");
  2. Toggle “showTierHeaders”
    await tierList.toggle("showTierHeaders");
  3. Toggle “hideAltKits”
    await tierList.toggle("hideAltKits");
  4. Toggle “hideAltSkins”
    await tierList.toggle("hideAltSkins");
  5. Drag first item to last empty tier “main-weapon”
    await tierList.dragFirstItemToLastEmptyTier("main-weapon");
  6. Drag first item to last empty tier “main-weapon”
    await tierList.dragFirstItemToLastEmptyTier("main-weapon");
  7. Open tab “stage”
    await tierList.openTab("stage");
Assert
  1. first pool items “stage” is visible
    await expect(tierList.poolItems("stage").first()).toBeVisible();
Act
  1. Drag first item to last empty tier “stage”
    await tierList.dragFirstItemToLastEmptyTier("stage");
  2. Reload
    await tierList.reload();

  3. placement mode is not persisted, unlike the tiers themselves

    Set placement mode “drag”
    await tierList.setPlacementMode("drag");
Assert

  1. each of the three dragged items landed in a tier of its own

    empty tiers drag mode count is 2
    await expect(tierList.locators.emptyTiersDragMode).toHaveCount(2);
Source
test("toggles work, items can be dragged, and state persists after reload", async ({
	page,
}) => {
	const tierList = new TierListMakerPage(page);
	await tierList.goto();

	await tierList.setPlacementMode("drag");

	await expect(tierList.locators.emptyTiersDragMode).toHaveCount(5);

	await tierList.toggle("noDuplicates");
	await tierList.toggle("showTierHeaders");
	await tierList.toggle("hideAltKits");
	await tierList.toggle("hideAltSkins");

	await tierList.dragFirstItemToLastEmptyTier("main-weapon");
	await tierList.dragFirstItemToLastEmptyTier("main-weapon");

	await tierList.openTab("stage");
	await expect(tierList.poolItems("stage").first()).toBeVisible();
	await tierList.dragFirstItemToLastEmptyTier("stage");

	await tierList.reload();

	// placement mode is not persisted, unlike the tiers themselves
	await tierList.setPlacementMode("drag");

	// each of the three dragged items landed in a tier of its own
	await expect(tierList.locators.emptyTiersDragMode).toHaveCount(2);
})

click to place mode adds items to the selected tier

tier-list-maker.spec.ts:36

Renders/tier-list-maker

LOLogged out
Tier list maker page
Act
  1. Open the tier list maker page
    await tierList.goto();
  2. Set placement mode “click”
    await tierList.setPlacementMode("click");
Assert
  1. empty tiers click mode count is 5
    await expect(tierList.locators.emptyTiersClickMode).toHaveCount(5);
Act

  1. the first tier is selected by default

    Click first item “main-weapon”
    await tierList.clickFirstItem("main-weapon");
Assert
  1. empty tiers click mode count is 4
    await expect(tierList.locators.emptyTiersClickMode).toHaveCount(4);
Act
  1. Select first empty tier
    await tierList.selectFirstEmptyTier();
  2. Click first item “main-weapon”
    await tierList.clickFirstItem("main-weapon");
Assert
  1. empty tiers click mode count is 3
    await expect(tierList.locators.emptyTiersClickMode).toHaveCount(3);
Source
test("click to place mode adds items to the selected tier", async ({
	page,
}) => {
	const tierList = new TierListMakerPage(page);
	await tierList.goto();

	await tierList.setPlacementMode("click");
	await expect(tierList.locators.emptyTiersClickMode).toHaveCount(5);

	// the first tier is selected by default
	await tierList.clickFirstItem("main-weapon");
	await expect(tierList.locators.emptyTiersClickMode).toHaveCount(4);

	await tierList.selectFirstEmptyTier();
	await tierList.clickFirstItem("main-weapon");
	await expect(tierList.locators.emptyTiersClickMode).toHaveCount(3);
})

tiers are reordered by dragging their handle

tier-list-maker.spec.ts:54

Renders/tier-list-maker

LOLogged out
Tier list maker page
Act
  1. Open the tier list maker page
    await tierList.goto();
Assert
  1. tier ids equals “tier-x”, “tier-s”, “tier-a”, “tier-b”, “tier-c”
    expect(await tierList.tierIds()).toEqual([
	"tier-x",
	"tier-s",
	"tier-a",
	"tier-b",
	"tier-c",
]);
Act
  1. Drag tier from 0 to 2
    await tierList.dragTier({ from: 0, to: 2 });
Assert
  1. tier ids equals “tier-s”, “tier-a”, “tier-x”, “tier-b”, “tier-c”
    expect(await tierList.tierIds()).toEqual([
	"tier-s",
	"tier-a",
	"tier-x",
	"tier-b",
	"tier-c",
]);
Act
  1. Reload
    await tierList.reload();
Assert
  1. tier ids equals “tier-s”, “tier-a”, “tier-x”, “tier-b”, “tier-c”
    expect(await tierList.tierIds()).toEqual([
	"tier-s",
	"tier-a",
	"tier-x",
	"tier-b",
	"tier-c",
]);
Source
test("tiers are reordered by dragging their handle", async ({ page }) => {
	const tierList = new TierListMakerPage(page);
	await tierList.goto();

	expect(await tierList.tierIds()).toEqual([
		"tier-x",
		"tier-s",
		"tier-a",
		"tier-b",
		"tier-c",
	]);

	await tierList.dragTier({ from: 0, to: 2 });

	expect(await tierList.tierIds()).toEqual([
		"tier-s",
		"tier-a",
		"tier-x",
		"tier-b",
		"tier-c",
	]);

	await tierList.reload();

	expect(await tierList.tierIds()).toEqual([
		"tier-s",
		"tier-a",
		"tier-x",
		"tier-b",
		"tier-c",
	]);
})