Skip to content

Commit

Permalink
test: add cypress and initial e2e tests
Browse files Browse the repository at this point in the history
  • Loading branch information
edodusi committed Jan 14, 2025
1 parent 3a89115 commit c7f36dc
Show file tree
Hide file tree
Showing 12 changed files with 1,167 additions and 42 deletions.
12 changes: 6 additions & 6 deletions .github/ISSUE_TEMPLATE/issue.bug.yml
Original file line number Diff line number Diff line change
@@ -1,17 +1,17 @@
name: 🐞 SDK Bug Report
description: Report an issue using React Storyblok SDK
description: Report an issue using Svelte Storyblok SDK
labels: [pending-triage, pending-author]
body:
- type: markdown
attributes:
value: |
You're now going to fill out a bug report at the React Storyblok SDK. Thanks a lot for taking the time and let's make Storyblok open source projects better together!
You're now going to fill out a bug report at the Svelte Storyblok SDK. Thanks a lot for taking the time and let's make Storyblok open source projects better together!
- type: textarea
id: bug-description
attributes:
label: Describe the issue you're facing
description: A clear and concise description of what the bug is. If you intend to submit a PR for this issue, tell us in the description so we can review it. Thanks in advance!
placeholder: My React Storyblok SDK configuration is ... # # Expected behavior ... ## Current Behavior ...
placeholder: My Svelte Storyblok SDK configuration is ... # # Expected behavior ... ## Current Behavior ...
validations:
required: true
- type: input
Expand All @@ -32,9 +32,9 @@ body:
id: system-info
attributes:
label: System Info
description: Output of `npx envinfo --system --npmPackages '{ react, @storyblok/*}' --binaries --browsers`
description: Output of `npx envinfo --system --npmPackages '{ svelte, @storyblok/*}' --binaries --browsers`
render: shell
placeholder: System, Binaries, Browsers, React & Storyblok SDK version
placeholder: System, Binaries, Browsers, Svelte & Storyblok SDK version
validations:
required: true
- type: dropdown
Expand All @@ -60,7 +60,7 @@ body:
label: Validations
description: Before submitting the issue, please make sure you do the following
options:
- label: Follow our [Code of Conduct](https://www.storyblok.com/trust-center?utm_source=github.com&utm_medium=readme&utm_campaign=storyblok-js-client#code-of-conduct)
- label: Follow our [Code of Conduct](https://www.storyblok.com/trust-center#code-of-conduct?utm_source=github.com&utm_medium=readme&utm_campaign=storyblok-js-client)
required: true
- type: markdown
attributes:
Expand Down
5 changes: 5 additions & 0 deletions .gitignore
Original file line number Diff line number Diff line change
Expand Up @@ -22,3 +22,8 @@ Thumbs.db
# Vite
vite.config.js.timestamp-*
vite.config.ts.timestamp-*

# Cypress
cypress/screenshots/
cypress/videos
cypress/downloads
20 changes: 20 additions & 0 deletions cypress.config.ts
Original file line number Diff line number Diff line change
@@ -0,0 +1,20 @@
import { defineConfig } from 'cypress';
import { svelte } from '@sveltejs/vite-plugin-svelte'

export default defineConfig({
e2e: {
baseUrl: 'http://localhost:5173',
},

component: {
devServer: {
framework: 'svelte',
bundler: 'vite',
viteConfig: () => {
return {
plugins: [svelte()]
}
},
},
},
});
17 changes: 17 additions & 0 deletions cypress/component/page.cy.ts
Original file line number Diff line number Diff line change
@@ -0,0 +1,17 @@
/**
Cypress is not working well with Svelte 5, so for now no StoryblokComponent tests are available.
@todo Fix Cypress to work with Svelte 5
*/
describe('Basic Test', () => {
it('can find an element', () => {
// Create a basic element
const element = document.createElement('div');
element.setAttribute('data-test', 'test-div');
element.textContent = 'Hello Test';
document.body.appendChild(element);

// Test if we can find it
cy.get('[data-test="test-div"]').should('exist');
cy.get('[data-test="test-div"]').should('have.text', 'Hello Test');
});
});
15 changes: 15 additions & 0 deletions cypress/e2e/index.cy.ts
Original file line number Diff line number Diff line change
@@ -0,0 +1,15 @@
describe('@storyblok/svelte', () => {
describe('Bridge', () => {
it('Is loaded by default', () => {
cy.visit('http://localhost:5173/?_storyblok_tk[timestamp]=1677494658');
cy.get('#storyblok-javascript-bridge').should('exist');
});
});

describe('Rendering Components', () => {
it('The teaser blok is correctly rendered', () => {
cy.visit('http://localhost:5173/');
cy.get('[data-blok-uid="141210018-97a0e33f-1e0b-4561-8193-4839a9f85cae"]').should('exist');
});
});
});
5 changes: 5 additions & 0 deletions cypress/fixtures/example.json
Original file line number Diff line number Diff line change
@@ -0,0 +1,5 @@
{
"name": "Using fixtures to represent data",
"email": "hello@cypress.io",
"body": "Fixtures are a great way to mock data for responses to routes"
}
37 changes: 37 additions & 0 deletions cypress/support/commands.ts
Original file line number Diff line number Diff line change
@@ -0,0 +1,37 @@
/// <reference types="cypress" />
// ***********************************************
// This example commands.ts shows you how to
// create various custom commands and overwrite
// existing commands.
//
// For more comprehensive examples of custom
// commands please read more here:
// https://on.cypress.io/custom-commands
// ***********************************************
//
//
// -- This is a parent command --
// Cypress.Commands.add('login', (email, password) => { ... })
//
//
// -- This is a child command --
// Cypress.Commands.add('drag', { prevSubject: 'element'}, (subject, options) => { ... })
//
//
// -- This is a dual command --
// Cypress.Commands.add('dismiss', { prevSubject: 'optional'}, (subject, options) => { ... })
//
//
// -- This will overwrite an existing command --
// Cypress.Commands.overwrite('visit', (originalFn, url, options) => { ... })
//
// declare global {
// namespace Cypress {
// interface Chainable {
// login(email: string, password: string): Chainable<void>
// drag(subject: string, options?: Partial<TypeOptions>): Chainable<Element>
// dismiss(subject: string, options?: Partial<TypeOptions>): Chainable<Element>
// visit(originalFn: CommandOriginalFn, url: string, options: Partial<VisitOptions>): Chainable<Element>
// }
// }
// }
12 changes: 12 additions & 0 deletions cypress/support/component-index.html
Original file line number Diff line number Diff line change
@@ -0,0 +1,12 @@
<!doctype html>
<html>
<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width,initial-scale=1.0" />
<title>Components App</title>
</head>
<body>
<div data-cy-root></div>
</body>
</html>
37 changes: 37 additions & 0 deletions cypress/support/component.ts
Original file line number Diff line number Diff line change
@@ -0,0 +1,37 @@
// ***********************************************************
// This example support/component.ts is processed and
// loaded automatically before your test files.
//
// This is a great place to put global configuration and
// behavior that modifies Cypress.
//
// You can change the location of this file or turn off
// automatically serving support files with the
// 'supportFile' configuration option.
//
// You can read more here:
// https://on.cypress.io/configuration
// ***********************************************************

// Import commands.js using ES2015 syntax:
import './commands';

import { mount } from 'cypress/svelte';

// Augment the Cypress namespace to include type definitions for
// your custom command.
// Alternatively, can be defined in cypress/support/component.d.ts
// with a <reference path="./component" /> at the top of your spec.
declare global {
// eslint-disable-next-line ts/no-namespace
namespace Cypress {
interface Chainable {
mount: typeof mount;
}
}
}

Cypress.Commands.add('mount', mount);

// Example use:
// cy.mount(MyComponent)
17 changes: 17 additions & 0 deletions cypress/support/e2e.ts
Original file line number Diff line number Diff line change
@@ -0,0 +1,17 @@
// ***********************************************************
// This example support/e2e.ts is processed and
// loaded automatically before your test files.
//
// This is a great place to put global configuration and
// behavior that modifies Cypress.
//
// You can change the location of this file or turn off
// automatically serving support files with the
// 'supportFile' configuration option.
//
// You can read more here:
// https://on.cypress.io/configuration
// ***********************************************************

// Import commands.js using ES2015 syntax:
import './commands';
13 changes: 9 additions & 4 deletions package.json
Original file line number Diff line number Diff line change
Expand Up @@ -39,11 +39,15 @@
"build": "vite build && pnpm package",
"preview": "vite preview",
"package": "svelte-kit sync && svelte-package && publint",
"test": "pnpm run test:unit:ci",
"test": "pnpm run test:unit:ci && pnpm run test:e2e",
"test:unit": "vitest",
"test:unit:ci": "vitest run",
"test:unit:ui": "vitest --ui",
"playground": "pnpm run --filter ./playground/sveltekit dev",
"test:e2e": "start-server-and-test playground http://localhost:5173/ cy:run",
"test:e2e-watch": "start-server-and-test playground http://localhost:5173/ cy:open",
"cy:run": "cypress run",
"cy:open": "cypress open",
"lint": "eslint .",
"lint:fix": "eslint . --fix",
"prepublishOnly": "pnpm package",
Expand All @@ -58,20 +62,21 @@
"devDependencies": {
"@commitlint/cli": "^19.6.1",
"@commitlint/config-conventional": "^19.6.0",
"@cypress/svelte": "^3.0.0",
"@eslint/compat": "^1.2.5",
"@rollup/plugin-typescript": "^12.1.2",
"@storyblok/eslint-config": "^0.3.0",
"@sveltejs/adapter-auto": "^3.3.1",
"@sveltejs/kit": "^2.15.2",
"@sveltejs/package": "^2.3.7",
"@sveltejs/vite-plugin-svelte": "^5.0.3",
"@tsconfig/recommended": "^1.0.8",
"cypress": "^13.17.0",
"eslint": "^9.18.0",
"eslint-plugin-svelte": "^2.36.0",
"publint": "^0.2.0",
"simple-git-hooks": "^2.11.1",
"start-server-and-test": "^2.0.9",
"svelte": "^5.17.3",
"start-server-and-test": "^2.0.10",
"svelte": "^5.17.4",
"typescript": "^5.7.3",
"typescript-eslint": "^8.19.1",
"vite": "^6.0.7",
Expand Down
Loading

0 comments on commit c7f36dc

Please sign in to comment.