test: separete pages to deprecated controls into smoke

.teamcity/settings.kts

@@ -262,7 +262,7 @@ object ReactUI_BuildRetailUi : BuildType({
 object ReactUI_LintTest : BuildType({
   name = "Lint/Test"
 
-  artifactRules = "packages/tests/smokeResources/reactUIcontrols.png => reactUIcontrols.zip"
+  artifactRules = "packages/react-ui-smoke-test/temp/*.png => smokeReactUI.zip"
 
   vcs {
     root(RetailUi)
@@ -287,7 +287,7 @@ object ReactUI_LintTest : BuildType({
     step {
       name = "Smoke test"
       type = "jonnyzzz.yarn"
-      param("yarn_commands", "workspace tests test")
+      param("yarn_commands", "workspace react-ui-smoke-test test")
     }
   }
 })

packages/react-ui-smoke-test/.gitignore

@@ -0,0 +1 @@
+temp

packages/tests/smokeResources/cra-template-react-ui/template.json → packages/react-ui-smoke-test/cra-template-react-ui/template.json

@@ -4,13 +4,9 @@
       "@testing-library/react": "^9.3.2",
       "@testing-library/jest-dom": "^4.2.4",
       "@testing-library/user-event": "^7.1.2",
-      "@types/node": "^12.0.0",
-      "@types/react": "^16.9.0",
-      "@types/react-dom": "^16.9.0",
-      "@types/jest": "^24.0.0",
       "typescript": "~3.7.4",
       "@skbkontur/react-icons": "^3.2.0",
-      "stylis-plugin-extra-scope": "^0.2.0"
+      "react-router-dom": "^5.1.2"
     }
   }
 }

packages/react-ui-smoke-test/cra-template-react-ui/template/src/App.tsx

@@ -0,0 +1,16 @@
+import React from 'react';
+
+import { BrowserRouter as Router, Route, Switch } from "react-router-dom";
+import { Components } from './Components';
+import { DeprecatedComponents } from './DeprecatedComponents';
+
+export default function App() {
+  return (
+    <Router>
+      <Switch>
+        <Route path="/deprecated"><DeprecatedComponents /></Route>
+        <Route path="/"><Components /></Route>
+      </Switch>
+    </Router>
+  )
+}

packages/tests/smokeResources/cra-template-react-ui/template/src/App.tsx → packages/react-ui-smoke-test/cra-template-react-ui/template/src/Components.tsx

@@ -10,7 +10,6 @@ import {MenuItem} from "@skbkontur/react-ui";
 import {MenuHeader} from "@skbkontur/react-ui";
 import {MenuSeparator} from "@skbkontur/react-ui";
 import {DropdownMenu} from "@skbkontur/react-ui";
-import {Fias, FiasSearch, FiasAPI } from "@skbkontur/react-ui";
 import {Checkbox} from "@skbkontur/react-ui";
 import {Autocomplete} from "@skbkontur/react-ui";
 import {FxInput} from "@skbkontur/react-ui";
@@ -23,7 +22,6 @@ import {Kebab} from "@skbkontur/react-ui";
 import {Toast} from "@skbkontur/react-ui";
 import {Link} from "@skbkontur/react-ui";
 import {Loader} from "@skbkontur/react-ui";
-import {Logotype} from "@skbkontur/react-ui";
 import {Modal} from "@skbkontur/react-ui";
 import {Paging} from "@skbkontur/react-ui";
 import {Radio} from "@skbkontur/react-ui";
@@ -41,12 +39,11 @@ import {Token} from "@skbkontur/react-ui";
 import {TokenInput, TokenInputType} from "@skbkontur/react-ui";
 import {Tooltip} from "@skbkontur/react-ui";
 import {TooltipMenu} from "@skbkontur/react-ui";
-import {TopBar} from "@skbkontur/react-ui";
 import {LocaleProvider, LangCodes} from "@skbkontur/react-ui";
 import {ThemeProvider} from "@skbkontur/react-ui";
 import {FLAT_THEME} from "@skbkontur/react-ui/lib/theming/themes/FlatTheme";
 
-const App = () => {
+export const Components = () => {
   Toast.push('Successfully saved', {
     label: 'Cancel',
     handler: () => Toast.push('Canceled'),
@@ -83,8 +80,7 @@ const App = () => {
         <MenuItem>Два</MenuItem>
         <MenuItem>Три</MenuItem>
       </DropdownMenu>
-      <Fias baseUrl={'https://api.kontur.ru/fias/v1/'} value={{}} onValueChange={() => {}} />
-      <FiasSearch api={new FiasAPI('https://api.kontur.ru/fias/v1/')} />
+
       <FxInput onValueChange={() => {}} />
       <Gapped><Button use="primary">Сохранить</Button><Button>Отмена</Button></Gapped>
       <Group><Button use="primary">Hey</Button><Button>Ma</Button></Group>
@@ -97,7 +93,6 @@ const App = () => {
       </Kebab>
       <Link>Enabled</Link>
       <Loader />
-      <Logotype suffix="экстерн" color="#F15600" />
       <MenuItem href="http://tech.skbkontur.ru/react-ui/" component={({ href, ...rest }) => <Link to={href} {...rest} />}>
         Awesome link
       </MenuItem>
@@ -137,19 +132,6 @@ const App = () => {
       <TooltipMenu caption={<Button use="primary">Открыть меню</Button>}>
         <MenuHeader>Заголовок меню</MenuHeader>
       </TooltipMenu>
-      <TopBar>
-        <TopBar.Start>
-          <TopBar.ItemStatic>
-            <Logotype suffix="ui" withWidget />
-          </TopBar.ItemStatic>
-          <TopBar.Item>s</TopBar.Item>
-        </TopBar.Start>
-        <TopBar.End>
-          <TopBar.User userName="Alexander The Great" />
-          <TopBar.Divider />
-          <TopBar.Logout onClick={() => alert('Logout!')} />
-        </TopBar.End>
-      </TopBar>
       <LocaleProvider langCode={LangCodes.en_GB}>
         <TokenInput
           type={TokenInputType.Combined}
@@ -162,5 +144,3 @@ const App = () => {
     </main>
   );
 };
-
-export default App;

packages/react-ui-smoke-test/cra-template-react-ui/template/src/DeprecatedComponents.tsx

@@ -0,0 +1,27 @@
+import React from "react";
+import { Fias, FiasAPI, FiasSearch, Logotype, TopBar } from '@skbkontur/react-ui';
+
+export class DeprecatedComponents extends React.Component<{}>{
+  public render() {
+    return (
+      <section>
+        <Fias baseUrl={'https://api.kontur.ru/fias/v1/'} value={{}} onValueChange={() => {}} />
+        <FiasSearch api={new FiasAPI('https://api.kontur.ru/fias/v1/')} />
+        <Logotype suffix="экстерн" color="#F15600" />
+        <TopBar>
+          <TopBar.Start>
+            <TopBar.ItemStatic>
+              <Logotype suffix="ui" withWidget />
+            </TopBar.ItemStatic>
+            <TopBar.Item>s</TopBar.Item>
+          </TopBar.Start>
+          <TopBar.End>
+            <TopBar.User userName="Alexander The Great" />
+            <TopBar.Divider />
+            <TopBar.Logout onClick={() => alert('Logout!')} />
+          </TopBar.End>
+        </TopBar>
+      </section>
+    )
+  }
+}

packages/tests/package.json → packages/react-ui-smoke-test/package.json

@@ -1,12 +1,10 @@
 {
-  "name": "tests",
+  "name": "react-ui-smoke-test",
   "version": "1.0.0",
-  "description": "",
-  "main": "index.js",
   "scripts": {
+    "pretest": "rimraf ./temp && mkdirp ./temp",
     "test": "cross-env BABEL_ENV=development jest"
   },
-  "author": "",
   "license": "ISC",
   "devDependencies": {
     "@babel/preset-typescript": "^7.8.3",
@@ -15,7 +13,9 @@
     "cross-env": "^7.0.0",
     "jest": "^25.1.0",
     "jest-teamcity-reporter": "^0.9.0",
+    "mkdirp": "^1.0.3",
     "puppeteer": "^2.1.1",
+    "rimraf": "^3.0.2",
     "wait-on": "^4.0.0"
   },
   "dependencies": {},

packages/tests/smoke.test.ts → packages/react-ui-smoke-test/smoke.test.ts

@@ -3,26 +3,26 @@ import fs from 'fs';
 import os from 'os'
 import { ChildProcess, spawn, execSync } from 'child_process';
 
-import puppeteer from 'puppeteer';
+import puppeteer, { Browser } from 'puppeteer';
 import waitOn from 'wait-on';
 
-describe('Smoke', () => {
+describe('React-ui smoke test', () => {
   let buildServerProcess: ChildProcess | undefined;
   const globalConsoleError = console.error;
   const runOnTeamcity = 'TEAMCITY_VERSION' in process.env;
 
-  const appName = 'test-app-temp';
-  const resourcesDirectory = path.join(__dirname, 'smokeResources');
-  const appDirectory = path.join(resourcesDirectory, appName);
+  const appName = 'test-app';
+  const tempDirectory = path.join(__dirname, 'temp');
+  const appDirectory = path.join(tempDirectory, appName);
+  const templateDirectory = path.join(__dirname, 'cra-template-react-ui');
 
   const reactUIPackagePath = runOnTeamcity
     ? getPackagePathOnTeamcity()
-    : path.join(resourcesDirectory, "react-ui.tgz");
+    : path.join(tempDirectory, "react-ui.tgz");
 
   beforeEach(() => {
     console.error = jest.fn(globalConsoleError);
 
-    clearApplicationFolder(appDirectory);
     if (!runOnTeamcity) {
       buildReactUI(reactUIPackagePath);
     }
@@ -36,9 +36,9 @@ describe('Smoke', () => {
   });
 
   it('Build and render all controls', async () => {
-    initApplication(resourcesDirectory, appDirectory, reactUIPackagePath);
+    initApplication(appDirectory, templateDirectory, reactUIPackagePath);
     buildServerProcess = runDevServer(appDirectory);
-    await openPageOnBrowser(resourcesDirectory);
+    await openPageOnBrowser(tempDirectory);
 
     expect(console.error).not.toBeCalled();
   }, 120000);
@@ -59,26 +59,19 @@ function buildReactUI(reactUIPackagePath: string) {
   );
 }
 
-function clearApplicationFolder(appDirectory: string) {
-  if (fs.existsSync(appDirectory)) {
-    execSync(`git clean ${appDirectory} -fdxq`, { stdio: 'inherit' });
-  }
-}
-
-function initApplication(resourcesDirectory: string, appDirectory: string, reactUIPackagePath: string) {
-  const craTemplateDirectory = path.join(resourcesDirectory, 'cra-template-react-ui');
-
+function initApplication(appDirectory: string, templateDirectory: string, reactUIPackagePath: string) {
   execSync(
-    `npx create-react-app@next ${appDirectory} --template file:${craTemplateDirectory}`,
+    `npx create-react-app@next ${appDirectory} --template file:${templateDirectory}`,
     { stdio: 'inherit' }
   );
 
   execSync(
-    `yarn install`,
+    `npm i @types/node @types/react @types/react-dom @types/jest -D`,
     { cwd: appDirectory, stdio: 'inherit' }
   );
 
-  // yarn save package in cache
+  // yarn save and get package from cache
+  // https://github.com/yarnpkg/yarn/issues/2165
   execSync(
     `npm install ${reactUIPackagePath}`,
     { cwd: appDirectory, stdio: 'inherit' }
@@ -99,39 +92,54 @@ function runDevServer(appFolder: string): ChildProcess {
     });
 }
 
-async function openPageOnBrowser(resourceDirectory: string) {
+async function openPageOnBrowser(tempDirectory: string) {
   const browser = await puppeteer.launch();
+
+  const applicationHost = `http://${os.hostname()}:3000`;
+  await waitOn({ resources: [applicationHost], timeout: 30000 });
+
+  const screenshotPath = path.join(tempDirectory, 'reactUIControls.png');
+  await goToPage(browser, applicationHost, screenshotPath);
+
+  const deprecatedPageUrl = `${applicationHost}/deprecated`;
+  const deprecatedScreenshotPath = path.join(tempDirectory, 'reactUIDeprecatedControls.png');
+  await goToPage(browser, deprecatedPageUrl, deprecatedScreenshotPath, true);
+
+  await browser.close();
+}
+
+async function goToPage(browser: Browser, url: string, screenshotPath: string, ignoreErrorAsWarning = false)  {
   const page = await browser.newPage();
 
   await page.setViewport({
-    width: 1920,
-    height: 1024,
-  });
+   width: 1920,
+   height: 1024,
+ });
 
   page.on('console', msg => {
     if (msg.type() === "error") {
+      if (ignoreErrorAsWarning && msg.text().startsWith("Warning: ")) {
+        return;
+      }
       console.error(`BROWSER: ${msg.text()}`);
     }
   });
 
   page.on('error', msg => {
-    console.error(`BROWSER: name: ${msg.name}\nmessage: ${msg.message}\nstack: ${msg.stack}`);
+   console.error(`BROWSER: name: ${msg.name}\nmessage: ${msg.message}\nstack: ${msg.stack}`);
   });
 
   page.on("pageerror", msg => {
     console.error(`BROWSER: name: ${msg.name}\nmessage: ${msg.message}\nstack: ${msg.stack}`);
   });
 
-  const applicationHost = `http://${os.hostname()}:3000/`;
-  await waitOn({ resources: [applicationHost], timeout: 30000 });
-  await page.goto(applicationHost);
-  await page.screenshot({ path: path.join(resourceDirectory, 'reactUIcontrols.png') });
+  await page.goto(url);
 
   if (await page.$(`#react-ui-page`) === null) {
-    console.error(`BROWSER: Failed to load controls page.`);
+    console.error(`BROWSER: Failed to load ${url} page.`);
   }
 
-  await browser.close();
+  await page.screenshot({ path: screenshotPath });
 }
 
 function getPackagePathOnTeamcity(): string {

tsconfig.json

@@ -20,6 +20,6 @@
     "**/styleguide",
     "**/build",
     "**/cra-template-react-ui",
-    "**/test-app-temp"
+    "**/test-app"
   ]
 }

yarn.lock

@@ -12003,6 +12003,11 @@ mkdirp@*, mkdirp@0.5.1, mkdirp@0.x, mkdirp@^0.5.0, mkdirp@^0.5.1, mkdirp@~0.5.1:
   dependencies:
     minimist "0.0.8"
 
+mkdirp@^1.0.3:
+  version "1.0.3"
+  resolved "https://registry.yarnpkg.com/mkdirp/-/mkdirp-1.0.3.tgz#4cf2e30ad45959dddea53ad97d518b6c8205e1ea"
+  integrity sha512-6uCP4Qc0sWsgMLy1EOqqS/3rjDHOEnsStVr/4vtAIK2Y5i2kA7lFFejYrpIyiN9w0pYf4ckeCYT9f1r1P9KX5g==
+
 mocha@^6.2.2:
   version "6.2.2"
   resolved "https://registry.yarnpkg.com/mocha/-/mocha-6.2.2.tgz#5d8987e28940caf8957a7d7664b910dc5b2fea20"
@@ -14982,6 +14987,13 @@ rimraf@^3.0.0:
   dependencies:
     glob "^7.1.3"
 
+rimraf@^3.0.2:
+  version "3.0.2"
+  resolved "https://registry.yarnpkg.com/rimraf/-/rimraf-3.0.2.tgz#f1a5402ba6220ad52cc1282bac1ae3aa49fd061a"
+  integrity sha512-JZkJMZkAGFFPP2YqXZXPbMlMBgsxzE8ILs4lMIX/2o0L9UBw9O/Y3o6wFw/i9YLapcUJWwqbi3kdxIPdC62TIA==
+  dependencies:
+    glob "^7.1.3"
+
 rimraf@~2.2.6:
   version "2.2.8"
   resolved "https://registry.yarnpkg.com/rimraf/-/rimraf-2.2.8.tgz#e439be2aaee327321952730f99a8929e4fc50582"