Merge pull request #1291 from skbkontur/improve-button-screenshots

test(Button): add screenshots for different states (680 buttons)

packages/react-ui-screenshot-tests/gemini.js

@@ -28,6 +28,7 @@ function exec(commandLine, { detached = false, env = {} } = {}) {
     stdio: [0, 1, 2],
     env: {
       NODE_ENV: 'production',
+      enableReactTesting: true,
       ...process.env,
       ...env,
     },

packages/react-ui-screenshot-tests/gemini/button.js

@@ -67,3 +67,37 @@ gemini.suite('Button with width', suite => {
     .setCaptureElements('#test-element')
     .capture('plain');
 });
+
+gemini.suite('Button states', () => {
+  const paginatedScenario = (suite, pagesCount) => {
+    var paginatedSuite = suite
+      .before((actions, find) => {
+        this.nextPage = find('#next-page');
+      })
+      .ignoreElements('#paginator')
+      .setCaptureElements('#test-element');
+
+    for (var page = 1; page <= pagesCount; page++) {
+      paginatedSuite.capture('page - ' + page, (actions, find) => {
+        if (page > 1) {
+          actions.click(this.nextPage);
+        }
+      });
+    }
+  };
+
+  gemini.suite('different aligns', suite => {
+    suite
+      .before(renderStory('Button', 'different aligns'))
+      .setCaptureElements('#test-element')
+      .capture('plain');
+  });
+
+  gemini.suite('different visual states', suite => {
+    paginatedScenario(suite.before(renderStory('Button', 'different visual states')), 9);
+  });
+
+  gemini.suite('different content', suite => {
+    paginatedScenario(suite.before(renderStory('Button', 'different content')), 8);
+  });
+});

packages/react-ui-screenshot-tests/screenshotTestStyles.less

@@ -0,0 +1,10 @@
+*,
+*:hover,
+*:before,
+*:after {
+    animation-delay: -0.0001ms !important;
+    animation-duration: 0s !important;
+    animation-play-state: paused !important;
+    cursor: none !important;
+    caret-color: transparent !important;
+}

packages/retail-ui/.storybook/webpack.config.js

@@ -4,10 +4,20 @@ const WatchExternalFilesPlugin = require('webpack-watch-files-plugin').default;
 const ForkTsCheckerWebpackPlugin = require('fork-ts-checker-webpack-plugin');
 
 const isProd = process.env.NODE_ENV === 'production';
+const enableReactTesting = process.env.enableReactTesting;
+const REACT_SELENIUM_TESTING_PATH = path.resolve(__dirname, '../../react-ui-testing/react-selenium-testing.js');
+const SCREENSHOT_TESTS_STYLES_PATH = path.resolve(
+  __dirname,
+  '../../react-ui-screenshot-tests/screenshotTestStyles.less',
+);
 
 module.exports = (baseConfig, env) => {
   const config = baseConfig;
 
+  if (enableReactTesting) {
+    config.entry.preview.unshift(REACT_SELENIUM_TESTING_PATH, SCREENSHOT_TESTS_STYLES_PATH);
+  }
+
   config.resolve.extensions.unshift('.ts', '.tsx');
 
   config.module.rules.push(
@@ -38,9 +48,24 @@ module.exports = (baseConfig, env) => {
     { test: /\.json/, loader: 'json-loader' },
   );
 
+  if (enableReactTesting) {
+    config.module.rules.push({
+      test: /\.js$/,
+      include: REACT_SELENIUM_TESTING_PATH,
+      use: {
+        loader: 'babel-loader',
+        options: {
+          presets: ['env'],
+          plugins: ['transform-object-assign', 'transform-es2015-typeof-symbol', 'transform-runtime'],
+        },
+      },
+    });
+  }
+
   config.plugins.push(
     new webpack.DefinePlugin({
       'process.env.REACT_APP_EXPERIMENTAL_CSS_IN_JS': JSON.stringify(process.env.REACT_APP_EXPERIMENTAL_CSS_IN_JS),
+      'process.env.enableReactTesting': JSON.stringify(enableReactTesting),
     }),
     new WatchExternalFilesPlugin({
       files: ['*.less'],