diff options
Diffstat (limited to 'packages/integrations/alpinejs/test')
14 files changed, 198 insertions, 0 deletions
diff --git a/packages/integrations/alpinejs/test/basics.test.js b/packages/integrations/alpinejs/test/basics.test.js new file mode 100644 index 000000000..440e2a6b5 --- /dev/null +++ b/packages/integrations/alpinejs/test/basics.test.js @@ -0,0 +1,13 @@ +import { expect } from '@playwright/test'; +import { prepareTestFactory } from './test-utils.js'; + +const { test } = prepareTestFactory({ root: './fixtures/basics/' }); + +test.describe('Basics', () => { + test('Alpine is working', async ({ page, astro }) => { + await page.goto(astro.resolveUrl('/')); + + const el = page.locator('#foo'); + expect(await el.textContent()).toBe('bar'); + }); +}); diff --git a/packages/integrations/alpinejs/test/directive.test.js b/packages/integrations/alpinejs/test/directive.test.js new file mode 100644 index 000000000..440e2a6b5 --- /dev/null +++ b/packages/integrations/alpinejs/test/directive.test.js @@ -0,0 +1,13 @@ +import { expect } from '@playwright/test'; +import { prepareTestFactory } from './test-utils.js'; + +const { test } = prepareTestFactory({ root: './fixtures/basics/' }); + +test.describe('Basics', () => { + test('Alpine is working', async ({ page, astro }) => { + await page.goto(astro.resolveUrl('/')); + + const el = page.locator('#foo'); + expect(await el.textContent()).toBe('bar'); + }); +}); diff --git a/packages/integrations/alpinejs/test/fixtures/basics/astro.config.mjs b/packages/integrations/alpinejs/test/fixtures/basics/astro.config.mjs new file mode 100644 index 000000000..ea1225a00 --- /dev/null +++ b/packages/integrations/alpinejs/test/fixtures/basics/astro.config.mjs @@ -0,0 +1,6 @@ +import alpine from '@astrojs/alpinejs'; +import { defineConfig } from 'astro/config'; + +export default defineConfig({ + integrations: [alpine()], +}) diff --git a/packages/integrations/alpinejs/test/fixtures/basics/package.json b/packages/integrations/alpinejs/test/fixtures/basics/package.json new file mode 100644 index 000000000..6723712fe --- /dev/null +++ b/packages/integrations/alpinejs/test/fixtures/basics/package.json @@ -0,0 +1,11 @@ +{ + "name": "@test/alpinejs-basics", + "version": "0.0.0", + "private": true, + "dependencies": { + "@astrojs/alpinejs": "workspace:*", + "@types/alpinejs": "^3.13.11", + "alpinejs": "^3.14.9", + "astro": "workspace:*" + } +} diff --git a/packages/integrations/alpinejs/test/fixtures/basics/src/pages/index.astro b/packages/integrations/alpinejs/test/fixtures/basics/src/pages/index.astro new file mode 100644 index 000000000..6197e0c64 --- /dev/null +++ b/packages/integrations/alpinejs/test/fixtures/basics/src/pages/index.astro @@ -0,0 +1,8 @@ +<html> + <head> + <title>Testing</title> + </head> + <body> + <div id="foo" x-data="{ foo: 'bar' }" x-text="foo"></div> + </body> +</html> diff --git a/packages/integrations/alpinejs/test/fixtures/directive/astro.config.mjs b/packages/integrations/alpinejs/test/fixtures/directive/astro.config.mjs new file mode 100644 index 000000000..995f86b08 --- /dev/null +++ b/packages/integrations/alpinejs/test/fixtures/directive/astro.config.mjs @@ -0,0 +1,8 @@ +import alpine from '@astrojs/alpinejs'; +import { defineConfig } from 'astro/config'; + +export default defineConfig({ + integrations: [alpine({ + entrypoint: "./src/entrypoint.ts" + })], +}) diff --git a/packages/integrations/alpinejs/test/fixtures/directive/package.json b/packages/integrations/alpinejs/test/fixtures/directive/package.json new file mode 100644 index 000000000..8b4404f33 --- /dev/null +++ b/packages/integrations/alpinejs/test/fixtures/directive/package.json @@ -0,0 +1,11 @@ +{ + "name": "@test/alpinejs-directive", + "version": "0.0.0", + "private": true, + "dependencies": { + "@astrojs/alpinejs": "workspace:*", + "@types/alpinejs": "^3.13.11", + "alpinejs": "^3.14.9", + "astro": "workspace:*" + } +} diff --git a/packages/integrations/alpinejs/test/fixtures/directive/src/entrypoint.ts b/packages/integrations/alpinejs/test/fixtures/directive/src/entrypoint.ts new file mode 100644 index 000000000..7a49c044a --- /dev/null +++ b/packages/integrations/alpinejs/test/fixtures/directive/src/entrypoint.ts @@ -0,0 +1,7 @@ +import type { Alpine } from 'alpinejs' + +export default (Alpine: Alpine) => { + Alpine.directive('foo', el => { + el.textContent = 'bar'; + }) +}
\ No newline at end of file diff --git a/packages/integrations/alpinejs/test/fixtures/directive/src/pages/index.astro b/packages/integrations/alpinejs/test/fixtures/directive/src/pages/index.astro new file mode 100644 index 000000000..73753209a --- /dev/null +++ b/packages/integrations/alpinejs/test/fixtures/directive/src/pages/index.astro @@ -0,0 +1,8 @@ +<html> + <head> + <title>Testing</title> + </head> + <body> + <div id="foo" x-data x-foo></div> + </body> +</html> diff --git a/packages/integrations/alpinejs/test/fixtures/plugin-script-import/astro.config.mjs b/packages/integrations/alpinejs/test/fixtures/plugin-script-import/astro.config.mjs new file mode 100644 index 000000000..ea1225a00 --- /dev/null +++ b/packages/integrations/alpinejs/test/fixtures/plugin-script-import/astro.config.mjs @@ -0,0 +1,6 @@ +import alpine from '@astrojs/alpinejs'; +import { defineConfig } from 'astro/config'; + +export default defineConfig({ + integrations: [alpine()], +}) diff --git a/packages/integrations/alpinejs/test/fixtures/plugin-script-import/package.json b/packages/integrations/alpinejs/test/fixtures/plugin-script-import/package.json new file mode 100644 index 000000000..2fe4f6eee --- /dev/null +++ b/packages/integrations/alpinejs/test/fixtures/plugin-script-import/package.json @@ -0,0 +1,11 @@ +{ + "name": "@test/alpinejs-plugin-script-import", + "version": "0.0.0", + "private": true, + "dependencies": { + "@astrojs/alpinejs": "workspace:*", + "@types/alpinejs": "^3.13.11", + "alpinejs": "^3.14.9", + "astro": "workspace:*" + } +} diff --git a/packages/integrations/alpinejs/test/fixtures/plugin-script-import/src/pages/index.astro b/packages/integrations/alpinejs/test/fixtures/plugin-script-import/src/pages/index.astro new file mode 100644 index 000000000..3d1559eaa --- /dev/null +++ b/packages/integrations/alpinejs/test/fixtures/plugin-script-import/src/pages/index.astro @@ -0,0 +1,19 @@ +<html> + <head> + <title>Testing</title> + <script defer src="https://cdn.jsdelivr.net/npm/@alpinejs/collapse@3.x.x/dist/cdn.min.js"></script> + </head> + <body> + <div x-data="{ expanded: false }"> + <button @click="expanded = ! expanded">Toggle Content</button> + + <p id="foo" x-show="expanded" x-collapse> + Lorem ipsum dolor sit amet consectetur adipisicing elit. + Doloribus eum placeat modi deserunt reiciendis aspernatur + praesentium natus, reprehenderit fugiat cupiditate, eaque + voluptatibus mollitia alias dicta at, perferendis cum. + Cumque, dignissimos? + </p> + </div> + </body> +</html> diff --git a/packages/integrations/alpinejs/test/plugin-script-import.test.js b/packages/integrations/alpinejs/test/plugin-script-import.test.js new file mode 100644 index 000000000..c280e5597 --- /dev/null +++ b/packages/integrations/alpinejs/test/plugin-script-import.test.js @@ -0,0 +1,13 @@ +import { expect } from '@playwright/test'; +import { prepareTestFactory } from './test-utils.js'; + +const { test } = prepareTestFactory({ root: './fixtures/plugin-script-import/' }); + +test.describe('Plugin Script Import', () => { + test('Extending Alpine using a script import should work', async ({ page, astro }) => { + await page.goto(astro.resolveUrl('/')); + + const el = page.locator('#foo'); + expect(await el.getAttribute('hidden')).toBe(''); + }); +}); diff --git a/packages/integrations/alpinejs/test/test-utils.js b/packages/integrations/alpinejs/test/test-utils.js new file mode 100644 index 000000000..dbc133ec3 --- /dev/null +++ b/packages/integrations/alpinejs/test/test-utils.js @@ -0,0 +1,64 @@ +import fs from 'node:fs/promises'; +import path from 'node:path'; +import { fileURLToPath } from 'node:url'; +import { test as testBase } from '@playwright/test'; +import { loadFixture as baseLoadFixture } from '../../../astro/test/test-utils.js'; + +// Get all test files in directory, assign unique port for each of them so they don't conflict +const testFiles = await fs.readdir(new URL('.', import.meta.url)); +const testFileToPort = new Map(); +for (let i = 0; i < testFiles.length; i++) { + const file = testFiles[i]; + if (file.endsWith('.test.js')) { + testFileToPort.set(file.slice(0, -8), 4000 + i); + } +} + +function loadFixture(inlineConfig) { + if (!inlineConfig?.root) throw new Error("Must provide { root: './fixtures/...' }"); + + // resolve the relative root (i.e. "./fixtures/tailwindcss") to a full filepath + // without this, the main `loadFixture` helper will resolve relative to `packages/astro/test` + return baseLoadFixture({ + ...inlineConfig, + root: fileURLToPath(new URL(inlineConfig.root, import.meta.url)), + server: { + port: testFileToPort.get(path.basename(inlineConfig.root)), + }, + }); +} + +function testFactory(inlineConfig) { + let fixture; + + const test = testBase.extend({ + astro: async ({}, use) => { + fixture = fixture || (await loadFixture(inlineConfig)); + await use(fixture); + }, + }); + + test.afterEach(() => { + fixture.resetAllFiles(); + }); + + return test; +} + +export function prepareTestFactory(opts) { + const test = testFactory(opts); + + let devServer; + + test.beforeAll(async ({ astro }) => { + devServer = await astro.startDevServer(); + }); + + test.afterAll(async () => { + await devServer.stop(); + }); + + return { + test, + }; +} |