diff --git a/projects/addon-doc/components/doc-tab/doc-tab.component.html b/projects/addon-doc/components/doc-tab/doc-tab.component.html new file mode 100644 index 000000000000..aa95750423fd --- /dev/null +++ b/projects/addon-doc/components/doc-tab/doc-tab.component.html @@ -0,0 +1,8 @@ +
+ logo + +
diff --git a/projects/addon-doc/components/doc-tab/doc-tab.component.less b/projects/addon-doc/components/doc-tab/doc-tab.component.less new file mode 100644 index 000000000000..3dff08a751c4 --- /dev/null +++ b/projects/addon-doc/components/doc-tab/doc-tab.component.less @@ -0,0 +1,14 @@ +.t-tab { + display: flex; + align-items: center; + justify-content: center; + padding: 0 0.5rem; + gap: 0.5rem; + color: var(--tui-text-01); + + .t-icon { + width: 1rem; + height: 1rem; + color: var(--tui-text-01); + } +} diff --git a/projects/addon-doc/components/doc-tab/doc-tab.component.ts b/projects/addon-doc/components/doc-tab/doc-tab.component.ts new file mode 100644 index 000000000000..40802544a4ff --- /dev/null +++ b/projects/addon-doc/components/doc-tab/doc-tab.component.ts @@ -0,0 +1,12 @@ +import {ChangeDetectionStrategy, Component, Input} from '@angular/core'; + +@Component({ + selector: 'tui-doc-tab', + templateUrl: './doc-tab.component.html', + styleUrls: ['./doc-tab.component.less'], + changeDetection: ChangeDetectionStrategy.OnPush, +}) +export class TuiDocTabComponent { + @Input() + src: string = ''; +} diff --git a/projects/addon-doc/components/doc-tab/doc-tab.module.ts b/projects/addon-doc/components/doc-tab/doc-tab.module.ts new file mode 100644 index 000000000000..39b8a2b82646 --- /dev/null +++ b/projects/addon-doc/components/doc-tab/doc-tab.module.ts @@ -0,0 +1,9 @@ +import {NgModule} from '@angular/core'; + +import {TuiDocTabComponent} from './doc-tab.component'; + +@NgModule({ + declarations: [TuiDocTabComponent], + exports: [TuiDocTabComponent], +}) +export class TuiDocTabModule {} diff --git a/projects/addon-doc/components/documentation/documentation.module.ts b/projects/addon-doc/components/documentation/documentation.module.ts index c44f584b0f17..a200575fe613 100644 --- a/projects/addon-doc/components/documentation/documentation.module.ts +++ b/projects/addon-doc/components/documentation/documentation.module.ts @@ -67,6 +67,7 @@ import {TuiDocTypeReferencePipe} from './pipes/type-reference.pipe'; TuiDocDocumentationPropertyConnectorDirective, ], exports: [ + TuiDocTypeReferencePipe, TuiDocDocumentationComponent, TuiDocDocumentationPropertyConnectorDirective, ], diff --git a/projects/addon-doc/components/index.ts b/projects/addon-doc/components/index.ts index 6dd67cae8878..06d997b7b48e 100644 --- a/projects/addon-doc/components/index.ts +++ b/projects/addon-doc/components/index.ts @@ -4,6 +4,8 @@ export * from './copy/copy.component'; export * from './copy/copy.module'; export * from './demo/demo.component'; export * from './demo/demo.module'; +export * from './doc-tab/doc-tab.component'; +export * from './doc-tab/doc-tab.module'; export * from './documentation/documentation.component'; export * from './documentation/documentation.module'; export * from './documentation/documentation-property-connector.directive'; diff --git a/projects/demo-cypress/cypress.config.ts b/projects/demo-cypress/cypress.config.ts index 4683c09d859f..fc83835afcba 100644 --- a/projects/demo-cypress/cypress.config.ts +++ b/projects/demo-cypress/cypress.config.ts @@ -1,9 +1,12 @@ /// +import {tuiAddSnapshotPlugin} from '@taiga-ui/testing/cypress/snapshot/plugin'; import {defineConfig} from 'cypress'; import { TUI_BLOCK_HOSTS as blockHosts, + TUI_CYPRESS_DESKTOP_VIEWPORT_HEIGHT, TUI_CYPRESS_DESKTOP_VIEWPORT_HEIGHT as viewportHeight, + TUI_CYPRESS_DESKTOP_VIEWPORT_WIDTH, TUI_CYPRESS_DESKTOP_VIEWPORT_WIDTH as viewportWidth, } from './cypress/cypress.options'; import {DEEP_PATHS} from './cypress/support/helpers/deep-paths'; @@ -77,8 +80,32 @@ export const TUI_CYPRESS_CONFIG: Cypress.ConfigOptions = { * We've imported your old cypress plugins here. * You may want to clean this up later by importing these. */ - setupNodeEvents(on: Cypress.PluginEvents, config: Cypress.PluginConfigOptions) { - return require(`./cypress/plugins/index.ts`).default(on, config); + async setupNodeEvents( + on: Cypress.PluginEvents, + config: Cypress.PluginConfigOptions, + ) { + await tuiAddSnapshotPlugin(on, config, { + newSnapshotMarkFn: oldFileName => `==new==${oldFileName}`, + newSnapshotMarkEnabled: config.baseUrl === `http://localhost:3333/`, + }); + + on(`before:browser:launch`, (browser, launchOptions) => { + if (browser.name === `chrome`) { + launchOptions.args.push( + `--font-render-hinting=none`, // prevent inconsistent text rendering in headless mode + `--window-size=${TUI_CYPRESS_DESKTOP_VIEWPORT_WIDTH},${TUI_CYPRESS_DESKTOP_VIEWPORT_HEIGHT}`, + `--force-device-scale-factor=2`, + `--high-dpi-support=1`, + `--force-prefers-reduced-motion`, + `--force-color-profile=srgb`, + `--disable-dev-shm-usage`, + `--disable-gpu`, + `--incognito`, + ); + } + + return launchOptions; + }); }, }, }; diff --git a/projects/demo-cypress/cypress/plugins/index.ts b/projects/demo-cypress/cypress/plugins/index.ts deleted file mode 100644 index de5453def30f..000000000000 --- a/projects/demo-cypress/cypress/plugins/index.ts +++ /dev/null @@ -1,35 +0,0 @@ -import { - TUI_CYPRESS_DESKTOP_VIEWPORT_HEIGHT, - TUI_CYPRESS_DESKTOP_VIEWPORT_WIDTH, -} from '@demo-cypress/cypress.options'; -import {tuiAddSnapshotPlugin} from '@taiga-ui/testing/cypress/snapshot/plugin'; -// don't change import to `@taiga-ui/testing/cypress` until merging of this PR -// https://github.com/jaredpalmer/cypress-image-snapshot/pull/250 - -export default async ( - on: Cypress.PluginEvents, - config: Cypress.PluginConfigOptions, -): Promise => { - await tuiAddSnapshotPlugin(on, config, { - newSnapshotMarkFn: oldFileName => `==new==${oldFileName}`, - newSnapshotMarkEnabled: config.baseUrl === `http://localhost:3333/`, - }); - - on(`before:browser:launch`, (browser, launchOptions) => { - if (browser.name === `chrome`) { - launchOptions.args.push( - `--font-render-hinting=none`, // prevent inconsistent text rendering in headless mode - `--window-size=${TUI_CYPRESS_DESKTOP_VIEWPORT_WIDTH},${TUI_CYPRESS_DESKTOP_VIEWPORT_HEIGHT}`, - `--force-device-scale-factor=2`, - `--high-dpi-support=1`, - `--force-prefers-reduced-motion`, - `--force-color-profile=srgb`, - `--disable-dev-shm-usage`, - `--disable-gpu`, - `--incognito`, - ); - } - - return launchOptions; - }); -}; diff --git a/projects/demo/src/assets/icons/cypress.svg b/projects/demo/src/assets/icons/cypress.svg new file mode 100644 index 000000000000..bfbd011505ad --- /dev/null +++ b/projects/demo/src/assets/icons/cypress.svg @@ -0,0 +1,49 @@ + + + + + + + + + + + + + + + + + + + diff --git a/projects/demo/src/assets/icons/playwright.svg b/projects/demo/src/assets/icons/playwright.svg new file mode 100644 index 000000000000..98d394776340 --- /dev/null +++ b/projects/demo/src/assets/icons/playwright.svg @@ -0,0 +1,30 @@ + + + + + + + + + diff --git a/projects/demo/src/modules/app/home/home.module.ts b/projects/demo/src/modules/app/home/home.module.ts index c66cadedf5e8..d11b4fad96c1 100644 --- a/projects/demo/src/modules/app/home/home.module.ts +++ b/projects/demo/src/modules/app/home/home.module.ts @@ -1,7 +1,7 @@ import {CommonModule} from '@angular/common'; import {NgModule} from '@angular/core'; import {RouterModule} from '@angular/router'; -import {TuiDocCodeModule} from '@taiga-ui/addon-doc'; +import {TuiDocCodeModule, TuiDocTabModule} from '@taiga-ui/addon-doc'; import {TuiLinkModule, TuiNotificationModule} from '@taiga-ui/core'; import {TuiIconModule} from '@taiga-ui/experimental'; import {TuiAccordionModule, TuiTabsModule} from '@taiga-ui/kit'; @@ -18,6 +18,7 @@ import {HomeComponent} from './home.component'; TuiAccordionModule, TuiTabsModule, TuiIconModule, + TuiDocTabModule, ], declarations: [HomeComponent], exports: [HomeComponent], diff --git a/projects/demo/src/modules/app/home/home.style.less b/projects/demo/src/modules/app/home/home.style.less index e45262aabc8a..edd08338c486 100644 --- a/projects/demo/src/modules/app/home/home.style.less +++ b/projects/demo/src/modules/app/home/home.style.less @@ -7,17 +7,3 @@ .tabs { z-index: 2; } - -.tab { - display: flex; - align-items: center; - justify-content: center; - padding: 0 0.5rem; - gap: 0.5rem; - - .icon { - width: 1rem; - height: 1rem; - color: var(--tui-text-01); - } -} diff --git a/projects/demo/src/modules/app/home/home.template.html b/projects/demo/src/modules/app/home/home.template.html index e39c038dfa8f..67daed4bb4aa 100644 --- a/projects/demo/src/modules/app/home/home.template.html +++ b/projects/demo/src/modules/app/home/home.template.html @@ -13,26 +13,13 @@

