mirrors/forgejo
1
0
Fork 0
mirror of https://codeberg.org/forgejo/forgejo.git synced 2025-10-13 12:42:25 +00:00
Code Issues Projects Releases Packages Wiki Activity

feat: remove fomantic's tab module (#8587)

Browse source 
In similar vein of forgejo/forgejo#7416

- Fomantic's tab module is responsible for showing the right content when a tab is clicked upon. Most notably the Write/Preview tabs on the comment editor.
- Remove it and replace the javascript with our own function that is able to provide everything Forgejo needs.
- Replace the CSS with our own bare minimum CSS.
- No functionality or visual is affected by this replacement.
- E2E test added.

Reviewed-on: https://codeberg.org/forgejo/forgejo/pulls/8587
Reviewed-by: Otto <otto@codeberg.org>
Reviewed-by: 0ko <0ko@noreply.codeberg.org>
Co-authored-by: Gusted <postmaster@gusted.xyz>
Co-committed-by: Gusted <postmaster@gusted.xyz>
This commit is contained in:
Gusted 2025-07-21 22:33:17 +02:00 • committed by Gusted
commit 8e4f50a909
12 changed files with 123 additions and 1093 deletions
Download patch file Download diff file Expand all files Collapse all files

66
tests/e2e/image-diff.test.e2e.ts Normal file
View file

@ -0,0 +1,66 @@
// @watch start
// templates/repo/diff/**
// web_src/css/features/imagediff.css
// web_src/css/modules/tab.css
// web_src/js/modules/tab.ts
// @watch end
import {expect} from '@playwright/test';
import {save_visual, test, dynamic_id} from './utils_e2e.ts';
test.use({user: 'user2'});
test('Repository image diff', async ({page}) => {
// Generate a temporary SVG and edit it.
let response = await page.goto('/user2/repo1/_new/master', {waitUntil: 'domcontentloaded'});
expect(response?.status()).toBe(200);
const filename = `${dynamic_id()}.svg`;
await page.getByPlaceholder('Name your file…').fill(filename);
await page.locator('.monaco-editor').click();
await page.keyboard.type('<svg version="1.1" width="300" height="200" xmlns="http://www.w3.org/2000/svg"><circle cx="150" cy="100" r="80" fill="green" /></svg>\n');
await page.locator('.quick-pull-choice input[value="direct"]').click();
await page.getByRole('button', {name: 'Commit changes'}).click();
response = await page.goto(`/user2/repo1/_edit/master/${filename}`, {waitUntil: 'domcontentloaded'});
expect(response?.status()).toBe(200);
await page.locator('.monaco-editor').click();
await page.keyboard.press('Meta+KeyA');
await page.keyboard.type('<svg version="1.1" width="300" height="200" xmlns="http://www.w3.org/2000/svg"><circle cx="150" cy="100" r="80" fill="red" /></svg>\n');
await page.locator('.quick-pull-choice input[value="direct"]').click();
await page.getByRole('button', {name: 'Commit changes'}).click();
// Go to the commit page, where a image diff is shown.
await page.locator('.commit-summary a.default-link').click();
// Exhaustively test tabs works as expected
await expect(page.locator('.item[data-tab="diff-side-by-side-1"]')).toContainClass('active');
await expect(page.locator('.item[data-tab="diff-swipe-1"]')).not.toContainClass('active');
await expect(page.locator('.item[data-tab="diff-overlay-1"]')).not.toContainClass('active');
await expect(page.locator('.tab[data-tab="diff-side-by-side-1"]')).toBeVisible();
await expect(page.locator('.tab[data-tab="diff-swipe-1"]')).toBeHidden();
await expect(page.locator('.tab[data-tab="diff-overlay-1"]')).toBeHidden();
await save_visual(page);
await page.getByText('Swipe').click();
await expect(page.locator('.item[data-tab="diff-side-by-side-1"]')).not.toContainClass('active');
await expect(page.locator('.item[data-tab="diff-swipe-1"]')).toContainClass('active');
await expect(page.locator('.item[data-tab="diff-overlay-1"]')).not.toContainClass('active');
await expect(page.locator('.tab[data-tab="diff-side-by-side-1"]')).toBeHidden();
await expect(page.locator('.tab[data-tab="diff-swipe-1"]')).toBeVisible();
await expect(page.locator('.tab[data-tab="diff-overlay-1"]')).toBeHidden();
await save_visual(page);
await page.getByText('Overlay').click();
await expect(page.locator('.item[data-tab="diff-side-by-side-1"]')).not.toContainClass('active');
await expect(page.locator('.item[data-tab="diff-swipe-1"]')).not.toContainClass('active');
await expect(page.locator('.item[data-tab="diff-overlay-1"]')).toContainClass('active');
await expect(page.locator('.tab[data-tab="diff-side-by-side-1"]')).toBeHidden();
await expect(page.locator('.tab[data-tab="diff-swipe-1"]')).toBeHidden();
await expect(page.locator('.tab[data-tab="diff-overlay-1"]')).toBeVisible();
await save_visual(page);
});