Skip to content

Commit f2a73b1

Browse files
sethhorsleysethhorsley
committed
add e2e tests
1 parent 1194883 commit f2a73b1

16 files changed

Lines changed: 707 additions & 12 deletions

‎.github/workflows/ci.yml‎

Lines changed: 15 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -27,5 +27,20 @@ jobs:
2727
- name: Run tests
2828
run: bundle exec rake test
2929

30+
- name: Install dependencies
31+
run: npm install -g yarn && yarn
32+
- name: Install Playwright Browsers
33+
run: yarn playwright install --with-deps
34+
35+
- name: Run e2e tests
36+
run: yarn install --check-files && yarn test
37+
38+
- uses: actions/upload-artifact@v4
39+
if: ${{ !cancelled() }}
40+
with:
41+
name: playwright-report
42+
path: playwright-report/
43+
retention-days: 30
44+
3045
- name: Run linter
3146
run: bundle exec rake standard

‎.gitignore‎

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,9 @@
11
.DS_Store
22
node_modules
33
/app/assets/builds/*
4+
/test-results/
5+
/playwright-report/
6+
/blob-report/
7+
/playwright/.cache/
8+
dist
9+
test/public/js/ruby_ui*

‎Gemfile.lock‎

Lines changed: 22 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -10,17 +10,29 @@ GEM
1010
remote: https://rubygems.org/
1111
specs:
1212
ast (2.4.2)
13+
base64 (0.2.0)
1314
json (2.8.0)
1415
language_server-protocol (3.17.0.3)
1516
lint_roller (1.1.0)
1617
lru_redux (1.1.0)
1718
minitest (5.25.1)
19+
mustermann (3.0.3)
20+
ruby2_keywords (~> 0.0.1)
21+
nio4r (2.7.4)
1822
parallel (1.26.3)
1923
parser (3.3.6.0)
2024
ast (~> 2.4.1)
2125
racc
2226
phlex (2.0.0.beta2)
27+
puma (6.4.3)
28+
nio4r (~> 2.0)
2329
racc (1.8.1)
30+
rack (3.1.8)
31+
rack-protection (4.0.0)
32+
base64 (>= 0.1.0)
33+
rack (>= 3.0.0, < 4)
34+
rack-session (2.0.0)
35+
rack (>= 3.0.0)
2436
rainbow (3.1.1)
2537
rake (13.2.1)
2638
regexp_parser (2.9.2)
@@ -41,6 +53,13 @@ GEM
4153
rubocop (>= 1.48.1, < 2.0)
4254
rubocop-ast (>= 1.31.1, < 2.0)
4355
ruby-progressbar (1.13.0)
56+
ruby2_keywords (0.0.5)
57+
sinatra (4.0.0)
58+
mustermann (~> 3.0)
59+
rack (>= 3.0.0, < 4)
60+
rack-protection (= 4.0.0)
61+
rack-session (>= 2.0.0, < 3)
62+
tilt (~> 2.0)
4463
standard (1.41.1)
4564
language_server-protocol (~> 3.17.0.2)
4665
lint_roller (~> 1.0)
@@ -55,16 +74,18 @@ GEM
5574
rubocop-performance (~> 1.22.0)
5675
tailwind_merge (0.13.2)
5776
lru_redux (~> 1.1)
77+
tilt (2.4.0)
5878
unicode-display_width (2.6.0)
5979

6080
PLATFORMS
6181
arm64-darwin-24
62-
ruby
6382

6483
DEPENDENCIES
6584
minitest (~> 5.0)
85+
puma
6686
rake (~> 13.0)
6787
ruby_ui!
88+
sinatra
6889
standard (~> 1.0)
6990

7091
BUNDLED WITH

‎esbuild.config.mjs‎

Lines changed: 12 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,12 @@
1+
import * as esbuild from "esbuild";
2+
3+
await esbuild.build({
4+
entryPoints: ["lib/ruby_ui/index.js"],
5+
bundle: true,
6+
minify: false,
7+
sourcemap: true,
8+
target: ["es2015"],
9+
outfile: "dist/ruby_ui_js.min.js",
10+
format: "iife",
11+
globalName: "RubyUI",
12+
});

‎package.json‎

Lines changed: 7 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -5,7 +5,8 @@
55
"description": "Stimulus controllers for ruby_ui Component Library",
66
"homepage": "https://ruby_ui.dev",
77
"scripts": {
8-
"test": "echo \"Error: no test specified\" && exit 1"
8+
"build": "node esbuild.config.mjs",
9+
"test": "playwright test"
910
},
1011
"keywords": [
1112
"ruby_ui",
@@ -34,6 +35,10 @@
3435
"tippy.js": "^6.3.7"
3536
},
3637
"devDependencies": {
37-
"globals": "^15.8.0"
38+
"@playwright/test": "^1.48.2",
39+
"@types/node": "^22.9.0",
40+
"esbuild": "^0.24.0",
41+
"globals": "^15.8.0",
42+
"playwright": "^1.48.2"
3843
}
3944
}

‎playwright.config.js‎

Lines changed: 79 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,79 @@
1+
// @ts-check
2+
const { defineConfig, devices } = require("@playwright/test");
3+
4+
/**
5+
* Read environment variables from file.
6+
* https://github.com/motdotla/dotenv
7+
*/
8+
// require('dotenv').config({ path: path.resolve(__dirname, '.env') });
9+
10+
/**
11+
* @see https://playwright.dev/docs/test-configuration
12+
*/
13+
module.exports = defineConfig({
14+
testDir: "./test/ruby_ui",
15+
/* Run tests in files in parallel */
16+
fullyParallel: true,
17+
/* Fail the build on CI if you accidentally left test.only in the source code. */
18+
forbidOnly: !!process.env.CI,
19+
/* Retry on CI only */
20+
retries: process.env.CI ? 2 : 0,
21+
/* Opt out of parallel tests on CI. */
22+
workers: process.env.CI ? 1 : undefined,
23+
/* Reporter to use. See https://playwright.dev/docs/test-reporters */
24+
reporter: "html",
25+
/* Shared settings for all the projects below. See https://playwright.dev/docs/api/class-testoptions. */
26+
use: {
27+
// headless: false,
28+
/* Base URL to use in actions like `await page.goto('/')`. */
29+
// baseURL: 'http://127.0.0.1:3000',
30+
31+
/* Collect trace when retrying the failed test. See https://playwright.dev/docs/trace-viewer */
32+
trace: "on-first-retry",
33+
},
34+
35+
/* Configure projects for major browsers */
36+
projects: [
37+
{
38+
name: "chromium",
39+
use: { ...devices["Desktop Chrome"] },
40+
},
41+
42+
{
43+
name: "firefox",
44+
use: { ...devices["Desktop Firefox"] },
45+
},
46+
47+
{
48+
name: "webkit",
49+
use: { ...devices["Desktop Safari"] },
50+
},
51+
52+
/* Test against mobile viewports. */
53+
// {
54+
// name: 'Mobile Chrome',
55+
// use: { ...devices['Pixel 5'] },
56+
// },
57+
// {
58+
// name: 'Mobile Safari',
59+
// use: { ...devices['iPhone 12'] },
60+
// },
61+
62+
/* Test against branded browsers. */
63+
// {
64+
// name: 'Microsoft Edge',
65+
// use: { ...devices['Desktop Edge'], channel: 'msedge' },
66+
// },
67+
// {
68+
// name: 'Google Chrome',
69+
// use: { ...devices['Desktop Chrome'], channel: 'chrome' },
70+
// },
71+
],
72+
73+
/* Run your local dev server before starting the tests */
74+
webServer: {
75+
command: "ruby test/test_server.rb",
76+
url: "http://127.0.0.1:4567",
77+
reuseExistingServer: !process.env.CI,
78+
},
79+
});