Automatic install Taiga UI (recommended)

*tuiItem tuiTab > -
- logo - Angular -
+ Angular Manual *tuiItem tuiTab > -
- logo - Main packages -
+ Main packages Manual *tuiItem tuiTab > -
- logo - angular.json -
+ angular.json @@ -283,28 +229,14 @@

Modules

*tuiItem tuiTab > -
- logo - app.module.ts -
+ app.module.ts @@ -338,40 +270,19 @@

Standalone

*tuiItem tuiTab > -
- logo - app.component.ts -
+ app.component.ts Standalone *tuiItem tuiTab > -
- logo - angular.json -
+ angular.json Update/migration Taiga UI *tuiItem tuiTab > -
- logo - Angular -
+ Angular

During integration testing you can face with problem of flaky tests caused by animation. It is especially - crucial if you are writing screenshot tests. -

- -

- For example, you want to make screenshot of dialog content: you click button which opens dialog and make - screenshot. Sometimes screenshots can be made too early (before dialog fully opens) and test fails. + crucial if you are writing screenshot tests. For example, you want to make screenshot of dialog content: you + click button which opens dialog and make screenshot. Sometimes screenshots can be made too early (before dialog + fully opens) and test fails.

@@ -15,32 +12,49 @@

- For example, we use - - Cypress - - for screenshot testing of our ui-kit components. + @taiga-ui/cdk + used + + + {{ ref.type }} + + + + token which disables all animations for taiga-ui components. That token based on + prefers-reduced-motion + . The prefers-reduced-motion CSS media feature is used to detect if a user has enabled a setting on their device + to minimize the amount of non-essential motion.. The setting is used to convey to the browser on the device that + the user prefers an interface that removes, reduces, or replaces motion-based animations.

