diff --git a/assets/template/fixtures/slide-fixtures.js b/assets/template/fixtures/slide-fixtures.js index ded7d7af..a556fb02 100644 --- a/assets/template/fixtures/slide-fixtures.js +++ b/assets/template/fixtures/slide-fixtures.js @@ -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, }, @@ -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: - '
Sed nulla lorem, varius sodales justo ac, ultrices placerat nunc.
\n
#mountains #horizon Lorem ipsum ...
', - mediaUrl: "/fixtures/template/images/mountain1.jpeg", - videoUrl: null, - username: "username", - createdTime: "2022-02-03T08:50:07", + username: "username1", }, { - text: "#mountains #horizon #sky", - textMarkup: - '
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.
\n
#mountains #horizon #sky Lorem ipsum and mountains ...
', - mediaUrl: "/fixtures/template/images/mountain2.jpeg", - videoUrl: null, username: "username2", - createdTime: "2022-01-03T08:50:07", + }, + { + username: "username3", + }, + { + username: "username4", + }, + { + username: "username5", + }, + { + username: "username6", }, ], }, diff --git a/assets/tests/template/template-instagram.spec.js b/assets/tests/template/template-instagram.spec.js index 3e2664a3..58fd0eb3 100644 --- a/assets/tests/template/template-instagram.spec.js +++ b/assets/tests/template/template-instagram.spec.js @@ -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%"); + }); });