Refactor Computers animation e2e tests to Terraform animation

Author: webstackdev

src/components/Animations/Computers/client/__tests__/index.spec.ts

@@ -20,7 +20,7 @@ export interface Props {
   }[]
 }
 
-const { pretitle, title, description, benefits, features } = Astro.props as Props
+const { pretitle, description, benefits, features } = Astro.props as Props
 
 const svgPath = {
   'left-justified': 'M4 6h16M4 12h16M4 18h7',

src/components/Animations/Computers/client/index.ts

@@ -1,17 +1,17 @@
 ---
 import BaseLayout from '@layouts/BaseLayout.astro'
-import ComputersAnimation from '@components/Animations/Computers/index.astro'
+import TerraformAnimation from '@components/Animations/Terraform/index.astro'
 
-const pageTitle = 'Computers Animation Fixture'
+const pageTitle = 'Terraform Animation Fixture'
 const pageDescription =
-  'Isolated test route for the hero computers animation and its lifecycle controller.'
-const pagePath = '/testing/animations-computers'
+  'Isolated test route for the hero terraform animation and its lifecycle controller.'
+const pagePath = '/testing/animations-terraform'
 ---
 
 <BaseLayout pageTitle={pageTitle} description={pageDescription} path={pagePath} noindex>
   <section class="mx-auto mb-12 max-w-4xl space-y-4 text-lg">
     <p>
-      This dedicated route hosts the hero computers animation inside a stable shell so automated
+      This dedicated route hosts the hero terraform animation inside a stable shell so automated
       tests can validate pause and play semantics without relying on home page content or layout
       changes.
     </p>
@@ -22,6 +22,6 @@ const pagePath = '/testing/animations-computers'
   </section>
 
   <div class="mx-auto flex max-w-4xl items-center justify-center">
-    <ComputersAnimation />
+    <TerraformAnimation />
   </div>
 </BaseLayout>

src/components/Animations/Computers/client/selectors.ts

@@ -453,7 +453,7 @@ has navigateToDiagnosticsPage and getSnapshot:
 
 - test/e2e/specs/01-smoke/dynamic-pages.spec.ts
 - test/e2e/specs/02-pages/services.spec.ts
-- test/e2e/specs/04-components/animations-computers.spec.ts
+- test/e2e/specs/04-components/animations-terraform.spec.ts
 - test/e2e/specs/04-components/carousel.spec.ts
 - test/e2e/specs/04-components/consentBanner.spec.ts
 - test/e2e/specs/04-components/footer.spec.ts

src/components/Animations/Computers/index.astro

@@ -4,7 +4,7 @@ import type { Page } from '@playwright/test'
 type AnimationPlayState = 'playing' | 'paused' | null
 
 const selectors = {
-  host: 'computers-animation',
+  host: 'terraform-animation',
   toggle: '[data-animation-toggle]',
 }
 
@@ -19,10 +19,10 @@ const isMobileProject = (projectName: string): boolean => {
   return projectName.startsWith('mobile-')
 }
 
-async function loadComputersFixture(playwrightPage: Page, options: FixtureOptions = {}): Promise<BasePage> {
+async function loadTerraformFixture(playwrightPage: Page, options: FixtureOptions = {}): Promise<BasePage> {
   const page = await BasePage.init(playwrightPage)
   await page.page.emulateMedia({ reducedMotion: options.reducedMotion ?? 'no-preference' })
-  await page.goto('/testing/animations-computers')
+  await page.goto('/testing/animations-terraform')
   // NOTE: The component is intentionally `hidden lg:flex` in production markup.
   // On mobile projects it will remain hidden, so waiting for "visible" will hang.
   await page.waitForSelector(selectors.host, { state: 'attached' })
@@ -32,7 +32,7 @@ async function loadComputersFixture(playwrightPage: Page, options: FixtureOption
 
 async function getAnimationState(page: BasePage): Promise<AnimationPlayState> {
   return await page.evaluate(() => {
-    return document.querySelector('computers-animation')?.getAttribute('data-animation-state') as AnimationPlayState
+    return document.querySelector('terraform-animation')?.getAttribute('data-animation-state') as AnimationPlayState
   })
 }
 
@@ -56,9 +56,9 @@ async function setOverlayPause(page: BasePage, isPaused: boolean): Promise<void>
   }, { paused: isPaused, source: overlaySource })
 }
 
-test.describe('Computers Animation Component', () => {
+test.describe('Terraform Animation Component', () => {
   test('plays by default when no pause sources exist', async ({ page: playwrightPage }, testInfo) => {
-    const page = await loadComputersFixture(playwrightPage)
+    const page = await loadTerraformFixture(playwrightPage)
     const host = page.locator(selectors.host)
     const toggle = page.locator(selectors.toggle)
 
@@ -77,7 +77,7 @@ test.describe('Computers Animation Component', () => {
   })
 
   test('honors prefers-reduced-motion by starting paused', async ({ page: playwrightPage }, testInfo) => {
-    const page = await loadComputersFixture(playwrightPage, { reducedMotion: 'reduce' })
+    const page = await loadTerraformFixture(playwrightPage, { reducedMotion: 'reduce' })
     const host = page.locator(selectors.host)
 
     await waitForAnimationState(page, 'paused')
@@ -96,7 +96,7 @@ test.describe('Computers Animation Component', () => {
   test(
     'responds to overlay pause and resume actions from the animation store',
     async ({ page: playwrightPage }, testInfo) => {
-    const page = await loadComputersFixture(playwrightPage)
+    const page = await loadTerraformFixture(playwrightPage)
     const host = page.locator(selectors.host)
 
     // On mobile projects the component is intentionally `hidden lg:flex` and must not start.