Upgrade Fluent UI to 8.118.2 (#222)

* test shiny.react 0.4.0

* feat: upgrade to React 18.3.1

* chore: upgrade roxygen

* chore: rebuild docs

* chore: bump version

* chore: upgrade CI to use newest version of shiny.react

* chore: update maintainer info

* test: update ComboBox tests to use typing interaction instead of clicking on the dropdown

---------

Co-authored-by: Jakub Sobolewski <[email protected]>

.github/workflows/ci.yml

@@ -22,6 +22,13 @@ jobs:
         with:
           extra-packages: local::. # Necessary to avoid object usage linter errors.
 
+      - name: Install shiny.react with React 18.3.1
+        if: always()
+        env:
+          GITHUB_PAT: ${{ secrets.GITHUB_TOKEN }}
+        run: |
+          Rscript -e 'install.packages("remotes"); remotes::install_github("Appsilon/shiny.react")'
+
       - name: Install Node.js and Yarn
         uses: actions/setup-node@v3
         with:
@@ -51,7 +58,8 @@ jobs:
           start: yarn start-e2e-test-app
           working-directory: js
           record: true
-          spec: cypress/integration/e2e-test/*.js
+          spec: cypress/e2e/e2e-test/*.js
+          config: baseUrl=http://localhost:8887
         env:
           CYPRESS_RECORD_KEY: ${{ secrets.CYPRESS_RECORD_KEY }}
       - name: Run Cypress on example Dashboard
@@ -61,7 +69,8 @@ jobs:
           start: yarn start-e2e-router-app
           working-directory: js
           record: true
-          spec: cypress/integration/dashboard/*.js
+          spec: cypress/e2e/dashboard/*.js
+          config: baseUrl=http://localhost:8886
         env:
           CYPRESS_RECORD_KEY: ${{ secrets.CYPRESS_RECORD_KEY }}
 

DESCRIPTION

@@ -1,10 +1,10 @@
 Package: shiny.fluent
 Title: Microsoft Fluent UI for Shiny Apps
-Version: 0.3.0
+Version: 0.3.0.900
 Authors@R:
   c(
-    person("Kamil", "Żyła", role = c("aut", "cre"), email = "opensource+kamil@appsilon.com"),
-    person("Jakub", "Sobolewski", role = "aut", email = "jakub.sobolewski@appsilon.com"),
+    person("Jakub", "Sobolewski", role = c("aut", "cre"), email = "opensource+jakub.sobolewski@appsilon.com"),
+    person("Kamil", "Żyła", role = "aut", email = "kamil@appsilon.com"),
     person("Marek", "Rogala", role = "aut", email = "[email protected]"),
     person("Appsilon Sp. z o.o.", role = "cph", email = "[email protected]")
   )
@@ -18,7 +18,7 @@ License: LGPL-3
 Encoding: UTF-8
 LazyData: true
 Roxygen: list(markdown = TRUE)
-RoxygenNote: 7.2.3
+RoxygenNote: 7.3.1
 VignetteBuilder: knitr
 Depends:
   R (>= 2.10)

js/.eslintrc.js

@@ -22,7 +22,11 @@ module.exports = {
   ],
   rules: {},
   settings: {
-    'import/resolver': 'webpack',
+    'import/resolver': {
+      webpack: {
+        extensions: ['.js', '.jsx', '.ts', '.tsx']
+      }
+    },
     react: { version: '17' }
   },
 };

js/cypress.config.js

@@ -0,0 +1,11 @@
+const { defineConfig } = require('cypress')
+
+module.exports = defineConfig({
+  projectId: 'pm6grv',
+  e2e: {
+    setupNodeEvents(on, config) {
+      return require('./cypress/plugins/index.js')(on, config)
+    },
+    defaultCommandTimeout: 10000,
+  },
+})

js/cypress/e2e/dashboard/dashboard.cy.js

@@ -0,0 +1,17 @@
+describe('Dashboard', () => {
+  it('Slider', () => {
+    cy.visit('/#!/Slider');
+    const steps = 15;
+    const arrows = '{rightarrow}'.repeat(steps);
+
+    cy.get('#Slider .ms-Slider-slideBox').type(arrows);
+    cy.contains('Value: 15');
+  });
+
+  it('Dropdown', () => {
+    cy.visit('/#!/Dropdown');
+    cy.get('#Dropdown-dropdown-option').click();
+    cy.get('#Dropdown-dropdown-list2').click();
+    cy.contains('Value: C');
+  });
+});

js/cypress/integration/e2e-test/actionButtons.js → js/cypress/e2e/e2e-test/actionButtons.cy.js

@@ -1,61 +1,44 @@
-function test() {
-  let clicks = 1;
-  return (name) => {
-    cy.get(`#actionButtons-${name}`).click();
-    cy.get('#actionButtons-clicks').should('contain', `Number of clicks: ${clicks}`);
-    clicks += 1;
-  };
+function testButtonClick(name) {
+  cy.get(`#actionButtons-${name}`).click();
+  cy.get('#actionButtons-clicks').should('contain', 'Number of clicks: 1');
 }
-const testButtonClick = test();
 
-describe('DefaultButton.shinyInput()', () => {
-  before(() => {
+describe('Clicking buttons', () => {
+  beforeEach(() => {
     cy.visit('/');
   });
 
-  it('click works', () => {
+  it('DefaultButton.shinyInput()', () => {
     testButtonClick('defaultButton');
   });
-});
 
-describe('PrimaryButton.shinyInput()', () => {
-  it('click works', () => {
+  it('PrimaryButton.shinyInput()', () => {
     testButtonClick('primaryButton');
   });
-});
 
-describe('CompoundButton.shinyInput()', () => {
-  it('click works', () => {
+  it('CompoundButton.shinyInput()', () => {
     testButtonClick('compoundButton');
   });
-});
 
-describe('ActionButton.shinyInput()', () => {
-  it('click works', () => {
+  it('ActionButton.shinyInput()', () => {
     testButtonClick('actionButton');
   });
-});
 
-describe('CommandBarButton.shinyInput()', () => {
-  it('click works', () => {
+  it('CommandBarButton.shinyInput()', () => {
     testButtonClick('actionButton');
   });
-});
 
-describe('CommandButton.shinyInput()', () => {
-  it('click works', () => {
+  it('CommandButton.shinyInput()', () => {
     testButtonClick('actionButton');
   });
-});
 
-describe('IconButton.shinyInput()', () => {
-  it('click works', () => {
+  it('IconButton.shinyInput()', () => {
     testButtonClick('actionButton');
   });
 });
 
 describe('Updating buttons', () => {
-  before(() => {
+  beforeEach(() => {
     cy.visit('/');
     cy.get('#actionButtons-update').click();
   });

js/cypress/integration/e2e-test/deepMixing.js → js/cypress/e2e/e2e-test/deepMixing.cy.js

@@ -1,5 +1,5 @@
 describe('Fluent components inside Shiny tabset', () => {
-  before(() => {
+  beforeEach(() => {
     cy.visit('/');
     cy.get('#deepMixing-tabs1').within(() => {
       cy.get('a[data-value=JSX]').click();
@@ -16,8 +16,10 @@ describe('Fluent components inside Shiny tabset', () => {
 });
 
 describe('JSX inside uiOutput inside JSX', () => {
-  before(() => {
-    cy.get('[data-cy=deepMixing-pivot] > .ms-Pivot > button[name="Leaflet inside a Pivot"]').click();
+  beforeEach(() => {
+    cy.visit('/');
+    cy.reload();
+    cy.contains('Leaflet inside a Pivot').click();
   });
 
   it('Leaflet inside Pivot is visible', () => {
@@ -28,9 +30,10 @@ describe('JSX inside uiOutput inside JSX', () => {
 });
 
 describe('Leaflet in Pivot in uiOutput in Pivot in uiOutput in JSX', () => {
-  before(() => {
-    cy.get('[data-cy=deepMixing-pivot] > .ms-Pivot > button[name="Another level of nesting"]').click();
-    cy.get('[data-cy=deepMixing-nestedPivot] > .ms-Pivot > button[name="Leaflet inside a Pivot"]').click();
+  beforeEach(() => {
+    cy.visit('/');
+    cy.get('[data-cy=deepMixing-pivot] [data-content="Another level of nesting"]').click();
+    cy.get('[data-cy=deepMixing-nestedPivot] [data-content="Leaflet inside a Pivot"]').click();
   });
 
   it('Leaflet inside nested Pivot is visible', () => {