ci: run react-ui smoke test

skbkontur · Feb 14, 2020 · 8eb3e67 · 8eb3e67
1 parent 1c88495
commit 8eb3e67
Show file tree

Hide file tree

Showing 6 changed files with 54 additions and 27 deletions.
diff --git a/.teamcity/settings.kts b/.teamcity/settings.kts
@@ -262,6 +262,8 @@ object ReactUI_BuildRetailUi : BuildType({
 object ReactUI_LintTest : BuildType({
   name = "Lint/Test"
 
+  artifactRules = "packages/tests/smoke/reactUIcontrols.png => reactUIcontrols.png"
+
   vcs {
     root(RetailUi)
   }
@@ -282,6 +284,11 @@ object ReactUI_LintTest : BuildType({
       type = "jonnyzzz.yarn"
       param("yarn_commands", "workspace @skbkontur/react-ui test")
     }
+    step {
+      name = "Smoke test"
+      type = "jonnyzzz.yarn"
+      param("yarn_commands", "workspace tests test")
+    }
   }
 })
 

diff --git a/packages/tests/smoke/cra-template-react-ui/package.json b/packages/tests/smoke/cra-template-react-ui/package.json
@@ -11,7 +11,7 @@
   "main": "template.json",
   "license": "MIT",
   "engines": {
-    "node": ">=12.0"
+    "node": ">=10.0"
   },
   "files": [
     "template",

diff --git a/packages/tests/smoke/cra-template-react-ui/template/public/index.html b/packages/tests/smoke/cra-template-react-ui/template/public/index.html
@@ -8,7 +8,7 @@
   </head>
   <body>
     <noscript>You need to enable JavaScript to run this app.</noscript>
-    <div id="retail-ui-page"></div>
+    <div id="react-ui-page"></div>
     <div id="root"></div>
   </body>
 </html>
diff --git a/packages/tests/smoke/cra-template-react-ui/template/src/App.tsx b/packages/tests/smoke/cra-template-react-ui/template/src/App.tsx
@@ -44,11 +44,7 @@ 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 {Theme} from "@skbkontur/react-ui/lib/theming/Theme";
-import flatTheme from "@skbkontur/react-ui/lib/theming/themes/FlatTheme";
-
-// @ts-ignore
-const typedFlatTheme: Theme = flatTheme;
+import {FLAT_THEME} from "@skbkontur/react-ui/lib/theming/themes/FlatTheme";
 
 const App = () => {
   Toast.push('Successfully saved', {
@@ -58,16 +54,16 @@ const App = () => {
 
   return (
     <main>
-      <Autocomplete source={[]} value={""} onChange={() => {}}/>
+      <Autocomplete source={[]} value={""} onValueChange={() => {}}/>
       <Button>Кнопка</Button>
       <Center style={{ background: '#fdd', height: 150 }}>
         <div style={{ background: 'black', width: 30, height: 30 }} />
       </Center>
-      <Checkbox checked={false} onChange={() => {}}>Checkbox</Checkbox>
+      <Checkbox checked={false} onValueChange={() => {}}>Checkbox</Checkbox>
       <ComboBox getItems={ q => Promise.resolve([{ value: 1, label: 'First' }])} />
       <CurrencyLabel value={12356.1} currencySymbol={'₽'} />
-      <DateInput onChange={() => {}} />
-      <DatePicker value={""} onChange={() => {}} />
+      <DateInput />
+      <DatePicker value={""} onValueChange={() => {}} />
       <Dropdown caption="Click">
         <MenuItem onClick={() => alert('Clack')}>Clack</MenuItem>
         <MenuSeparator />
@@ -87,9 +83,9 @@ const App = () => {
         <MenuItem>Два</MenuItem>
         <MenuItem>Три</MenuItem>
       </DropdownMenu>
-      <Fias baseUrl={'https://api.kontur.ru/fias/v1/'} value={{}} onChange={() => {}} />
+      <Fias baseUrl={'https://api.kontur.ru/fias/v1/'} value={{}} onValueChange={() => {}} />
       <FiasSearch api={new FiasAPI('https://api.kontur.ru/fias/v1/')} />
-      <FxInput onChange={() => {}} />
+      <FxInput onValueChange={() => {}} />
       <Gapped><Button use="primary">Сохранить</Button><Button>Отмена</Button></Gapped>
       <Group><Button use="primary">Hey</Button><Button>Ma</Button></Group>
       <Hint text="World">Hello</Hint>
@@ -115,7 +111,7 @@ const App = () => {
         <Radio value="value" />
       </RadioGroup>
       <ScrollContainer>scroll container</ScrollContainer>
-      <Select onChange={() => {}} />
+      <Select onValueChange={() => {}} />
       <SidePage>
         <SidePage.Header />
         <SidePage.Body>
@@ -160,7 +156,7 @@ const App = () => {
           getItems={q => Promise.resolve(['First'])}
         />
       </LocaleProvider>
-      <ThemeProvider value={typedFlatTheme}>
+      <ThemeProvider value={FLAT_THEME}>
         <Input />
       </ThemeProvider>
     </main>

diff --git a/packages/tests/smoke/cra-template-react-ui/template/src/index.tsx b/packages/tests/smoke/cra-template-react-ui/template/src/index.tsx
@@ -1,6 +1,5 @@
 import React from 'react';
 import ReactDOM from 'react-dom';
-import './index.css';
 import App from './App';
 import * as serviceWorker from './serviceWorker';
 

diff --git a/packages/tests/smoke/smoke.test.ts b/packages/tests/smoke/smoke.test.ts
@@ -1,19 +1,20 @@
 import path from 'path';
 import fs from 'fs';
+import os from 'os'
 import { ChildProcess, spawn, execSync } from 'child_process';
 
 import puppeteer from 'puppeteer';
 
-jest.setTimeout(120000);
 describe('Smoke', () => {
   let buildServerProcess: ChildProcess | undefined;
   const globalConsoleError = console.error;
+  const runOnTeamcity = 'TEAMCITY_VERSION' in process.env;
 
   const appName = 'test-app-temp';
   const appFolder = path.join(__dirname, appName);
-  const runOnTeamcity = 'TEAMCITY_VERSION' in process.env;
+
   const reactUIPackagePath = runOnTeamcity
-    ? "unsupported"
+    ? getPackagePathOnTeamcity()
     : path.join(__dirname, "react-ui.tgz");
 
   beforeEach(() => {
@@ -23,7 +24,7 @@ describe('Smoke', () => {
     if (!runOnTeamcity) {
       buildReactUI(reactUIPackagePath);
     }
-  });
+  }, 120000);
 
   afterEach(() => {
     console.error = globalConsoleError;
@@ -35,10 +36,12 @@ describe('Smoke', () => {
   it('Build and render all controls', async () => {
     initApplication(appFolder, reactUIPackagePath);
     buildServerProcess = runDevServer(appFolder);
+    await waitWebpackBuild();
 
     await openPageOnBrowser();
+
     expect(console.error).not.toBeCalled();
-  });
+  }, 120000);
 });
 
 function buildReactUI(reactUIPackagePath: string) {
@@ -75,8 +78,9 @@ function initApplication(appFolder: string, reactUIPackagePath: string) {
     { cwd: appFolder, stdio: 'inherit' }
   );
 
+  // yarn save package in cache
   execSync(
-    `yarn add file:${reactUIPackagePath}`,
+    `npm install ${reactUIPackagePath}`,
     { cwd: appFolder, stdio: 'inherit' }
   );
 }
@@ -106,24 +110,45 @@ async function openPageOnBrowser() {
 
   page.on('console', msg => {
     if (msg.type() === "error") {
-      console.error(msg.text());
+      console.error(`BROWSER: ${msg.text()}`);
     }
   });
 
   page.on('error', msg => {
-    console.error(`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(`name: ${msg.name}\nmessage: ${msg.message}\nstack: ${msg.stack}`);
+    console.error(`BROWSER: name: ${msg.name}\nmessage: ${msg.message}\nstack: ${msg.stack}`);
   });
 
-  await page.goto('http://localhost:3000/');
+  await page.goto(`http://${os.hostname()}:3000/`);
   await page.screenshot({ path: path.join(__dirname, 'reactUIcontrols.png') });
 
   if (await page.$(`#react-ui-page`) === null) {
-    console.error(`Failed to load controls page.`);
+    console.error(`BROWSER: Failed to load controls page.`);
   }
 
   await browser.close();
 }
+
+function getPackagePathOnTeamcity(): string {
+  const repositoryPath = path.join(__dirname, '..', '..', '..');
+  const files = fs.readdirSync(repositoryPath);
+  const packageName = files.find(file => file.startsWith('skbkontur-react-ui-') && file.endsWith(".tgz"));
+
+  if (packageName) {
+    return path.join(repositoryPath, packageName);
+  }
+  throw new Error(`react-ui tgz package not found into "${repositoryPath}" directory`);
+}
+
+function waitWebpackBuild(): Promise<void> {
+  // Пока webpack билдит процесс, его не убить через childprocess.kill
+  // а после выполнения jest остаются зомби процессы.
+  // Это возникает если браузер быстро возвращает ошибку.
+  // https://github.com/webpack/webpack-dev-server/issues/2168
+  // Будет исправленно в webpack@5
+  // https://github.com/webpack/webpack/pull/10163
+  return new Promise(res => setTimeout(() => res(), 15000))
+}