‎ruby_ui.gemspec‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -22,4 +22,6 @@ Gem::Specification.new do |s|
2222
s.add_development_dependency "rake", "~> 13.0"
2323
s.add_development_dependency "standard", "~> 1.0"
2424
s.add_development_dependency "minitest", "~> 5.0"
25+
s.add_development_dependency "sinatra"
26+
s.add_development_dependency "puma"
2527
end

‎test/public/css/main.css‎

Lines changed: 71 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,71 @@
1+
:root {
2+
--background: 0 0% 100%;
3+
--foreground: 240 10% 3.9%;
4+
--card: 0 0% 100%;
5+
--card-foreground: 240 10% 3.9%;
6+
--popover: 0 0% 100%;
7+
--popover-foreground: 240 10% 3.9%;
8+
--primary: 240 5.9% 10%;
9+
--primary-foreground: 0 0% 98%;
10+
--secondary: 240 4.8% 95.9%;
11+
--secondary-foreground: 240 5.9% 10%;
12+
--muted: 240 4.8% 95.9%;
13+
--muted-foreground: 240 3.8% 46.1%;
14+
--accent: 240 4.8% 95.9%;
15+
--accent-foreground: 240 5.9% 10%;
16+
--destructive: 0 84.2% 60.2%;
17+
--destructive-foreground: 0 0% 98%;
18+
--border: 240 5.9% 90%;
19+
--input: 240 5.9% 90%;
20+
--ring: 240 5.9% 10%;
21+
--radius: 0.5rem;
22+
23+
/* ruby_ui especific */
24+
--warning: 38 92% 50%;
25+
--warning-foreground: 0 0% 100%;
26+
--success: 87 100% 37%;
27+
--success-foreground: 0 0% 100%;
28+
}
29+
30+
.dark {
31+
--background: 240 10% 3.9%;
32+
--foreground: 0 0% 98%;
33+
--card: 240 10% 3.9%;
34+
--card-foreground: 0 0% 98%;
35+
--popover: 240 10% 3.9%;
36+
--popover-foreground: 0 0% 98%;
37+
--primary: 0 0% 98%;
38+
--primary-foreground: 240 5.9% 10%;
39+
--secondary: 240 3.7% 15.9%;
40+
--secondary-foreground: 0 0% 98%;
41+
--muted: 240 3.7% 15.9%;
42+
--muted-foreground: 240 5% 64.9%;
43+
--accent: 240 3.7% 15.9%;
44+
--accent-foreground: 0 0% 98%;
45+
--destructive: 0 62.8% 30.6%;
46+
--destructive-foreground: 0 0% 98%;
47+
--border: 240 3.7% 15.9%;
48+
--input: 240 3.7% 15.9%;
49+
--ring: 240 4.9% 83.9%;
50+
51+
/* ruby_ui especific */
52+
--warning: 38 92% 50%;
53+
--warning-foreground: 0 0% 100%;
54+
--success: 84 81% 44%;
55+
--success-foreground: 0 0% 100%;
56+
}
57+
58+
* {
59+
@apply border-border;
60+
}
61+
body {
62+
@apply bg-background text-foreground;
63+
font-feature-settings:
64+
"rlig" 1,
65+
"calt" 1;
66+
67+
/* docs specific */
68+
/* https://css-tricks.com/snippets/css/system-font-stack/ */
69+
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica,
70+
Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
71+
}

