Skip to content

5317: instagram template tests and changed slide fixtures #289

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
Parent: WIP: Release/3.0.0
merged 1 commit into from
Sep 9, 2025
Merged

5317: instagram template tests and changed slide fixtures #289

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
42 changes: 21 additions & 21 deletions assets/template/fixtures/slide-fixtures.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -889,11 +889,11 @@ const slideFixtures = [
},
darkModeEnabled: false,
content: {
duration: 5000,
duration: 1000,
hashtagText: "#myhashtag",
orientation: "landscape",
imageWidth: 40.0,
entryDuration: 10,
orientation: "vertical",
imageWidth: 20,
entryDuration: 4,
maxEntries: 5,
mediaContain: true,
},
Expand Down Expand Up @@ -934,32 +934,32 @@ const slideFixtures = [
},
darkModeEnabled: false,
content: {
duration: 5000,
hashtagText: "#myhashtag",
duration: 1000,
hashtagText: "",
orientation: "landscape",
imageWidth: 40.0,
entryDuration: 10,
imageWidth: 40,
entryDuration: 1,
maxEntries: "",
mediaContain: true,
},
feedData: [
{
text: "#mountains #horizon",
textMarkup:
'<div class="text">Sed nulla lorem, varius sodales justo ac, ultrices placerat nunc.</div>\n<div class="tags"><span class="tag">#mountains</span> <span class="tag">#horizon</span> Lorem ipsum ...</div>',
mediaUrl: "/fixtures/template/images/mountain1.jpeg",
videoUrl: null,
username: "username",
createdTime: "2022-02-03T08:50:07",
username: "username1",
},
{
text: "#mountains #horizon #sky",
textMarkup:
'<div class="text">Aenean consequat sem ut tortor auctor, eget volutpat libero consequat. Donec lacinia varius quam, ut efficitur diam ultrices et. Aliquam eget augue at felis rhoncus egestas. Sed porttitor elit a tellus tempus, sed tempus sapien finibus. Nam at dapibus sem. Aliquam sit amet feugiat ex. Ut dapibus, mi eu fermentum dignissim, sem ipsum vulputate est, sit amet euismod orci odio pharetra massa.</div>\n<div class="tags"><span class="tag">#mountains</span> <span class="tag">#horizon</span> <span class="tag">#sky</span> Lorem ipsum and mountains ...</div>',
mediaUrl: "/fixtures/template/images/mountain2.jpeg",
videoUrl: null,
username: "username2",
createdTime: "2022-01-03T08:50:07",
},
{
username: "username3",
},
{
username: "username4",
},
{
username: "username5",
},
{
username: "username6",
},
],
},
Expand Down
128 changes: 122 additions & 6 deletions assets/tests/template/template-instagram.spec.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,13 +1,129 @@
import { test, expect } from "@playwright/test";

