feat(web): make chips in challenges draggable

.eslintrc.js

@@ -20,9 +20,9 @@ module.exports = {
     parserOptions: {
         ecmaVersion: 2020,
         sourceType: "module",
-        extraFileExtensions: [".svelte"]
+        extraFileExtensions: [".svelte"],
     },
-    plugins: ["svelte3", "jest", "cypress", '@typescript-eslint'],
+    plugins: ["svelte3", "jest", "cypress", "@typescript-eslint"],
     overrides: [
         {
             files: ["**/*.svelte"],

apps/web/cypress/integration/chips.feature

@@ -22,8 +22,9 @@ Feature: Chips challenge
 
   Scenario: Submitting an incorrect solution
     Given I open "/course/test/skill/_chips_test0"
-    And I order words incorrectly
-    Then I see the challenge panel with no skip button
+    And I click "estás"
+    And I click "hoy"
+    And I click "Como"
     Given I click "Submit"
     Then I read "Incorrect solution"
     And I read "Correct answer: ¿Como, estás hoy?"
@@ -33,8 +34,9 @@ Feature: Chips challenge
 
   Scenario: Submitting a correct solution
     Given I open "/course/test/skill/_chips_test0"
-    And I order words correctly
-    Then I see the challenge panel with no skip button
+    And I click "Como"
+    And I click "estás"
+    And I click "hoy"
     Given I click "Submit"
     Then I see the challenge panel with no skip button
     And I read "Correct solution"
@@ -44,8 +46,10 @@ Feature: Chips challenge
 
   Scenario: Submitting an alternative correct solution
     Given I open "/course/test/skill/_chips_test0"
-    And I order words correctly, but in a different way
-    Then I see the challenge panel with no skip button
+    And I click "Tu"
+    And I click "Como"
+    And I click "estás"
+    And I click "hoy"
     Given I click "Submit"
     Then I see the challenge panel with no skip button
     And I read "Correct solution"

apps/web/cypress/integration/chips/index.js

@@ -1,4 +1,4 @@
-import { Given, Then } from "cypress-cucumber-preprocessor/steps"
+import { Then } from "cypress-cucumber-preprocessor/steps"
 
 Then("words with definitions have tooltips", () => {
     cy.get(".has-tooltip-bottom[data-tooltip=tu]").should("be.visible")
@@ -13,15 +13,3 @@ Then("I see the correct chips", () => {
     cy.get(".chip").contains("estás").should("be.visible")
     cy.get(".chip").contains("hoy").should("be.visible")
 })
-
-Given("I order words incorrectly", () => {
-    cy.window().then((win) => win.testIncorrectSolution())
-})
-
-Given("I order words correctly", () => {
-    cy.window().then((win) => win.testSolution())
-})
-
-Given("I order words correctly, but in a different way", () => {
-    cy.window().then((win) => win.testSolution2())
-})

apps/web/package.json

@@ -71,6 +71,7 @@
     "@commitlint/config-conventional": "12.1.1",
     "@knapsack-pro/cypress": "4.3.0",
     "@percy/cypress": "2.3.4",
+    "@types/sortablejs": "^1.10.6",
     "babel-jest": "26.6.3",
     "babel-plugin-istanbul": "6.0.0",
     "bulmaswatch": "0.8.1",