-
Notifications
You must be signed in to change notification settings - Fork 10
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
feat(workbench): propagate color scheme to embedded content
- Loading branch information
1 parent
41be222
commit 276fcf3
Showing
20 changed files
with
245 additions
and
22 deletions.
There are no files selected for viewing
2 changes: 1 addition & 1 deletion
2
apps/workbench-testing-app/src/app/header/header.component.html
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
9 changes: 9 additions & 0 deletions
9
...app/src/app/test-pages/workbench-theme-test-page/workbench-theme-test-page.component.html
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,9 @@ | ||
<section *ngIf="workbenchService.theme$ | async as theme"> | ||
<sci-form-field label="Theme"> | ||
<span class="e2e-theme">{{theme.name}}</span> | ||
</sci-form-field> | ||
|
||
<sci-form-field label="Color Scheme"> | ||
<span class="e2e-color-scheme">{{theme.colorScheme}}</span> | ||
</sci-form-field> | ||
</section> |
13 changes: 13 additions & 0 deletions
13
...app/src/app/test-pages/workbench-theme-test-page/workbench-theme-test-page.component.scss
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,13 @@ | ||
:host { | ||
display: block; | ||
padding: 1em; | ||
|
||
> section { | ||
display: flex; | ||
flex-direction: column; | ||
gap: .5em; | ||
border: 1px solid var(--sci-color-border); | ||
border-radius: var(--sci-corner); | ||
padding: 1em; | ||
} | ||
} |
31 changes: 31 additions & 0 deletions
31
...g-app/src/app/test-pages/workbench-theme-test-page/workbench-theme-test-page.component.ts
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,31 @@ | ||
/* | ||
* Copyright (c) 2018-2023 Swiss Federal Railways | ||
* | ||
* This program and the accompanying materials are made | ||
* available under the terms of the Eclipse Public License 2.0 | ||
* which is available at https://www.eclipse.org/legal/epl-2.0/ | ||
* | ||
* SPDX-License-Identifier: EPL-2.0 | ||
*/ | ||
|
||
import {Component} from '@angular/core'; | ||
import {SciFormFieldComponent} from '@scion/components.internal/form-field'; | ||
import {AsyncPipe, NgIf} from '@angular/common'; | ||
import {WorkbenchService} from '@scion/workbench'; | ||
|
||
@Component({ | ||
selector: 'app-workbench-theme-test-page', | ||
templateUrl: './workbench-theme-test-page.component.html', | ||
styleUrls: ['./workbench-theme-test-page.component.scss'], | ||
standalone: true, | ||
imports: [ | ||
NgIf, | ||
AsyncPipe, | ||
SciFormFieldComponent, | ||
], | ||
}) | ||
export default class WorkbenchThemeTestPageComponent { | ||
|
||
constructor(public workbenchService: WorkbenchService) { | ||
} | ||
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
11 changes: 11 additions & 0 deletions
11
projects/scion/e2e-testing/src/@scion/components.internal/toggle-button.po/index.ts
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,11 @@ | ||
/* | ||
* Copyright (c) 2018-2023 Swiss Federal Railways | ||
* | ||
* This program and the accompanying materials are made | ||
* available under the terms from the Eclipse Public License 2.0 | ||
* which is available at https://www.eclipse.org/legal/epl-2.0/ | ||
* | ||
* SPDX-License-Identifier: EPL-2.0 | ||
*/ | ||
|
||
export * from './toggle-button.po'; |
29 changes: 29 additions & 0 deletions
29
...cts/scion/e2e-testing/src/@scion/components.internal/toggle-button.po/toggle-button.po.ts
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,29 @@ | ||
/* | ||
* Copyright (c) 2018-2023 Swiss Federal Railways | ||
* | ||
* This program and the accompanying materials are made | ||
* available under the terms from the Eclipse Public License 2.0 | ||
* which is available at https://www.eclipse.org/legal/epl-2.0/ | ||
* | ||
* SPDX-License-Identifier: EPL-2.0 | ||
*/ | ||
|
||
import {Locator} from '@playwright/test'; | ||
|
||
/** | ||
* Page object for {@link SciToggleButtonComponent}. | ||
*/ | ||
export class SciToggleButtonPO { | ||
|
||
private _inputLocator: Locator; | ||
|
||
constructor(private _locator: Locator) { | ||
this._inputLocator = this._locator.locator('input[type="checkbox"]'); | ||
} | ||
|
||
public async toggle(on: boolean): Promise<void> { | ||
if (await this._inputLocator.isChecked() !== on) { | ||
await this._locator.click(); | ||
} | ||
} | ||
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
40 changes: 40 additions & 0 deletions
40
...ts/scion/e2e-testing/src/workbench/page-object/test-pages/workbench-theme-test-page.po.ts
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,40 @@ | ||
/* | ||
* Copyright (c) 2018-2023 Swiss Federal Railways | ||
* | ||
* This program and the accompanying materials are made | ||
* available under the terms of the Eclipse Public License 2.0 | ||
* which is available at https://www.eclipse.org/legal/epl-2.0/ | ||
* | ||
* SPDX-License-Identifier: EPL-2.0 | ||
*/ | ||
|
||
import {AppPO} from '../../../app.po'; | ||
import {Locator} from '@playwright/test'; | ||
import {WorkbenchNavigator} from '../../workbench-navigator'; | ||
import {RouterPagePO} from '../router-page.po'; | ||
|
||
export class WorkbenchThemeTestPagePO { | ||
|
||
public readonly locator: Locator; | ||
|
||
public readonly theme: Locator; | ||
public readonly colorScheme: Locator; | ||
|
||
constructor(private _appPO: AppPO, viewId: string) { | ||
this.locator = this._appPO.view({viewId}).locate('app-workbench-theme-test-page'); | ||
|
||
this.theme = this.locator.locator('span.e2e-theme'); | ||
this.colorScheme = this.locator.locator('span.e2e-color-scheme'); | ||
} | ||
|
||
public static async openInNewTab(appPO: AppPO, workbenchNavigator: WorkbenchNavigator): Promise<WorkbenchThemeTestPagePO> { | ||
const routerPage = await workbenchNavigator.openInNewTab(RouterPagePO); | ||
await routerPage.enterPath('test-pages/workbench-theme-test-page'); | ||
await routerPage.enterTarget(routerPage.viewId); | ||
await routerPage.clickNavigate(); | ||
|
||
const view = appPO.view({cssClass: 'e2e-test-workbench-theme', viewId: routerPage.viewId}); | ||
await view.waitUntilAttached(); | ||
return new WorkbenchThemeTestPagePO(appPO, await view.getViewId()); | ||
} | ||
} |
42 changes: 42 additions & 0 deletions
42
projects/scion/e2e-testing/src/workbench/workbench-theme.e2e-spec.ts
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,42 @@ | ||
/* | ||
* Copyright (c) 2018-2023 Swiss Federal Railways | ||
* | ||
* This program and the accompanying materials are made | ||
* available under the terms of the Eclipse Public License 2.0 | ||
* which is available at https://www.eclipse.org/legal/epl-2.0/ | ||
* | ||
* SPDX-License-Identifier: EPL-2.0 | ||
*/ | ||
|
||
import {expect} from '@playwright/test'; | ||
import {test} from '../fixtures'; | ||
import {WorkbenchThemeTestPagePO} from './page-object/test-pages/workbench-theme-test-page.po'; | ||
|
||
test.describe('Workbench', () => { | ||
|
||
test('should provide light and dark theme', async ({appPO, workbenchNavigator}) => { | ||
await appPO.navigateTo({microfrontendSupport: false}); | ||
|
||
const testPage = await WorkbenchThemeTestPagePO.openInNewTab(appPO, workbenchNavigator); | ||
|
||
await test.step('light theme', async () => { | ||
await appPO.changeColorScheme('light'); | ||
|
||
await expect(testPage.theme).toHaveText('scion-light'); | ||
await expect(testPage.colorScheme).toHaveText('light'); | ||
|
||
await expect(appPO.workbenchLocator).toHaveCSS('background-color', 'rgb(255, 255, 255)'); | ||
await expect(appPO.workbenchLocator).toHaveCSS('color-scheme', 'light'); | ||
}); | ||
|
||
await test.step('dark theme', async () => { | ||
await appPO.changeColorScheme('dark'); | ||
|
||
await expect(testPage.theme).toHaveText('scion-dark'); | ||
await expect(testPage.colorScheme).toHaveText('dark'); | ||
|
||
await expect(appPO.workbenchLocator).toHaveCSS('background-color', 'rgb(29, 29, 29)'); | ||
await expect(appPO.workbenchLocator).toHaveCSS('color-scheme', 'dark'); | ||
}); | ||
}); | ||
}); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Oops, something went wrong.