test("Instagram 0", async ({ page }) => {
await page.goto("/template/instagram-0");
test.describe("instagram-0: ui tests", () => {
test.beforeEach(async ({ page }) => {
await page.goto("/template/instagram-0");
});

// TODO
test("Should display changing content", async ({ page }) => {
let image = await page.locator(".image.media-contain");
await expect(image).toHaveCSS(
"background-image",
new RegExp("fixtures/template/images/mountain1.jpeg"),
);
await expect(image).toHaveCSS(
"animation",
"1.5s ease 0s 1 normal none running fade-in",
);
let userName = await page.locator(".author");
await expect(userName).toHaveText("username");
let descriptionText = await page.locator(".description .text");
await expect(descriptionText).toHaveText(
/Sed nulla lorem, varius sodales justo ac, ultrices placerat nunc./,
);
let firstTag = await page.locator(".tags .tag").nth(0);
let secondTag = await page.locator(".tags .tag").nth(1);
await expect(firstTag).toContainText("#mountains");
await expect(secondTag).toContainText("#horizon");
let brandTag = await page.locator(".brand-tag");
await expect(brandTag).toHaveText("#myhashtag");
await page.waitForTimeout(2000);
image = await page.locator(".image.media-contain");
await expect(image).toHaveCSS(
"background-image",
new RegExp("fixtures/template/images/mountain1.jpeg"),
);
await expect(image).toHaveCSS(
"animation",
"1.5s ease 0s 1 normal none running fade-in",
);
userName = await page.locator(".author");
firstTag = await page.locator(".tags .tag").nth(0);
await expect(firstTag).toContainText("mountains");
secondTag = await page.locator(".tags .tag").nth(1);
await expect(secondTag).toContainText("#horizon");
let thirdTag = await page.locator(".tags .tag").nth(2);
await expect(thirdTag).toContainText("#sky");
await expect(userName).toHaveText("username2");
descriptionText = await page.locator(".description .text");
await expect(descriptionText).toHaveText(
/Aenean consequat sem ut tortor auctor, eget volutpat libero consequat. Donec lacinia varius quam, ut efficitur diam ultrices et. Aliquam eget augue at felis rhoncus egestas. Sed porttitor elit a tellus tempus, sed tempus sapien finibus. Nam at dapibus sem. Aliquam sit amet feugiat ex. Ut dapibus, mi eu fermentum dignissim, sem ipsum vulputate est, sit amet euismod orci odio pharetra massa./,
);
brandTag = await page.locator(".brand-tag");
await expect(brandTag).toHaveText("#myhashtag");
await page.waitForTimeout(3000);
let video = await page.locator("video");
await expect(video).toHaveAttribute("autoplay", "");
await expect(video).toHaveAttribute("loop", "");
userName = await page.locator(".author");
await expect(userName).toHaveText("username2");
descriptionText = await page.locator(".description .text");
await expect(descriptionText).toHaveText(
/Interdum et malesuada fames ac ante ipsum primis/,
);
firstTag = await page.locator(".tags .tag").nth(0);
await expect(firstTag).toContainText("#video");
brandTag = await page.locator(".brand-tag");
await expect(brandTag).toHaveText("#myhashtag");
});

test("Should display brand tag", async ({ page }) => {
const brandTag = await page.locator(".brand-tag");
await expect(brandTag).toHaveText("#myhashtag");
});

test("Should display brand shape", async ({ page }) => {
const brandShape = await page.locator(".shape svg");
await expect(brandShape).toBeVisible();
});

test("Should have vertical class set", async ({ page }) => {
let instagramTemplate = await page.locator(".template-instagram-feed");
await expect(instagramTemplate).toHaveClass(
"template-instagram-feed vertical show",
);
});
test("Should have image width style set", async ({ page }) => {
let instagramTemplate = await page.locator(".template-instagram-feed");
await expect(instagramTemplate).toHaveCSS("--percentage-wide", "20%");
await expect(instagramTemplate).toHaveCSS("--percentage-narrow", "80%");
});
});

test("Instagram 1", async ({ page }) => {
await page.goto("/template/instagram-1-no-max-entries");
test.describe("instagram-1-no-max-entries: ui tests", () => {
test.beforeEach(async ({ page }) => {
await page.goto("/template/instagram-1-no-max-entries");
});

test("Max entries not set", async ({ page }) => {
let userName = await page.locator(".author");
await expect(userName).toHaveText("username1");
await page.waitForTimeout(1000);
userName = await page.locator(".author");
await expect(userName).toHaveText("username2");
await page.waitForTimeout(1000);
userName = await page.locator(".author");
await expect(userName).toHaveText("username3");
await page.waitForTimeout(1000);
userName = await page.locator(".author");
await expect(userName).toHaveText("username4");
await page.waitForTimeout(1000);
userName = await page.locator(".author");
await expect(userName).toHaveText("username5");
await page.waitForTimeout(1000);
userName = await page.locator(".author");
await expect(userName).toHaveText("username5");
});

// TODO
test("Should have landscape class set", async ({ page }) => {
let instagramTemplate = await page.locator(".template-instagram-feed");
await expect(instagramTemplate).toHaveClass(
"template-instagram-feed landscape hide",
);
});
test("Should have image width style set", async ({ page }) => {
let instagramTemplate = await page.locator(".template-instagram-feed");
await expect(instagramTemplate).toHaveCSS("--percentage-wide", "40%");
await expect(instagramTemplate).toHaveCSS("--percentage-narrow", "60%");
});
});
Loading