scrabble-solver 2.13.12 → 2.14.0

package/README.md

@@ -39,9 +39,10 @@
   </p>
 
   <p>
-    <img src="https://github.com/kamilmielnik/scrabble-solver/workflows/Build/badge.svg" alt="Build" />
-    <img src="https://github.com/kamilmielnik/scrabble-solver/workflows/Test/badge.svg" alt="Test" />
-    <img src="https://github.com/kamilmielnik/scrabble-solver/workflows/ESLint/badge.svg" alt="ESLint" />
+    <img src="https://github.com/kamilmielnik/scrabble-solver/actions/workflows/build.yml/badge.svg" alt="Build" />
+    <img src="https://github.com/kamilmielnik/scrabble-solver/actions/workflows/jest.yml/badge.svg" alt="Jest Tests" />
+    <img src="https://github.com/kamilmielnik/scrabble-solver/actions/workflows/cypress.yml/badge.svg" alt="Cypress Tests" />
+    <img src="https://github.com/kamilmielnik/scrabble-solver/actions/workflows/eslint.yml/badge.svg" alt="ESLint" />
   </p>
 
   <img alt="Screencast GIF showing user interface when solving for oxyphenbutazone, which is a top-scoring word in English version of Scrabble" src="https://raw.githubusercontent.com/kamilmielnik/scrabble-solver/master/screencast.gif" />