‎test/public/js/main.js‎

Lines changed: 73 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,73 @@
1+
const application = Stimulus.Application.start();
2+
3+
// Initialize Ruby UI with the Stimulus application
4+
RubyUI.initialize(application);
5+
6+
// const defaultTheme = require('tailwindcss/defaultTheme')
7+
8+
tailwind.config = {
9+
darkMode: ["class"],
10+
theme: {
11+
container: {
12+
center: true,
13+
padding: "2rem",
14+
screens: {
15+
"2xl": "1400px",
16+
},
17+
},
18+
extend: {
19+
colors: {
20+
border: "hsl(var(--border))",
21+
input: "hsl(var(--input))",
22+
ring: "hsl(var(--ring))",
23+
background: "hsl(var(--background))",
24+
foreground: "hsl(var(--foreground))",
25+
primary: {
26+
DEFAULT: "hsl(var(--primary))",
27+
foreground: "hsl(var(--primary-foreground))",
28+
},
29+
secondary: {
30+
DEFAULT: "hsl(var(--secondary))",
31+
foreground: "hsl(var(--secondary-foreground))",
32+
},
33+
destructive: {
34+
DEFAULT: "hsl(var(--destructive))",
35+
foreground: "hsl(var(--destructive-foreground))",
36+
},
37+
muted: {
38+
DEFAULT: "hsl(var(--muted))",
39+
foreground: "hsl(var(--muted-foreground))",
40+
},
41+
accent: {
42+
DEFAULT: "hsl(var(--accent))",
43+
foreground: "hsl(var(--accent-foreground))",
44+
},
45+
popover: {
46+
DEFAULT: "hsl(var(--popover))",
47+
foreground: "hsl(var(--popover-foreground))",
48+
},
49+
card: {
50+
DEFAULT: "hsl(var(--card))",
51+
foreground: "hsl(var(--card-foreground))",
52+
},
53+
warning: {
54+
DEFAULT: "hsl(var(--warning))",
55+
foreground: "hsl(var(--warning-foreground))",
56+
},
57+
success: {
58+
DEFAULT: "hsl(var(--success))",
59+
foreground: "hsl(var(--success-foreground))",
60+
},
61+
},
62+
borderRadius: {
63+
lg: "var(--radius)",
64+
md: "calc(var(--radius) - 2px)",
65+
sm: "calc(var(--radius) - 4px)",
66+
},
67+
// Font family without require
68+
fontFamily: {
69+
sans: ["var(--font-sans)", "ui-sans-serif", "system-ui", "-apple-system", "BlinkMacSystemFont", "Segoe UI", "Roboto", "Helvetica Neue", "Arial", "sans-serif"],
70+
},
71+
},
72+
},
73+
}

0 commit comments

Comments
 (0)