Skip to content

Commit

Permalink
Merge pull request #19 from BreadchainCoop/development
Browse files Browse the repository at this point in the history
Development
  • Loading branch information
subject026 authored Oct 26, 2023
2 parents f544e3e + d191a9f commit 810da82
Show file tree
Hide file tree
Showing 18 changed files with 551 additions and 130 deletions.
115 changes: 92 additions & 23 deletions .github/workflows/E2E.yml
Original file line number Diff line number Diff line change
Expand Up @@ -6,40 +6,109 @@ on:
branches: [development]

jobs:
test:
timeout-minutes: 60
linting:
name: ESLint
runs-on: ubuntu-latest
steps:
- uses: actions/checkout@v3
- name: Checkout
uses: actions/checkout@v3

- name: Setup pnpm
uses: pnpm/action-setup@v2
with:
version: 8.8.0

- name: Install Node.js
- name: Setup node
uses: actions/setup-node@v3
with:
node-version: 16
node-version: 18
cache: "pnpm"
# run: pnpm site install

- name: Install Dependencies
run: pnpm site install

- name: Lint
run: pnpm site run lint

- uses: pnpm/action-setup@v2
name: Install pnpm
id: pnpm-install
build:
name: Next Build
runs-on: ubuntu-latest
steps:
- name: Checkout repo
uses: actions/checkout@v3

- name: Setup pnpm
uses: pnpm/action-setup@v2
with:
version: 8.8.0

- name: Setup node
uses: actions/setup-node@v3
with:
version: 7
run_install: false
node-version: 18
cache: "pnpm"
# run: pnpm site install

- name: Get pnpm store directory
id: pnpm-cache
shell: bash
run: |
echo "STORE_PATH=$(pnpm store path)" >> $GITHUB_OUTPUT
# - name: Setup pnpm
# uses: pnpm/action-setup@v2
# with:
# version: 8.8.0

- uses: actions/cache@v3
name: Setup pnpm cache
- name: Install Dependencies
run: pnpm site install

- name: Run build
run: pnpm site run build

test:
name: Playwright Tests
runs-on: ubuntu-latest
steps:
- name: Checkout repo
uses: actions/checkout@v3

- name: Setup pnpm
uses: pnpm/action-setup@v2
with:
version: 8.8.0

- name: Setup node
uses: actions/setup-node@v3
with:
path: ${{ steps.pnpm-cache.outputs.STORE_PATH }}
key: ${{ runner.os }}-pnpm-store-${{ hashFiles('**/pnpm-lock.yaml') }}
restore-keys: |
${{ runner.os }}-pnpm-store-
node-version: 18
cache: "pnpm"
# run: pnpm site install

- name: Install Dependencies
run: pnpm install
run: pnpm site install

- name: Build Site
- name: Run build
run: pnpm site run build

# - name: Get pnpm store directory
# id: pnpm-cache
# shell: bash
# run: |
# echo "STORE_PATH=$(pnpm store path)" >> $GITHUB_OUTPUT

# - uses: actions/cache@v3
# name: Setup pnpm cache
# with:
# path: ${{ steps.pnpm-cache.outputs.STORE_PATH }}
# key: ${{ runner.os }}-pnpm-store-${{ hashFiles('**/pnpm-lock.yaml') }}
# restore-keys: |
# ${{ runner.os }}-pnpm-store-

- name: Install Playwright Browsers
run: pnpm site playwright install --with-deps

- name: Run Playwright tests
run: pnpm site playwright test

- uses: actions/upload-artifact@v3
if: always()
with:
name: playwright-report
path: playwright-report/
retention-days: 30
3 changes: 3 additions & 0 deletions apps/site/.gitignore
Original file line number Diff line number Diff line change
Expand Up @@ -19,3 +19,6 @@ pnpm-debug.log*

# macOS-specific files
.DS_Store
/test-results/
/playwright-report/
/playwright/.cache/
7 changes: 6 additions & 1 deletion apps/site/package.json
Original file line number Diff line number Diff line change
Expand Up @@ -7,7 +7,9 @@
"start": "astro dev",
"build": "astro build",
"preview": "astro preview",
"astro": "astro"
"astro": "astro",
"playwright": "playwright",
"playwright:test": "playwright test"
},
"dependencies": {
"@astrojs/image": "^0.14.1",
Expand All @@ -25,6 +27,9 @@
"zod": "^3.21.4"
},
"devDependencies": {
"@axe-core/playwright": "^4.8.1",
"@playwright/test": "^1.39.0",
"@types/node": "^20.8.9",
"prettier-plugin-astro": "^0.8.0",
"typescript": "4.9.5"
}
Expand Down
83 changes: 83 additions & 0 deletions apps/site/playwright.config.ts
Original file line number Diff line number Diff line change
@@ -0,0 +1,83 @@
import { defineConfig, devices } from "@playwright/test";

/**
* Read environment variables from file.
* https://github.com/motdotla/dotenv
*/
// require('dotenv').config();