@@ -183,6 +184,7 @@ npm run build -w @scrabble-solver/word-lists
 - [CSS Modules](https://github.com/css-modules/css-modules)
 - [include-media](https://eduardoboucas.github.io/include-media/)
 - [Lerna](https://lerna.js.org/)
+- [Cypress](https://www.cypress.io/)
 - [Jest](https://jestjs.io/)
 - [ESLint](https://eslint.org/)
 - [Prettier](https://prettier.io/)

package/cypress/e2e/app.spec.cy.ts

@@ -0,0 +1,118 @@
+import {
+  assertResult,
+  closeModal,
+  getBoardTile,
+  getDictionary,
+  getDictionaryInput,
+  getDictionaryTitles,
+  getLoading,
+  getRackTile,
+  getResult,
+  getSettingOption,
+  getSettingsButton,
+  getTooltip,
+  solve,
+  typeRack,
+  unregisterServiceWorkers,
+  visitIndex,
+} from '../support';
+
+describe('app', () => {
+  beforeEach(async () => {
+    await unregisterServiceWorkers();
+  });
+
+  afterEach(() => {
+    cy.clearLocalStorage();
+  });
+
+  it('has title', () => {
+    visitIndex();
+
+    cy.title().should('equal', 'Scrabble Solver 2 by Kamil Mielnik');
+  });
+
+  it('has default setting values', () => {
+    visitIndex();
+    getSettingsButton().realClick();
+
+    getSettingOption('Game', 'Scrabble').should('be.checked');
+    getSettingOption('Language', 'English (US)').should('be.checked');
+    getSettingOption('Coordinates', 'Hidden').should('be.checked');
+    getSettingOption('Input mode', 'Keyboard').should('be.checked');
+    getSettingOption('Group remaining tiles', 'Do not group').should('be.checked');
+  });
+
+  describe('full app test', () => {
+    beforeEach(() => {
+      cy.intercept('/api/solve').as('solve');
+      cy.intercept('/api/dictionary/**/*').as('dictionary');
+    });
+
+    it('Scrabble - Polish', () => {
+      visitIndex();
+      getSettingsButton().realClick();
+      getSettingOption('Language', 'Polski').check();
+      getSettingOption('Współrzędne', 'Oryginalne').check();
+      closeModal();
+      typeRack('abł');
+      solve();
+
+      assertResult(0, 'bał', 14);
+      getResult(0).realHover();
+      getLoading().should('be.visible');
+      cy.wait('@dictionary');
+      getRackTile(0).parent().should('have.attr', 'role', 'mark');
+      getRackTile(1).parent().should('have.attr', 'role', 'mark');
+      getRackTile(2).parent().should('have.attr', 'role', 'mark');
+      getBoardTile(5, 7).should('have.value', 'b');
+      getBoardTile(6, 7).should('have.value', 'a');
+      getBoardTile(7, 7).should('have.value', 'ł');
+      getBoardTile(5, 7).parent().should('have.attr', 'role', 'mark');
+      getBoardTile(6, 7).parent().should('have.attr', 'role', 'mark');
+      getBoardTile(7, 7).parent().should('have.attr', 'role', 'mark');
+      getDictionaryInput().should('have.value', 'bał');
+      getLoading().should('not.exist');
+      getDictionaryTitles().should('have.length', 1).and('have.text', 'bał');
+      getDictionary()
+        .should('include.text', 'bać się')
+        .and('include.text', 'odczuwać lęk, strach')
+        .and('include.text', 'być niespokojnym o kogoś lub o coś')
+        .and('include.text', 'nie śmieć, nie odważać się na coś');
+
+      cy.findByLabelText('Punkty').realClick();
+      getTooltip().should('be.visible').and('have.text', 'Punkty');
+      assertResult(0, 'ba', 8);
+      getResult(0).realHover();
+      getRackTile(0).parent().should('have.attr', 'role', 'mark');
+      getRackTile(1).parent().should('have.attr', 'role', 'mark');
+      getRackTile(2).parent().should('not.have.attr', 'role', 'mark');
+      getBoardTile(5, 7).should('not.have.value');
+      getBoardTile(6, 7).should('have.value', 'b');
+      getBoardTile(7, 7).should('have.value', 'a');
+      getBoardTile(5, 7).parent().should('not.have.attr', 'role', 'mark');
+      getBoardTile(6, 7).parent().should('have.attr', 'role', 'mark');
+      getBoardTile(7, 7).parent().should('have.attr', 'role', 'mark');
+      getDictionaryInput().should('have.value', 'ba');
+      getLoading().should('be.visible');
+      cy.wait('@dictionary');
+      getLoading().should('not.exist');
+      getDictionaryTitles().should('have.length', 1).and('have.text', 'ba');
+      getDictionary()
+        .should('include.text', 'wykrzyknik, który wyraża głównie podziw, zdziwienie')
+        .and('include.text', 'w wierzeniach staroegipskich: dusza ludzka ginąca wraz z ciałem');
+
+      getResult(0).realClick();
+      getRackTile(0).parent().should('not.have.attr', 'role', 'mark');
+      getRackTile(1).parent().should('not.have.attr', 'role', 'mark');
+      getRackTile(2).parent().should('not.have.attr', 'role', 'mark');
+      getRackTile(0).should('not.have.value');
+      getRackTile(1).should('not.have.value');
+      getRackTile(2).should('have.value', 'ł');
+      getBoardTile(6, 7).should('have.value', 'b');
+      getBoardTile(7, 7).should('have.value', 'a');
+
+      cy.findByLabelText('Rozwiąż').should('be.visible').and('be.enabled');
+    });
+  });
+});

package/cypress/e2e/bugs/112-character-bonus.ts

@@ -0,0 +1,40 @@
+import {
+  assertResult,
+  closeModal,
+  getSettingOption,
+  getSettingsButton,
+  solve,
+  typeRack,
+  unregisterServiceWorkers,
+  visitIndex,
+} from '../../support';
+
+/*
+ * @see https://github.com/kamilmielnik/scrabble-solver/issues/112
+ */
+describe('#112 - Scrabble - Character bonus not applied', () => {
+  beforeEach(async () => {
+    await unregisterServiceWorkers();
+  });
+
+  afterEach(() => {
+    cy.clearLocalStorage();
+  });
+
+  it('correctly shows points for a result which gets a character bonus', () => {
+    visitIndex();
+
+    getSettingsButton().realClick();
+    getSettingOption('Language', 'Français').check();
+    closeModal();
+    typeRack('jours');
+    solve();
+
+    assertResult(0, 'jours', 40);
+    assertResult(1, 'jours', 40);
+    assertResult(2, 'jours', 26);
+    assertResult(3, 'jours', 26);
+    assertResult(4, 'jours', 24);
+    assertResult(5, 'jours', 24);
+  });
+});

package/cypress/e2e/bugs/129-esc-sidebar.ts

@@ -0,0 +1,23 @@
+import { getModal, getSettingsButton, typeRack, unregisterServiceWorkers, visitIndex } from '../../support';
+
+/*
+ * @see https://github.com/kamilmielnik/scrabble-solver/issues/129
+ */
+describe('#129 - Esc does not close the sidebar when letters input is focused', () => {
+  beforeEach(async () => {
+    await unregisterServiceWorkers();
+  });
+
+  afterEach(() => {
+    cy.clearLocalStorage();
+  });
+
+  it('Esc key closes the sidebar when rack is focused', () => {
+    visitIndex();
+    getSettingsButton().realClick();
+    typeRack('a');
+    cy.realPress('Escape');
+
+    getModal().should('not.exist');
+  });
+});

package/cypress/e2e/bugs/2-q-tile-in-english.ts

@@ -0,0 +1,33 @@
+import {
+  assertResult,
+  getResults,
+  solve,
+  typeBoard,
+  typeRack,
+  unregisterServiceWorkers,
+  visitIndex,
+} from '../../support';
+
+/*
+ * @see https://github.com/kamilmielnik/scrabble-solver/issues/2
+ */
+describe('#2 - "Q" tile does not work', () => {
+  beforeEach(async () => {
+    await unregisterServiceWorkers();
+  });
+
+  afterEach(() => {
+    cy.clearLocalStorage();
+  });
+
+  it('accepts "Q" tile in English', () => {
+    visitIndex();
+    typeBoard('i', 'horizontal', 7, 7);
+    typeRack('q');
+    solve();
+
+    getResults().should('have.length', 2);
+    assertResult(0, 'qi', 11);
+    assertResult(1, 'qi', 11);
+  });
+});

package/cypress/e2e/bugs/3-x-tile-in-polish.ts

@@ -0,0 +1,33 @@
+import {
+  closeModal,
+  getSettingOption,
+  getSettingsButton,
+  typeBoard,
+  typeRack,
+  unregisterServiceWorkers,
+  visitIndex,
+} from '../../support';
+
+/*
+ * @see https://github.com/kamilmielnik/scrabble-solver/issues/3
+ */
+describe('#3 - "X" tile is allowed in Polish', () => {
+  beforeEach(async () => {
+    await unregisterServiceWorkers();
+  });
+
+  afterEach(() => {
+    cy.clearLocalStorage();
+  });
+
+  it('does not accept "X" tile in Polish', () => {
+    visitIndex();
+    getSettingsButton().realClick();
+    getSettingOption('Language', 'Polski').check();
+    closeModal();
+    typeBoard('x', 'horizontal', 7, 7);
+    typeRack('x');
+
+    cy.findByText('x').should('not.exist');
+  });
+});

package/cypress/e2e/bugs/30-click-inside-radio-icon.ts

@@ -0,0 +1,26 @@
+import { getSettingOption, getSettingsButton, unregisterServiceWorkers, visitIndex } from '../../support';
+
+/*
+ * @see https://github.com/kamilmielnik/scrabble-solver/issues/30
+ */
+describe('#30 - Clicking inside an icon of non-first unchecked radio button does not select that option', () => {
+  beforeEach(async () => {
+    await unregisterServiceWorkers();
+  });
+
+  afterEach(() => {
+    cy.clearLocalStorage();
+  });
+
+  it('Clicking inside an icon of first unchecked radio button selects it', () => {
+    visitIndex();
+    getSettingsButton().realClick();
+    getSettingOption('Language', 'English (GB)').click();
+    getSettingOption('Language', 'English (US)') // first unchecked radio button
+      .parent('label')
+      .findAllByRole('img', { hidden: true })
+      .first()
+      .realHover({ position: 'center' })
+      .realClick({ position: 'center' });
+  });
+});

package/cypress/e2e/bugs/333-disabled-radio-cursor.ts

@@ -0,0 +1,24 @@
+import { getSettingOption, getSettingsButton, unregisterServiceWorkers, visitIndex } from '../../support';
+
+/*
+ * @see https://github.com/kamilmielnik/scrabble-solver/issues/333
+ */
+describe('#333 - Disabled radio button has cursor: pointer', () => {
+  beforeEach(async () => {
+    await unregisterServiceWorkers();
+  });
+
+  afterEach(() => {
+    cy.clearLocalStorage();
+  });
+
+  it('Disabled radio button has cursor: not-allowed', () => {
+    visitIndex();
+    getSettingsButton().realClick();
+    getSettingOption('Language', 'Polski').check();
+    getSettingOption('Gra', 'Scrabble').scrollIntoView();
+
+    getSettingOption('Gra', 'Super Scrabble').should('be.disabled');
+    getSettingOption('Gra', 'Super Scrabble').should('have.css', 'cursor', 'not-allowed');
+  });
+});

package/cypress/e2e/bugs/342-results-sorting.ts

@@ -0,0 +1,48 @@
+import {
+  assertResult,
+  closeModal,
+  getResult,
+  getResultsFilterInput,
+  getSettingOption,
+  getSettingsButton,
+  solve,
+  typeBoard,
+  typeRack,
+  unregisterServiceWorkers,
+  visitIndex,
+} from '../../support';
+
+/*
+ * @see https://github.com/kamilmielnik/scrabble-solver/issues/342
+ */
+describe('#342 - Incorrect sorting when filtering', () => {
+  beforeEach(async () => {
+    await unregisterServiceWorkers();
+  });
+
+  afterEach(() => {
+    cy.clearLocalStorage();
+  });
+
+  it('correctly sorts valid results first when text filter is active', () => {
+    visitIndex();
+    getSettingsButton().realClick();
+    getSettingOption('Language', 'Polski').check();
+    closeModal();
+    typeBoard('bopie', 'horizontal', 6, 3);
+    typeBoard('apu', 'vertical', 8, 4);
+    typeBoard('o', 'vertical', 10, 4);
+    typeRack('oe');
+    solve();
+    getResultsFilterInput().type('p');
+
+    assertResult(0, 'po', 5);
+    assertResult(1, 'pe', 5);
+    assertResult(2, 'op', 3);
+    assertResult(3, 'eo', 6);
+    getResult(0).should('not.have.attr', 'aria-hidden');
+    getResult(1).should('not.have.attr', 'aria-hidden');
+    getResult(2).should('not.have.attr', 'aria-hidden');
+    getResult(3).should('have.attr', 'aria-hidden', 'true');
+  });
+});

package/cypress/e2e/bugs/348-results-word-padding.ts

@@ -0,0 +1,74 @@
+import {
+  closeModal,
+  getResult,
+  getSettingOption,
+  getSettingsButton,
+  solve,
+  typeRack,
+  unregisterServiceWorkers,
+  visitIndex,
+} from '../../support';
+
+/*
+ * @see https://github.com/kamilmielnik/scrabble-solver/issues/348
+ */
+describe('#348 - Missing result word padding when coordinates are not shown', () => {
+  beforeEach(async () => {
+    await unregisterServiceWorkers();
+  });
+
+  afterEach(() => {
+    cy.clearLocalStorage();
+  });
+
+  it('sets proper padding on result cells depending on coordinates setting (LTR language)', () => {
+    visitIndex();
+    typeRack('ab');
+    solve();
+
+    getResult(0).then(([$result]) => {
+      const $span = $result.children[0];
+      const wordCell = $span.children[0];
+
+      expect(window.getComputedStyle(wordCell).paddingLeft).to.equal('15px');
+    });
+
+    getSettingsButton().realClick();
+    getSettingOption('Coordinates', 'Original').check();
+    closeModal();
+
+    getResult(0).then(([$result]) => {
+      const $span = $result.children[0];
+      const wordCell = $span.children[1];
+
+      expect(window.getComputedStyle(wordCell).paddingLeft).to.equal('15px');
+    });
+  });
+
+  it('sets proper padding on result cells depending on coordinates setting (RTL language)', () => {
+    visitIndex();
+    getSettingsButton().realClick();
+    getSettingOption('Language', 'فارسی').check();
+    closeModal();
+    typeRack('فا');
+    solve();
+
+    getResult(0).then(([$result]) => {
+      const $span = $result.children[0];
+      const wordCell = $span.children[0];
+
+      expect(window.getComputedStyle(wordCell).paddingRight).to.equal('15px');
+    });
+
+    getSettingsButton().realClick();
+    getSettingOption('مختصات', 'إبداعي').check();
+    closeModal();
+
+    getResult(0).then(([$result]) => {
+      const $span = $result.children[0];
+      const wordCell = $span.children[1];
+
+      expect(window.getComputedStyle(wordCell).paddingRight).to.equal('15px');
+    });
+  });
+});

package/cypress/e2e/bugs.spec.cy.ts

@@ -0,0 +1,8 @@
+import './bugs/2-q-tile-in-english';
+import './bugs/3-x-tile-in-polish';
+import './bugs/112-character-bonus';
+import './bugs/129-esc-sidebar';
+import './bugs/30-click-inside-radio-icon';
+import './bugs/333-disabled-radio-cursor';
+import './bugs/342-results-sorting';
+import './bugs/348-results-word-padding';

package/cypress/support/commands.ts

@@ -0,0 +1,4 @@
+/// <reference types="cypress" />
+
+import '@testing-library/cypress/add-commands';
+import 'cypress-real-events';

package/cypress/support/e2e.ts

@@ -0,0 +1 @@
+import './commands';

package/cypress/support/index.ts

@@ -0,0 +1 @@
+export * from './lib';

package/cypress/support/lib/actions.ts

@@ -0,0 +1,57 @@
+import { getBoardTile, getLoading, getModal, getRackTile, getResult } from './selectors';
+
+const getRandomId = () => {
+  return String(Math.random()).replace(/^\d\./, '');
+};
+
+export const visitIndex = () => {
+  cy.visit('/');
+};
+
+export const closeModal = () => {
+  getModal().should('be.visible');
+  cy.realPress('Escape');
+  getModal().should('not.exist');
+};
+
+export const typeRack = (tiles: string, index = 0) => {
+  getRackTile(index).focus().type(tiles);
+};
+
+export const typeBoard = (tiles: string, direction: 'horizontal' | 'vertical', x = 0, y = 0) => {
+  getBoardTile(x, y).focus();
+
+  cy.findByTestId('toggle-direction-button').then(([$button]) => {
+    if ($button.dataset.direction !== direction) {
+      cy.wrap($button).click();
+    }
+  });
+
+  for (let index = 0; index < tiles.length; ++index) {
+    const xOffset = direction === 'horizontal' ? index : 0;
+    const yOffset = direction === 'vertical' ? index : 0;
+
+    getBoardTile(x + xOffset, y + yOffset)
+      .focus()
+      .type(tiles[index]);
+  }
+};
+
+export const solve = () => {
+  const id = `solve-${getRandomId()}`;
+
+  cy.intercept('/api/solve').as(id);
+  getRackTile().focus().parents('form').submit();
+  cy.wait(`@${id}`);
+  getLoading().should('not.exist');
+};
+
+export const assertResult = (index: number, word: string, points: number) => {
+  getResult(index).should('have.attr', 'aria-label', word).and('include.text', word);
+  getResult(index).findByTestId('points').should('have.text', String(points));
+};
+
+export const unregisterServiceWorkers = async () => {
+  const registrations = await navigator.serviceWorker.getRegistrations();
+  return Promise.all(registrations.map((registration) => registration.unregister()));
+};

package/cypress/support/lib/index.ts

@@ -0,0 +1,2 @@
+export * from './actions';
+export * from './selectors';

package/cypress/support/lib/selectors.ts

@@ -0,0 +1,70 @@
+export const getModal = () => {
+  return cy.findByRole('dialog');
+};
+
+export const getBoardContainer = () => {
+  return cy.findByTestId('board');
+};
+
+export const getBoardTile = (x = 0, y = 0) => {
+  return getBoardContainer()
+    .findAllByRole('textbox')
+    .then((tiles) => {
+      const boardSize = Math.sqrt(tiles.length);
+      const index = y * boardSize + x;
+      return cy.findByTestId('board').findAllByRole('textbox').eq(index);
+    });
+};
+
+export const getDictionary = () => {
+  return cy.findByTestId('dictionary');
+};
+
+export const getDictionaryInput = () => {
+  return getDictionary().findByRole('textbox');
+};
+
+export const getDictionaryTitles = () => {
+  return getDictionary().get('h2');
+};
+
+export const getLoading = () => {
+  return cy.findByTestId('loading');
+};
+
+export const getRackContainer = () => {
+  return cy.findByTestId('rack');
+};
+
+export const getRackTile = (index = 0) => {
+  // use hidden: true so that rack can be interacted with while modal is opened
+  return getRackContainer().findAllByRole('textbox', { hidden: true }).eq(index);
+};
+
+export const getResultsContainer = () => {
+  return cy.findByTestId('results');
+};
+
+export const getResults = () => {
+  return getResultsContainer().findAllByTestId('result');
+};
+
+export const getResultsFilterInput = () => {
+  return getResultsContainer().findByRole('textbox');
+};
+
+export const getResult = (index = 0) => {
+  return getResults().eq(index);
+};
+
+export const getSettingsButton = () => {
+  return cy.findByTestId('settings-button');
+};
+
+export const getSettingOption = (section: string, option: string) => {
+  return getModal().findByLabelText(section).findByLabelText(option);
+};
+
+export const getTooltip = () => {
+  return cy.findByRole('tooltip');
+};

package/cypress/tsconfig.json

@@ -0,0 +1,9 @@
+{
+  "extends": "../tsconfig.json",
+
+  "compilerOptions": {
+    "noEmit": true,
+    "types": ["node", "cypress", "cypress-real-events", "@testing-library/cypress"]
+  },
+  "include": ["../node_modules/cypress", "./**/*.ts"]
+}

package/cypress.config.ts

@@ -0,0 +1,9 @@
+import { defineConfig } from 'cypress';
+
+export default defineConfig({
+  e2e: {
+    baseUrl: 'http://localhost:3000',
+    viewportHeight: 900,
+    viewportWidth: 1440,
+  },
+});

package/jest.config.js

@@ -1,11 +1,10 @@
-const tsConfig = require('./tsconfig.jest.json');
-
 module.exports = {
   coveragePathIgnorePatterns: ['/node_modules/', '/build/'],
   preset: 'ts-jest',
   setupFilesAfterEnv: ['./jest.setup.js'],
   testEnvironment: 'node',
+  testPathIgnorePatterns: ['/node_modules/', '/cypress/'],
   transform: {
-    '^.+.tsx?$': ['ts-jest', tsConfig],
+    '^.+.tsx?$': ['ts-jest', { tsconfig: 'tsconfig.jest.json' }],
   },
 };

package/lerna.json

@@ -6,5 +6,5 @@
     "access": "public"
   },
   "tagVersionPrefix": "",
-  "version": "2.13.12"
+  "version": "2.14.0"
 }