Merge pull request #50 from tailor-cms/chore/tweak-visual-testing

Tweak visual tests

apps/frontend/pages/repository/[[id]]/root.vue

@@ -5,6 +5,7 @@
         bg-color="primary-darken-3"
         class="text-primary-lighten-3"
         color="primary-lighten-1"
+        data-testid="repositoryRoot_nav"
         elevation="1"
         height="64"
         slider-color="primary-lighten-3"

tests/playwright.config.ts

@@ -29,8 +29,10 @@ export default defineConfig({
     {
       name: 'visual',
       testDir: './specs/visual',
+      dependencies: ['setup'],
       use: {
         ...devices['Desktop Chrome'],
+        storageState: '.auth.json',
       },
     },
     {

tests/specs/visual/catalog.spec.ts

@@ -1,12 +1,9 @@
 import { test } from '@playwright/test';
-import userSeed from 'tailor-seed/user.json';
 
 import { EndpointClient, getEndpointClient } from '../../api/client';
 import { repositories as mockRepositories } from '../../fixtures/repositories';
 import { percySnapshot } from '../../utils/percy.ts';
-import { SignIn } from './../../pom/auth';
 
-const DEFAULT_USER = userSeed[0];
 let REPOSITORY_API: EndpointClient;
 
 const seedCatalog = async () => {
@@ -30,9 +27,6 @@ test.beforeEach(async ({ page }) => {
   const { data } = await REPOSITORY_API.list();
   const { items: repositories } = data;
   if (repositories.length) await cleanupCatalog(repositories);
-  const signInPage = new SignIn(page);
-  await signInPage.visit();
-  await signInPage.signIn(DEFAULT_USER.email, DEFAULT_USER.password);
   await page.goto('/', { waitUntil: 'networkidle' });
 });
 

tests/specs/visual/repository.spec.ts

@@ -0,0 +1,28 @@
+import { expect, test } from '@playwright/test';
+
+import { AddRepositoryDialog } from '../../pom/catalog/AddRepository';
+import { Catalog } from '../../pom/catalog/Catalog';
+import { percySnapshot } from '../../utils/percy.ts';
+
+test.beforeEach(async ({ page }) => {
+  const catalog = new Catalog(page);
+  await catalog.visit();
+  const dialog = new AddRepositoryDialog(page);
+  await dialog.open();
+  const { name } = await dialog.importRepository();
+  await page.reload();
+  await expect(page.getByText(name)).toBeVisible({ timeout: 10000 });
+  await catalog.findRepositoryCard(name).click();
+  await page.waitForLoadState('networkidle');
+});
+
+test('Take a snapshot of the repository structure page', async ({ page }) => {
+  await percySnapshot(page, 'Repository structure page');
+});
+
+test('Take a snapshot of the settings page', async ({ page }) => {
+  const tabNavigation = page.getByTestId('repositoryRoot_nav');
+  await tabNavigation.getByText('Settings').click();
+  await page.waitForLoadState('networkidle');
+  await percySnapshot(page, 'Repository settings page');
+});