/**
* See https://playwright.dev/docs/test-configuration.
*/
export default defineConfig({
testDir: "./tests",
/* Run tests in files in parallel */
fullyParallel: true,
/* Fail the build on CI if you accidentally left test.only in the source code. */
forbidOnly: !!process.env.CI,
/* Retry on CI only */
retries: process.env.CI ? 2 : 0,
/* Opt out of parallel tests on CI. */
workers: process.env.CI ? 1 : undefined,
/* Reporter to use. See https://playwright.dev/docs/test-reporters */
reporter: "html",
/* Shared settings for all the projects below. See https://playwright.dev/docs/api/class-testoptions. */
use: {
/* Base URL to use in actions like `await page.goto('/')`. */
baseURL: "http://localhost:3000",

/* Collect trace when retrying the failed test. See https://playwright.dev/docs/trace-viewer */
trace: "on-first-retry",
},

/* Configure projects for major browsers */
projects: [
{
name: "chromium",
use: { ...devices["Desktop Chrome"] },
},

{
name: "firefox",
use: { ...devices["Desktop Firefox"] },
},

{
name: "webkit",
use: { ...devices["Desktop Safari"] },
},

/* Test against mobile viewports. */
// {
// name: 'Mobile Chrome',
// use: { ...devices['Pixel 5'] },
// },
// {
// name: 'Mobile Safari',
// use: { ...devices['iPhone 12'] },
// },

/* Test against branded browsers. */
// {
// name: 'Microsoft Edge',
// use: { ...devices['Desktop Edge'], channel: 'msedge' },
// },
// {
// name: 'Google Chrome',
// use: { ...devices['Desktop Chrome'], channel: 'chrome' },
// },
],
webServer: {
command: "pnpm run preview",
url: "http://localhost:3000",
reuseExistingServer: !process.env.CI,
stdout: "ignore",
stderr: "pipe",
},
/* Run your local dev server before starting the tests */
// webServer: {
// command: 'npm run start',
// url: 'http://127.0.0.1:3000',
// reuseExistingServer: !process.env.CI,
// },
});
8 changes: 7 additions & 1 deletion apps/site/src/styles/base.css
Original file line number Diff line number Diff line change
Expand Up @@ -7,6 +7,12 @@
body {
@apply bg-breadgray-ultra-white dark:bg-breadgray-darkest;
@apply text-breadgray-charcoal dark:text-breadgray-white;
@apply font-redhat;
@apply font-redhat;
}
* {
@apply focus:outline focus:outline-4 focus:outline-green-400 focus:outline-offset-4 rounded ;
}
.transition-display {
transition: display 1000ms;
}
}
32 changes: 32 additions & 0 deletions apps/site/tests/example.spec.ts
Original file line number Diff line number Diff line change
@@ -0,0 +1,32 @@
import { test, expect } from "@playwright/test";
import AxeBuilder from "@axe-core/playwright";

test.describe("homepage", () => {
// test("has title", async ({ page }) => {
// await page.goto("/");

// await expect(page).toHaveTitle(/Breadchain/);
// });

test("should not have any automatically detectable accessibility issues", async ({
page,
}) => {
await page.goto("/"); // 3

const accessibilityScanResults = await new AxeBuilder({ page }).analyze(); // 4

expect(accessibilityScanResults.violations).toEqual([]); // 5
});
});

// test("should not have any automatically detectable WCAG A or AA violations", async ({
// page,
// }) => {
// await page.goto("/");

// const accessibilityScanResults = await new AxeBuilder({ page })
// .withTags(["wcag2a", "wcag2aa", "wcag21a", "wcag21aa"])
// .analyze();

// expect(accessibilityScanResults.violations).toEqual([]);
// });
2 changes: 1 addition & 1 deletion packages/site-ui/components/ButtonLink/ButtonLink.tsx
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
import React, { ReactNode } from "react";
import type { ReactNode } from "react";

interface IProps {
children: ReactNode;
Expand Down
6 changes: 5 additions & 1 deletion packages/site-ui/components/ColorToggle/ColorToggle.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -30,7 +30,11 @@ export function ColorToggle() {
return (
<section>
{colorMode && (
<button className="flex items-center gap-2" onClick={handleColorToggle}>
<button
aria-label="toggle light and dark mode"
className="flex items-center gap-2 px-4 py-2"
onClick={handleColorToggle}
>
<div
className={classNames(
"h-6 w-6",
Expand Down
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
import React, { ReactNode } from "react";
import type { ReactNode } from "react";

function DesktopNavigationLink(props: {
children: ReactNode;
Expand All @@ -9,7 +9,7 @@ function DesktopNavigationLink(props: {
const { children, ...remainingProps } = props;
return (
<a
className="font-redhat dark:text-breadgray-white dark:hover:text-breadgray-ultra-white text-breadgray-burnt hover:text-breadgray-charcoal active:text-breadgray-violet flex items-center px-2 text-xl font-bold leading-none tracking-wider min-[810px]:px-4"
className="font-redhat dark:text-breadgray-light-grey dark:hover:text-breadgray-white text-breadgray-toast hover:text-breadgray-burnt active:text-breadgray-violet flex items-center px-2 text-xl font-bold leading-none tracking-wider min-[810px]:px-4"
{...remainingProps}
>
{children}
Expand Down
Loading

0 comments on commit 810da82

Please sign in to comment.