-
    -
  1. - To detect if app is running under Cypress we use token - TUI_IS_CYPRESS - . -
    2. -
  2. - To disable animation in ALL Taiga UI components we use token - TUI_ANIMATIONS_DURATION - . -
    3. -
+ + + + + diff --git a/projects/demo/src/modules/info/testing/disable-animation/examples/cypress.md b/projects/demo/src/modules/info/testing/disable-animation/examples/cypress.md new file mode 100644 index 000000000000..72f7440f0ca0 --- /dev/null +++ b/projects/demo/src/modules/info/testing/disable-animation/examples/cypress.md @@ -0,0 +1,19 @@ +```ts +import {defineConfig} from 'cypress'; + +export default defineConfig({ + // setupNodeEvents can be defined in either + // the e2e or component configuration + e2e: { + setupNodeEvents(on, config) { + on('before:browser:launch', (browser = {}, launchOptions) => { + /* ... */ + + if (browser.name === `chrome`) { + launchOptions.args.push(`--force-prefers-reduced-motion`); + } + }); + }, + }, +}); +``` diff --git a/projects/demo/src/modules/info/testing/disable-animation/examples/disable-all-animation.md b/projects/demo/src/modules/info/testing/disable-animation/examples/disable-all-animation.md deleted file mode 100644 index 7d89c8808fd6..000000000000 --- a/projects/demo/src/modules/info/testing/disable-animation/examples/disable-all-animation.md +++ /dev/null @@ -1,18 +0,0 @@ -```ts -import {TUI_IS_CYPRESS} from '@taiga-ui/cdk'; -import {TUI_ANIMATIONS_DURATION} from '@taiga-ui/core'; - -// ... - -@NgModule({ - // ... - providers: [ - // ... - { - provide: TUI_ANIMATIONS_DURATION, - useFactory: () => (inject(TUI_IS_CYPRESS) ? 0 : 300), - }, - ], -}) -export class AppModule {} -``` diff --git a/projects/demo/src/modules/info/testing/disable-animation/examples/playwright.md b/projects/demo/src/modules/info/testing/disable-animation/examples/playwright.md new file mode 100644 index 000000000000..e6ae3030e93b --- /dev/null +++ b/projects/demo/src/modules/info/testing/disable-animation/examples/playwright.md @@ -0,0 +1,20 @@ +```ts +import {defineConfig, devices} from '@playwright/test'; + +export default defineConfig({ + // ... + use: { + // ... + contextOptions: { + reducedMotion: `reduce`, + }, + }, + expect: { + toHaveScreenshot: { + animations: `disabled`, + caret: `hide`, + scale: `device`, + }, + }, +}); +```