@digigov/cli-app 1.0.0-rc.2 → 1.0.0-rc.4

package/index.js

@@ -56,19 +56,26 @@ module.exports = class App extends DigigovCommand {
           .option('pagesPath', {
             alias: 'p',
             describe: 'The directory where the pages are located relative to the project folder',
+            default: 'pages'
+          })
+          .option('screenSizes', {
+            alias: 's',
+            choices: ['xs', 'lg'],
+            describe: 'The screen sizes for viewport',
           })
           .help()
           .argv;
 
         if (test_args.init) {
-          const { baseUrl, pagesPath } = test_args;
-          console.log(`Generating test files for pagesPath "${pagesPath}" with baseUrl "${baseUrl}"`);
+          const { baseUrl, pagesPath, screenSizes } = test_args;
+          console.log(`Generating test files for pagesPath "${pagesPath}" with baseUrl "${baseUrl}" for screen sizes "${screenSizes}"`);
           const projectFolder = process.cwd();
-          generatePagesTestFile(projectFolder, pagesPath, baseUrl);
+          generatePagesTestFile(projectFolder, pagesPath, baseUrl, screenSizes);
         } else {
-          console.log('Usage: digigov app test --init --baseUrl [baseUrl] --pagesPath [pagesPath]');
+          console.log('Usage: digigov app test --init --baseUrl [baseUrl] --pagesPath [pagesPath] --screenSizes [screenSizes]');
           console.log('baseUrl: the base url of the running project (default: http://localhost:3000)');
           console.log('pagesPath: the directory where the pages are located (default: pages, src/pages)');
+          console.log('screenSizes: the screen sizes for viewport (default: lg)');
         }
         break;
       default:

package/lib/test/init.js

@@ -4,53 +4,93 @@ const glob = require('glob');
 
 const FILE_EXTENSIONS = ['js', 'jsx', 'ts', 'tsx'];
 
-const appendTestFile = (fileRelativePath, baseUrl, testFile) => {
-  testFile += `\n\ttest('${fileRelativePath.replace('index', '')} page should match the screenshot', async () => {
-    await page.goto(\`\${baseUrl}${fileRelativePath.replace('index', '')}\`);
-    const screenshot = await page.screenshot();
-    expect(screenshot).toMatchSnapshot();
-  });\n`;
+const SCREEN_SIZES = {
+  'xs': { width: 375, height: 667, deviceScaleFactor: 1 },
+  'lg': { width: 1280, height: 720, deviceScaleFactor: 2 }
+}
+
+const appendTestFile = (fileRelativePath, testFile, screenSizes) => {
+  screenSizes.forEach((screenSize) => {
+    testFile += `\ntest('${fileRelativePath.replace('index', '')} screen-${screenSize}', async () => {
+      await page${screenSize.toUpperCase()}.goto(\`\${baseUrl}${fileRelativePath.replace('index', '')}\`);
+      await delay(SCREENSHOT_DELAY);
+      await page${screenSize.toUpperCase()}.waitForLoadState('domcontentloaded');
+      const screenshot = await page${screenSize.toUpperCase()}.screenshot({ fullPage: true });
+      expect(screenshot).toMatchSnapshot();
+    });\n`;
+  });
   return testFile;
 }
 
-const generatePagesTestFile = (projectFolder, pagesPath, baseUrl = 'http://localhost:3000', testFileName = 'index.spec.ts') => {
+const generateBrowserContexts = (screenSizes) => {
+  let viewportSizes = '';
+  screenSizes.forEach((screenSize) => {
+    viewportSizes += `\n// Create a context with "${screenSize}" screen size
+    const context${screenSize.toUpperCase()} = await browser.newContext({
+      viewport: { width: ${SCREEN_SIZES[screenSize].width}, height: ${SCREEN_SIZES[screenSize].height} },
+      deviceScaleFactor: ${SCREEN_SIZES[screenSize].deviceScaleFactor},
+    });\n`;
+  });
+  return viewportSizes;
+}
+
+const initializePages = (screenSizes) => {
+  let initializePages = '';
+  screenSizes.forEach((screenSize) => {
+    initializePages += `let page${screenSize.toUpperCase()};\n`;
+  });
+  return initializePages;
+}
+
+const generateNewPages = (screenSizes) => {
+  let newPages = '';
+  screenSizes.forEach((screenSize) => {
+    newPages += `page${screenSize.toUpperCase()} = await context${screenSize.toUpperCase()}.newPage();\n`;
+  });
+  return newPages;
+}
+
+const generatePagesTestFile = (projectFolder, pagesPath = 'pages', baseUrl = 'http://localhost:3000', testFileName = 'index.spec.ts', screenSizes=['xs', 'lg']) => {
   let pagesFullPath = '';
-  if (pagesPath) {
+  if (fs.existsSync(path.join(projectFolder, pagesPath))) {
     pagesFullPath = path.join(projectFolder, pagesPath);
   }
-  else {
-    if (fs.existsSync(path.join(projectFolder, 'pages'))) {
-      pagesFullPath = path.join(projectFolder, 'pages');
-    }
-    else if (fs.existsSync(path.join(projectFolder, 'src', 'pages'))) {
-      pagesFullPath = path.join(projectFolder, 'src/pages');
-    }
+  else if (fs.existsSync(path.join(projectFolder, 'src', pagesPath))) {
+    pagesFullPath = path.join(projectFolder, `src/${pagesPath}`);
   }
   let testFile = `import { test, expect } from '@playwright/test';
 import { chromium } from 'playwright';
 
 const baseUrl = '${baseUrl}';
+const SCREENSHOT_DELAY = 2000;
 
-test.describe('${projectFolder} /pages tests', () => {
+test.describe('/pages', () => {
   let browser;
-  let page;
+${initializePages(screenSizes)}
+
+  const delay = ms => new Promise(resolve => setTimeout(resolve, ms));
 
   test.beforeAll(async () => {
+    // Wait until yarn start is loaded
+    test.setTimeout(60000);
+    await delay(30000);
     browser = await chromium.launch();
-    page = await browser.newPage();
+    ${generateBrowserContexts(screenSizes)}
+${generateNewPages(screenSizes)}
   });
 
   test.afterAll(async () => {
     await browser.close();
   });
 `;
+
   const pagesPathRegex = new RegExp(`.*${pagesFullPath.replace('/', '\\/')}(.*)`);
   glob.sync(`${pagesFullPath}/**/*.@(${FILE_EXTENSIONS.join('|')})`).forEach((fileFullPath) => {
     const fileRelativePath = fileFullPath.replace(pagesPathRegex, '$1');
     const pageFileName = fileRelativePath.substring(fileRelativePath.lastIndexOf('/') + 1);
     // Check of the file starts with letter or digit
     if(/^[a-zA-Z0-9]/.test(pageFileName)) {
-      testFile = appendTestFile(fileRelativePath.replace(/\.[^/.]+$/, ''), baseUrl, testFile);
+      testFile = appendTestFile(fileRelativePath.replace(/\.[^/.]+$/, ''), testFile, screenSizes);
     }
   });
   testFile += '\n});';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@digigov/cli-app",
-  "version": "1.0.0-rc.2",
+  "version": "1.0.0-rc.4",
   "description": "@digigov developer cli tool",
   "main": "index.js",
   "author": "GRNET Developers <devs@lists.grnet.gr>",
@@ -10,7 +10,7 @@
     "express": "4.17.1",
     "http-proxy-middleware": "1.0.3",
     "next-images": "1.3.0",
-    "@digigov/cli-build": "1.0.0-rc.2",
+    "@digigov/cli-build": "1.0.0-rc.4",
     "url-loader": "4.1.1",
     "next": "10.0.9",
     "publint": "0.1.8",
@@ -21,13 +21,13 @@
   "peerDependencies": {
     "rimraf": "3.0.2",
     "execa": "5.0.0",
-    "@digigov/cli": "1.0.0-rc.2",
+    "@digigov/cli": "1.0.0-rc.4",
     "typescript": "4.2.3",
     "@types/node": "16.6.2",
     "@types/react": "16.9.56",
     "autoprefixer": "10.4.16",
     "postcss": "8.4.4",
-    "@digigov/css": "1.0.0-rc.2",
+    "@digigov/css": "1.0.0-rc.4",
     "tailwindcss": "3.3.5"
   },
   "scripts": {