Skip to content
This repository has been archived by the owner on Jan 20, 2025. It is now read-only.

Commit

Permalink
Merge branch 'main' into github-action
Browse files Browse the repository at this point in the history
  • Loading branch information
Twissi committed Feb 19, 2024
2 parents d956c2e + 2716862 commit 413c738
Show file tree
Hide file tree
Showing 11 changed files with 815 additions and 480 deletions.
4 changes: 4 additions & 0 deletions .gitignore
Original file line number Diff line number Diff line change
Expand Up @@ -23,3 +23,7 @@ pnpm-debug.log*
.env.local
/.direnv/
/.envrc
/test-results/
/playwright-report/
/blob-report/
/playwright/.cache/
13 changes: 7 additions & 6 deletions README.md
Original file line number Diff line number Diff line change
Expand Up @@ -38,12 +38,13 @@ Alle Kommandos werden vom Root-Verzeichnet, über den Terminal, ausgeführt.

Alle Kommandos werden vom Root-Verzeichnet, über den Terminal, ausgeführt:

| Command | Action |
| :---------------- | :----------------------------------------------------- |
| `npm install` | Installieren der NPM-Pakete |
| `npm run dev` | Starten des lokalen Dev-Servers unter `localhost:3000` |
| `npm run build` | Bauen der Webseite für Produktion in `./dist/` |
| `npm run preview` | Vorschau der lokal gebauten Webseite, vor dem Deployen |
| Command | Action |
| :----------------- | :----------------------------------------------------- |
| `npm install` | Installieren der NPM-Pakete |
| `npm run dev` | Starten des lokalen Dev-Servers unter `localhost:3000` |
| `npm run build` | Bauen der Webseite für Produktion in `./dist/` |
| `npm run preview` | Vorschau der lokal gebauten Webseite, vor dem Deployen |
| `npm run test:e2e` | End to end test laufen lassen |

### Nix, Flake, Justfile

Expand Down
984 changes: 545 additions & 439 deletions package-lock.json

Large diffs are not rendered by default.

5 changes: 4 additions & 1 deletion package.json
Original file line number Diff line number Diff line change
Expand Up @@ -7,7 +7,8 @@
"start": "astro check && tsc --noEmit && astro build",
"build": "astro build",
"preview": "astro preview",
"astro": "astro"
"astro": "astro",
"test:e2e": "playwright test"
},
"dependencies": {
"astro": "^2.0.14"
Expand All @@ -17,6 +18,8 @@
"@fortawesome/free-brands-svg-icons": "^6.3.0",
"@fortawesome/free-regular-svg-icons": "^6.3.0",
"@fortawesome/free-solid-svg-icons": "^6.3.0",
"@playwright/test": "^1.41.2",
"@types/node": "^20.11.19",
"airtable": "^0.11.6",
"bulma": "^0.9.4",
"chalk": "^5.2.0",
Expand Down
77 changes: 77 additions & 0 deletions playwright.config.ts
Original file line number Diff line number Diff line change
@@ -0,0 +1,77 @@
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://127.0.0.1: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' },
// },
],

