import {
  writeMultipleFiles,
  deleteFile,
  expectFileToMatch,
  replaceInFile,
} from '../../../utils/fs';
import { expectToFail } from '../../../utils/utils';
import { ng } from '../../../utils/process';
import { updateJsonFile } from '../../../utils/project';

export default function () {
  // TODO(architect): Delete this test. It is now in devkit/build-angular.

  return writeMultipleFiles({
    'src/styles.less': `
      @import './imported-styles.less';
      body { background-color: blue; }
    `,
    'src/imported-styles.less': 'p { background-color: red; }',
    'src/app/app.less': `
        .outer {
          .inner {
            background: #fff;
          }
        }
      `,
  })
    .then(() => deleteFile('src/app/app.css'))
    .then(() =>
      updateJsonFile('angular.json', (workspaceJson) => {
        const appArchitect = workspaceJson.projects['test-project'].architect;
        appArchitect.build.options.styles = [{ input: 'src/styles.less' }];
      }),
    )
    .then(() => replaceInFile('src/app/app.ts', './app.css', './app.less'))
    .then(() => ng('build', '--source-map', '--configuration=development'))
    .then(() =>
      expectFileToMatch(
        'dist/test-project/browser/styles.css',
        /body\s*{\s*background-color: blue;\s*}/,
      ),
    )
    .then(() =>
      expectFileToMatch(
        'dist/test-project/browser/styles.css',
        /p\s*{\s*background-color: red;\s*}/,
      ),
    )
    .then(() =>
      expectToFail(() =>
        expectFileToMatch('dist/test-project/browser/styles.css', '"mappings":""'),
      ),
    )
    .then(() =>
      expectFileToMatch(
        'dist/test-project/browser/main.js',
        /.outer.*.inner.*background:\s*#[fF]+/,
      ),
    );
}