/* Run your local dev server before starting the tests */
webServer: {
command: 'npm run dev',
url: 'http://127.0.0.1:3000',
reuseExistingServer: !process.env.CI,
},
});
60 changes: 44 additions & 16 deletions src/data/sampleData.ts
Original file line number Diff line number Diff line change
Expand Up @@ -5,18 +5,18 @@ export const sampleData: Resource[] = [
id: "123",
createdTime: "2023-02-21T10:09:32.000Z",
fields: {
name: "Test Titel",
name: "Entry 1 Titel",
public: true,
new: true,
brand: "",
description:
"Wir bieten Workshops für Frauen an die Lust auf programmieren haben.",
tags: ["Vorbilder", "Streamer"],
website: "https://www.meinewebseite.de",
twitter: "https://twitter.com/xyza",
instagram: "https://instagram.com/xyza",
youtube: "http://www.youtube.com/c/xyz",
twitch: "https://www.twitch.tv/xyz",
"Entry 1 Description",
tags: ["lokale Angebote", "Konferenz"],
website: "https://www.entry1.de",
twitter: "https://twitter.com/entry1",
instagram: "https://instagram.com/entry1",
youtube: "http://www.youtube.com/c/entry1",
twitch: "https://www.twitch.tv/entry1",
facebook: "",
newsletter: "",
tikTok: "",
Expand All @@ -40,18 +40,18 @@ export const sampleData: Resource[] = [
id: "123",
createdTime: "2023-02-21T10:09:32.000Z",
fields: {
name: "Test Titel2",
name: "Entry 2 Title",
public: true,
new: false,
brand: "",
description:
"Wir bieten Workshops für Frauen an die Lust auf programmieren haben.",
tags: ["Vorbilder", "Streamer"],
website: "https://www.meinewebseite.de",
twitter: "https://twitter.com/xyza",
instagram: "https://instagram.com/xyza",
youtube: "http://www.youtube.com/c/xyz",
twitch: "https://www.twitch.tv/xyz",
"Entry 2 Description",
tags: ["Konferenz", "Initiative"],
website: "https://www.entry2.de",
twitter: "https://twitter.com/entry2",
instagram: "https://instagram.com/entry2",
youtube: "http://www.youtube.com/c/entry2",
twitch: "https://www.twitch.tv/entry2",
facebook: "",
newsletter: "",
tikTok: "",
Expand All @@ -75,7 +75,35 @@ export const sampleData: Resource[] = [
id: "123",
createdTime: "2023-02-21T10:09:32.000Z",
fields: {
name: "Entry 3 Title",
public: true,
new: false,
brand: "",
description:
"Entry 3 Description",
tags: ["Hackspace", "Netzwerk"],
website: "https://www.entry3.de",
twitter: "https://twitter.com/entry3",
instagram: "https://instagram.com/entry3",
youtube: "http://www.youtube.com/c/entry3",
twitch: "https://www.twitch.tv/entry3",
facebook: "",
newsletter: "",
tikTok: "",
podcast: "",
telegram: "",
meetup: "",
linkedin: "",
discord: "",
email: "",
blog: "",
book: "",
region: "Deutschland",
cities: ["Leipzig"],
language: ["EN"],
audience: ["adults"],
"create date": "2021-02-12",
"update date": "2021-02-12",
},
},
];
2 changes: 1 addition & 1 deletion src/pages/index.astro
Original file line number Diff line number Diff line change
Expand Up @@ -17,7 +17,7 @@ let { results, newResults } = await getEntries();
<div class="column">
<Filter />
</div>
<div class="column is-two-thirds">
<div class="column is-two-thirds" data-testid="cards">
{
newResults.map((result) => {
return (
Expand Down
12 changes: 6 additions & 6 deletions src/scripts/airtable.ts
Original file line number Diff line number Diff line change
Expand Up @@ -19,14 +19,14 @@ const discardedFields = [
"update date",
];

Airtable.configure({
endpointUrl: "https://api.airtable.com",
apiKey: import.meta.env.SECRET_AIRTABLE_ACCESS_TOKEN,
});
const fetchData = async () => {
Airtable.configure({
endpointUrl: "https://api.airtable.com",
apiKey: import.meta.env.SECRET_AIRTABLE_ACCESS_TOKEN,
});

const base = Airtable.base("appk277pk5PlGpVFt");
const base = Airtable.base("appk277pk5PlGpVFt");

const fetchData = async () => {
return new Promise<Resource[]>((resolve, reject) => {
// https://airtable.com/appk277pk5PlGpVFt/api/docs#curl/table:resources
let data: Resource[] = [];
Expand Down
35 changes: 24 additions & 11 deletions src/scripts/filter.ts
Original file line number Diff line number Diff line change
Expand Up @@ -26,8 +26,26 @@ const addSelectionPill = (ele: Element) => {
selectionContainer.append(selectionPill);
};

const showCards = (cardsArray: Element[]) => {
cardsArray.forEach((card) => {
card.classList.remove("is-hidden");
});
}

const hideCards = (cardsArray: Element[]) => {
cardsArray.forEach((card) => {
card.classList.add("is-hidden");
});
}

const filterCards = () => {
let cardsArray = Array.from(cards);
let allCards = Array.from(cards);
let filteredCards = allCards;

if (selectedTags.length === 0) {
showCards(allCards);
return
}

if (selectedTags.length > 0) {
const languageSelection = selectedTags.filter((ele) => {
Expand All @@ -42,12 +60,8 @@ const filterCards = () => {
return ele.getAttribute("data-group") === "tag";
});

cardsArray.forEach((card) => {
card.classList.add("is-hidden");
});

if (languageSelection.length > 0) {
cardsArray = cardsArray.filter((card) => {
filteredCards = allCards.filter((card) => {
const cardLanguage = card.getAttribute("data-language").split(",");
return languageSelection.some((tag) =>
cardLanguage.includes(tag.getAttribute("data-filter"))
Expand All @@ -56,7 +70,7 @@ const filterCards = () => {
}

if (audienceSelection.length > 0) {
cardsArray = cardsArray.filter((card) => {
filteredCards = filteredCards.filter((card) => {
const cardAudience = card.getAttribute("data-audience").split(",");
return audienceSelection.some((tag) =>
cardAudience.includes(tag.getAttribute("data-filter"))
Expand All @@ -65,17 +79,16 @@ const filterCards = () => {
}

if (tagSelection.length > 0) {
cardsArray = cardsArray.filter((card) => {
filteredCards = filteredCards.filter((card) => {
const cardTags = card.getAttribute("data-tags").split(",");
return tagSelection.some((tag) =>
cardTags.includes(tag.getAttribute("data-filter"))
);
});
}

cardsArray.forEach((card) => {
card.classList.remove("is-hidden");
});
hideCards(allCards);
showCards(filteredCards);
}
};

Expand Down
82 changes: 82 additions & 0 deletions tests/filter-entries.spec.ts
Original file line number Diff line number Diff line change
@@ -0,0 +1,82 @@
import { test, expect } from '@playwright/test';

test('filter by single interest', async ({ page }) => {
await page.goto('/');

const card1 = page.getByTestId('cards').locator('div').filter({ hasText: 'Entry 1' }).first()
const card2 = page.getByTestId('cards').locator('div').filter({ hasText: 'Entry 2' }).first()
const card3 = page.getByTestId('cards').locator('div').filter({ hasText: 'Entry 3' }).first()

await page.locator('span').filter({ hasText: 'Initiativen' }).click();
await expect(card1).not.toBeVisible();
await expect(card2).toBeVisible();
await expect(card3).not.toBeVisible();

await page.locator('#my-selection-selector').getByText('Initiativen').click();
await expect(card1).toBeVisible();
await expect(card2).toBeVisible();
await expect(card3).toBeVisible();
});

test('filter by single interest no match', async ({ page }) => {
await page.goto('/');

const card1 = page.getByTestId('cards').locator('div').filter({ hasText: 'Entry 1' }).first()
const card2 = page.getByTestId('cards').locator('div').filter({ hasText: 'Entry 2' }).first()
const card3 = page.getByTestId('cards').locator('div').filter({ hasText: 'Entry 3' }).first()

await page.locator('span').filter({ hasText: 'Karriere' }).click();

await expect(card1).not.toBeVisible();
await expect(card2).not.toBeVisible();
await expect(card3).not.toBeVisible();

await page.locator('#my-selection-selector').getByText('Karriere').click();
await expect(card1).toBeVisible();
await expect(card2).toBeVisible();
await expect(card3).toBeVisible();
});

test('filter by multiple interests', async ({ page }) => {
await page.goto('/');

const card1 = page.getByTestId('cards').locator('div').filter({ hasText: 'Entry 1' }).first()
const card2 = page.getByTestId('cards').locator('div').filter({ hasText: 'Entry 2' }).first()
const card3 = page.getByTestId('cards').locator('div').filter({ hasText: 'Entry 3' }).first()

await page.locator('span').filter({ hasText: 'Initiativen' }).click();
await page.locator('span').filter({ hasText: 'Konferenzen' }).click();

await expect(card1).toBeVisible();
await expect(card2).toBeVisible();
await expect(card3).not.toBeVisible();

await page.locator('#my-selection-selector').getByText('Initiativen').click();
await page.locator('#my-selection-selector').getByText('Konferenzen').click();

await expect(card1).toBeVisible();
await expect(card2).toBeVisible();
await expect(card3).toBeVisible();
});

test('filter by multiple interests no match', async ({ page }) => {
await page.goto('/');

const card1 = page.getByTestId('cards').locator('div').filter({ hasText: 'Entry 1' }).first()
const card2 = page.getByTestId('cards').locator('div').filter({ hasText: 'Entry 2' }).first()
const card3 = page.getByTestId('cards').locator('div').filter({ hasText: 'Entry 3' }).first()

await page.locator('span').filter({ hasText: 'Communities' }).click();
await page.locator('span').filter({ hasText: 'Sichtbarkeit' }).click();

await expect(card1).not.toBeVisible();
await expect(card2).not.toBeVisible();
await expect(card3).not.toBeVisible();

await page.locator('#my-selection-selector').getByText('Communities').click();
await page.locator('#my-selection-selector').getByText('Sichtbarkeit').click();

await expect(card1).toBeVisible();
await expect(card2).toBeVisible();
await expect(card3).toBeVisible();
});
Loading

0 comments on commit 413c738

Please sign in to comment.